Value

The Value system provides consistent text styling for displaying numerical and textual values, with various size options and support for tabular numbers. It ensures readability and visual hierarchy across different contexts.

Size Variants

The Value system offers eight size variants, from XXSmall to XXXLarge, allowing for flexible typography scaling across different use cases. Each size is carefully crafted for optimal readability and visual balance.

XXSmall

The value--xxsmall class creates the smallest text size, ideal for compact displays and supporting information.

Example 48,206.62
Value XXSmall 
<span class="value value--xxsmall">Example</span>
<span class="value value--xxsmall value--tnums">48,206.62</span>

XSmall

The value--xsmall class provides a size slightly larger than XXSmall, suitable for secondary information and compact interfaces.

Example 48,206.62
Value XSmall 
<span class="value value--xsmall">Example</span>
<span class="value value--xsmall value--tnums">48,206.62</span>

Small

The value--small class creates a size suitable for general body text and regular content.

Example 48,206.62
Value Small 
<span class="value value--small">Example</span>
<span class="value value--small value--tnums">48,206.62</span>

Default Size

The base value class without size modifiers provides the standard display size.

Example 48,206.62
Value Default 
<span class="value">Example</span>
<span class="value value--tnums">48,206.62</span>

Large

The value--large class creates emphasized text, suitable for important information and headings.

Example 48,206.62
Value Large 
<span class="value value--large">Example</span>
<span class="value value--large value--tnums">48,206.62</span>

XLarge

The value--xlarge class provides prominent display text, ideal for section headers and key metrics.

Example 48,206.62
Value XLarge 
<span class="value value--xlarge">Example</span>
<span class="value value--xlarge value--tnums">48,206.62</span>

XXLarge

The value--xxlarge class creates very large display text, perfect for major headings and hero sections.

Example 48,206.62
Value XXLarge 
<span class="value value--xxlarge">Example</span>
<span class="value value--xxlarge value--tnums">48,206.62</span>

XXXLarge

The value--xxxlarge class provides the largest text size, designed for maximum impact in hero sections and key displays.

Example 48,206.62
Value XXXLarge 
<span class="value value--xxxlarge">Example</span>
<span class="value value--xxxlarge value--tnums">48,206.62</span>

Numerical Display

For numerical values, the Value system includes special formatting options to ensure clear and consistent display of numbers, particularly in financial or data-heavy contexts.

Tabular Numbers

Add the value--tnums modifier to enable tabular numbers, ensuring consistent width for better alignment in tables and lists.

Regular: 48,206.62 Tabular: 48,206.62
Value Tabular Numbers 
<span class="value value--large">Regular: 48,206.62</span>
<span class="value value--large value--tnums">Tabular: 48,206.62</span>