Value Formatting

The Value Formatting system automatically formats numeric values to fit within their containers while maintaining readability. It supports various formatting options including abbreviations (K, M, B), dynamic precision adjustment, and currency values with proper symbol placement.

Basic Usage

To enable automatic value formatting, add the data-value-type="number" attribute to your element.

2345678 XLarge

2345678 Regular

2345678 Small

456789 XLarge

456789 Regular

456789 Small

34562 XLarge

34562 Regular

34562 Small

Value Formatting Size Comparison

<span class="value value--xlarge value--tnums" data-value-type="number">2345678</span>

<span class="value value--large value--tnums" data-value-type="number">456789</span>

<span class="value value--small value--tnums" data-value-type="number">34562</span>

To add a delimiter to large numbers, for example 1234 => 1,234, see custom filters.

Currency Values

Values with currency symbols are automatically formatted while maintaining the symbol placement.

$2345678 XLarge

$2345678 Regular

$2345678 Small

$456789 XLarge

$456789 Regular

$456789 Small

$34562 XLarge

$34562 Regular

$34562 Small

Value Formatting Currency Example

<span class="value value--xlarge value--tnums" data-value-type="number">$2345678</span>

<span class="value value--large value--tnums" data-value-type="number">$456789</span>

<span class="value value--small value--tnums" data-value-type="number">$34562</span>

To add a currency symbol, for example 1234 => $1,234, see custom filters.