# List-Item.

## Overview

### What does the component do?

- It displays information in a list.

### When should the component be used?

- Within lists.

### Rules

- A list entry can be used as a display item or for navigation.
- Swipe as well as click interactions can be defined on list entries.
- Swipe-to-left is used for the first function and swipe-to-right is used for the second function.

### Accessibility

- If the function of the entry is only displayed via an icon, this must also be stored as an alternative text.

## Variants

### States

The component has the following states:

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

### Variants

The component has the following variants:

- listed / boxed
- with icon / without icon
- with subtext / without subtext
- with icon right / without icon right
- with button / without button

#### Listed

##### Default

![Image of a list-item, default](https://digital.sbb.ch/assets/images/mobile/list-item-default-light.webp "list-item, default")

![Image of a list-item, default](https://digital.sbb.ch/assets/images/mobile/list-item-default-dark.webp "list-item, default")

##### without icon

![Image of a list-item, witout icon](https://digital.sbb.ch/assets/images/mobile/list-item-default-without-icon-light.webp "list-item, witout icon")

![Image of a list-item, witout icon](https://digital.sbb.ch/assets/images/mobile/list-item-default-without-icon-dark.webp "list-item, witout icon")

##### with subtext

![Image of a list-item, with subtext](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-subtext-light.webp "list-item, with subtext")

![Image of a list-item, with subtext](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-subtext-dark.webp "list-item, with subtext")

##### with icon right

![Image of a list-item, with icon right](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-icon-right-light.webp "list-item, with icon right")

![Image of a list-item, with icon right](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-icon-right-dark.webp "list-item, with icon right")

##### with button

![Image of a list-item, with button](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-button-light.webp "list-item, with button")

![Image of a list-item, with button](https://digital.sbb.ch/assets/images/mobile/list-item-default-with-button-dark.webp "list-item, with button")

#### Boxed

##### Default

![Image of a boxed list-item, default](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-light.webp "boxed list-item, default")

![Image of a boxed list-item, default](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-dark.webp "boxed list-item, default")

##### Without icon

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

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

##### With subtext

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

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

##### With icon right

![Image of a boxed list-item, with icon right](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-with-icon-right-light.webp "boxed list-item, with icon right")

![Image of a boxed list-item, with icon right](https://digital.sbb.ch/assets/images/mobile/list-item-boxed-with-icon-right-dark.webp "boxed list-item, with icon right")

##### With button

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

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

### 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-item/