# Container.

## Overview

### What does the component do?

- Contains other components.

### When should the component be used?

- When content needs to be structured.

### Rules

- The content box can be used anywhere.
- Footer-Box is fixed in front of the other content.
- The footer box adjoins the [tabbar](https://digital.sbb.ch/en/design-system/mobile/components/tabbar/) at the top.

## Variants

### Variants

The component has the following variants:

- Content-Box
- Footer-Box

#### Content-Box

![Container, Content-Box](https://digital.sbb.ch/assets/images/mobile/container-content-box-light.webp "Container, Content-Box")

![Container, Content-Box](https://digital.sbb.ch/assets/images/mobile/container-content-box-dark.webp "Container, Content-Box")

#### Footer-Box

![Container, Footer-Box](https://digital.sbb.ch/assets/images/mobile/container-footer-box-light.webp "Container, Footer-Box")

![Container, Footer-Box](https://digital.sbb.ch/assets/images/mobile/container-footer-box-dark.webp "Container, Footer-Box")

### Specification

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=141-2024&t=OQ7s4wE6eWI2fLGh-1)

---

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