Skip to main content

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. 

 

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

Examples of use

Full width example quote + label text x 3

Centred article statistic + content (no labels)

Centred article statement