# Divider

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Display
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/divider/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-divider--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/divider/overview (API: https://lyne-angular.app.sbb.ch/angular/components/divider/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-27
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/divider

## Elemente

- `sbb-divider`: Displays a divider between sections.

## Übersicht

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

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

## Implementation (Web Components, Englisch)

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.

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

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

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/divider/api.md