Stepper

Examples

 
<div class="cgds stepper">
  <div class="stepper-item is-completed">
    <div class="stepper-marker">1</div>
    <div class="stepper-detail">
      <p><b>Marker title</b></p>
    </div>
  </div>
  <div class="stepper-item is-active">
    <div class="stepper-marker">2</div>
    <div class="stepper-detail">
      <p><b>Marker title</b></p>
    </div>
  </div>
  <div class="stepper-item">
    <div class="stepper-marker">3</div>
    <div class="stepper-detail">
      <p><b>Marker title</b></p>
    </div>
  </div>
</div>

        

Anatomy

1. Step number: Indicate the sequence of step.
2. Marker title: Label that indicates the purpose of the steps.
3. Track: A bar to show the progress through a set of steps.

Spacing

Within the stepper
Ensure that there is a min 32px horizontal spacing between dropdown items.
Ensure that there is a min of 4px vertical spacing between the marker icon and marker title.

Usage guidelines

Steppers should be used when:

• There are multiple steps in a form where content can be divided into logical steps.

Steppers should not be used when:

• Form is short. If a form or process has fewer than three sections, there is no need to use a stepper.

Usability guidelines

Keep marker title short and concise
Use labels that clearly indicate the purpose of the step and keep it as short as 1 to two words.

Logical ordering
Display the steps in order from left to right. Indicate to the user that they are performing a multistep process, and show the progress using the different states. Allow the user to return to a previous step to make amendment.

Indicate the current step
Inform user of their current step within the process. This helps the user to know where they are in relation to where they have been, and what sections are to follow. Use validation to confirm that a previous step has been completed.

Stepper design tokens

$steps-maker-default-color: $gray-400 !default;
$steps-marker-default-border: .25rem solid $white !default;
$steps-default-color: $gray-300 !default;
$steps-completed-color: $primary !default;
$steps-active-color: $primary !default;
$steps-divider-height: .25rem !default;