Page Margins
The content area is defined by the size of the page margin, which separates it from the left and right side of the page. Predefined page margins are recommended for the various breakpoints to keep layouts consistent.
Maximum Content Width: 1920 px
Predefined Page Margins
| Breakpoint | Range (px) | Page Margin |
|---|---|---|
| XS (Extra Small) | 320 - 374 | 16 px |
| S (Small) | 375 - 767 | 28 px |
| M (Medium) | 768 - 1023 | 40 px |
| L (Large) | 1024 - 1339 | 60 px |
| XL (Extra Large) | 1440 - 1919 | 96 px |
| XXL (Ultra Wide) | 1920+ | 96 px |
Implementation
/* Page margin applies dynamically based on breakpoint */
.page {
margin-left: var(--page-margin);
margin-right: var(--page-margin);
max-width: 1920px;
margin-inline: auto; /* Centers content at XXL */
}