<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>
</section>