# Header-Box.

## Übersicht

### Was macht die Komponente?

- Anzeigen von wichtigen Informationen oder Funktionen.

### Wann soll die Komponente eingesetzt werden?

- Bei wichtigen Informationen oder Funktionen, welche immer verfügbar sein sollen.

### Regeln

- Die Header-Box liegt über dem Header und dem Content.
- Inhalte scrollen unter die Header-Box.
- Die Header-Box kann sich abhängig vom Scrollen verändern und sich beispielsweise verkleinern.

## Varianten

### Varianten

Die Komponente hat folgende Varianten:

- Subtext: Optional
- Icon: Optional
- Button: Optional
- Loading: Optional
- Flap: Optional
- Animated: Optional

#### Header-Box

![Darstellung einer Header-Box](https://digital.sbb.ch/assets/images/mobile/header-box-light.webp "Darstellung einer Header-Box")

![Darstellung einer Header-Box](https://digital.sbb.ch/assets/images/mobile/header-box-dark.webp "Darstellung einer Header-Box")

### Spezifikationen

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

---

Source: https://digital.sbb.ch/de/design-system/mobile/components/header-box/