Navigieren auf digital.sbb.ch

List-item

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:

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

Das Element hat folgende Ausprägungen:

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

4.1 Listed

4.1.1 Default

Darstellung des List-Items
Darstellung des List-Items

4.1.2 ohne Icon

Darstellung des List-Items
Darstellung des List-Items

4.1.3 mit Subtext

Darstellung des List-Items
Darstellung des List-Items

4.1.4 mit Icon rechts

Darstellung des List-Items
Darstellung des List-Items

4.1.5 mit Button

Darstellung des List-Items
Darstellung des List-Items

4.2 Boxed

4.2.1 Default

Darstellung des List-Items
Darstellung des List-Items

4.2.2 ohne Icon

Darstellung des List-Items
Darstellung des List-Items

4.2.3 mit Subtext

Darstellung des List-Items
Darstellung des List-Items

4.2.4 mit Icon rechts

Darstellung des List-Items
Darstellung des List-Items

4.2.5 mit Button

Darstellung des List-Items
Darstellung des List-Items

Design Spezifikation

Figma-Link

5. Barrierefreiheit

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