Divider. Übersicht

Vorschau.

Horizontal
Vertikal

Was macht die Komponente?

Ein Divider ist eine Trennlinie. Er grenzt Inhalte oder Abschnitte visuell voneinander ab. Er ist horizontal oder vertikal möglich.

Wann soll die Komponente eingesetzt werden?

  • Um logisch getrennte Inhalte oder Gruppen von Elementen voneinander abzugrenzen.
  • Wenn Abstand allein nicht genügt, um die Struktur zu verdeutlichen.
 Anwendung

Regeln.

  • Ein Divider ist dezent und stört den Lesefluss nicht. Setze ihn sparsam ein.
  • Er hat genügend Abstand zu den umgebenden Elementen.
  • Auf dunklem Hintergrund wird die negative Variante verwendet.
  • Ein Divider ist rein visuell. Die Struktur der Seite entsteht durch Überschriften und Abschnitte.

Spezifikation.

In Figma öffnen
Beispiele Divider Horizontal.
Auf Storybook ausprobieren HTML einblenden
Divider Vertical.
Auf Storybook ausprobieren HTML einblenden
Divider Negative.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Storybook mit Live-Beispielen Quellcode auf GitHub

Dokumentation.

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>

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

Angular-Übersicht Angular-API Angular-Beispiele API

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.