Typography

Media Blocks

Illustration Style

Designed to be used with illustrations, these images don’t fill the entire canvas and should display the entire image. The image and content are vertically centered and the image appears on top on mobile. Illustrations can be placed on the left or right on larger screens.

Photo Style

Display a photo within a cutout of the device. There are two versions of this style, one with a much larger photo designed for hero sections and a smaller one taht is for within content and also has an optional device layer sitting offset over the image as well.

The large style can be placed into a coloured section, however we have commonly used a light background, rather than a coloured background at the top of pages.

Box Features

There are two implementations of the box features – one is using the posts block to feature links to posts/pages and the other is for more static content. Using the dynamic posts block will pull the page title, excerpt and automatically link the card.

Dynamic Box Features

Static Box Features

Quotes

Blog Features

These were largely designed for the home page ,or for capping off other pages, displaying supplementary content. These should show a max of 4 posts and the first displays with an image. The 4th post disappears on smaller devices to maintain readability and the grid style, which is why this style should not be used for super important content, but links to supplementary content is fine (ie, blog posts).

Inner Page Hero

These are designed to be simple, with plenty of whitespace and less focus on imagery. The page title is placed inside a coloured box and a punchier long form title can be added underneath, with a further explanation after that. These should only be used at the top of the page, as the top of the image is cut off and would overlay other blocks if used further down the page.

Icon Features

There are three different icon feature styles used throughout the project, although the most commonly used ones are the horizontal styles. Colours can be selected for the icons too, to create further visual interest.

Horizontal

The most common style for this site, allowing quick snippets of information.

Large Horizontal

This is designed to be used where we might ordinarily have an illustration, but we don’t have one specific enough, or just need something to give the page a bit more visual interest.

Vertical

Gives a bit more focus to the icon, with a pop of colour.