What does the component do?

A divider is a visual dividing line that separates content or sections within a page or content block.

When should the component be used?

• To create visual separation between different content or sections.
• To improve the structure and readability of content.
• To separate logical groups of elements and clarify the hierarchy of information.

Rules

• A divider should be discreet and unobtrusive so as not to disrupt the flow of reading
• The length and alignment of the divider should be adapted to the surrounding layout and content (horizontal or vertical)
• Make sure that the divider has sufficient distance from the surrounding elements to fulfil its function as a separating element

Examples

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