Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Base Components Overview Base Components Overview Design Tokens Components Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons
Find component

Lyne

Basics Animation

Animation

Border

Border

Grid

Grid

Spacings

Spacings

Typography

Typography

Components Action-Group

Action-Group

Alert

Alert

Alert-Group

Alert-Group

Autocomplete

Autocomplete

Button

Button

Calendar

Calendar

Card

Card

Card-Badge

Card-Badge

Checkbox

Checkbox

Checkbox-Group

Checkbox-Group

Chip

Chip

Clock

Clock

Datepicker

Datepicker

Dialog

Dialog

Divider

Divider

Footer

Footer

Form-Error

Form-Error

Form-Field

Form-Field

Header

Header

Header-Action

Header-Action

Icon

Icon

Image

Image

Journey-Header

Journey-Header

Link

Link

Link-List

Link-List

Logo

Logo

Menu

Menu

Menu-Action

Menu-Action

Radio-Button

Radio-Button

Radio-Button-Group

Radio-Button-Group

Selection-Panel

Selection-Panel

Signet

Signet

Slider

Slider

Tab-Group

Tab-Group

Tab Title

Tab Title

Tag

Tag

Tag-Group

Tag-Group

Teaser

Teaser

Teaser-Hero

Teaser-Hero

Time-Input

Time-Input

Title

Title

Toggle

Toggle

Toggle-Check

Toggle-Check

Tooltip

Tooltip

Tooltip-Trigger

Tooltip-Trigger

Divider Implementation

The sbb-divider is used to visually divide sections.

Based on the orientation property, the sbb-divider can be displayed vertically or horizontally.

Properties

Property Attribute Description Type Default
negative negative Negative coloring variant flag boolean false
orientation orientation Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal. "horizontal" | "vertical" 'horizontal'

Dependencies

Used by

Graph

graph TD;
sbb-alert --> sbb-divider
sbb-journey-summary --> sbb-divider
sbb-navigation-section --> sbb-divider
sbb-notification --> sbb-divider
sbb-optgroup --> sbb-divider
sbb-selection-panel --> sbb-divider
style sbb-divider fill:#f9f,stroke:#333,stroke-width:4px

Demo
Horizontal Vertical
White Milk Iron Charcoal Black
More examples on Storybook
Imprint Contact Cookie settings