Price - Usage

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.

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.

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.

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 Accessiblity

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.