Headline Price - React

View on Figma View on GitHub

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

disclaimer

<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

<HeadlinePrice $align="left" price="£XX.XX" strikethroughPrice="£XX.XX" suffix="a month"  />

Props

Prop	Type	Options (* default)
$appearance	string	`default`* \| `light`
$inline	boolean	`true` \| `false`*
$theme	string	See gradients for supported values. Overides default strikethrough styling.

$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>

$inline

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

$theme

<Flex $gap={6} $flexDirection={{ xs: 'column', md: 'row' }} $alignItems="center">
  <HeadlinePrice $theme="products.broadband" price="£XX.XX" prefix="from" suffix="a month" />
  <HeadlinePrice $theme="products.tv" price="£XX.XX" strikethroughPrice="£XX.XX" suffix="a month"  />
</Flex>

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

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