Price
<ns-price> 
Overview
A standardised way to show how GBP prices are displayed.
✨ This is an auto-generated AI summary of the ns-price's documentation. It may not be accurate. ✨
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
The ns-price component can be used in the following components:
<p><div>
Specification
Attributes
pence
- Property
pence- Description
- The price in pence denomination to prevent the crawlling of unformatted price by the search engines and subsequently displaying the wrong price in the search results.
- Type
number- Default
0
show-decimal
- Property
showDecimal- Description
- The toggle to show the decimal places when price is an integer.
- Type
boolean- Default
false
negative
- Property
negative- Description
- The toggle to show the price in negative. It eliminates the use of various of characters for the minus symbol.
- Type
boolean- Default
false
type
- Property
type- Type
string- Default
standard
Figma
Please note: The ns-price Figma component configuration instructions
are available only to members of the British Gas workspace who have access to the
Nucleus Figma UI Kit.
(Opens in Figma).
Last updated: