Stepper Center

Steppers convey progress through numbered steps. It provides a wizard-like workflow and display progress through a sequence of logical and numbered steps.


Center Align Stepper

  1. check
  2. 2
  3. 3
<div class="stepper">
    <ol class="stepper__list">
        <li class="stepper__list-center">
            <span class="stepper__list-counter completed"><span class="material-symbols-outlined">check</span></span>
        </li>
        <li class="stepper__list-center"><span class="stepper__list-counter active">2</span></li>
        <li class="stepper__list-center"><span class="stepper__list-counter">3</span></li>
    </ol>
</div>

Center Align Stepper with Text

  1. checkOption 1
  2. 2Option 2
  3. 3Option 3
<div class="stepper">
    <ol class="stepper__list">
        <li class="stepper__list-center">
            <span class="stepper__list-counter completed"><span class="material-symbols-outlined">check</span></span><span class="stepper__list-label">Option 1</span>
        </li>
        <li class="stepper__list-center"><span class="stepper__list-counter active">2</span><span class="stepper__list-label">Option 2</span></li>
        <li class="stepper__list-center"><span class="stepper__list-counter">3</span><span class="stepper__list-label">Option 3</span></li>
    </ol>
</div>