Screen sizes
Design for small screens first, starting with a single-column layout.
For most types of page, we recommend using either a ‘two-thirds’ or a ‘two-thirds and one third layout’. That stops lines of text getting so long that the page becomes difficult to read on desktop devices. This would usually mean no more than 75 characters per line.
Never make assumptions about what devices people are using. Design for different screen sizes rather than specific devices.
The default maximum page width is 1020px.
Page wrappers
Limit the page width
To set up your layout you will need to create 2 wrappers. The first should have the class width-container, which sets the maximum width of the content but does not add any vertical margin or padding.
If your design requires them, you should place components such as breadcrumbs or back link inside this wrapper so that they sit directly underneath the header.
Add vertical space
Within width-container you should add the main-wrapper class to your <main> element. This adds responsive padding to the top and bottom of the page and will be the container for your main content.
If you’re not using the breadcrumbs, back link or phase banner components in your design, add the correct amount of vertical padding above the content by adding one of the following to your <main> element:
- the
main-wrapper--auto-spacingclass - the
main-wrapper--lgclass - ifmain-wrapper--auto-spacingdoes not work for your service
HTML code
<div class="width-container">
<a href="#" class="back-link">Back</a>
<main class="main-wrapper">
<!-- content goes here -->
</main>
</div>Grid system
Use the grid system to lay out the content on all pages.
Most pages follow a two-thirds to one-third layout but the grid system allows for a number of additional combinations when necessary.
Your main content should always be in a two-thirds column even if you’re not using a corresponding one-third column for secondary content.
Using the grid system
The grid is structured with a grid-row wrapper which acts as a row to contain your grid columns.
You can add columns inside this wrapper to create your layout. To define your columns add the class beginning with grid-column- to a new container followed by the width, for example grid-column-one-third to apply your desired width.
It is possible to nest grids.
The available grid column sizes are:
grid-column-fullgrid-column-one-quartergrid-column-one-thirdgrid-column-one-halfgrid-column-two-thirdsgrid-column-three-quarters