How to setup
Design tokensComponents
Text 
Text field
Button
Control
List cells
Section heading
Navigation bar
Tab bar
Header
Toast
Tooltip
Page
Label
Cloud box
Loader
Slot
Empty stateModules
Banner
Bottom sheet
Modal
Drawer
Alert view
List view
Collection
Scalable collection
Scrollable collection
Interface editorial policy
Icons
Skeleton
Team
ChangelogPage
Page is a component responsible for placing other components on the tablet and desktop.
Page can have 3, 2, or 12 columns.
3 columns
Desktop
Breakpoints for desktop: 1680 px — 1920 px.
1920 px The grid has 3 columns (1, 8, 1).
/w=3840,quality=90,fit=scale-down)
- Left block: menu width: 320 px; position: left, top, bottom.
- Center block: content width: 100%; position: center of page, flexible 8 columns with a 16 px gap between columns.
- Right block: drawer width: min 320 px; position: right, top, bottom.
1920+ px The grid is fixed by 1920 px width center of page.
Laptop
Breakpoints for laptop: 1261 px, 1280 px, 1360 px, 1440 px, and up to 1679 px.
1440 px The grid has 3 columns (1, 8, 1).
/w=3840,quality=90,fit=scale-down)
- Left block: menu width: 320 px, position: left, top, bottom (absolute).
- Center block: content position: on the right of the page, 8 columns with a 16 px gap between columns; 360 px margin on the left and right.
- Right block: drawer width: minimum 320 px, position: right, top, bottom (absolute).
1280 px The grid has 3 columns (1, 8, 1).
- Left block: menu width: 320 px, position: left, top, bottom (absolute).
- Center block: content position: on the right of the page, 8 columns with a 16 px gap between columns.
- Right block: drawer width: minimum 320 px, position: right, top, bottom (absolute).
Tablet
Breakpoints for tablet: 600 px, 720 px, 960 px, and up to 1279 px.
/w=3840,quality=90,fit=scale-down)
The grid has 8 columns with 100% width of page, position at the center, a 16 px gap between columns, and 40 px margins at the left and right. The width of columns is flexible.
Mobile
Breakpoints for mobile: 320 px, 360 px, and up to 599 px.
The grid has 2 columns with 100% width of page, position at the center, a 8 px gap between columns, and 8 px margins at the left and right. The width of columns is flexible.
2 columns
Desktop
Breakpoints for desktop: 1680 px — 1920 px.
1920 px The grid has 2 columns (1, 8).
- Left block: menu width: 320 px; position: left, top, bottom.
- Center block: content width: 100%; position: center of page, flexible 8 columns with a 16 px gap between columns.
- Right block: drawer Drawer is hidden and shows up on top of the content. Minimum 320 px width, position: right, top, bottom (absolute).
1920+ px The grid is fixed by 1920 px width center of page.
Laptop
Breakpoints for laptop: 1261 px, 1280 px, 1360 px, 1440 px, and up to 1679 px.
1440 px The grid has 2 columns (1, 8).
/w=3840,quality=90,fit=scale-down)
- Left block: menu width: 320 px, position: left, top, bottom (absolute).
- Center block: content positioned at the center of the page, 100% width, 8 columns with a 16 px gap between columns; 360 px margin on the left and right.
- Right block: drawer Drawer is hidden and shows up on top of the content. Minimum 320 px width, position: right, top, bottom (absolute).
1280 px The grid has 2 columns (1, 8).
- Left block: menu width: 320 px, position: left, top, bottom (absolute).
- Center block: content positioned at the center of the page, 100% width, 8 columns with a 16 px gap between columns; 360 px margin on the left and right.
- Right block: drawer Drawer is hidden and shows up on top of the content. Minimum 320 px width, position: right, top, bottom (absolute).
Tablet
Breakpoints for tablet: 600 px, 720 px, 960 px, and up to 1279 px.
/w=3840,quality=90,fit=scale-down)
The grid has 8 columns with 100% width of page, position at the center, a 16 px gap between columns, and 40 px margins at the left and right. The width of columns is flexible.
Mobile
Breakpoints for mobile: 320 px, 360 px, and up to 599 px.
The grid has 2 columns with 100% width of page, position at the center, a 8 px gap between columns, and 8 px margins at the left and right. The width of columns is flexible.
12 columns
Desktop
Breakpoints for desktop: 1280 px, 1360 px, 1440 px, and up to 1920 px.
1920 px The grid has 12 columns.
The width 100% of page, position at the center, a 16 px gap between columns, 20 px margins at the left and right. The width of columns is flexible.
The grid on screens more than 1920 px has a fixed 1920 px width.
1920+ px The grid is fixed by 1920 px width center of page.
1440 px
/w=3840,quality=90,fit=scale-down)
Tablet
Breakpoints for tablet: 600 px, 720 px, 960 px, and up to 1279 px.
/w=3840,quality=90,fit=scale-down)
The grid has 8 columns with 100% width of page, position at the center, a 16 px gap between columns, and 40 px margins at the left and right. The width of columns is flexible.
Mobile
Breakpoints for mobile: 320 px, 360 px, and up to 599 px.
The grid has 2 columns with 100% width of page, position at the center, a 8 px gap between columns, and 8 px margins at the left and right. The width of columns is flexible.
