Notifications

Notifications draw the user’s attention to warnings or important information such as status changes. They can be assigned to certain elements or be universally valid. The type and urgency of the information is conveyed by means of colouring and position.

Global Alerts

Global alerts extend across the entire viewport width and can contain text, icons, images and interactive elements such as buttons or system icon buttons. Buttons can be adapted in height if required so as to keep the alert visually slim.

Global alerts can be positioned in different ways:

• statically at the upper end of the page (disappears during scrolling)
• fixed at the upper or lower edge of the viewport (remains in the viewport during scrolling)

Global alerts are suitable for:

• Feedback of high short-term importance such as feedback on the success or failure of an action triggered by the user. The alert can be discarded by the user and/or automatically hidden after a certain time.
• Warnings and messages the user must take note of, such as cookie notices or warnings about important deadlines. The alert can be discarded by the user.
• Important warnings that require immediate action. This type of warning cannot be discarded and is not hidden until the problem in question has been solved.

Container Alert

Container alerts are different from global notifications only in that they refer to a partial section of a page and are positioned within this partial section or container. The container might be a card, for example, or a section of a page. They are suitable for reproducing locally significant alerts in general views. The user does not necessarily have to be able to discard them right away.

Overlay Notification

Overlay notifications appear in the upper and lower corner of the right-hand viewport edge. They are especially suitable for time-sensitive live notifications. They can contain the same elements as global alerts. The user can discard them or they are automatically hidden after certain period of time.

Badge

Badge notifications appear as a coloured circular figure directly attached to an individual element. They indicate changes to the status of an element or the content it represents. They can optionally contain a counter which shows the number of new messages. They are suitable for drawing the user’s attention to unread messages in in-boxes, unanswered calendar entries or unseen content in feeds.