Skip to main navigationSkip to main content
Return to Sky UI homepage

Highlight - Usage

View on FigmaView on GitHub

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.

24 monthly payments
£XX a month
Popular
48 monthly payments
£XX a month
Pay upfront
£XX once
The Highlight is not intended to be used to show the status of the card.
24 monthly payments
£XX a month
Selected
48 monthly payments
£XX a month
Pay upfront
£XX once
The Highlight is used for callouts, not as a status indicator.

Copy

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

First month free

Title of product

Content area for additional card details.
from £XX a month
for 18 months
Keep Highlight content concise and specific.
Highlight content should never run over more than one line.

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.

Text Label
Product nameA brief description of product/s and/or deal details.
Text Label
Product nameA brief description of product/s and/or deal details.

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.

Text Label

Title of product

Content area for additional card details.
from £XX a month
for 18 months
Text Label

Title of product

Content area for additional card details.
from £XX a month
for 18 months

Colour Usage

Don’t change the default colour.

24 monthly payments
£XX a month
Popular
48 monthly payments
£XX a month
Pay upfront
£XX once
Primary-blue is reserved for interactive elements. It could be confused with a CTA when used in a Highlight.
Save £40
Apple iPhone 16 Pro Max5G ready
from £37 a month
Buds3 Pro included
Samsung Galaxy S25 5G with Galaxy AI5G ready
from £30 a month
Other colours might not be accessible for the small text size used in the Highlight.

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.

Text Label

Title of product

Content area for additional card details.
from £XX a month
for 18 months
Text Label

Title of product

Content area for additional card details.
from £XX a month
for 18 months

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.