Stepper
Import
Import the settings and the stepper scss files.
@import 'settings-tools/all-settings';@import 'components/c.stepper';
Usage
The Stepper is an ordered list HTML element, which must be embedded in a nav HTML element.
To implement the Stepper in your code, you must therefore use and respect the following HTML structure:
<nav class="mc-stepper" aria-label="Stepper description"> <ol class="mc-stepper__list"> <li class="mc-stepper__item mc-stepper__item--current" aria-current="step"> <span class="mc-stepper__indicator" aria-hidden="true">1</span> <div class="mc-stepper__detail"> <span class="mc-stepper__title">Step 1 / 2</span> <span class="mc-stepper__label">Shopping cart</span> </div> </li> <li class="mc-stepper__item"> <span class="mc-stepper__indicator" aria-hidden="true"> </span> <div class="mc-stepper__detail"> <span class="mc-stepper__title">Step 2 / 2</span> <span class="mc-stepper__label">Shipping</span> </div> </li> </ol></nav>
States
The stages within the Stepper can adopt different visual states to indicate to the users where they are in their journey.
These states are as follows:
- Pending validation (default state - no modifier needeed)
- Current step
- Validated step
Current step
To indicate that a step is the current step, you must add the mc-stepper__item--current
modifier to the concerned .mc-stepper__item
element.
For accessibility reasons, you should also add the aria-current="step"
attribute to indicate to screen readers the current step.
<li class="mc-stepper__item mc-stepper__item--current" aria-current="step"> <span class="mc-stepper__indicator" aria-hidden="true">1</span> <div class="mc-stepper__detail"> <span class="mc-stepper__title">Step 1 / 2</span> <span class="mc-stepper__label">Shopping cart</span> </div></li>
In its initial state, before the start of the user journey, the first step is by default always in the current state.
A Stepper can have only one element that indicate the current state.
Please ensure that this rule is respected when implementing a Stepper in your code.
Validated step
All steps before the current step are considered to be validated steps.
You can therefore apply to the .mc-stepper__item
element of these validated steps, the modifier mc-stepper__item--validated
.
In addition to adding the mc-stepper__item--validated
modifier, you must also replace the content of the mc-stepper__indicator
element with an icon indicating that the step has been validated.
<li class="mc-stepper__item mc-stepper__item--validated"> <div class="mc-stepper__indicator" aria-hidden="true"> <svg class="mc-stepper__icon"> <use xlink:href="#icon" /> </svg> </div> <div class="mc-stepper__detail"> <span class="mc-stepper__title"></span>Step 2 / 4</span> <span class="mc-stepper__label">Login</span> </div></li>
Variations
Compact version
The Stepper component has a "compact" variation that can be used in different contexts.
Learn more about the contexts of use of the compact variation by reading this section
To use this variation, you need to add the mc-stepper--compact
modifier to the main .mc-stepper
element.
<nav class="mc-stepper mc-stepper--compact"> <!-- following code here --></nav>
With navigation links
It is possible, depending on your context, to allow users to use the stepper as a navigation element and thus return to the previous steps already validated.
To do this, you can add a link with the class mc-stepper__link
inside the .mc-stepper__item--validated
element as shown in the example below:
Mobile recommandation
When the Stepper has more than 3 steps, it becomes difficult to display all the steps optimally on small screen resolutions.
For this reason, we recommend that on mobile resolutions only the current step is displayed without the other steps.
To do this, you need to add the mc-stepper--shrinked
modifier to the main mc-stepper
element whenever your Stepper has more than 3 steps.
Adding this modifier will keep only the current step visible on resolutions below the M (< 680px)
breakpoint.
<nav class="mc-stepper mc-stepper--shrinked"> <!-- following code here --></nav>