Skip to main content

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 valuesUse negative letter spacing as this reduces legibility
Avoid using the showDecimal optionUse 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#

View example on Storybook

Component placement#

ns-price can be used in any html text element.

Specification#

AttributeTypeDefaultOptionsDescription
pencestring0The value in pence that is to be displayed
showDecimalbooleanfalseSet true to show ".00" when there are whole pound values
negativebooleanfalseSet 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.