Preview.

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.

Specification.

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Documentation.

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.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

class: SbbDividerElement, sbb-divider.

Properties.