Progress indicator
This is Progress indicator
Example
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