Headline Price - Usage

Basic Guidelines

The Headline Price component is always static, as it’s typically used within a card that already has actions associated to it.

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

Content Guidance

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 Headline 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.

Discount Disclaimer

Discount Disclaimer is imperative whenever a discount is present on a product. This is because legal context needs to be shown to the user. It should be concise and straight to the point.

Discount Disclaimer accepts markdown content.

Alignment

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

Colour Usage

By default, discounted prices are Attention-Dark (orange), and non-discounted prices are text-grey. Keeping the default colours and styles will avoid unnecessary variations and keep price information clear and consistent throughout the website.

Even though it’s possible to change the colour of the Headline Price, we do not recommend it. The price is a very important information and should be legible at a glance. Gradients especially can make this difficult.

According to the master brand guidelines the spectrum gradient is not to be used for prices.

Notes on Accessibility

There is a set structure of how screen readers read through the Headline 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.