Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Lyne Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons
Komponente finden

Lyne

Basics Animation

Animation

 Border

Border

 Grid

Grid

 Spacings

Spacings

 Typografie

Typografie

 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
Spacings Responsive
zero
micro
small
medium
large
wide
ultra

sbb-spacing-responsive-xxxs

zero: 12pxpx

micro: 12pxpx

small: 12pxpx

medium: 16pxpx

large: 16pxpx

wide: 16pxpx

ultra: 16pxpx

sbb-spacing-responsive-xxs

zero: 16pxpx

micro: 16pxpx

small: 16pxpx

medium: 24pxpx

large: 24pxpx

wide: 24pxpx

ultra: 24pxpx

sbb-spacing-responsive-xs

zero: 20pxpx

micro: 20pxpx

small: 20pxpx

medium: 24pxpx

large: 24pxpx

wide: 24pxpx

ultra: 24pxpx

sbb-spacing-responsive-s

zero: 24pxpx

micro: 24pxpx

small: 24pxpx

medium: 32pxpx

large: 32pxpx

wide: 32pxpx

ultra: 32pxpx

sbb-spacing-responsive-m

zero: 32pxpx

micro: 32pxpx

small: 32pxpx

medium: 40pxpx

large: 40pxpx

wide: 48pxpx

ultra: 48pxpx

sbb-spacing-responsive-l

zero: 32pxpx

micro: 32pxpx

small: 40pxpx

medium: 48pxpx

large: 56pxpx

wide: 56pxpx

ultra: 64pxpx

sbb-spacing-responsive-xl

zero: 32pxpx

micro: 32pxpx

small: 48pxpx

medium: 64pxpx

large: 80pxpx

wide: 80pxpx

ultra: 96pxpx

sbb-spacing-responsive-xxl

zero: 48pxpx

micro: 48pxpx

small: 72pxpx

medium: 80pxpx

large: 96pxpx

wide: 96pxpx

ultra: 120pxpx

Fixed

sbb-spacing-fixed-1x

4pxpx

sbb-spacing-fixed-2x

8pxpx

sbb-spacing-fixed-3x

12pxpx

sbb-spacing-fixed-4x

16pxpx

sbb-spacing-fixed-5x

20pxpx

sbb-spacing-fixed-6x

24pxpx

sbb-spacing-fixed-8x

32pxpx

sbb-spacing-fixed-9x

36pxpx

sbb-spacing-fixed-10x

40pxpx

sbb-spacing-fixed-12x

48pxpx

sbb-spacing-fixed-14x

56pxpx

sbb-spacing-fixed-16x

64pxpx

sbb-spacing-fixed-18x

72pxpx

sbb-spacing-fixed-20x

80pxpx

sbb-spacing-fixed-24x

96pxpx

sbb-spacing-fixed-30x

120pxpx

Kontakt

Haben Sie Fragen? Evtl. Hilft unser FAQ oder unsere Hilfe weiter, ansonten können Sie Ihre Frage gerne im entsprechenden Board auf Github platzieren.

Impressum Kontakt Cookie Einstellungen