Zum Hauptinhalt springen
FigmaOpenCode

Alert

Synonyme: Hinweis, Meldung, Warnung, Information, Mitteilung, Rückmeldung
Ähnliche Komponenten: Badge

Kurzbeschreibung​

Ein Alert gibt einen Hinweis zu einer wichtigen Information mit knapper Erläuterung und optionalem Link.

Beispiele​

Default​

Code anzeigen
<div class="kern-alert kern-alert--info" role="alert">
<div class="kern-alert__heading">
  <span class="kern-icon kern-icon--info" aria-hidden="true"></span>
  <span class="kern-alert__title">Hinweis</span>  
</div>
<div class="kern-alert__content">
  <p class="kern-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
</div>
</div>

Varianten​

Code anzeigen
<div class="kern-alert kern-alert--info" role="alert">
<div class="kern-alert__heading">
  <span class="kern-icon kern-icon--info" aria-hidden="true"></span>
  <span class="kern-alert__title">Hinweis</span>  
</div>
</div>

<br>

<div class="kern-alert kern-alert--success" role="alert">
<div class="kern-alert__heading">
  <span class="kern-icon kern-icon--success" aria-hidden="true"></span>
  <span class="kern-alert__title">Erfolg</span>  
</div>
</div>

<br>

<div class="kern-alert kern-alert--warning" role="alert">
<div class="kern-alert__heading">
  <span class="kern-icon kern-icon--warning" aria-hidden="true"></span>
  <span class="kern-alert__title">Warnung</span>  
</div>
</div>

<br>

<div class="kern-alert kern-alert--danger" role="alert">
<div class="kern-alert__heading">
  <span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
  <span class="kern-alert__title">Fehler</span>  
</div>
</div>

Content​

Code anzeigen
<div class="kern-alert kern-alert--info" role="alert">
<div class="kern-alert__heading">
  <span class="kern-icon kern-icon--info" aria-hidden="true"></span>
  <span class="kern-alert__title">Hinweis</span>  
</div>
<div class="kern-alert__content">
  <p class="kern-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
</div>
</div>

<br>

<div class="kern-alert kern-alert--success" role="alert">
<div class="kern-alert__heading">
  <span class="kern-icon kern-icon--success" aria-hidden="true"></span>
  <span class="kern-alert__title">Erfolg</span>  
</div>
<div class="kern-alert__content">
  <p class="kern-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
</div>
</div>

<br>

<div class="kern-alert kern-alert--warning" role="alert">
<div class="kern-alert__heading">
  <span class="kern-icon kern-icon--warning" aria-hidden="true"></span>
  <span class="kern-alert__title">Warnung</span>  
</div>
<div class="kern-alert__content">
  <p class="kern-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
</div>
</div>

<br>

<div class="kern-alert kern-alert--danger" role="alert">
<div class="kern-alert__heading">
  <span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
  <span class="kern-alert__title">Fehler</span>  
</div>
<div class="kern-alert__content">
  <p class="kern-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
</div>
</div>

Beschreibung​

Ein Alert gibt einen knapp formulierten Hinweis auf wichtige Informationen oder Veränderungen. Er besteht aus Kopf- und Inhaltsbereich. Der Kopf enthält ein Icon und einen beschreibenden Titel. Der Inhalt ist optional und enthält einen knappen Beschreibungstext. Ebenfalls optional kann unter dem Beschreibungstext auch ein Link zu weiteren Informationen oder zugehörigen Aktionen angezeigt werden.
Es gibt vier Zustände, die farblich fest kodiert sind: Info (blau), Success (grün), Warning (gelb) und Danger (rot). Mehr dazu findest Du unten bei den Verwendungsregeln.

Effektiver Einsatz​

Um die Benutzerfreundlichkeit und Effektivität von Alerts zu gewährleisten, sollten folgende Punkte beachtet werden:

  • Klarheit und Prägnanz: Die Botschaft des Alerts sollte klar und unmissverständlich sein.
  • Relevanz: Alerts sollten nur dann angezeigt werden, wenn sie für die Nutzenden relevant sind.
  • Dringlichkeit: Die Dringlichkeit des Alerts sollte durch visuelle und akustische Signale angemessen kommuniziert werden.
  • Interaktivität: Alerts sollten Nutzenden die Möglichkeit bieten, direkt auf die Nachricht zu reagieren.

Verwendungsregeln​

Eine Meldung über unkritische Informationen oder Zustände, die keinen unmittelbaren Handlungsbedarf auf Nutzendenseite erfordern.
Beispiel:

  • „Vorbildlich – Ihre Daten sind aktuell.“

Dos und Don’ts​

Gehe sparsam mit Alerts um. Gehe sparsam mit Alerts um. Informationen können auch in einem Textabsatz beschrieben werden.

Beschreibe den Grund für den Alert in einer knappen und präzisen Erläuterung. Beschreibe den Grund für den Alert in einer knappen und präzisen Erläuterung.

Ist eine Aktion der Nutzenden erforderlich, so benenne und/oder verlinke diese Aktion. Ist eine Aktion der Nutzenden erforderlich, so benenne und/oder verlinke diese Aktion.

Lass Nutzende nicht mit einer Meldung allein, sondern weise Lösungen auf. Lass Nutzende nicht mit einer Meldung allein, sondern weise Lösungen auf.

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße und Kontrastverhältnis – für barrierefreie Dienste.

  • Achte in der angewandten Nutzung darauf, dass Titel und Beschreibungstext auch für Laien und insbesondere Menschen mit kognitiven Beeinträchtigungen verständlich sind. In Zweifelsfällen solltest du eine eigene Version in „Einfacher Sprache“ und/oder „Leichter Sprache“ in Erwägung ziehen.

Siehe auch: w3.org - Alert Pattern, w3.org - Alert and Message Dialogs Pattern oder magentaA11y

Inhaltsverzeichnis