Back to the pattern library

Page layout

We use a grid to structure our designs. Just like the typography and vertical spacing we use, our grid allows the creation of a consistent horizontal space.

Our grid has 12 columns that can be used in various combinations. It has gutters of 32px above 768px and 16px below 768px. We recommend its use because it has been designed to suit our typographic scale.

More detailed information on how to use our grid can be found in our design guidance.

Example

Example

HTML

<div class="coop-l-row">
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="ds-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
    <div class="coop-l-column coop-l-xsmall-12 coop-l-small-6 coop-l-medium-3 coop-l-large-2 coop-l-xlarge-1">
        <span class="demo-coop-l-column-block"></span>
    </div>
</div>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

The default widths (breakpoints) we use are:

  • All: 0px and up — (all-{column-span})
  • Extra small: 320px and up — (.xsmall-{column-span})
  • Small: 480px and up — ((.small-{column-span})
  • Medium: 750px and up — ((.medium-{column-span})
  • Large: 960px and up — ((.large-{column-span})
  • Extra large: 1300px and up — ((.xlarge-{column-span})

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change