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:

Loading demo…

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 semi-bold 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 €	1.234,56 €
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:

Loading demo…

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 semi-bold 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.

Loading demo…

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.

Loading demo…

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.

Loading demo…