A basic stepped progress indicator, with completed and current steps. This demonstrates using stepped progress for a signup form.
<div class="o-stepped-progress" data-o-component="o-stepped-progress">
<ol class="o-stepped-progress__steps">
<li>
<a href="#details" class="o-stepped-progress__step o-stepped-progress__step--complete">
<span class="o-stepped-progress__label">
Details
<span class="o-stepped-progress__status">(completed)</span>
</span>
</a>
</li>
<li>
<a href="#delivery" class="o-stepped-progress__step o-stepped-progress__step--complete">
<span class="o-stepped-progress__label">
Delivery
<span class="o-stepped-progress__status">(completed)</span>
</span>
</a>
</li>
<li>
<a href="#customise" class="o-stepped-progress__step o-stepped-progress__step--current">
<span class="o-stepped-progress__label">
Customise
<span class="o-stepped-progress__status">(current step)</span>
</span>
</a>
</li>
<li>
<span class="o-stepped-progress__step">
<span class="o-stepped-progress__label"> Payment </span>
</span>
</li>
</ol>
</div>A stepped progress indicator with an errored step.
A stepped progress indicator with richer labels, using other components.