Layout

Use the grid system to lay out the content on your service's pages.

Most NIHR pages serving text content follow a two-thirds or two-thirds and one-third layout, where the main content is always displayed in the two-thirds column. The optional one-third column is for secondary content or navigation. This 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.

However, the Design System allows for other layouts if your type of service needs it.

The grid system

The Design System builds layouts using Bootstrap's grid system. Grids are containers that contain rows that contain columns (cells). Each cell in each row and column can be sized and positioned within the grid.

Screen size

Design for small screens first, starting with a single-column layout.

Never make assumptions about what devices people are using. Design for different screen sizes rather than specific devices.

The default maximum page width is 1440px, but you can make it wider if your content requires it.

Common Layouts

Two-thirds

open this example in its own window

Two-thirds

Lorem ipsum, dolor sit amet

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda sit praesentium ab culpa soluta, et asperiores? Autem ea quo repellendus.

<div class="container p-5">
  <div class="row">
    <div class="col-lg-8">
      <h4>Two-thirds</h4>
      <h5>Lorem ipsum, dolor sit amet</h5>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi
        veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda
        sit praesentium ab culpa soluta, et asperiores? Autem ea quo
        repellendus.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi
        veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda
        sit praesentium ab culpa soluta, et asperiores? Autem ea quo
        repellendus.
      </p>
    </div>
  </div>
</div>

Two-thirds and one-third

open this example in its own window

Two-thirds

Lorem ipsum, dolor sit amet

One-third

Lorem ipsum, dolor sit amet

<div class="container p-5">
  <div class="row">
    <div class="col-lg-8">
      <h4>Two-thirds</h4>
      <h5>Lorem ipsum, dolor sit amet</h5>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi
        veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda
        sit praesentium ab culpa soluta, et asperiores? Autem ea quo
        repellendus.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi
        veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda
        sit praesentium ab culpa soluta, et asperiores? Autem ea quo
        repellendus.
      </p>
    </div>
    <div class="col-lg-4">
      <h4>One-third</h4>
      <h5>Lorem ipsum, dolor sit amet</h5>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi
        veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda
        sit praesentium ab culpa soluta, et asperiores? Autem ea quo
        repellendus.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi
        veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda
        sit praesentium ab culpa soluta, et asperiores? Autem ea quo
        repellendus.
      </p>
    </div>
  </div>
</div>

Layout

The grid system

Screen size

Common Layouts

Two-thirds

Two-thirds

Lorem ipsum, dolor sit amet

Two-thirds and one-third

Two-thirds

Lorem ipsum, dolor sit amet

One-third

Lorem ipsum, dolor sit amet

See also