Return to Sky UI homepage

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. 1
  2. 2

  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

CenteredRight
Text Label
Text Label