-
Animation Animation Design Token -
Border Border Design Token -
Color Color Design Token -
Grid Grid Design Token -
Layout Layout Design Token -
Shadow Shadow Design Token -
Size Size Design Token -
Spacing Spacing Design Token -
Typography Typography Design Token -
Accordion Accordion Container -
Action-Group Action-Group Container -
Alert Alert Indicator -
Autocomplete Autocomplete Form -
Badge Badge Indicator -
Breadcrumb Breadcrumb Navigation -
Button Button Action -
Calendar Calendar Form -
Card Card Container -
Carousel Carousel Container -
Checkbox Checkbox Form -
Checkbox-Group Checkbox-Group Form -
Checkbox-Panel Checkbox-Panel Form -
Chip Chip Form -
Chip-Label Chip-Label Indicator -
Clock Clock Indicator -
Container Container Container -
Date-Input Date-Input Form -
Datepicker Datepicker Form -
Dialog Dialog Container -
Divider Divider Display -
Download Download Action -
Expansion-Panel Expansion-Panel Container -
File-Selector File-Selector Form -
Flip-Card Flip-Card Container -
Footer Footer Navigation -
Form-Field Form-Field Form -
Header Header Navigation -
Icon Icon Display -
Icon-Sidebar Icon-Sidebar Navigation -
Image Image Display -
Journey-Header Journey-Header Display -
Lead-Container Lead-Container Container -
Link Link Action -
Link-List Link-List Action -
Link-List-Anchor Link-List-Anchor Action -
Loading-Indicator Loading-Indicator Indicator -
Loading-Indicator-Circle Loading-Indicator-Circle Indicator -
Logo Logo Display -
Map-Container Map-Container Container -
Menu Menu Navigation -
Message Message Indicator -
Mini-Calendar Mini-Calendar Form -
Navigation Navigation Navigation -
Notification Notification Indicator -
Option Option Form -
Overlay Overlay Container -
Paginator Paginator Indicator -
Pearl-Chain Pearl-Chain Display -
Popover Popover Container -
Radio-Button Radio-Button Form -
Radio-Button-Group Radio-Button-Group Form -
Radio-Button-Panel Radio-Button-Panel Form -
Select Select Form -
Selection-Action-Panel Selection-Action-Panel Form -
Selection-Expansion-Panel Selection-Expansion-Panel Form -
Sidebar Sidebar Navigation -
Signet Signet Brand -
Skiplink-List Skiplink-List Action -
Slider Slider Form -
Status Status Indicator -
Stepper Stepper Indicator -
Table Table Display -
Tabs Tabs Navigation -
Tag Tag Container -
Teaser Teaser Action -
Teaser-Hero Teaser-Hero Action -
Teaser-Panel Teaser-Panel Display -
Teaser-Product Teaser-Product Action -
Time-Input Time-Input Form -
Title Title Display -
Toast Toast Indicator -
Toggle Toggle Form -
Toggle-Check Toggle-Check Form -
Tooltip Tooltip Container -
Train Train Display -
List-Table List-Table Template -
List-Card List-Card Template -
Dashboard Dashboard Template
Probiere es mit anderen oder weniger Suchbegriffen.
sbb-typo-font-family
SBB, Inter, "Helvetica Neue", Helvetica, Arial, sans-serif
sbb-typo-scale-0-75x
12px
Scale
sbb-typo-scale-0-8125x
13px
Scale
sbb-typo-scale-0-875x
14px
Scale
sbb-typo-scale-default
16px
Scale
sbb-typo-scale-1-125x
18px
Scale
sbb-typo-scale-1-25x
20px
Scale
sbb-typo-scale-1-5x
24px
Scale
sbb-typo-scale-2x
32px
Scale
sbb-typo-scale-2-5x
40px
Scale
sbb-typo-scale-3x
48px
Scale
sbb-typo-scale-3-5x
56px
Scale
sbb-typo-scale-4x
64px
Scale
sbb-typo-letter-spacing-heading
0em
Letter Spacing
sbb-typo-letter-spacing-text
0.03em
Letter Spacing
sbb-typo-line-height-heading
1.4
Line Height
sbb-typo-line-height-text
1.75
Line Height
Lyne bietet Listenstile, die auf die nativen HTML-Listen angewendet werden. Die Schriftgrösse wird mit einer Text-Klasse wie sbb-text-m festgelegt.
| Liste | CSS-Klasse | Sass-Mixin | Verwendung |
|---|---|---|---|
| Standard | sbb-list | list | Auf ul und ol, auch verschachtelt. Die Farbe wird geerbt. |
| Schritte | sbb-step-list | step-list | Nur auf ol. Beschreibt eine Abfolge von Schritten. |
| Icon | sbb-icon-list | icon-list | Icon als Aufzählungszeichen, standardmässig circle-tick-small. Eigenes Icon mit --sbb-icon-list-marker-icon, Icon-Farbe mit --sbb-icon-list-marker-icon-color. |
| Beschreibung | sbb-list | description-list | Auf dl für Label und Beschreibung. Die Farbe wird geerbt. |
- Erster Punkt
- Zweiter Punkt
- Erster Schritt
- Zweiter Schritt
- Label:
- Beschreibung des Labels.