Notifications
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 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.
<div class="abp-pattern__notification-container-alert">
<div class="aui-alert aui-js-alert aui-color-text-warning" role="alert">
<div class="aui-alert__content aui-color-black">
<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?
And, now Your Highness, we will discuss the location of your hidden Rebel base.
</div>
</div>
</div>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.
<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
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.
<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="#aui-icon-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="#aui-icon-cancel-small"></use></svg>
</span>
<span class="aui-badge aui-color-black aui-color-text-light is-hidden">99</span>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.
