Zum Hauptinhalt springen
FigmaOpenCode

Divider

Synonyme: Trenner, Separator, Window Splitter, Splitter, Horizonal rule, Trennlinie
Ähnliche Komponenten: –

Kurzbeschreibung​

Ein Divider unterteilt Inhaltsblöcke visuell in verschiedene Gruppen und kann eine Hierarchie aufbauen.

Beispiele​

Default Divider​

Code anzeigen
<hr class="kern-divider" aria-hidden="true" />

Beschreibung​

Ein Divider ist eine einfache horizontale Linie. Er kann in voller Seitenbreite eingesetzt werden oder schmalere Inhaltsblöcke visuell unterteilen. Divider können Hierachie schaffen, um verschachtelte Beziehungen anzuzeigen.

Verwendungsregeln​

Divider können größere Abschnitte mit unabhängigen Inhalten trennen. Sie sollen die Informationshierarchie auf der Seite unterstützen. Divider können auch in anderen Komponenten verwendet werden. Nutze die „Space“-Tokens für Abstände ober- und unterhalb des Dividers.

Dos und Don’ts​

Das Negativbeispiel zeigt einen Divider in grün statt hellgrau Nutze Divider nur in der vorgegebenen Farbe.

Weitere Hinweise​

  • Divider sollten zum Strukturieren von Elementen verwendet werden, wenn Elemente nicht mit Freiraum gruppiert werden können.
  • Verwende Divider nur sparsam. Zu viele Trennlinien lassen eine Anwendung unübersichtlich erscheinen.

Barrierefreiheit​

  • Divider sind grafische Elemente und müssen keine Kontrast-Anforderungen erfüllen.
  • Da horizontale Linien semantische Elemente sind, die von Screenreadern angekündigt werden, sollten sie mit aria-hidden vor Screenreadern verborgen werden, es sei denn, die horizontale Linie wird verwendet, um Inhalte semantisch zu unterteilen.

Inhaltsverzeichnis