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 HS2 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 .hs2-width-container for a container with a maximum width of 960px.

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

Fluid container

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

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

Main content

The second wrapper is a main element with the class .hs2-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.

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

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

Grid system

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

Full width

<div class="hs2-grid-row">
  <div class="hs2-grid-column-full">
    <p>hs2-grid-column-full</p>
  </div>
</div>

One-half

<div class="hs2-grid-row">
  <div class="hs2-grid-column-one-half">
    <p>hs2-grid-column-one-half</p>
  </div>
</div>

Two-thirds

<div class="hs2-grid-row">
  <div class="hs2-grid-column-two-thirds">
    <p>hs2-grid-column-two-thirds</p>
  </div>
</div>

One-third

<div class="hs2-grid-row">
  <div class="hs2-grid-column-one-third">
    <p>hs2-grid-column-one-third</p>
  </div>
</div>

Three-quarters

<div class="hs2-grid-row">
  <div class="hs2-grid-column-three-quarters">
    <p>hs2-grid-column-three-quarters</p>
  </div>
</div>

One-quarter

<div class="hs2-grid-row">
  <div class="hs2-grid-column-one-quarter">
    <p>hs2-grid-column-one-quarter</p>
  </div>
</div>

Nested grids

<div class="hs2-grid-row">
  <div class="hs2-grid-column-two-thirds">
    <p>hs2-grid-column-two-thirds</p>
    <div class="hs2-grid-row">
      <div class="hs2-grid-column-one-half">
        <p>hs2-grid-column-one-half</p>
      </div>
      <div class="hs2-grid-column-one-half">
        <p>hs2-grid-column-one-half</p>
      </div>
    </div>
  </div>
</div>

Common layouts

Two-thirds in a fixed-width container

<div class="hs2-width-container">
  <main class="hs2-main-wrapper" id="maincontent" role="main">
    <div class="hs2-grid-row">
      <div class="hs2-grid-column-two-thirds">
        <h2>Two-thirds column</h2>
      </div>
    </div>
  </main>
</div>

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

<div class="hs2-width-container-fluid">
  <main class="hs2-main-wrapper" id="maincontent" role="main">
    <div class="hs2-grid-row">
      <div class="hs2-grid-column-one-third">
        <h2>One-third column</h2>
      </div>
      <div class="hs2-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 .hs2-u-reading-width to apply a maximum width and limit the number of characters per line.

<div class="hs2-grid-row">
  <div class="hs2-grid-column-full">
    <div class="hs2-u-reading-width">
      <p>This is example content which would exceed 70-80 characters per line, if used within a full width column. The .hs2-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 .hs2-u- followed by the width to an existing grid column, for example .hs2-u-one-half will set your column width to be one-half on all screen sizes.

<div class="hs2-grid-row">
  <div class="hs2-grid-column-one-half hs2-u-one-half">
    <p>hs2-grid-column-one-half hs2-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 .hs2-u- followed by the width and the suffix -tablet to an existing grid column. For example, .hs2-u-one-third-tablet will set your column width to be one-third on screen sizes tablet and above.

<div class="hs2-grid-row">
  <div class="hs2-grid-column-one-third hs2-u-one-third-tablet">
    <p>hs2-grid-column-one-third hs2-u-one-third-tablet</p>
  </div>
</div>