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.
A stepped progress with the “heavy” variant.
<div class="o-stepped-progress o-stepped-progress--heavy" data-o-component="o-stepped-progress">
<ol class="o-stepped-progress__steps">
<li>
<span class="o-stepped-progress__step o-stepped-progress__step--complete">
<span class="o-stepped-progress__label">
<strong>Contract start date</strong><br>
22 Jan 2018
<span class="o-stepped-progress__status">(completed)</span>
</span>
</span>
</li>
<li>
<span class="o-stepped-progress__step o-stepped-progress__step--complete">
<span class="o-stepped-progress__label">
<strong>Planning meeting</strong><br>
22 Feb 2018
<span class="o-stepped-progress__status">(completed)</span>
</span>
</span>
</li>
<li>
<span class="o-stepped-progress__step o-stepped-progress__step--current">
<span class="o-stepped-progress__label">
<strong>Mid-year review</strong><br>
22 June 2018
<span class="o-stepped-progress__status">(current step)</span>
</span>
</span>
</li>
<li>
<span class="o-stepped-progress__step">
<span class="o-stepped-progress__label">
<strong>Renewal</strong><br>
22 Nov 2018
</span>
</span>
</li>
</ol>
</div>