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
<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.

HTML
<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.

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.
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.
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.
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.
HTML
<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.

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="#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 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.