---
title: "Headline Price"
canonical: https://sky-ui.cf.sky.com/components/headline-price
---

# Headline Price

Shows key pricing information in a headline format.

## 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](/components/price).

## Anatomy

The Headline Price component can be broken down into the following elements -

## Variants & States

**Note:** Available variants differ between Figma and React. The below describes the
  options for the Figma component. Have a look at the [React
  docs](https://sky-ui.cf.sky.com/components/headline-price/react) to see the
  available props in development.

- Appearance: Default, Light
- Stacked: on/off
- Discount: on/off
- Prefix: on/off
- Decimals: on/off
- Suffix: on/off
- Upfront Cost: on/off
- Disclaimer: on/off