# 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](https://digital.sbb.ch/assets/images/mobile/stepper-default-light.webp "Visual design of a default Stepper")

![Visual design of a default Stepper](https://digital.sbb.ch/assets/images/mobile/stepper-default-dark.webp "Visual design of a default Stepper")

#### Red

![Visual design of a Stepper on red backgrounds](https://digital.sbb.ch/assets/images/mobile/stepper-red-light.webp "Visual design of a Stepper on red backgrounds")

![Visual design of a Stepper on red backgrounds](https://digital.sbb.ch/assets/images/mobile/stepper-red-dark.webp "Visual design of a Stepper on red backgrounds")

### Specification

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?m=auto&node-id=330-13155&t=rQTLXnChqHrpKLB4-1)

---

Source: https://digital.sbb.ch/en/design-system/mobile/components/stepper/