3 Layout

Layout components and grid systems.

3.1 24 column grid View in a new window

The 24 column grid is used across the site and is the primary grid system. It features a maximum container width of 1320px and no gutter. The container padding is 6% of the viewport width to create an even margin at either side of the container on all devices.

Twig: layout/24-col-grid/24-col-grid.twig

Example
Markup 
<div class="grid__container grid--debug">
  <div class="grid__row">
    <div class="grid__col"></div>
  </div>
</div>

3.2 Footer grid View in a new window

24 column grid, with nested columns.

Twig: layout/footer-grid/footer-grid.twig

Example
Markup 
<div class="footer-grid__container grid--debug">
  <div class="footer-grid__row">
    <div class="footer-grid__col footer-grid--col-4">
      <div class="footer-grid__row">
        <div class="footer-grid__col footer-grid--col-1"></div>
        <div class="footer-grid__col footer-grid--col-1"></div>
        <div class="footer-grid__col footer-grid--col-1"></div>
        <div class="footer-grid__col footer-grid--col-1"></div>
      </div>
    </div>
    <div class="footer-grid__col footer-grid--col-2"></div>
  </div>
</div>

3.3 Sidebar grids View in a new window

A variety of sidebar grids used for each sidebar type.

3.3.1 Sidebar grid A View in a new window

A simple two column grid, one 1/3 width as a sidebar, the other 2/3 widths as a main. The sidebar appears first in the markup order.

Twig: layout/sidebar-grid/sidebar-grid-a.twig

Example
Markup 
<div class="sidebar-grid sidebar-grid--a grid--debug">
  <div class="sidebar-grid__row">
    <aside class="sidebar-grid__sidebar">
    </aside>
    <main class="sidebar-grid__main">
    </main>
  </div>
</div>

3.3.2 Sidebar grid B View in a new window

Sidebar B uses the same grid as Sidebar A, however the sidebar is offset.

Twig: layout/sidebar-grid/sidebar-grid-b.twig

Example
Markup 
<div class="sidebar-grid sidebar-grid--b grid--debug">
  <div class="sidebar-grid__row">
    <aside class="sidebar-grid__sidebar">
      <div class="sidebar-grid__offset"></div>
    </aside>
    <main class="sidebar-grid__main">
    </main>
  </div>
</div>

3.3.3 Sidebar grid C View in a new window

A reversed layout with slightly tweaked column widths. At tablet portrait and below the column widths will tweak to allow more size for the sidebar.

Twig: layout/sidebar-grid/sidebar-grid-c.twig

Example
Markup 
<div class="sidebar-grid sidebar-grid--c grid--debug">
  <div class="sidebar-grid__row">
    <main class="sidebar-grid__main">
    </main>
    <aside class="sidebar-grid__sidebar">
    </aside>
  </div>
</div>

3.3.4 Sidebar grid D View in a new window

A reversed layout with a smaller sidebar than Sidebar C. Because the sidebar is smaller, this layout will stack at tablet portrait and below.

Twig: layout/sidebar-grid/sidebar-grid-d.twig

Example
Markup 
<div class="sidebar-grid sidebar-grid--d grid--debug">
  <div class="sidebar-grid__row">
    <main class="sidebar-grid__main">
    </main>
    <aside class="sidebar-grid__sidebar">
    </aside>
  </div>
</div>

3.3.5 Sidebar grid E View in a new window

The same column widths as Sidebar C, with the sidebar appearing in the markup first, so on mobile it is above the main column.

Twig: layout/sidebar-grid/sidebar-grid-e.twig

Example
Markup 
<div class="sidebar-grid sidebar-grid--e grid--debug">
  <div class="sidebar-grid__row">
    <aside class="sidebar-grid__sidebar">
    </aside>
    <main class="sidebar-grid__main">
    </main>
  </div>
</div>

3.3.6 Sidebar grid F View in a new window

The same column widths as Sidebar C, with the sidebar appearing in the markup first, so on mobile it is above the main column.

Twig: layout/sidebar-grid/sidebar-grid-f.twig

Example
Markup 
<div class="sidebar-grid sidebar-grid--f">
  <div class="sidebar-grid__row">
    <aside class="sidebar-grid__sidebar">
    </aside>
    <main class="sidebar-grid__main">
    </main>
  </div>
</div>

3.3.7 Sidebar grid G View in a new window

Sidebar G uses the same grid as Sidebar B, however the sidebar offset is reduced and suitable for the smaller banner aspect ratio

Twig: layout/sidebar-grid/sidebar-grid-g.twig

Example
Markup 
<div class="sidebar-grid sidebar-grid--g grid--debug">
  <div class="sidebar-grid__row">
    <aside class="sidebar-grid__sidebar">
      <div class="sidebar-grid__offset"></div>
    </aside>
    <main class="sidebar-grid__main">
    </main>
  </div>
</div>

3.3.8 Sidebar grid H View in a new window

A simple two column grid, one 1/3 width as a sidebar, the other 2/3 widths as a main. The main appears first in the markup order.

Twig: layout/sidebar-grid/sidebar-grid-h.twig

Example
Markup 
<div class="sidebar-grid sidebar-grid--h grid--debug">
  <div class="sidebar-grid__row">
    <main class="sidebar-grid__main">
    </main>
    <aside class="sidebar-grid__sidebar">
    </aside>
  </div>
</div>

3.4 Flex tiles View in a new window

Equal height flexbox tile grids, in x2 and x3.

3.4.1 x3 View in a new window

Three tile wide grid.

Twig: layout/flex-tile/flex-tile-3x.twig

Example
1
2
3
4
5
6
7
8
9
10
11
Markup 
{% set classes = classes|default(['flex-tile', 'flex-tile--3x']) %}

<div class="grid__container">
  <div {{ attributes|join(' ') }} class="{{ classes|join(' ') }}">
    {% block content %}
      <div class="flex-tile__item flex-tile--push-1x">
        <div class="flex-tile__inner">1</div>
      </div>
      <div class="flex-tile__item">
        <div class="flex-tile__inner">2</div>
      </div>
      <div class="flex-tile__item">
        <div class="flex-tile__inner">3</div>
      </div>
      <div class="flex-tile__item flex-tile--span-2x">
        <div class="flex-tile__inner">4</div>
      </div>
      <div class="flex-tile__item">
        <div class="flex-tile__inner">5</div>
      </div>
      <div class="flex-tile__item">
        <div class="flex-tile__inner">6</div>
      </div>
      <div class="flex-tile__item">
        <div class="flex-tile__inner">7</div>
      </div>
      <div class="flex-tile__item">
        <div class="flex-tile__inner">8</div>
      </div>
      <div class="flex-tile__item">
        <div class="flex-tile__inner">9</div>
      </div>
      <div class="flex-tile__item">
        <div class="flex-tile__inner">10</div>
      </div>
      <div class="flex-tile__item flex-tile--span-3x">
        <div class="flex-tile__inner">11</div>
      </div>
    {% endblock %}
  </div>
</div>

3.4.2 x2 View in a new window

Two tile wide grid.

Twig: layout/flex-tile/flex-tile-2x.twig

Example
1
2
3
4
5
6
7
8
Markup 
<div class="grid__container">
  <div class="flex-tile flex-tile--2x">
    <div class="flex-tile__item">
      <div class="flex-tile__inner">1</div>
    </div>
    <div class="flex-tile__item">
      <div class="flex-tile__inner">2</div>
    </div>
    <div class="flex-tile__item">
      <div class="flex-tile__inner">3</div>
    </div>
    <div class="flex-tile__item">
      <div class="flex-tile__inner">4</div>
    </div>
    <div class="flex-tile__item">
      <div class="flex-tile__inner">5</div>
    </div>
    <div class="flex-tile__item">
      <div class="flex-tile__inner">6</div>
    </div>
    <div class="flex-tile__item">
      <div class="flex-tile__inner">7</div>
    </div>
    <div class="flex-tile__item">
      <div class="flex-tile__inner">8</div>
    </div>
  </div>
</div>

3.4.3 x3 - half tiles View in a new window

Three tile wide grid with gutter.

Twig: layout/flex-tile/flex-tile-3x-half-tile.twig

Example
1
2
3
4
5
6
Markup 
{% extends 'flex-tile-3x.twig' %}

{% block content %}
  {% for i in 1..6 %}
    <div class="flex-tile__item view-mode--tile-half">
      <div class="flex-tile__inner">{{ i }}</div>
    </div>
  {% endfor %}
{% endblock %}

3.4.4 x3 - with gutter View in a new window

Three tile wide grid with gutter.

Twig: layout/flex-tile/flex-tile-3x-gutter.twig

Example
1
2
3
4
5
6
Markup 
{% extends 'flex-tile-3x.twig' %}

{% set classes = classes|merge(['flex-tile--3x__gutter']) %}

{% block content %}
  <div class="flex-tile__item">
    <div class="flex-tile__inner">1</div>
  </div>
  <div class="flex-tile__item">
    <div class="flex-tile__inner">2</div>
  </div>
  <div class="flex-tile__item">
    <div class="flex-tile__inner">3</div>
  </div>
  <div class="flex-tile__item">
    <div class="flex-tile__inner">4</div>
  </div>
  <div class="flex-tile__item">
    <div class="flex-tile__inner">5</div>
  </div>
  <div class="flex-tile__item">
    <div class="flex-tile__inner">6</div>
  </div>
{% endblock %}