Stepper

steps component wizard

Introduction

The stepper is used to guide through multiple steps.

Stepper measurements
The steps are indicated by the progress indicator on the top. There should be at least 3 steps.

Dimensions

x: 16px
y: 20px
z: 24px

H1

font-family: Bernina Sans Light
font-size: 24px
color: $gray-700

Body

font-family: Bernina Sans regular
font-size: 14px
color: $gray-700

Progress indicator

The progress indicator is used to visualize the next steps and the progress made. As soon as a step is available - it is clickable.

Progress indicator measurements

Dimensions

x: 8px
y: 4px
z: 2px

Two circles

small circle width: 8px //foreground
big circle width: 12px //background

Progress indicator elements

Step "Done"

Already completed steps.

font-family: Bernina Sans Regular
font-size: 10px
color: $turquoise-600
align: center
small circle background color: $turquoise-600
big circle background color: $background-color
big circle border: 1px solid $turquoise-600
big circle outline: 2px solid $background-color

Step "Selected"

The currently shown step.

color: $gray-700
small circle background color: $turquoise-600
big circle background color: $background-color
big circle border: 1px solid $gray-300
big circle outline: 2px solid $background-color

Step "Not visited"

Step that are ahead.

color: $gray-500
small circle background color: $gray-300
small circle outline: 4px solid $background-color

Line

Connecting steps that are done with the selected one.

line active: 1px solid $turquoise-600

Connecting the selected step with the steps ahead.

line default: 1px solid $gray-300

States of steps done

Hover state

Progress indicator hover state

color: $turquoise-700
text-decoration: underline
small circle background color: $turquoise-700
big circle border: 1px solid $turquoise-700

Active state

Progress indicator active state

color: $turquoise-800
small circle background color: $turquoise-800
big circle border: 1px solid $turquoise-800