# List-Item.

## Übersicht

### Was macht die Komponente?

- Darstellung von Informationen in einer Liste.

### Wann soll die Komponente eingesetzt werden?

- Innerhalb von Listen.

### Regeln

- Ein Listen-Eintrag kann als Darstellungsobjekt oder zur Navigation verwendet werden.
- Auf Listen-Einträgen können neben Klick- auch Swipe-Interaktionen definiert werden.
- Erste Funktion wird auf Swipe-to-left gelegt, zweite Funktion auf Swipe-to-right.

### Barrierefreiheit

- Wenn die Funktion des Eintrages nur über ein Icon Dargestellt wird, muss diese zusätzlich als Alternativtext hinterlegt werden.

## Varianten

### Zustände

DIe Komponente hat folgende Zustände:

- Default
- Pressed
- Disabled
- Loading
- Swipe left (optional)
- Swipe right (optional)

### Varianten

Die Komponente hat folgende Varianten:

- listed / boxed
- mit Icon / ohne Icon
- mit Subtext / ohne Subtext
- mit Icon rechts / ohne Icon rechts
- mit Button / ohne Button

#### Listed

##### Default

![Darstellung des List-Items in einer Liste](https://digital.sbb.ch/assets/images/mobile/list-item-default-light.webp "List-Item in einer Liste")

![Darstellung des List-Items in einer Liste](https://digital.sbb.ch/assets/images/mobile/list-item-default-dark.webp "List-Item in einer Liste")

##### ohne Icon

![Darstellung des List-Items in einer Liste ohne Icon](https://digital.sbb.ch/assets/images/mobile/list-item-default-without-icon-light.webp "List-Item in einer Liste ohne Icon")

![Darstellung des List-Items in einer Liste ohne Icon](https://digital.sbb.ch/assets/images/mobile/list-item-default-without-icon-dark.webp "List-Item in einer Liste ohne Icon")

##### mit Subtext

![Darstellung des List-Items in einer Liste mit Subtext](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-subtext-light.webp "List-Item in einer Liste mit Subtext")

![Darstellung des List-Items in einer Liste mit Subtext](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-subtext-dark.webp "List-Item in einer Liste mit Subtext")

##### mit Icon rechts

![Darstellung des List-Items in einer Liste mit Icon rechts](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-icon-right-light.webp "List-Item in einer Liste mit Icon rechts")

![Darstellung des List-Items in einer Liste mit Icon rechts](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-icon-right-dark.webp "List-Item in einer Liste mit Icon rechts")

##### mit Button

![Darstellung des List-Items in einer Liste mit Button](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-button-light.webp "List-Item in einer Liste mit Button")

![Darstellung des List-Items in einer Liste mit Button](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-button-dark.webp "List-Item in einer Liste mit Button")

#### Boxed

##### Default

![Darstellung des List-Items in einer Box](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-light.webp "List-Item in einer Box")

![Darstellung des List-Items in einer Box](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-dark.webp "List-Item in einer Box")

##### ohne Icon

![Darstellung des List-Items in einer Box ohne Icon](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-without-icon-light.webp "List-Items in einer Box ohne Icon")

![Darstellung des List-Items in einer Box ohne Icon](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-without-icon-dark.webp "List-Items in einer Box ohne Icon")

##### mit Subtext

![Darstellung des List-Items in einer Box mit Subtext](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-with-subtext-light.webp "List-Items in einer Box mit Subtext")

![Darstellung des List-Items in einer Box mit Subtext](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-with-subtext-dark.webp "List-Items in einer Box mit Subtext")

##### mit Icon rechts

![Darstellung des List-Items in einer Box mit Icon rechts](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-with-icon-right-light.webp "List-Items in einer Box mit Icon rechts")

![Darstellung des List-Items in einer Box mit Icon rechts](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-with-icon-right-dark.webp "List-Items in einer Box mit Icon rechts")

##### mit Button

![Darstellung des List-Items in einer Box mit Button](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-with-button-light.webp "List-Items in einer Box mit Button")

![Darstellung des List-Items in einer Box mit Button](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-with-button-dark.webp "List-Items in einer Box mit Button")

### Spezifikationen

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

---

Source: https://digital.sbb.ch/de/design-system/mobile/components/list-item/