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

Price - Overview

View on FigmaView on GitHub

Purpose

The Price component is used to show key pricing information in an inline 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 headline format please see Headline Price.

Anatomy

The 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

  1. Prefix (optional)

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

  2. Current Price

    Main text area for the amount including decimals.

  3. Suffix (optional)

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

  4. Upfront cost (optional)

    Any additional initial costs are declared separately.

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

  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. 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
  • Discount: off/on
  • Stacked: off/on
  • Alignment: Left, Right
  • Size: Small, Medium
  • Prefix: off/on
  • Suffix: off/on
  • Upfront cost: off/on
  • Disclaimer: off/on

For a large version of the Price component, please see Headline Price.

AppearanceDefault, Light
from £XX.XX a month
from £XX.XX a month
Discountoff, on
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
Stackedoff, on
from £XX.XX a month
from £XX.XX a month
AlignmentLeft, Right
from £XX.XX a month
from £XX.XX a month
SizeSmall, Medium
from £XX.XX a month
from £XX.XX a month
Prefixon, off
from £XX.XX a month
£XX.XX a month
Suffixon, off
from £XX.XX a month
from £XX.XX
Upfront costoff, on
from £XX.XX a month
from £XX.XX a month plus £10 upfront,
Disclaimeroff, on
from £XX.XX a month
from £XX.XX a month
XX-month interest free credit agreement. £XX total cost. Subject to status.
Price | Sky UI Design System