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

  <ol class="steps">
    <li class="step step-complete">
      <span class="step-marker"><i class="ph ph-check" aria-hidden="true"></i></span>
      <h3 class="step-title">Cart</h3>
      <p class="step-text">Items added and validated.</p>
    </li>
    <li class="step step-current">
      <span class="step-marker">2</span>
      <h3 class="step-title">Shipping</h3>
      <p class="step-text">Choose a delivery address.</p>
    </li>
    <li class="step step-disabled">
      <span class="step-marker">3</span>
      <h3 class="step-title">Payment</h3>
      <p class="step-text">Enter your payment details.</p>
    </li>
    <li class="step">
      <span class="step-marker">4</span>
      <h3 class="step-title">Review</h3>
      <p class="step-text">Confirm and place the order.</p>
    </li>
  </ol>

  <h3>Vertical</h3>
  <ol class="steps steps-vertical">
    <li class="step step-complete">
      <span class="step-marker"><i class="ph ph-check" aria-hidden="true"></i></span>
      <h3 class="step-title">Upload</h3>
      <p class="step-text">File added.</p>
    </li>
    <li class="step step-current">
      <span class="step-marker">2</span>
      <h3 class="step-title">Process</h3>
      <p class="step-text">Running conversion.</p>
    </li>
    <li class="step step-disabled">
      <span class="step-marker">3</span>
      <h3 class="step-title">Done</h3>
    </li>
  </ol>
</section>