Zur Navigation Zum Inhalt Kontakt Menu Trova un componente Descrizione generale Lyne Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori funzionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Overview Releases Design Tokens Komponenten Roadmap Introduzione Base Informazioni Introduzione Base Componenti Senso & scopo Community Assets Istruzioni Power-Apps Banner pubblicitari digitali SAP Icone delle app Divider Info

Was macht die Komponente?

Ein Divider ist eine visuelle Trennungslinie, die Inhalte oder Abschnitte innerhalb einer Seite oder eines Inhaltsblocks voneinander abgrenzt.

Wann soll die Komponente eingesetzt werden?

  • Um visuelle Trennung zwischen unterschiedlichen Inhalten oder Abschnitten zu schaffen.
  • Um die Struktur und Lesbarkeit von Inhalten zu verbessern.
  • Um logische Gruppen von Elementen zu trennen und die Informationshierarchie zu verdeutlichen.

Regeln

  • Ein Divider soll dezent und unaufdringlich sein, um den Lesefluss nicht zu stören
  • Die Länge und Ausrichtung des Dividers sollen dem umgebenden Layout und den Inhalten angepasst sein (horizontal oder vertikal)
  • Achte darauf, dass der Divider genügend Abstand zu den umgebenden Elementen hat, um seine Funktion als Trennelement zu erfüllen
Anatomie
Anatomie der Komponente
Demo Divider Horizontal
Divider Vertical
Divider Negative
HTML in Zwischenablage kopiert.
Implementation

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

Name Attribute Privacy Type Default Description
negative negative public boolean false Negative coloring variant flag.
orientation orientation public SbbOrientation 'horizontal' Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal.
Trova un componente

Lyne

  • Design Tokens
  • Animation
    Animation
  • Border
    Border
  • Breakpoint
    Breakpoint
  • Color
    Color
  • Layout
    Layout
  • Shadow
    Shadow
  • Size
    Size
  • Spacing
    Spacing
  • Typography
    Typography
  • Action
  • More Info
    Action-Group
  • More Info
    Block-Link
  • More Info
    Button
  • More Info
    Link
  • More Info
    Mini-Button-Group
  • More Info
    Secondary-Button
  • More Info
    Teaser
  • More Info
    Teasser-Hero
  • More Info
    Teaser-Product
  • More Info
    Teaser-Product-Static
  • More Info
    Tertiary-Button
  • More Info
    Transparent-Button
  • Brand
  • More Info
    Clock
  • More Info
    Logo
  • Collection
  • More Info
    Link-List
  • More Info
    Link-List-Anchor
  • More Info
    Skiplink-List
  • More Info
    Table-Wrapper
  • Form
  • More Info
    Autocomplete
  • More Info
    Autocomplete-Grid
  • More Info
    Calendar
  • More Info
    Checkbox
  • More Info
    Checkbox-Group
  • More Info
    Checkbox-Panel
  • More Info
    Datepicker
  • More Info
    File-Selector
  • More Info
    Form-Field
  • More Info
    Radio-Button
  • More Info
    Radio-Button-Group
  • More Info
    Radio-Button-Panel
  • More Info
    Select
  • More Info
    Selection-Expansion-Panel
  • More Info
    Slider
  • More Info
    Toggle
  • More Info
    Toggle-Check
  • Indicator
  • More Info
    Alert
  • More Info
    Alert-Group
  • More Info
    Chip
  • More Info
    Loading-Indicator
  • More Info
    Message
  • More Info
    Notification
  • More Info
    Status
  • More Info
    Stepper
  • More Info
    Tag-Group
  • More Info
    Toast
  • Layout
  • More Info
    Accordion
  • More Info
    Card
  • More Info
    Container
  • More Info
    Divider
  • More Info
    Footer
  • More Info
    Header
  • More Info
    Title
  • Navigation
  • More Info
    Breadcrumb
  • More Info
    Breadcrumb-Group
  • More Info
    Menu
  • More Info
    Navigation
  • More Info
    Tab-Group
  • Overlay
  • More Info
    Dialog
  • More Info
    Overlay
  • More Info
    Popover
  • Time-Table
  • More Info
    Journey-Header
  • More Info
    Pearl-Chain
  • Visual asset
  • More Info
    Icon
  • More Info
    Image
Impressum Contatto Impostazioni dei cookie