Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Layout

Updated in October 2026

Use layout grids and standard spacing units to structure content and keep digital services consistent across screen sizes.

When to use layout and spacing

Use layout and spacing to create clear, consistent page structures across responsive services, including desktop, mobile and clinical systems.

It helps users understand and scan information quickly, identify relationships between content and navigate services across different screen sizes.

When not to use standard page layouts

Do not use standard page layouts when content requires a specialised or immersive experience.

This can include:

  • full-screen data dashboards
  • interactive workspaces or canvas-based tools
  • third-party embedded applications

In these cases, adapt the layout to support the user need while maintaining accessibility and usability principles.

How to use layout and spacing

Use the layout grid and spacing scale consistently across your service. Consistent layout patterns help create predictable experiences and establish a clear visual hierarchy.

You should:

  • use responsive layouts that adapt to different screen sizes
  • follow the grid system for page structure and content placement
  • use consistent spacing between related content and components
  • maintain appropriate line lengths for readability
  • keep layouts simple and focused on user needs

Screen sizes and breakpoints

Design layouts to work across a range of screen sizes.

Screen size and responsive breakpoints:

  • Mobile: 320px and above
  • Tablet: 641px and above
  • Desktop: 769px and above
  • Large Desktop: 990px and above

Grid system

Full-width layout

Use a full-width layout for content-heavy pages and services that require maximum screen space.

You should:

  • use 40px padding on the left and right of the main page container
  • use 32px padding at the top and bottom of content areas
  • maintain a 40px gap between major page sections, such as navigation, headings and primary content
Open this example in a new tab

One-half width layout

Use a one-half width layout when content is shorter or line length needs to be constrained for readability. On smaller screens, columns should automatically stack into a single-column layout.

You should:

  • use 40px outer padding
  • maintain a 40px gap between columns
  • use standard 32px vertical padding and 40px section spacing
Open this example in a new tab

Patient header layout

Use the patient header layout where patient information needs to remain visible and clearly separated from page content.

You should:

  • use 16px side margins and grid gutters
  • apply 16px internal padding within the patient summary area
  • leave 32px spacing between the patient header and page content
Open this example in a new tab

Mobile layout

Keep mobile layouts to a single column to ensure content adapts cleanly across smaller viewports.

You should:

  • apply 16px side margins across mobile viewports
  • leave 24px space above the back link or primary page title
  • use 16px spacing between headings and supporting content
  • use 4px spacing between labels and form controls
  • separate form controls with 16px vertical spacing
  • leave 32px to 40px spacing between content sections
  • for container components like cards, use 16px internal padding with an 8px gap between titles and body details
Open this example in a new tab

Accessibility

Make sure page layouts, grids and content structures are accessible to all users.

Source

Learn more about Layout in the NHS Digital Service Manual and Spacing in the GOV.UK Design System.

Follow discussions about Layout on NHS Digital Service Manual Github to see the latest updates and resolved issues.

Back to top