An overlay provides contextual information and options in form of an additional layer on top of the current state of the interface. They are either purposefully interruptive like modals or augmenting like popovers and tooltips. The colour of overlays can be chosen freely from the Audi brand colours and grey tones.

Modal

Modals are applied to shift the user’s attention to information and interactions by interrupting the current process. They are displayed as layers that are superimposed on the background. If the background remains partially visible, it is darkened with 90% black. It is not possible to interact with the background until the modal is closed by completing or cancelling the task shown.

Modals triggered by a button can emerge by means of an animation in which the shape of the button transforms into the shape of the modal.

Dialogue boxes

Modals with short content such as alerts or confirmation dialogues are displayed in a vertically and horizontally centred tile.

HTML
<button class="aui-js-response aui-button aui-button--primary" type="button" data-toggle="modal" data-target="modal-sample-layer">Open modal as layer</button>
<div class="aui-modal aui-js-modal" id="modal-sample-layer" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="aui-modal-dialog aui-modal-dialog--layer aui-color-text-light">
    <div class="aui-modal-dialog__body">
      <div class="aui-modal-dialog__content">
        <h6 class="aui-headline-3" style="margin-bottom:20px;">Modal Title</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <div style="margin-top:40px;text-align:right;">
          <div class="aui-button-group">
            <button class="aui-js-response aui-button aui-button--secondary aui-theme-light" type="button" data-dismiss="modal">Close</button>
            <button class="aui-js-response aui-button aui-button--primary aui-theme-light" type="button">Confirm</button>
          </div>
        </div>
        <div class="aui-modal-dialog__close" data-dismiss="modal"></div>
      </div>
    </div>
  </div>
</div>
HTML
<button class="aui-js-response aui-button aui-button--primary" type="button" data-toggle="modal"
	data-target="modal-sample-morphing-layer">
	<span class="aui-button__text">Morph modal</span>
</button>
<style media="screen">
	@media (min-width: 600px) {
		#modal-sample-morphing-layer .aui-modal-dialog__body {
			/* Define a width for this specific dialog: */
			width: 93.75%;
			max-width: 460px;
		}
	}
</style>

<div class="aui-modal aui-js-modal aui-modal--morph" id="modal-sample-morphing-layer" tabindex="-1" role="dialog"
	aria-hidden="true">
	<div class="aui-modal-dialog aui-modal-dialog--layer aui-modal-dialog--morph">
		<div class="aui-modal-dialog__body">
			<div class="aui-modal-dialog__content">
				<!-- Start inserting content here: -->
				<div class="aui-color-text-light">
					<h6 class="aui-headline-3" style="margin-bottom:20px;padding-right:27px;">Modal Title</h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua.</p>
					<div style="margin-top:40px;text-align:right;">
						<div class="aui-button-group">
							<button class="aui-js-response aui-button aui-button--secondary aui-theme-light" type="button"
								data-dismiss="modal">
								<span class="aui-button__text">Close</span>
							</button>
							<button class="aui-js-response aui-button aui-button--primary aui-theme-light" type="button">
								<span class="aui-button__text">Confirm</span>
							</button>
						</div>
					</div>
				</div>
				<!-- End inserting content. -->
				<!-- NOTE Because of alignment, the close button of Modal Layer components has to be inside `aui-modal-dialog__content` element. -->
				<div class="aui-modal-dialog__close" data-dismiss="modal"></div>
			</div>
		</div>
	</div>
</div>

Scrollable modals

Modals with long content fill the entire height of the viewport. The darkened background can be seen to the left and right of the modal. It is possible to scroll inside the modal but not on the page behind it.

HTML
<button class="aui-js-response aui-button aui-button--primary" type="button" data-toggle="modal"
	data-target="modal-sample-window">
	<span class="aui-button__text">Open modal as window</span>
</button>
<div class="aui-modal aui-js-modal" id="modal-sample-window" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="aui-modal-dialog aui-modal-dialog--window">
		<div class="aui-modal-dialog__body">
			<div class="aui-modal-dialog__content">
				<!-- Start inserting content here: -->
				<div class="aui-color-text-light">
					<h6 class="aui-headline-2" style="margin-bottom:20px;">Modal Title</h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<div style="margin-top:80px; text-align:right;">
						<div class="aui-button-group">
							<button class="aui-js-response aui-button aui-button--secondary aui-theme-light" type="button"
								data-dismiss="modal">
								<span class="aui-button__text">Close</span>
							</button>
							<button class="aui-js-response aui-button aui-button--primary aui-theme-light" type="button">
								<span class="aui-button__text">Confirm</span>
							</button>
						</div>
					</div>
				</div>
				<!-- End inserting content. -->
			</div>
			<div class="aui-modal-dialog__close" data-dismiss="modal"></div>
		</div>
	</div>
</div>

Full-screen modals

Modals can cover the entire viewport, e.g. in the case of a narrow viewport.

HTML
<button class="aui-js-response aui-button aui-button--primary" type="button" data-toggle="modal"
	data-target="modal-sample">
	<span class="aui-button__text">Open Full-Screen modal</span>
</button>
<div class="aui-modal aui-js-modal" id="modal-sample" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="aui-modal-dialog aui-modal-dialog--fullpage">
		<div class="aui-modal-dialog__body">
			<div class="aui-modal-dialog__content">
				<!-- Start inserting content here: -->
				<div class="aui-color-text-light">
					<h6 class="aui-headline-2" style="margin-bottom:20px;">Modal Title</h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
						ea commodo consequat.</p>
					<div style="margin-top:80px; text-align:right;">
						<div class="aui-button-group">
							<button class="aui-js-response aui-button aui-button--secondary aui-theme-light" type="button"
								data-dismiss="modal">
								<span class="aui-button__text">Close</span>
							</button>
							<button class="aui-js-response aui-button aui-button--primary aui-theme-light" type="button">
								<span class="aui-button__text">Confirm</span>
							</button>
						</div>
					</div>
				</div>
				<!-- End inserting content. -->
			</div>
			<div class="aui-modal-dialog__close" data-dismiss="modal"></div>
		</div>
	</div>
</div>

<style media="screen">
		.aui-button {
			width: 175px;
		}
</style>

Popover

Popovers are used to offer additional information or interaction options in relation to an element. They appear initially or else on click or tap. Popovers can be closed by the user clicking or tapping on an area outside the popover or on the triggering element.

Popovers can contain text, images, videos, actions and other elements as required. They can appear from any side as required. The triangular arrow points to the triggering element.

HTML
<button id="sample-popover-bottom" class="aui-js-response aui-button aui-button--primary" type="button">Popover on bottom</button>
<div class="aui-popover aui-js-popover" role="tooltip" for="sample-popover-bottom" data-placement="bottom">
 <div class="aui-popover__content">
   <div class="aui-popover__text">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
 </div>
</div>

Tooltip

Tooltips are used to offer additional text information for an element. They appear on mouseover or tap and are not initially visible. Tooltips can be closed by the user by clicking or tapping on an area outside the tooltip.

Unlike popovers, tooltips only contain text. They can appear from any side as required. The triangular arrow points to the triggering element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HTML
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a id="sample-tooltip" href="#" class="aui-textlink">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat.
</p>
<span class="aui-tooltip aui-js-tooltip" for="sample-tooltip"><span class="aui-tooltip__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></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

Dos and Don´ts

If the content of a modal can be scrolled, the area under the fixed icon remains free to close the modal. This avoids any superimpositions.
The icon for closing the modal can also be applied as a sticky button in the case of agitated backgrounds.
The transparent block above the background is to be darkened and not lightened.
The transparent block above the background has a transparency of 90%.
Tooltips and popovers should be distinguishable from their background by their colour.