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.
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.
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.
Value
Small
<span class="value value--small">Example</span>
<span class="value value--small value--tnums">48,206.62</span>Base
The base value class without size modifiers
and the value--base class both produce the same visual result,
providing the standard display size. Use value--base when you need
to explicitly set the base size in responsive contexts. See the Responsive Values section for examples.
Value
Base
<span class="value">Example</span>
<span class="value value--tnums">48,206.62</span>
<!-- Or using the base modifier -->
<span class="value value--base">Example</span>
<span class="value value--base value--tnums">48,206.62</span>Large
The value--large class creates emphasized text,
suitable for important information and headings.
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.
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.
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.
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.
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>Responsive Values
The Value system supports responsive variants using breakpoint prefixes. This allows values to adapt their size based on the device width, ensuring optimal readability across different screen sizes.
Breakpoint Prefixes
Use breakpoint prefixes like sm:,
md:, lg:
to apply different sizes at different screen widths. The --base modifier
is particularly useful for resetting to the default size at specific breakpoints.
Value
Responsive
<!-- Small by default, large on md screens, xlarge on lg screens -->
<span class="value value--small md:value--large lg:value--xlarge">
Responsive Value
</span>
<!-- Progressive scaling with screen size -->
<span class="value value--xsmall sm:value--small md:value--medium lg:value--large value--tnums">
1,234.56
</span>
<!-- Using base modifier to reset to default size at breakpoint -->
<span class="value value--small lg:value--base">
Small by default, base on large screens
</span>Orientation and Size+Orientation
Value sizes can adapt to orientation with portrait: and can be combined
with size breakpoints (e.g., md:portrait:) for precise control.
Value
Orientation
<!-- Orientation only: smaller in portrait -->
<span class="value value--large portrait:value--small">Orientation Variant</span>
<!-- Size + orientation: xlarge only on md+ screens in portrait -->
<span class="value value--small md:portrait:value--xlarge value--tnums">42,000.00</span>