# List-View.

## Overview

### What does the component do?

- It is used for the structured display of elements.

### When should the component be used?

- For listing several elements of the same kind.

### Rules

- The list contains elements as per the description under [list item](https://digital.sbb.ch/en//design-system/mobile/components/list-item/).

## Variants

### Variants

The component has the following variants

- with title / without title
- listed / boxed

#### Listed, with title

![Image of a list with title](https://digital.sbb.ch/assets/images/mobile/list-view-with-title-light.webp "List with title")

![Image of a list with title](https://digital.sbb.ch/assets/images/mobile/list-view-with-title-dark.webp "List with title")

#### Listed, without title

![Image of a list without title](https://digital.sbb.ch/assets/images/mobile/list-view-without-title-light.webp "List without title")

![Image of a list without title](https://digital.sbb.ch/assets/images/mobile/list-view-without-title-dark.webp "List without title")

#### Boxed, with title

![Image of a boxed list with title](https://digital.sbb.ch/assets/images/mobile/list-view-with-title-boxed-light.webp "Boxed list with title")

![Image of a boxed list with title](https://digital.sbb.ch/assets/images/mobile/list-view-with-title-boxed-dark.webp "Boxed list with title")

#### Boxed, without title

![Image of a boxed list without title](https://digital.sbb.ch/assets/images/mobile/list-view-without-title-boxed-light.webp "Boxed list without title")

![Image of a boxed list without title](https://digital.sbb.ch/assets/images/mobile/list-view-without-title-boxed-dark.webp "Boxed list without title")

### Specification

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

---

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