Highlight

Overview

View on FigmaView on GitHub

Purpose

The Highlight is used to draw attention to a card, to call out a key detail of the product. They should be used sparingly across a page in order to have the most impact.

Anatomy

The Highlight component can be broken down into the following elements -

  1. Container
    The stylised 'sash' container provides a background wrapper for the text label.

  2. Text Label
    The label is used to convey messaging to the user.

Variants & States

  • Alignment: Centred, Right
  • Colour options: Default, TV, Mobile, Broadband, Glass