Version:
Callout
Die Callout-Komponente wird zum Hervorheben oder Abgrenzen von Inhalten verwendet.
Overview
Intro
Die Callout-Komponente wird verwendet um Inhalte aller Art (z. B. Texte, Diagramme, etc.) hervorzuheben oder abzugrenzen. Mit Hilfe der verschiedenen Callout-Varianten ist es zudem möglich eine Statusinformation zu vermitteln.
broken_image
Callout
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn Informationen mit einem Status visualisiert werden sollen (z. B. Erfolg, Warnung, etc.) ... wenn Inhalte von dem Rest der Seite abgegrenzt werden sollen ... wenn Informationen hervorgehoben werden sollen | ... als sofortige Rückmeldung auf eine Interaktion des Nutzers (hierzu wird ein Toast verwendet) |
Guidelines
Aufbau
Ein Callout besteht aus einem Hintergrund und dem Callout-Inhalt. Eine Überschrift kann optional verwendet werden. Wird eine Überschrift verwendet, beschreibt diese kurz und prägnant den Inhalt. Der Hintergrund eines Callouts visualisiert den Status. Der Inhalt kann unterschiedlich sein (z.B. Text, Diagramme). Die Größe des Callouts passt sich an den Inhalt an.
Anordnung & Gruppierung
Die "Callout" Komponente sollte so platziert werden, dass sie die Aufmerksamkeit auf sich zieht, ohne dabei den normalen Lesefluss zu stören. Sie kann beispielsweise neben oder unter einem relevanten Abschnitt positioniert werden, um zusätzliche Informationen oder Kontext zu bieten.
Wenn mehrere "Callout" Komponenten verwendet werden, sollten sie gruppiert werden, um eine klare und konsistente Struktur zu schaffen. Dies hilft dem Benutzer, die Informationen schnell zu erfassen und zu verstehen.
Varianten/Typen
Es gibt sechs verschiedene Callout-Varianten: Standard, Sekundär, Information, Erfolg, Warnung und Fehler.
Standard (Default)
Ein Standard-Callout kann für jede Art von Inhalt verwendet werden. Der Status dieser Variante ist neutral. Daher kann diese Callout-Variante gut zur Abgrenzung von Inhalten verwendet werden.
Bei dieser Variante kann links von der Überschrift optional ein Icon gesetzt werden.
broken_image
Standard
Sekundär (Secondary)
Ein sekundäres Callout wird für Informationen verwendet, welche eher Zusatzinformationen oder Hinweise sind. Der Status dieser Variante ist neutral.
Bei dieser Variante kann links von der Überschrift optional ein Icon gesetzt werden.
broken_image
Sekundär
Information
Ein Informations-Callout wird verwendet, wenn der Inhalt des Callouts explizit als Information visualisiert werden und die Aufmerksamkeit des Nutzers auf sich ziehen soll.
broken_image
Information
Erfolg (Success)
Ein Erfolgs-Callout wird verwendet, wenn der Inhalt des Callouts einen positive Information visualisiert.
broken_image
Erfolg
Warnung (Warning)
Ein Warnungs-Callout wird verwendet, wenn der Inhalt des Callouts einen wichtigen Hinweis oder eine Warnung für den Nutzer enthält.
broken_image
Warnung
Fehler (Error)
Ein Fehler-Callout wird verwendet, wenn der Inhalt des Callouts einen Fehler beschreibt.
broken_image
Fehler
Verhalten
Ein Callout dient nur der Information. Der Nutzer kann nicht direkt mit dem Callout interagieren. Wenn die Inhalte einer Callout-Komponente interaktive Elemente sind, kann der Nutzer jedoch mit diesen interagieren.
Ein Inhaltspunkt
Beinhaltet der Callout einen inhaltlichen Punkt, wird kein Aufzählungszeichen verwendet.
broken_image
Ein Inhaltspunkt
Mehrere Inhaltspunkte
Findet eine Auflistung mehrerer inhaltlicher Punkte statt, werden diese mit Zahlen aufgeführt.
broken_image
Mehrere Inhaltspunkte
Fokusverhalten
Der Nutzer kann innerhalb des Callouts die Überschrift fokussieren, jedoch nicht die einzelnen inhaltlichen Unterpunkte. Beinhaltet der Callout interaktive Elemente können diese fokussiert werden.
broken_image
Fokusverhalten
Verlinkung
broken_image
Verlinkung
Barrierefreiheit
Wenn das Callout interaktive Elemente enthält, müssen diese wie gewohnt über die Tastatur zugänglich sein.