7x5
The standard grid layout used across the site for text and images.
Breakdown
Fixed width
7x5 uses our standard grid of 12 but places an empty column between content to help content have more room to breath.
h2 - Heading example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac euismod eros. Vestibulum porta eleifend nisi, nec ultrices odio tempor vel. Nulla nisi metus, mattis et interdum vel, dignissim ut mauris. Aenean convallis sem nisi, non placerat metus porta et.
h3 - Heading example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac euismod eros. Vestibulum porta eleifend nisi, nec ultrices odio tempor vel. Nulla nisi metus, mattis et interdum vel, dignissim ut mauris. Aenean convallis sem nisi, non placerat metus porta et.
Full width
A full width variant of the 7x5 composition that can sit on different background colours.
h2 - Heading example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac euismod eros. Vestibulum porta eleifend nisi, nec ultrices odio tempor vel. Nulla nisi metus, mattis et interdum vel, dignissim ut mauris. Aenean convallis sem nisi, non placerat metus porta et.
h3 - Heading example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac euismod eros. Vestibulum porta eleifend nisi, nec ultrices odio tempor vel. Nulla nisi metus, mattis et interdum vel, dignissim ut mauris. Aenean convallis sem nisi, non placerat metus porta et.
Usage
Grid
7x5 uses 11 of the 12 columns of the grid for content. The remaining column is left empty to create space for the content to breath. This is the standard content layout.
Flexible
The empty column can be moved to either increase or decrease the width of the content either side of it. This is used when there is a small amount of content and large image.
Images
When you need to display an image side by side, you do not leave a column empty. Instead use all six columns and have only the gutter as the space between them.
