Skip to main content
Search

Highlight block V2

What is a highlight block?

A highlight block allows us to display a single quote, stat or statement within any page. It's useful to break up longer pages or feature a key figure, stat or highlighted piece of content.

Highlight block content should always be standalone and should not rely on other content for context or explanation.

 

Related

View all blocks

Anatomy

Highlight block text

Highlight block text example

Highlight block simple fact: text only

Highlight block text only example

Highlight block quote

Highlight block quote example

Highlight block profile

Highlight block profile example

Specification

  • Style: fact/quote/statement (required)
  • Text: can be in body copy or header style (required)
  • Statistic (Required when using the fact style)
  • Label 1 (optional)
  • Label 2 (optional)
  • Label 3 (optional)

Usage guidelines

Do's

  • Highlight blocks are used for facts, quotes or statements only
  • The labels are text fields that allows for a mixture of citation style content such as name, title, company, age, evidence, research references etc.
  • Aim for one highlight block per page - too many of these blocks especially when using multiple colours can diminish the impact
  • Label text should be used to provide citations for the highlight block

Dont's

  • Should not be used for large amounts of content – straplines, short sentences and quotes only
  • When using the chart, the number cannot go above 100%
  • When using in a card holder do not use the strong background

Behaviour

  • No rollover state
  • No clickable elements
  • Highlight block always spans the full width of the page

Examples

Heading (optional)
Icon quote with Primary border colour: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis sit amet neque sed lobortis. Integer iaculis elit at tincidunt ornare.
Label text 1 (optional) Label text 2 (optional) Label text 3 (optional)
Heading (optional)
Profile quote: image of spokesperson with Turquoise border colour. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis sit amet neque sed lobortis. Integer iaculis elit at tincidunt ornare.
Label text 1 (optional) Label text 2 (optional) Label text 3 (optional)
Heading (optional)
Simple fact: text only version with Coral border colour. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis sit amet neque sed lobortis. Integer iaculis elit at tincidunt ornare.
Label text 1 (optional) Label text 2 (optional) Label text 3 (optional)