Components

Stepper

Steppers convey progress through a sequence of numbered steps. They provide a wizard-like workflow by dividing content into logical steps.

Horizontal linear stepper

Steppers are composed of numbers nested inside circular icons. A line between each stage also helps establish a link and reinforces that each step is connected.

Created with Sketch. Stepper Title Unfinished step 3 Active step 2 Completed step Next Back
Created with Sketch. Unfinished step 3 Active step 2 Completed step 12px 8px 8px 12px 8px 8px 12px 24px 24px 14px 16px

Step States

There are 3 different states for steps:

  • incomplete (default)
  • active
  • complete

Incomplete (default)

Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.

Created with Sketch. Unfinished step 3 
.step_base {
height:24px;
width:24px;
background: #B3B3B3;
}

.step_label {
font-family: Lato-Regular;
font-size: 14px;
color: #757575;
text-align: left;
}

.step_line {
border: solid 1px rgba(0,0,0,0.12);
}

Active

Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.

Created with Sketch. Active step 2 
.step_base: active {
font-family: Lato-regular;
font-size:12px;
color: #0074D9;
}

.step_label: active {
font-family: Lato-Regular;
font-size: 14px;
color: #3C4144;
text-align: left;
}

Complete

Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.

Created with Sketch. Completed step
icon : fa-check

Vertical

Overview of CSS Classes

Selector
Summary
Parent Selector

.step-base

.step-label

.step-line

.step-content

blue or gray circle that contains number of step or check

label to the right of base that provides context

gray horizontal line that connects steps

number or icon contained in the step-base