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
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>
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
negative | negative | public | boolean | false | Negative coloring variant flag. |
orientation | orientation | public | SbbOrientation | 'horizontal' | Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal. |