The price component shows the cost of flights, hotels and hire cars in a range of global currencies.

Price intro


Price Anatomy

Price amount

This is the numerical value displaying the currency string along with a currency symbol.

Previous price (optional)

This part of the component shows previous prices with strikethrough text. Be mindful that there are accessibility considerations when using text with this styling.

Leading text (optional)

The leading text is prefixed contextual information about the price. For example; “from” or “6 deals from”.

Trailing text (optional)

The trailing text is a conditional value. For example, “per day/night”, “per person”, or “total”.

Localisation considerations

The component is designed in a way that the placement of the strings for “from” and “per night” can be interchanged, as not all languages have the same directional writing system. For example; in Simplified Chinese, the “per night” comes before the “from” string.

Price Localisation


We currently offer three sizes, X-small, Small and Large. Choosing the right size depends on both currency length and where the price is displayed. Find plenty of guidance in the usage tab.

X-small size

The X-small is reserved for longer currencies and where space is very limited.


Small is the default size that suits most use cases. This size is found on most cards where space is limited.


When there's lots of space available — usually when the currency length is under four characters — consider using Large.

Price Sizes
Price large vs small


Left aligned

Left-aligned prices are mostly used in open designs where there's no content to the right of the component. Any trailing text is displayed on the same line as the price. This alignment is available for both Small and Large sizes.

Right aligned

Most of our prices are displayed within cards on the right-hand side. The text is right aligned to fit the structure and each string starts on a new line. Right aligned is only available in Small.

Price Styles