Navigieren auf digital.sbb.ch

Notification

1. What does the component do?

It is used to display messages that concern an entire page.

2. When should the component be used?

  • When a user has triggered an action on a page and should receive feedback from the system.

3. Rules

  • Notifications only ever appear after an action has been triggered by the user.
  • The width is always the same as the content area.
  • The height is based on the length of the message text.

4. Variants

4.1 Confirmation

Image of the notification component to display confirmation messages

Design specification

Code specification

4.2 Information

Image of the notification component to display information messages

Design specification

Code specification

4.3 Error

Image of the notification component to display error messages

Design specification

Code specification

4.4 Error with jump marker

Image of the notification component to display error messages with jump marker
  • The individual jump markers are separated by a ‘/’.
  • Clicking on a skip marker scrolls directly to the cause of the error.
  • The jump marker target is always on the same page as the notification (no jumping to other pages).

Design specification

Code specification