Layout
Understanding the grids, breakpoints and spacing rules.
- Grid
- Breakpoints
- Site width
- Spacing
Grid
For optimal user experience, user interface should adapt layouts for the following breakpoint widths:
- Desktop ≥1200-769px
- Tablet 768-577
- Mobile <576px
12 columns are available at every breakpoint.
Desktop
Desktop - 100%
Tablet
Tablet - 100%
Mobile
Mobile - 100%
Breakpoints
Responsive layouts adapt to any screen size based on break points. This UI guidance is based on a flexible grid that ensures consistency across layouts and breakpoint and defines how content reflows on different screens.
The responsive UI is based on a 12-column grid layout with 16px gutters. This grid creates visual consistency between layouts, while allowing flexibility across a wide variety of designs.
| Desktop ≥ 1200px | Tablet 768-577 | Mobile <576px | |
|---|---|---|---|
| Max container width | 1200px | 768px | 576px |
| Boxed container width | 1140px | 736px | 544px |
| No of columns | 12 | 12 | 12 |
| Gutter width | 16px (8px on each side of a column) | 16px (8px on each side of a column) | 16px (8px on each side of a column) |
| Outer gutter width | 16px each side | 16px each side | 16px each side |
Site width
The maximum width of the site is set to 100% by default, and content is controlled by the boxed grid at 1140px.
Desktop - 100%
The maximum width can be changed at site level using Style Guide Manager. For example you may wish to restrict the width of the site to 1440px, meaning that the site will be 'framed' within this and the user will see a background colour when viewed on wider screens.
Desktop - 1440
NB. Image size recommendations have been made based on a maximum site width of 2000px. Where sites are viewed on screens wider than this, images will stretch and the quality and behaviour will be affected.
Spacing
Spacing rules are used to apply consistent margins and paddings to components and control their proximity to adjacent elements on the page. Having a vertical spacing scale brings rhythm to a site and creates a consistent experience between pages and sites.
Building out a system with constraints helps to establish and enforce consistent design patterns that help to rationalise decisions about size and spacing, but ensures you have a flexible system of patterns that can be used to solve a wide variety of UI challenges.
To ensure consistency we have created a baseline spacing scale of 8px increments when designing and building components and pages. In some cases it is acceptable to use a value outside of this scale but it must be divisible by 8px.
These scales should also be applied to typography, for example line heights are created in multiples of 8px. This ensures everything lines up correctly i.e. if we use a 16px base font size and a line height that is 1.5x (24px).
Components have already been built configured to the 8px rule. Margins between elements, such as the spaces between headings and paragraphs, paddings inside cards, or the spaces in between, also adhere to this rule.
The default spacing can be set at a brand level using the Style Guide Manager.
Section spacing
See example values below
| Desktop | Tablet | Mobile | |
|---|---|---|---|
| Large | 80px | 64px | 48px |
| Medium | 64px | 48px | 40px |
| Small | 32px | 32px | 32px |