Pattern Library Notes

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:

Pattern Section: Grids

A more abstract pattern type, grids are the foundation of the site: felt, but not seen.


The foundation of the grid, mostly an archetype that’s only occasionally used on its own.

Toggle pattern display width

Front container

A version of the container that constrains its content to a width used in non-app pages (i.e. on all pages of the marketing, blog, and documentation sites). Often nested within components for those pages.

Toggle pattern display width


The contents of our grid! Must be within a .container (as shown) to function properly. (Defaults to single column on small displays.)

Toggle pattern display width

Centred text column

A centred column, with a max-width to constrain its text. Of note here is that we don’t use a .container, rather a .body-content, as the wrapper.

Toggle pattern display width