<section class="demo-section" aria-labelledby="skeleton-heading">
  <h2 id="skeleton-heading">Skeleton</h2>

  <h3>Text placeholders</h3>
  <div style="max-width: 320px">
    <div class="skeleton skeleton-title"></div>
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text" style="width: 70%"></div>
  </div>

  <h3>Shape placeholders</h3>
  <div class="cluster">
    <span class="skeleton skeleton-circle skeleton-md"></span>
    <span class="skeleton skeleton-rect" style="width: 160px"></span>
    <span class="skeleton skeleton-pill"></span>
  </div>

  <h3>Vue skeleton</h3>
  <div id="vue-skeleton-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnSkeleton } from "/vue/index.js";

    createApp({
      components: { GnSkeleton },
      template: `
        <div style="max-width: 320px;">
          <gn-skeleton type="title" />
          <gn-skeleton type="text" />
          <gn-skeleton type="text" width="70%" />
          <div class="cluster">
            <gn-skeleton type="circle" size="md" />
            <gn-skeleton type="rect" width="160px" />
            <gn-skeleton type="pill" />
          </div>
        </div>
      `
    }).mount("#vue-skeleton-app");
  </script>
</section>