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

Price - Usage

View on FigmaView on GitHub
Price component example

Basic Guidelines

The Price component is always static. It’s most often used within a card that already has actions associated to it, for example in Product Card.

Please note: All pricing examples are fictional and do not reflect any true Sky prices.

Content Guidelines

All of the copy elements have default content pre-populated. These are all recommendations for use, and can be changed entirely if needed.

Suffix

By default the content in the suffix is “a month” to give more context to the price. This can be altered as needed, but please do not change it to “/month”. This is to ensure we have consistent pricing details across all of Sky. We want to avoid any negative effects on the experience of users using a screenreader, and make it easier and clearer for users to quickly read and understand.

from £40 a month

This will be read as "from 40£ a month"

from £40 /month

This will be read as "from 40£ slash month"

Please have a look in the Accessibility Notes at the bottom of the page for more examples.

Disclaimer

Disclaimer content can be turned on for all variants of the Price component. It can be used for further clarification on a price, for example if the price is a limited time offer or increases after a certain amount of time.

Disclaimer content should be concise and to the point, to help users navigate and decide upon price options. They shouldn’t be used to large amount of content not relevant to the price itself.

Disclaimer accepts markdown content.

from £40 a month
Prices may change during 24 month contract.
from £40 /month
Never waste time searching between your favourite apps. Netflix, Disney+, BBC iPlayer, discovery+, Spotify… they’re all in one place. Handy

Alignment

Price should always be aligned with the rest of the copy within the container.

Colour Usage

By default, small discounted prices are Attention-Dark (orange), and non-discounted prices are text-grey. Previously, small discounted prices were Attention-Regular, however this did not reach the contrast ratio needed for legal accessibility requirements.

was: £45 a month, Based on the price that an existing customer pays when their 24 month min term ends. now: £40 a month
New Price using Attention-Dark
Old, non-accessible Price using Attention-Regular.

You should not change the colour of the Price component, especially to Sky Spectrum gradient (this is explicitly cited in the Master brand guidelines).

The price is a very important information and should be clear and legible to all users. Gradients especially can make this difficult and are therefore not supported in the React component, even if you do change it in Figma. Offer prices currently stand out because of the difference in colour. If gradients are used, offer prices lose their prominence. Keeping the default colours will avoid unnecessary variations and keep price information clear and consistent throughout the website.

Notes on Accessibility

There is a set structure of how screen readers read through the Price component, to make prices as easy to understand as possible. Please keep this in mind when updating the text in prefix, suffix and disclaimer.

Visual PricePrice read out by screen readers
from £24.50 a month
Prices may change during 24 month contract.
From 24 pounds point 50 a month.
Prices may change during 24 month contract.
was: £35.50 a month for 3 months, Based on the price that an existing customer pays when their 24 month min term ends. now: £27.50 a month for 3 months
Was 35 pounds point 50 a month for three months. Based on the price that an existing customer pays when their 24 month min term ends. Now 27 pounds point 50 a month for three months.
was: £35.50 a month, Based on the price that an existing customer pays when their 24 month min term ends. now: £27.50 a month plus £10 upfront,
36-month interest free credit agreement. £928 total cost. Subject to status.
Was 35 pounds point 50 a month. Based on the price that an existing customer pays when their 24 month min term ends. Now 25 pounds point 50 a month. Plus 10 pounds upfront cost. 36-month interest free credit agreement. 928 pounds total cost. Subject to status.