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

Headline Price - Overview

View on FigmaView on GitHub

Purpose

The Headline Price component is used to show key pricing information in a headline format. It can be used to show if there is an active discount, if a price range starts from a certain amount, or if the price is for a set time period (e.g. an amount per month).

For pricing information in a inline format please see Price.

Anatomy

The Headline Price component can be broken down into the following elements -

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10

  1. Current Price

    Main text area for the amount, not including decimals.

  2. Prefix (optional)

    Normally used for ‘from’ but can be changed if required, or turned off entirely.

  3. Currency

    Text area for the currency.

  4. Decimals (optional)

    Decimalisation can be turned off if not needed.

  5. Suffix (optional)

    Normally used for a term period, the suffix can be edited, or turned off entirely.

  6. Discount (optional)

    A discount option is available which allows the designer to enter in an old price which is struck-out.

  7. Asterisk

    An Asterisk is necessary for any discounted products and signifies that there is more information available below.

  8. Upfront Cost (optional)

    Upfront cost is used to inform the user about additional initial costs after purchasing a product.

  9. Disclaimer (optional)

    Disclaimer content 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.

  10. Discount Disclaimer

    Disclaimer content only shows for the Discount variant. It gives more context about the price before the discount.

Variants & States

Available variants differ between Figma and React. The below describes the options for the Figma component. Have a look at the React docs to see the available props in development.

  • Appearance: Default, Light
  • Stacked: on/off
  • Discount: on/off
  • Prefix: on/off
  • Decimals: on/off
  • Suffix: on/off
  • Upfront Cost: on/off
  • Disclaimer: on/off
Discount offDiscount onStacked
from £XX.XX a month
was: £XX.XX a month, Based on the price that an existing customer pays when their 24 month min term ends. now: £XX.XX a month
Inline
from £XX.XX a month
was: £XX.XX a month, Based on the price that an existing customer pays when their 24 month min term ends. now: £XX.XX a month