Stepper

The .pl-c-stepper renders a horizontal multi-step indicator. Each step has a marker (circle with number) and label. Connectors are CSS-only (no SVG). Collapses to vertical below 36rem via container queries.

Semantic HTML

<ol class="pl-c-stepper">
  <li class="pl-c-stepper__step" data-state="completed">
    <span class="pl-c-stepper__marker">1</span>
    <span class="pl-c-stepper__label">Account</span>
  </li>
  <li class="pl-c-stepper__step" data-state="current">
    <span class="pl-c-stepper__marker">2</span>
    <span class="pl-c-stepper__label">Profile</span>
  </li>
  <li class="pl-c-stepper__step" data-state="upcoming">
    <span class="pl-c-stepper__marker">3</span>
    <span class="pl-c-stepper__label">Confirm</span>
  </li>
</ol>

States