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

  1. Price

    Main text area for the amount including decimals.

  2. Prefix (optional)

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

  3. Suffix (optional)

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

  4. Discount (optional)

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

  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.

Variants & States

  • Appearance: Default, Light
  • Size: Small, Medium
  • Alignment: Left, Centre, Right
  • Prefix: None, Top, Inline
  • Discount: None, Top, Inline
  • Suffix: None, Inline, Bottom
  • 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
SizeSmall, Medium
from £XX.XX a month
from £XX.XX a month
AlignmentLeft, Center, Right
from £XX.XX a month
from £XX.XX a month
from £XX.XX a month
PrefixNone, Top, Inline
£XX.XX a month
from £XX.XX a month
from £XX.XX a month
DiscountNone, Top, Inline
from £XX.XX a month
was: £XX.XX a month, now: £XX.XX a month
was: £XX.XX a month, now: £XX.XX a month
SuffixNone, Inline, Bottom
from £XX.XX
from £XX.XX a month
from £XX.XX a month
DisclaimerOff or On
from £XX.XX a month
£XX.XX a month. Optional disclaimer copy