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">&nbsp;</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>

Information

In its initial state, before the start of the user journey, the first step is by default always in the current state.

Warning

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>

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>