Stepper Secondary Color

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


Secondary Color Stepper

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

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