Example
  • Email
  • Account
  • Giving Page
Markup: components/progress-indicator/progress-indicator.twig
<div>
  <ul class="progress-indicator__steps-3 progress-indicator">
    <li class="progress-indicator--done">
      <span class="progress-indicator__step-link">
      <span class="progress-indicator__step progress-indicator__circle"></span>
        <span class="progress-bar__title">
          Email
        </span>
      </span>
    </li>
    <li class="progress-indicator--active">
      <span class="progress-indicator__step-link">
      <span class="progress-indicator__step progress-indicator__circle"></span>
        <span class="progress-bar__title">
          Account
        </span>
      </span>
    </li>
    <li class="progress-indicator--todo">
      <span class="progress-indicator__step-link">
      <span class="progress-indicator__step progress-indicator__circle"></span>
        <span class="progress-bar__title">
          Giving Page
        </span>
      </span>
    </li>
  </ul>
</div>
Source: _shop18-styleguide.scss, line 211