Layout Content

Our layout is split into rows. Rows are full width and serve to segment the hierarchy of the page. Any application code you write will be rendered within the main content row (.row--content) and below row--secondary.

All rows have a child of .row__inner. This inner container surrounds the content and positions it within the row. On wide screens this means it becomes centrally aligned with a set max width. On smaller screens it sometimes provides some padding on either side, other times it doesn't have any applied rules. Variance is applied using modifier classes e.g. .row__inner--secondary.

.row--cookie-compliance

Only shown to users from the EU and only shown on the first visit.

.row--accessibility

Only visible to Screen Readers.

.row--primary

Houses the primary nav, search and user nav.

.row--leaderboard

The primary advertising row.

.row--secondary

Houses the Page Title and Secondary Nav.

.row--content

This is where your application code is rendered.

.row--leaderboard

The optional secondary advertising row.

.row--sitemap

Footer Row - Site Links.

.row--footer--about

Footer Row - Company Links.

.row--smallprint

Footer Row - Copyright and Legal Text