-
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
Try using different or fewer search terms.
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 offers list styles that are applied to the native HTML lists. The font size is set with a text class such as sbb-text-m.
| List | CSS class | Sass mixin | Usage |
|---|---|---|---|
| Standard | sbb-list | list | On ul and ol, also nested. The colour is inherited. |
| Steps | sbb-step-list | step-list | Only on ol. Describes a sequence of steps. |
| Icon | sbb-icon-list | icon-list | Icon as bullet, circle-tick-small by default. Custom icon with --sbb-icon-list-marker-icon, icon colour with --sbb-icon-list-marker-icon-color. |
| Description | sbb-list | description-list | On dl for label and description. The colour is inherited. |
- First item
- Second item
- First step
- Second step
- Label:
- Description of the label.