Atlas
.atlas-stepper

Stepper

Horizontal multi-step progress. Blue active dot, filled done, connectors between.

.atlas-stepper.atlas-stepper-step.atlas-stepper-dot.atlas-stepper-label.is-active.is-done

Default

  1. Account
  3. Plan
  5. Payment
  7. Confirm
<ol class="atlas-stepper" style="list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:8px">
  <li class="atlas-stepper-step is-done" style="display:flex;align-items:center;gap:6px"><span class="atlas-stepper-dot"></span><span class="atlas-stepper-label">Account</span></li>
  <li class="atlas-stepper-sep" style="width:32px;height:1px;background:var(--border-default)"></li>
  <li class="atlas-stepper-step is-active" style="display:flex;align-items:center;gap:6px"><span class="atlas-stepper-dot"></span><span class="atlas-stepper-label">Plan</span></li>
  <li class="atlas-stepper-sep" style="width:32px;height:1px;background:var(--border-default)"></li>
  <li class="atlas-stepper-step" style="display:flex;align-items:center;gap:6px"><span class="atlas-stepper-dot"></span><span class="atlas-stepper-label">Payment</span></li>
  <li class="atlas-stepper-sep" style="width:32px;height:1px;background:var(--border-default)"></li>
  <li class="atlas-stepper-step" style="display:flex;align-items:center;gap:6px"><span class="atlas-stepper-dot"></span><span class="atlas-stepper-label">Confirm</span></li>
</ol>