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.
Sizes
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
Small is the default size that suits most use cases. This size is found on most cards where space is limited.
Large
When there's lots of space available — usually when the currency length is under four characters — consider using Large.
Alignment
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.
