ns-price
Introduction#
Standardises the way prices are displayed.
Takes an input in pence and outputs it into the correct price format, prepends a pound symbol and adds an optional minus sign for negative prices.
Only works for pound sterling.
Best practice#
| 💚 Do's | 💔 Don'ts |
|---|---|
| Use for all price values | Use negative letter spacing as this reduces legibility |
| Avoid using the showDecimal option | Use for currencies other than pound sterling |
| Use decimal pence values |
Considerations of best practice#
Try to avoid using the showDecimal option - adding extra zeros can make values appear larger than they actually are.
Why pence? Passing values in pence gives the component complete control of the output format. If a new best practice should arise then consumers of the component will not need to make modifications.
If negative="true" and pence="0" then the outputted price will not have the minus symbol. i.e. "£0"
Prices of £10000 and higher will include commas. i.e. "£10000" becomes "£10,000" and "£1000000" becomes "£1,000,000". Values of less than £10,000 will not have commas as it can make numbers appear larger than they actually are.
Prices of less than £1 include zero pounds. eg. pence="1" becomes "£0.01"
Usage#
Component placement#
ns-price can be used in any html text element.
Specification#
| Attribute | Type | Default | Options | Description |
|---|---|---|---|---|
pence | string | 0 | The value in pence that is to be displayed | |
showDecimal | boolean | false | Set true to show ".00" when there are whole pound values | |
negative | boolean | false | Set true to show a minus symbol at the start of the number |
Specification notes#
pence#
Price is passed in as an attribute to prevent the unformatted price being crawled by Google and subsequently displaying the wrong price in search results.
negative#
There are a number of characters (i.e. hyphen, em dash, en dash) that can be confused with the minus symbol. Setting the negative attribute to true allows the component to output output the correct symbol. This ensures that screen readers will read the value as a minus price.
Design Tokens
You can change the branded look and feel of the ns-price by modifying these options in the design tokens.
Read more about design tokens in our getting started guide.
{
"main-unit-code": "£",
"subunit-name": "pence"
}Feedback#
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.