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.
HTML
<button class="aui-button aui-button--primary aui-js-response" type="button">Global Alert</button>

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.

HTML
<button class="aui-button aui-button--primary aui-js-response" type="button">Container Alert</button>

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.

HTML
<button class="aui-button aui-button--primary aui-js-response" type="button">Overlay Notification</button>

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.

99 99+ !
HTML
<span class="aui-badge aui-color-black aui-color-text-light">99</span>
<span class="aui-badge aui-badge--small-text aui-color-black aui-color-text-light">99+</span>
<span class="aui-badge aui-color-success aui-color-text-light">
  <svg class="audiicon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#audiicon-select-small"></use></svg>
</span>
<span class="aui-badge aui-color-warning aui-color-text-light">!</span>
<span class="aui-badge aui-color-danger aui-color-text-light">
  <svg class="audiicon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#audiicon-cancel-small"></use></svg>
</span>
<span class="aui-badge aui-color-black aui-color-text-light is-hidden">99</span>
Audi UI Kit Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 MB

Examples

Dos & Don’ts

Colouring

Full-colour notifications can feature all brand colours and grey scales as their background colour. The typeface, icons and element notifications can also feature the signal colours green, yellow and Audi Red.

 
The colouring of the badge notification shouldn’t be the same as that of the background.
Global notifications are always permanently fixed to the upper or lower viewport edge.
Full-colour notifications only appear individually and never have yellow or green as their background colour.