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

• EFA Theme
• KERN Theme

Loading...

<KernDivider></KernDivider>

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 & 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.

Properties

Property	Attribute	Description	Type	Default
_customClass	_custom-class	Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.	string | undefined	undefined