Patterns

Step progress

Step progress is to highlight to the user what step they are currently on, on their current transaction journey.

Back

Step 2 of 5

                            
                            <div class="step-progress">
<a href="/" title="Back" class="step-progress__back"><i class="fa fa-angle-left"></i> Back</a>
<p class="step-progress__indicator">Step 2 of 5</p>
</div>

When to use this

  • When a transactional journey is spread out onto multiple pages for the user

When not to use this

Back to top