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

# Price

Shows key pricing information in an inline format.

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

## Anatomy

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

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