Progress list
Show a user's position in a multi-step workflow.
Example usage
<div class="progress-list">
<a href="#" class="progress-list__item progress-list__item--current">
<span class="progress-list__label">
<span class="badge badge--round badge--outline">Step 1</span>
Cut a hole in a box
</span>
<span class="progress-list__arrow">></span>
</a>
<a href="#" class="progress-list__item">
<span class="progress-list__label">
<span class="badge badge--round badge--outline">Step 2</span>
Put your junk in that box
</span>
<span class="progress-list__arrow">></span>
</a>
</div>
See the Pen docs - form - progress list by Pulsar (@pulsar) on CodePen.
States
There are three states of a progress list item
State | Class |
---|---|
Complete (user has completed this step) | progress-list__item--completed |
Current (the currently active step) | progress-list__item--current |
Disabled (user cannot yet access this step | is-disabled |
See the Pen docs - form - progress list states by Pulsar (@pulsar) on CodePen.
Disabled items
Use the .is-disabled
class when the user cannot, or should not be able to navigate to a progress step.
Mixing element types for items
You must ensure that the direct children of the progress-list
container are always progress-list__item
elements. The styling used for this component contains :first-child
and :last-child
rules, to allow the use of mixed element types. Using other elements nested alongside progress-list__item
elements may introduce layout problems.