Skip to main content
Search

Highlight block

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 fact

highlight-block-number.svg

Highlight block quote

highlight-block-quote.svg

Highlight block statement

highlight-block-statement.svg

Specification

  • Highight type: fact/quote/statement (required)
  • Highight content: short sentence or quote, not designed for paragraphs of text (required)
  • Label text: max of 3 items (optional)
  • Label text should be used for name or organisation quote/stat is attributed too

Usage guidelines

Do's

  • Highlight blocks are used for facts, quotes or statements
  • Quotes are styled with a left aligned quotation mark
  • Facts are styled as large left aligned number with an additional fact number
  • Highlight block can be used on all pages
  • Optional labels -  Three free text format fields allows for a mixture of content such as name, title, company, age, evidence, research reference etc.
  • Highlight block spans full width depending on template display ratio (70% left aligned or 60% centralised depending on template type selected)
  • Aim for one highlight block per page - too many highlights can diminish the impact

Dont's

  • Highlight block does not contain images
  • Highlight block is not functional and should not contain links
  • Should not be used for multiple lines of content - straplines and short sentences only
  • Should not be added to a card container
  • No ability to change the background colour

Behaviour

  • No rollover state
  • No clickable elements
  • Label text(s) within the card is optional
  • Highlight block always spans the full width off the page

Example highlight blocks

Quote version. The quote that needs to be highlighted goes here.
Label text 1 - i.e. Name Label text 2 - i.e. job title Label text 3 - i.e. company
100%
Fact version. Text expanding on the highlighted fact goes here.
Label text 1 (optional) Label text 2 (optional) Label text 3 (optional)
Statement version. The statement text goes here.
Label text 1 (optional) Label text 2 (optional) Label text 3 (optional)