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

  1. 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. 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
  • Alignment: Stacked, Inline
  • Discount: on/off
  • Prefix: on/off
  • Decimals: on/off
  • Suffix: on/off
  • Disclaimer: on/off
Discount offDiscount onStacked
from £XX.XX a month
was: £XX.XX a month, now: £XX.XX a month
Inline
from £XX.XX a month
was: £XX.XX a month, now: £XX.XX a month