Ein Overlay stellt kontextbezogene Informationen und Optionen in Form einer zusätzlichen Ebene über dem aktuellen Zustand des Interfaces zur Verfügung. Sie sind entweder bewusst unterbrechend wie Modals oder ergänzend wie Popovers und Tooltips. Die Farbe der Overlays kann aus den Audi Markenfarben und Grautönen frei gewählt werden.

Modal

Modals werden eingesetzt, um Informationen und Interaktionen in den Fokus des Nutzers zu setzen, um ihn aus dem aktuellen Prozess zu leiten. Sie werden als Layer dargestellt, der sich über den Hintergrund legt. Wenn der Hintergrund zum Teil sichtbar bleibt, wird er mit 90% Schwarz abgedunkelt. Mit dem Hintergrund kann nicht interagiert werden, bis das Modal durch Abschließen oder Abbrechen des dargestellten Tasks geschlossen wird.

Modals, die über einen Button ausgelöst werden, können durch eine Animation entstehen, bei der sich die Form des Buttons in die Form des Modals verwandelt.

Dialogue boxes

Modals mit kurzen Inhalten wie Alerts oder Bestätigungs-Dialogen werden in einer vertikal und horizontal zentrierten Kachel dargestellt.

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 mit langen Inhalten füllen die gesamte Höhe des Viewports. Links und rechts des Modals bleibt der abgedunkelte Hintergrund der Seite zu sehen. Innerhalb des Modals kann gescrollt werden, nicht jedoch auf der Seite dahinter.

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 können dazu den gesamten Viewport abdecken, z. B. bei einem schmalen 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

Popover werden verwendet, um Zusatzinformationen oder Interaktionsmöglichkeiten zu einem Element anzubieten. Sie werden bei Klick bzw. Tap oder initial eingeblendet. Popover können geschlossen werden, indem der Nutzer einen Bereich außerhalb des Popovers oder auf das auslösende Element klickt oder tippt.

Popover können im Unterschied zu Tooltips nach Bedarf Text, Bilder, Videos, Aktionen und weitere Elemente enthalten. Sie können wahlweise von jeder Seite eingeblendet werden. Der dreieckige Pfeil weist dabei auf das auslösende 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 werden verwendet, um textliche Zusatzinformationen zu einem Element anzubieten. Sie werden bei Mouseover bzw. Tap eingeblendet und sind initial nicht sichtbar. Tooltips können geschlossen werden, indem der Nutzer auf einen Bereich außerhalb des Tooltips klickt oder tippt.

Tooltips enthalten im Unterschied zu Popovern lediglich Text. Sie können wahlweise von jeder Seite eingeblendet werden. Der dreieckige Pfeil weist dabei auf das auslösende 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: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Dos and Don´ts

Kann der Inhalt eines Modals gescrollt werden, bleibt der Bereich unter dem fixiert platzierten Icon zum Schließen des Modals frei. So entstehen keine Überlagerungen.
Das Icon zum Schließen des Modals kann bei unruhigen Hintergründen auch in einen Floating Button gesetzt werden.
Die transparente Fläche vor dem Hintergrund wird abgedunkelt und nicht aufgehellt.
Die transparente Fläche über dem Hintergrund erhält eine Transparenz von 90%.
Popover sollten sich in ihrer Farbigkeit vom Hintergrund abheben.