Headline Price - React

Introduced in @sky-uk/ui-core v1.0.0.

import { HeadlinePrice } from '@sky-uk/ui-core';

Key pricing in a headline format, typically used across product discovery and brochureware areas of the estate.

For more general pricing see Price.

<HeadlinePrice price="£XX.XX" prefix="from" suffix="a month" />

Content

Prop	Description
disclaimer	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.
discountDisclaimer	Disclaimer content only shows for the Discount variant. It gives more context about the price before the discount.
prefix	Normally used for 'from' but can be changed if required, or turned off entirely.
price	Main text area for the amount including decimals.
strikethroughPrice	A discount option is available which allows the designer to enter in an old price which is struck-out.
suffix	Normally used for a term period, the suffix can be edited, or turned off entirely.
upfrontCost	Any additional initial costs are declared separately.

disclaimer

The disclaimer accepts markdown content.

<HeadlinePrice $align="left" disclaimer="This is not a real price!" price="£XX.XX" prefix="From" suffix="a month"  />

Price

The price expects a string including the unit and amount, any zero decimal amounts (.00) will be omitted.

<Flex $gap={6} $flexDirection={{ xs: 'column', md: 'row' }} $alignItems="center">
  <HeadlinePrice price="£99.99" prefix="From" suffix="a month"  />
  <HeadlinePrice price="£99.00" prefix="From" suffix="a month"  />
</Flex>

strikethroughPrice & discountDisclaimer

When setting a discount price via the strikethroughPrice prop, discountDisclaimer should also be set.

<HeadlinePrice $align="left" price="£XX.XX" strikethroughPrice="£XX.XX" suffix="a month" discountDisclaimer="What a generous discount!"  />

upfrontCost

<HeadlinePrice $align="left" price="£XX.XX" prefix="From" suffix="a month" upfrontCost="£10" />

Props

Prop	Type	Options (* default)
$appearance	string	`default`* \| `light`
$highlightPrice	boolean	`true` \| `false`*
$inline	boolean	`true` \| `false`*

$appearance

<Flex $gap={6} $flexDirection={{ xs: 'column', md: 'row' }} $alignItems="center">
  <HeadlinePrice $appearance="default" price="£XX.XX" prefix="from" suffix="a month" />
  <Box $bgColor="grey80" $padding={5}>
    <HeadlinePrice $appearance="light" price="£XX.XX" prefix="from" suffix="a month" />
  </Box>
</Flex>

$highlightPrice

<HeadlinePrice $highlightPrice $inline price="£XX.XX" prefix="from" suffix="a month" />

$inline

<HeadlinePrice $inline price="£XX.XX" prefix="from" suffix="a month" />

System Modifiers

This component also supports the props applied using the following system modifiers:

Translatable Fields

This component supports translation on the following fields:

headlinePrice.previousPriceText - sets the hidden text used on the previous price when strikethroughPrice is provided
headlinePrice.currentPriceText - sets the hidden text used on the current price when strikethroughPrice is provided
headlinePrice.upfrontPricePrefix - sets the hidden text used for the upfront cost when the upfrontCost prop is provided
headlinePrice.upfrontPriceSuffix - sets the hidden text used for the upfront cost when the upfrontCost prop is provided

For more on translatable fields, view the useTranslation docs here: useTranslation