# Divider

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Display
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/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

## Elements

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

## Overview

### What does the component do?
A divider is a dividing line. It visually separates content or sections. It can be horizontal or vertical.

### When should the component be used?
* To separate logically distinct content or groups of elements.
* When spacing alone is not enough to clarify the structure.

### Rules.
* A divider is discreet and does not disrupt reading. Use it sparingly.
* It has sufficient distance from the surrounding elements.
* On dark backgrounds, use the negative variant.
* A divider is purely visual. The structure of the page comes from headings and sections.

## Implementation (web components)

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)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/divider/api.md