Navigieren auf digital.sbb.ch

Beta

Zur Startseite von digital.sbb.ch

List Item-❌

Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English

1. Was macht das Element?

Darstellung von Informationen in einer Liste.

2. Wann soll das Element eingesetzt werden?

Innerhalb von Listen.

3. 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.

4. Ausprägungen und Zustände

Das Element hat folgende Zustände:

Normal
On-Click
On-Swipe-to-left (optional)
On-Swipe-to-right (optional)

4.1 Einzeilig

4.1.1 Standard

Darstellung des Listen Eintrags, einzeilig, Standard

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

4.1.2 Ohne Call to Action

Darstellung des Listen Eintrags, einzeilig, ohne Call to Action

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

4.1.3 Ohne Icon

Darstellung des Listen Eintrags, einzeilig, Ohne Icon

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

4.1.4 Nur Label

Darstellung des Listen Eintrags, einzeilig, nur Label

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

4.2 Mehrzeilig

4.2.1 Standard

Darstellung des Listen Eintrags, mehrzeilig, Standard

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

4.2.2 Ohne Call to Action

Darstellung des Listen Eintrags, mehrzeilig, ohne Call to Action

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

4.2.3 Mit Icon

Darstellung des Listen Eintrags, mehrzeilig, ohne Call to Action

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

4.2.4 Mit Icon, ohne Call to Action

Darstellung des Listen Eintrags, mehrzeilig, mit Icon, ohne Call to Action

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

4.2.5 Reise

Darstellung des Listen Eintrags, mehrzeilig, Reise

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

4.2.6 Reise, ohne Call to Action

Darstellung des Listen Eintrags, mehrzeilig, Reise

Design Spezifikation

Default: Light, Dark
Pressed: Light, Dark
On-Swipe-to-right: Light, Dark
On-Swipe-to-left: Light, Dark

5. Barrierefreiheit

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

1. Was macht das Element?

Darstellung von Informationen in einer Liste.

2. Wann soll das Element eingesetzt werden?

Innerhalb von Listen.

3. 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.

4. Ausprägungen und Zustände

Das Element hat folgende Zustände:

Normal
On-Click
On-Swipe-to-left (optional)
On-Swipe-to-right (optional)

4.1 Standard (nur Anzeige)

Darstellung des Listen Eintrags, Standard (nur Anzeige)

Design Spezifikation

4.2 Mit Icon

Darstellung des Listen Eintrags, mit Icon

Design Spezifikation

4.3 Mit Funktion

Darstellung des Listen Eintrags, mit Funktion

Design Spezifikation

4.4 Mit Selektion

Darstellung des Listen Eintrags, mit Selektion

Design Spezifikation

5. Barrierefreiheit

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