Skip to main content

Styles - Layout

Structure your page content and elements.

Screen size

Design for mobile first using a single-column layout and work up to wider layouts. Most visitors to the NHS website are on a mobile device, so it's our first consideration.

The default maximum page width is 960px, but you can make it wider if your content requires it. But lines of text content should be no longer than 70 to 80 characters so that it's easy to read.

Responsive breakpoints

  • mobile: 320px
  • tablet: 641px
  • desktop: 769px
  • large desktop: 990px

Containers

To set up your layout, you will need to create 2 wrappers. The first wrapper is a container which sets the maximum width of the content but does not add any vertical margin or padding.

You can choose from a fixed-width container (960px) or a fluid-width container (which spans the entire width of the viewport).

Container

Use .nhsuk-width-container for a container with a maximum width of 960px.

Copy
<div class="nhsuk-width-container">
  <!-- Main content wrapper here -->
</div>

Fluid container

Use .nhsuk-width-container-fluid for a full width container, spanning the entire width of the viewport.

Copy
<div class="nhsuk-width-container-fluid">
  <!-- Main content wrapper here -->
</div>

Main content

The second wrapper is a main element with the class .nhsuk-main-wrapper, which gives responsive padding to the top and bottom of the page and will be the wrapper for the main content of the page.

There should be only one main element and it should have a unique id of maincontent, which allows keyboard-only users to skip to the main content on a page with the skip link component.

Copy
<div class="nhsuk-width-container">
  <main class="nhsuk-main-wrapper" id="maincontent">
    <!-- Grid row wrapper here -->
  </main>
</div>

The vertical padding can be made larger or smaller by using the modifier classes .nhsuk-main-wrapper--l or .nhsuk-main-wrapper--s. We recommend using smaller vertical padding on transactional services.

Grid system

The grid is structured with a .nhsuk-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 .nhsuk-grid-column- to a new container followed by the width, for example .nhsuk-grid-column-one-third, to make it the width you want.

Full width

Open this layout full width example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <p>nhsuk-grid-column-full</p>
  </div>
</div>

One-half

Open this layout one half example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-one-half">
    <p>nhsuk-grid-column-one-half</p>
  </div>
</div>

Two-thirds

Open this layout two thirds example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <p>nhsuk-grid-column-two-thirds</p>
  </div>
</div>

One-third

Open this layout one third example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-one-third">
    <p>nhsuk-grid-column-one-third</p>
  </div>
</div>

Three-quarters

Open this layout three quarters example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-three-quarters">
    <p>nhsuk-grid-column-three-quarters</p>
  </div>
</div>

One-quarter

Open this layout one quarter example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-one-quarter">
    <p>nhsuk-grid-column-one-quarter</p>
  </div>
</div>

Nested grids

Open this layout nested example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <p>nhsuk-grid-column-two-thirds</p>
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-one-half">
        <p>nhsuk-grid-column-one-half</p>
      </div>
      <div class="nhsuk-grid-column-one-half">
        <p>nhsuk-grid-column-one-half</p>
      </div>
    </div>
  </div>
</div>

Common layouts

Two-thirds in a fixed-width container

Open this layout two thirds container example in new window
Copy
<div class="nhsuk-width-container">
  <main class="nhsuk-main-wrapper" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">
        <h2>Two-thirds column</h2>
      </div>
    </div>
  </main>
</div>

One-third / two-thirds in a fluid-width container

Open this layout one third container fluid example in new window
Copy
<div class="nhsuk-width-container-fluid">
  <main class="nhsuk-main-wrapper" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-one-third">
        <h2>One-third column</h2>
      </div>
      <div class="nhsuk-grid-column-two-thirds">
        <h2>Two-thirds column</h2>
      </div>
    </div>
  </main>
</div>

Layout utility classes

Reading width

To make it easy to read, lines of text should be no longer than 70 to 80 characters.

When using the fluid-width container or wider grid columns, wrap text content with .nhsuk-u-reading-width to apply a maximum width and limit the number of characters per line.

Open this layout reading width example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-full">
    <div class="nhsuk-u-reading-width">
      <p>This is example content which would exceed 70-80 characters per line, if used within a full width column. The .nhsuk-u-reading-width utility class will apply a maximum width and limit the number of characters per line.</p>
    </div>
  </div>
</div>

Tablet and mobile specific grid classes

By default, grid columns sizes will go to 100% width of the container on screen sizes below the desktop breakpoint (769px). These utility classes will enforce column widths on all screen sizes.

To define your column sizes, add the utility class .nhsuk-u- followed by the width to an existing grid column, for example .nhsuk-u-one-half will set your column width to be one-half on all screen sizes.

Open this layout grid tablet mobile example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-one-half nhsuk-u-one-half">
    <p>nhsuk-grid-column-one-half nhsuk-u-one-half</p>
  </div>
</div>

Tablet specific grid classes

These utility classes will enforce column widths on screen sizes above the mobile breakpoint (320px).

To define your column sizes, add the utility class .nhsuk-u- followed by the width and the suffix -tablet to an existing grid column. For example, .nhsuk-u-one-third-tablet will set your column width to be one-third on screen sizes tablet and above.

Open this layout grid tablet example in new window
Copy
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-one-third nhsuk-u-one-third-tablet">
    <p>nhsuk-grid-column-one-third nhsuk-u-one-third-tablet</p>
  </div>
</div>

Help improve this page

The manual is a community effort. Anyone can help improve and grow it.

To help make sure the Layout guidance is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the NHS digital service manual or want to feedback, you can contact the team:

Help improve the service manual

We’d welcome your feedback. Can you answer some questions about your visit today?

Updated: February 2019