Standard page with hero image
Summary below the hero section is optional. Ideally, it should not be used if there is a summary in the hero.
Landing page main heading
Summary sentence in the hero section is optional. Ideally, it should not be used if there is a summary below the hero.
Photo credit: Optional attribution
Summary below the hero section is optional. Ideally, it should not be used if there is a summary in the hero.
Section background colours
Each section of content on the page should have a different coloured background to differentiate it. The choice of colours on the website is a little more flexible than what is stated in the brand guidelines. Make sure that:
- call to action and testimonial blocks use dark coloured backgrounds
- all other content uses a white, pastel or muted coloured background
- the most important information on the page should use a white background
- sections alternate between the five different hues (columns in guidelines). Repeating or placing similar hues next to each other should be avoided
- the off-white colour is ideally reserved for the summary section at the top of the page under the hero section and the related content section at the bottom of the page.
Section content
Each section of content on the page can contain the blocks shown on the standard page, such as:
- accordions – default, numbered, person and summary
- headings and paragraphs
- images and captions
- inset text
- links – action and download
- lists – bulleted, numbered and icon
- the one-column content card
- the small call to action
- videos and transcripts.
Pictogram list
A pictogram list can be used to illustrate a set of key points. You can include a short paragraph as an introduction to your list.
Accordions
You can also use a summary accordion, which includes an introductory sentence before the hidden content.
Summary accordion closed
Summary accordions are used when an introductory sentence is needed.
Signposting cards to child pages
This section is to be used to summarise the pages that sit under this landing page. This is an optional introductory sentence.
Photo credit: Optional attribution
Large call to action
A large eye-catching block used to encourage users to perform an action, such as moving to another piece of content or getting in touch. The large CTA should only be used once per page to make the desired action clear to users.
‘Testimonials are large quotations with unique text not repeated from the main content. They are attributed to a source and can include an optional action link.’
Testimonial source
‘Testimonial with action link’
Testimonial source
Statement block with image
The statement block is reserved for impactful content. It is best kept concise, under 300 characters, and used sparingly, except for the About page. It can be used with or without an image.
Photo credit: Optional attribution
Statement block without image
The statement block is reserved for impactful content. It is best kept concise, under 300 characters, and used sparingly, except for the About page. It can be used with or without an image.