Amount
Throughout George, amounts are shown in various places. This page collects all rules to display amounts.
Formatting
A <data> element with the .g-amount class is used to display amounts. Use the value attribute to set a machine-readable value. They can be used with and without superscript cents:
Superscript cents for elements in a container with a font-size above 16px will be styled automatically. In elements with a font-size equal or below 16px no superscript is used.
You can use .g-amount-superscript to force superscript display, if automatic font-size detection fails for some reason.
HINT In case you need to format an amount into a string value, you may use our formatAmount utility function. Never use these strings for rendering though – that’s what the Amount component is for.
Rules For Designers
- Amounts are usually presented in semibold 600.
- Amounts set in 16px or smaller should not use superscript.
- There are exceptions to this rule in securities (lists/tables) because the values would otherwise be too long, especially in “weak” currencies.
- Amounts larger than 16px must use superscript.
- The comma/dot is never part of the superscript and stays on the baseline.
- Amounts use language-specific decimal and thousands separators.
Country Variants
| Country | Domestic | International |
|---|---|---|
| AT | € 1.234,56 | € 1.234,56 |
| CZ | 1 234,56 Kč | 1 234,56 CZK |
| HR | 1 234,56 HRK | 1 234,56 HRK |
| HU | 1 234 HUF | 1 234 HUF |
| RO | 1 234,56 RON | 1 234,56 RON |
| SK | € 1 234,56 | € 1 234,56 |
This is a simplified version, for more information visit TX Currencies Revision on Confluence.
Colours
Amounts can be text-coloured, neutral, red, green, faded, or – in rare cases – blue:
Rules For Designers
- Text-coloured amounts follow the rules for text in Typography.
- Neutral amounts are
$color-blue-400 (#0a285c). - Positive amounts are
$color-ui-green (#07a721). - Negative amounts are
$color-ui-red (#cf2a1e). - Faded amounts follow the rules for faded text in Typography.
- Active amounts are
$color-blue-300 (#135ee2), but when they are part of an active state indicator, they should blend in with the surrounding text. - If not otherwise noted, 0-value amounts are displayed neutral, >0-amounts are displayed positive and <0-amounts are displayed negative.
Rules For Developers
- If not otherwise noted, 0-value amounts are displayed neutral, >0-amounts are displayed positive and <0-amounts are displayed negative.
Subtle Amounts
Amounts come with a semibold 600 font-weight by default. If the need occurs to not make amounts stand out, use the inheritFontWeight property. By doing so, the Amount will be set in the same font-weight as its parent element. To make the most out of this property, you will almost certainly want to use it in combination with text-coloured amounts.
This of course also works when there is no surrounding text at all, any wrapper element that dictates a font-weight other than bold 700 will do.
Under the hood, we use .g-amount-camouflage to suppress visual deviations from the regular text, but at the moment all it does is inherit the font-weight.
Plus & minus signs
Amount with a negative value gets a minus sign prepended automatically. It is possible to control this behaviour using showMinusSign and showPlusSign properties.
Unknown Amount
It is possible to set a fallback text to display when the value is undefined.
Additionally, a yellow warning icon will be placed after (in XS, before) the fallback text. This icon can be overriden through the fallbackIcon prop, but it will lose its colour.