Stepper Primary Color

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


Primary Color Stepper

  1. checkOption 1
  2. 2Option 2
  3. 3Option 3
<div class="stepper">
    <ol class="stepper__list stepper-primary">
        <li class="stepper__list-left">
            <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-left"><span class="stepper__list-counter active">2</span><span class="stepper__list-label">Option 2</span></li>
        <li class="stepper__list-left"><span class="stepper__list-counter">3</span><span class="stepper__list-label">Option 3</span></li>
    </ol>
</div>

Center Primary Color Stepper

  1. checkOption 1
  2. 2Option 2
  3. 3Option 3
<div class="stepper">
    <ol class="stepper__list stepper-primary">
        <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>