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.
<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--error">
<span class="o-stepped-progress__label">
Customise <span class="o-stepped-progress__status">(error)</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 richer labels, using other components.
<div class="o-stepped-progress" data-o-component="o-stepped-progress">
<ol class="o-stepped-progress__steps">
<li>
<a href="#edit" class="o-stepped-progress__step o-stepped-progress__step--complete">
<span class="o-stepped-progress__label">
Step with icon <i class="o-icons-icon o-icons-icon--edit" style="width: 20px; height: 20px; vertical-align: middle;"><!-- Inline styles here should be in CSS or SCSS files when implementing --></i> <span class="o-stepped-progress__status">(completed)</span>
</span>
</a>
</li>
<li>
<span class="o-stepped-progress__step o-stepped-progress__step--current">
<span class="o-stepped-progress__label">
Step with<br>multiple<br>line breaks <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">
Step with <strong>bold</strong> and <em>italic</em> text
</span>
</span>
</li>
</ol>
</div>