Notifications
Notifications draw the user’s attention to warnings or important information such as status changes. They can be assigned to specific elements or be valid globally. The nature and urgency of the information are made clear via the shape, colour and position.
Wide-area notifications may use only the brand colours and grey shades as a background colour. However, they cannot use the signal colours. Notification badges, by contrast, can use both the signal and charging colours.
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.
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions.
<div class="aui-alert aui-js-alert aui-alert--sticky is-closed aui-color-white" role="alert">
<div class="aui-alert__content">
<p>
<strong>The Death Star</strong> plans are not in the main computer. Where are those transmissions you
intercepted? What have you done with those plans? We intercepted no transmissions.
</p>
<div class="aui-button-group">
<button class="aui-js-response aui-button aui-button--primary" type="button" data-close>Confirm and
close</button>
<button class="aui-js-response aui-button aui-button--secondary" type="button">Cancel</button>
</div>
</div>
</div>
<style media="screen">
body {
background-color: #f2f2f2;
padding: 50px 30%;
}
.aui-alert {
position: absolute;
text-align: left;
}
</style>
Container Alert
Container alerts differ from global alerts only to the extent that they refer to a section on a page and are positioned within this section – or container. The container may be a card or a section of a page, for example. They are suitable for displaying alerts of local significance on summary views. The user must not always be able to immediately dismiss them.
Overlay Notification
Toast notifications appear in the upper or lower corner of the right-hand viewport margin. They are particularly 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 a certain length of time.
<div class="aui-notification-container" id="notifications">
<div class="aui-notification aui-js-notification aui-color-gray20 aui-color-text-light">
<div class="aui-notification__content">
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
done with those plans? We intercepted no transmissions.
</div>
</div>
<div class="aui-notification aui-js-notification aui-color-white aui-color-text-dark">
<div class="aui-notification__content">
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
done with those plans? We intercepted no transmissions.
</div>
</div>
<div class="aui-notification aui-js-notification aui-color-gray20 aui-color-text-light">
<div class="aui-notification__content">
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
done with those plans? We intercepted no transmissions.
</div>
</div>
<div class="aui-notification aui-js-notification aui-color-white aui-color-text-dark">
<div class="aui-notification__content">
The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you
done with those plans? We intercepted no transmissions.
</div>
</div>
</div>
Badge
Badges are a supporting information element for a specific piece of information. They show the status of this element or content saved with the element. They are suitable for tasks such as referring to unread messages in inboxes, active charging or the availability of charging stations.
Generic Badge
The generic badge is always used in signal red. The aim is to attract the user’s attention. In contrast to the signal badge, it can be used to display one or a total of several notifications. They are suitable for tasks such as referring to unread messages in inboxes, unanswered calendar invitations or unseen content in feeds.
<span class="aui-badge aui-badge__dot aui-badge__dot--large aui-color-signal-red aui-color-text-light">
3
</span>
<span class="ui-badge aui-badge__dot aui-badge__dot--large aui-badge--small-text aui-color-signal-red aui-color-text-light">
99
</span>
<span class="ui-badge aui-badge__dot aui-badge__dot--large aui-badge--small-text aui-color-signal-red aui-color-text-light">
99+
</span>Generic Badge Small
The generic badge small is a filled-in circular element in signal red and is a variation of the generic badge. It serves the same purpose, but can be used for more specific use cases and without showing the number of notifications within the badge. You should ensure that the badge always refers to the information to be emphasised (icon or text). It can be placed to the left or right of the information.
<span class="aui-badge aui-badge--icon">
<svg class="aui-badge__icon audiicon">
<use xlink:href="#aui-icon-system-download-small"></use>
</svg>
<span class="aui-badge__dot aui-badge__dot--small aui-color-signal-red aui-color-text-light"></span>
</span>
<span class="aui-badge aui-badge--label">
<span class="aui-badge__dot aui-badge__dot--small aui-color-signal-red aui-color-text-light"></span>
<span class="aui-badge__label aui-badge__label--small">3 active notifications</span>
</span>Signal Badge Small
Signal badges are used to show a status or notification that falls into one of the following categories:
- OK (signal green, circular shape): Positive notification/status, show status or confirm status.
- Warning (signal yellow, rhombus shape): Warning notification/status, display of a “pending” status or a critical state.
- Warning (signal red, triangular shape): System-critical notification, refers to a charging station being out of order, an error that can affect a feature or cause damage.
Signal badges are always combined with black or white informational text and are only available in one size.
<div>
<span class="aui-badge aui-badge--label">
<span class="aui-badge__dot aui-badge__dot--small aui-badge__dot--signal-green"></span>
<span class="aui-badge__label aui-badge__label--small">Release active</span>
</span>
</div>
<div>
<span class="aui-badge aui-badge--label">
<span class="aui-badge__dot aui-badge__dot--small aui-badge__dot--signal-yellow"></span>
<span class="aui-badge__label aui-badge__label--small">Selector lever not in parking position (P)</span>
</span>
</div>
<div>
<span class="aui-badge aui-badge--label">
<span class="aui-badge__dot ui-badge__dot aui-badge__dot--small aui-badge__dot--signal-red"></span>
<span class="aui-badge__label aui-badge__label--small">There is an error in the charging system</span>
</span>
</div>Charging Badge Small
Charging badges are used to indicate active charging of the vehicle, using the defined charging colours. Charging badges are always round with corresponding black or white informational text and are only available in one size.
<div>
<span class="aui-badge aui-badge--label">
<span class="aui-badge aui-badge__dot aui-badge__dot--small aui-badge__dot--charging-neon-green"></span>
<span class="aui-badge__label aui-badge__label--small">Ladevorgang abgeschlossen in 59 Minuten</span>
</span>
</div>
<div>
<span class="aui-badge aui-badge--label">
<span class="aui-badge aui-badge__dot aui-badge__dot--small aui-badge__dot--charging-blue"></span>
<span class="aui-badge__label aui-badge__label--small">Noch 59 min. bis 80%, um „Arbeit“ zu erreichen</span>
</span>
</div>Audi UI Kit – Integration into Sketch library
To ensure designers are using the most up-to-date components and icons in their products, the Audi UI Kit was created as a sketch library. Integrate these UI Kits to get the latest Audi Sketch Libraries. Updates will be made regularly and users will be informed when new versions of the Librarys are available.
Audi UI Kit for Figma
To enable as many designers as possible to work with the Audi user interface components the UI Kit and icons is also offered for Figma. Updates are made regularly and all changes are documented for users in the changelog.
