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

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“-Token für Abstände ober- und unterhalb des Dividers.

Dos und Don’ts

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.