Stepper Overview

What does the component do?

  • Display important information or features.

When should the component be used?

  • For important information or functions, which should always be available.

Rules

  • The header box is located above the header and the content.
  • Scroll below the header box.
  • The header box can change depending on the scrolling and, for example, shrink.
 Variants

States

The component has the following states:

  • Numeric
  • Icon
  • Default: Use in content
  • Red: Use in the header

Variants

The component has the following variants:

  • Resizing: Fixed or Full Width
  • Type: Numeric or with icons
  • Number of steps: 2 to 6

Default

Visual design of a default Stepper
Visual design of a default Stepper

Red

Visual design of a Stepper on red backgrounds
Visual design of a Stepper on red backgrounds

Specification

Design