Steps

When to use it

The Steps component is used as a progress indicator for a certain number of known steps. It is commonly used in multi-step forms or processes to visually indicate the current step and the steps remaining.

Variants

Use the .c-steps--horizontal modifier to display the steps in a horizontal layout. Add .c-steps__num elements to add numbers, letters, or other indicators to each step.

What it looks like

Code examples

Vertical

<ol class="c-steps">
    <li><span class="c-steps__num">1</span> Step number one</li>
    <li class="c-steps__active" aria-current="step"><span class="c-steps__num">2</span> Step number two</li>
    <li><span class="c-steps__num">3</span> Step number three</li>
    <li><span class="c-steps__num">4</span> Step number four</li>
</ol>

Without numbers

<ol class="c-steps">
    <li>Step number one with more text</li>
    <li class="c-steps__active" aria-current="step">Step number two with more text</li>
    <li>Step number three with more text</li>
    <li>Step number four with more text</li>
</ol>

Horizontal, numbered

<ol class="c-steps c-steps--horizontal">
    <li><span class="c-steps__num">1</span> Step number one</li>
    <li class="c-steps__active" aria-current="step"><span class="c-steps__num">2</span> Step number two</li>
    <li><span class="c-steps__num">3</span> Step number three</li>
    <li><span class="c-steps__num">4</span> Step number four</li>
</ol>

Accessibility notes

Make sure to use aria-current="step" to indicate the current step to screen readers.