Progress bar
This is Progress bar
Example
Markup: components/progress-bar/progress-bar.twig
<div class="progress-bar">
<a class="progress-bar__back-link">back</a>
<ul class="progress-bar__steps-3">
<li class="progress-bar--done">
<a class="progress-bar__step-link" href="#">
<span class="progress-bar__step">1/3 :</span>
<span class="progress-bar__title">Login Details</span>
</a>
</li>
<li class="progress-bar--active">
<a class="progress-bar__step-link" href="#">
<span class="progress-bar__step">2/3 :</span>
<span class="progress-bar__title">Contact Details</span>
</a>
</li>
<li class="progress-bar--todo">
<a class="progress-bar__step-link" href="#">
<span class="progress-bar__step">3/3 :</span>
<span class="progress-bar__title">Complete Your Giving Page</span>
</a>
</li>
</ul>
</div>
Source:
base-styleguide.scss
, line 223