Layout

Screen size

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, but you can make it wider if your content requires it.

Note: In some cases the height of the content is smaller than the height of the viewport especially in desktop screens. As a result, the footer of the page will stick to the middle of the screen which is not ideal for the user experience. To fix that, you can use the .govgr-layout-wrapper__full-height CSS utility class combined with .govgr-layout-wrapper.

Common layouts

Two-thirds

Open this example in a new tab

Two-thirds / one-third

Open this example in a new tab

Multiple rows layout

Row 1: Two-thirds

Row 2: Two-thirds / one-third

Open this example in a new tab