<section class="demo-section">
  <h2>Description List</h2>

  <div class="demo-row">
    <div id="vue-description-list-app" class="vue-mount"></div>
  </div>

  <script type="module">
    import { createApp } from "vue";
    import { GnDescriptionList } from "/vue/index.js";

    createApp({
      components: { GnDescriptionList },
      setup() {
        return {
          items: [
            { key: "Name", value: "Enterprise plan" },
            { key: "Status", value: "Active" },
            { key: "Created", value: "19 Aug 2026" },
            { key: "Owner", value: "Eugene Sukhodolskiy" }
          ]
        };
      },
      template: document.getElementById("vue-description-list-template").innerHTML
    }).mount("#vue-description-list-app");
  </script>

  <script type="text/template" id="vue-description-list-template">
    <gn-description-list :items="items" />
  </script>
</section>