|
Name |
Device |
Width |
Margin |
Columns |
Gutter |
Grid width |
|---|---|---|---|---|---|---|
|
xsmall |
mobile |
428px |
16px (optional) |
6 |
16px |
100% |
|
small |
tablet |
768px |
16px (optional) |
6 |
16px |
100% |
|
medium |
desktop |
1024px |
24px (optional) |
12 |
24px |
100% |
|
large |
desktop |
1366px |
32px (optional) |
12 |
32px |
100% |
|
xlarge |
desktop |
>1366px |
32px (optional) |
12 |
32px |
1366px; Align: center or left |
Mobile view
Products and content pages within this resolution range should have special considerations for mobile best practices. Namely, the Hamburger menu is shown, only relevant/critical options are being displayed, and a more vertical and “thumb-friendly” approach.
Desktop view
From 769px resolution onwards, we should display our content in its full extension. Navigations and options should be fully available for the user to interact with the system.
Our grids can adapt to any resolution (full HD, 4k, ....) although we encourage to use the 1366px width as a limit to display content. If the resolution of your monitor goes beyond that (≥1366px), content should not exceed that value and can be displayed, either centred in the page (CS Plus) or left-aligned (CX Back