Stepper

A stepper/wizard leads a user through a process step by step. It contains a series of single-step instructions, and is often used for a setup and configuration tasks or a longer workflow. Read more about steppers/wizards in the UX Guidelines.

Use when

The user needs guidance through a multi-step process, for instance if it's a low frequency task or the steps to take are unclear
Steps have to be done in a specific order
The task has a clear start and end

Design

Options

There are 2 options for the stepper: horizontal (in the example below) and vertical (TBD).

Follow the code from the right panel to get the styles for the horizontal stepper.

Demo page! Here you can find a demo page where you can test the stepper.

If you'd like a smooth animation to be applyed on each step as you go through them just add .transition class in the parent div.

				
<!-- Stepper - .stepper -->
<div class="stepper">
   <ul>
      <li class="passed">
         <a href="#">
            <span>Review payslips</span>
            <span class="step">Step 1/3</span>
         </a>
      </li>
      <li class="active">
         <a href="#">
            <span>Wage run</span>
            <span class="step">Step 2/3</span>
         </a>
      </li>
      <li>
         <a href="#">
            <span>Payout completed</span>
            <span class="step">Step 3/3</span>
         </a>
      </li>
   </ul>
</div>


<!-- Stepper with animation - .stepper.transition -->
<div class="stepper transition">
   ...
</div>