<section class="demo-section">
  <h2>Timeline</h2>

  <ol class="timeline">
    <li class="timeline-item timeline-item-success">
      <span class="timeline-marker"><i class="ph ph-check" aria-hidden="true"></i></span>
      <div class="timeline-content">
        <article class="timeline-card">
          <header class="timeline-header">
            <h3 class="timeline-title">Order placed</h3>
            <time class="timeline-time">10:23 AM</time>
          </header>
          <p class="timeline-text">Your order was received and is being prepared.</p>
        </article>
      </div>
    </li>
    <li class="timeline-item timeline-item-accent">
      <span class="timeline-marker"><i class="ph ph-package" aria-hidden="true"></i></span>
      <div class="timeline-content">
        <article class="timeline-card">
          <header class="timeline-header">
            <h3 class="timeline-title">Shipped</h3>
            <time class="timeline-time">2:15 PM</time>
          </header>
          <p class="timeline-text">Package left the fulfillment center.</p>
          <div class="timeline-meta"><i class="ph ph-truck" aria-hidden="true"></i> Tracking: VMK-28491</div>
        </article>
      </div>
    </li>
    <li class="timeline-item">
      <span class="timeline-marker"><i class="ph ph-house" aria-hidden="true"></i></span>
      <div class="timeline-content">
        <article class="timeline-card">
          <header class="timeline-header">
            <h3 class="timeline-title">Delivered</h3>
          </header>
          <p class="timeline-text">Expected by tomorrow.</p>
        </article>
      </div>
    </li>
  </ol>

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

    createApp({
      components: { GnTimeline },
      data() {
        return {
          items: [
            { key: "placed", title: "Order placed", text: "Your order was received.", time: "10:23 AM", variant: "success", icon: "ph-check" },
            { key: "shipped", title: "Shipped", text: "Package left the fulfillment center.", time: "2:15 PM", variant: "accent", icon: "ph-package", meta: "Tracking: VMK-28491" },
            { key: "delivered", title: "Delivered", text: "Expected by tomorrow.", icon: "ph-house" }
          ]
        };
      },
      template: `
        <gn-timeline :items="items" />
      `
    }).mount("#vue-timeline-app");
  </script>
</section>