Price
<ns-price> 
Overview
A standardised way to show how GBP prices are displayed.
The ns-price component takes an input in pence and outputs it in the correct price format, prepends a pound symbol and adds an optional minus sign indicating negative values. It only works for pounds sterling.
Examples
Guidance
Implementation
Placement
Specification
Attributes
pence
- Property
pence- Description
- The price in pence.
- Type
number- Default
0
show-decimal
- Property
showDecimal- Description
- Whether to show the decimal places when price is an integer.
- Type
boolean- Default
false
negative
- Property
negative- Description
- Whether the price is negative.
- Type
boolean- Default
false
type
- Property
type- Type
string- Default
standard
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.
Last updated: