Navigieren auf digital.sbb.ch

Beta

Ghettobox

1. Was macht die Komponente?

Dient zur Anzeige von seitenübergreifenden Meldungen.

2. Wann soll die Komponente eingesetzt werden?

Bei Hinweisen und Störungen welche eine ganze Applikation betreffen.

3. Regeln

  • Die Ghettobox kann mit dem X-Icon bis zum nächsten Seiten-Reload ausgeblendet werden.
  • Die Ghettobox steht immer direkt unterhalb des Header.
  • Die Ghettobox ist nicht sticky sondern scrollt mit dem Inhalt weg.
  • Der Text kann mehrzeilig sein.
  • Vor dem Text steht immer ein Icon in roter Fläche (HIM/CUS-Icons).
  • Wenn mehrere Ghettoboxen gleichzeitig verwendet werden, sind diese untereinander anzuordnen.

4. Ausprägungen und Zustände

4.1 Standard

Darstellung der Komponente Ghettobox in der Ausprägung Standard

Design Spezifikation

Code Spezifikation

4.2 Link

Diese Ausprägung hat folgende Zustände:

  • Default
  • Hover
Darstellung der Komponente Ghettobox mit Link
  • Sofern der Text einen weiterführenden Link beinhaltet, unterscheidet die Ghettobox die Zustände Normal und Hover.
  • Am Ende des Textes folgt immer ein Pfeil-Icon.
  • Die ganze Fläche der Ghettobox ist klickbar und öffnet den hinterlegten Link (ausser über dem X-Icon).

Design Spezifikation

Code Spezifikation