Divider. Info

Was macht die Komponente?

Ein Divider ist eine visuelle Trennungslinie, die Inhalte oder Abschnitte innerhalb einer Seite oder eines Inhaltsblocks voneinander abgrenzt.

Wann soll die Komponente eingesetzt werden?

  • Um visuelle Trennung zwischen unterschiedlichen Inhalten oder Abschnitten zu schaffen.
  • Um die Struktur und Lesbarkeit von Inhalten zu verbessern.
  • Um logische Gruppen von Elementen zu trennen und die Informationshierarchie zu verdeutlichen.

Regeln.

  • Ein Divider soll dezent und unaufdringlich sein, um den Lesefluss nicht zu stören
  • Die Länge und Ausrichtung des Dividers sollen dem umgebenden Layout und den Inhalten angepasst sein (horizontal oder vertikal)
  • Achte darauf, dass der Divider genügend Abstand zu den umgebenden Elementen hat, um seine Funktion als Trennelement zu erfüllen
Anatomie

[object Promise]

Demo Divider Horizontal.
Divider Vertical.
Divider Negative.
HTML in Zwischenablage kopiert.
Implementation

The <sbb-divider> is used to visually divide sections.

Style.

Based on the orientation property, the <sbb-divider> can be displayed vertically or horizontally.

It's also possible to display the component in negative variant using the self-named property.

<sbb-divider orientation="vertical"></sbb-divider>

<sbb-divider negative></sbb-divider>

API Documentation.

class: SbbDividerElement, sbb-divider.

Properties.

Name Attribute Privacy Type Default Description
negative negative public boolean false Negative coloring variant flag.
orientation orientation public 'horizontal' | 'vertical' 'horizontal' Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal.