<ol class="row" style="list-style:none;padding:0;margin:0;gap:var(--space-3)">
  <li class="row" style="gap:var(--space-2)"><span class="badge">✓</span><span class="muted">Details</span></li>
  <li style="width:2rem;border-top:1px solid var(--border-strong)" aria-hidden="true"></li>
  <li class="row" style="gap:var(--space-2)"><span class="badge">✓</span><span class="muted">Documents</span></li>
  <li style="width:2rem;border-top:1px solid var(--border-strong)" aria-hidden="true"></li>
  <li class="row" style="gap:var(--space-2)" aria-current="step"><span class="badge badge--accent">3</span><b>Review</b></li>
  <li style="width:2rem;border-top:1px solid var(--border)" aria-hidden="true"></li>
  <li class="row" style="gap:var(--space-2)"><span class="badge">4</span><span class="muted">Submit</span></li>
</ol>

✓Merchant verified
2Terminal provisioning
3First settlement

Vertical stepper

<ol style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3);max-width:24rem">
  <li class="row" style="gap:var(--space-2)"><span class="badge">✓</span><span class="muted">Merchant verified</span></li>
  <li class="row" style="gap:var(--space-2)" aria-current="step"><span class="badge badge--accent">2</span><b>Terminal provisioning</b></li>
  <li class="row" style="gap:var(--space-2)"><span class="badge">3</span><span class="muted">First settlement</span></li>
</ol>

Usage

The stepper is composed from shipped primitives: numbered .badge markers on a .row, connectors drawn with a token border.
The current step is the only accent element (.badge--accent plus bold label) and carries aria-current="step"; completed steps show a check, upcoming steps stay neutral.
Use an ordered list so the sequence reads correctly to assistive technology.
Keep it to five steps or fewer; longer flows should collapse into stages.

‹ User menu Tabs ›