Kairoz
.kairoz-stepper

Stepper

Linear workflow tracker. Blue marks the current step, filled dots confirm completion, connectors link the sequence.

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

Default

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