---
title: "Highlight — Usage"
canonical: https://sky-ui.cf.sky.com/components/highlight/usage
---

# Highlight — Usage

Highlight is a callout used to draw attention to a particular detail.

## Basic Guidelines

The Highlight draws attention to a key detail of the product (e.g. "Offer ends today"), rather than a generic message with no additional context (e.g. "Sky Cinema").

The Highlight should be used sparingly - only on one card within a group to make it stand out.

### Copy

Keep the message within the Highlight short and simple, with a maximum of 20 characters on one line of text.

## Alignment

### Centre-aligned

It’s recommended to use the centre-aligned Highlight variant when the content of the card is also centre-aligned. The component frame is set up so that the Highlight can simply be centre aligned without the ‘Curl’ width being included. The Highlight should overhang 4px from the top edge of the Card it’s nested within.

### Right-aligned

It’s recommended to use the right-aligned Highlight variant when the content of the card is aligned to the left. The Highlight component should overhang 8px from the top edge and 4px from the right edge of the card.

## Colour Usage

### Don’t change the default colour.

## Image Sizing

Adjust the artwork where possible to ensure the Highlight component is not sat over a persons face or blocking important features of the media asset inside a card.

## Notes on Accessibility

The minimum required contrast ratio to hit the AA standard for elements with small text is 4.5.

Contrast ratio 4.91:1

Measured using the “Stark — Contrast and Accessibility Checker” plugin.