Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme dropdown Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed How to useProject FeltColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile AI design principlesLegal requirementsTransparency noticesIconographyColorChatbot avatarsAnimation All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Statistic Since v1.0.0

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-statImportingUsagerh-stat

Importing

Add rh-stat to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-stat/rh-stat.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-stat>
  <span slot="statistic">Statistic Placeholder</span>
  <span>Description Placeholder</span>
</rh-stat>

<script type="module">
  import '@rhds/elements/rh-stat/rh-stat.js';
</script>
Copy to Clipboard Wrap lines

rh-stat

A statistic showcases a data point or quick fact visually. Elements must include a statistic slot and body text. Icons, titles, and CTAs should be consistent when grouped. Adapts color for WCAG contrast in light and dark contexts. Only the CTA receives Tab focus; screen readers read DOM order.

Theming

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slots 5

Slot Name Summary Description
icon

Optional decorative icon above the data value. Accepts an rh-icon or inline SVG. Decorative for screen readers; add aria-label to convey meaning not in text (WCAG 1.1.1).
title

Optional inline text title for context. Screen readers announce in DOM order; ARIA landmark not required.
statistic

Required inline text data value (number or percentage). Screen readers read in DOM order; ensure value is meaningful without visual formatting (WCAG 1.3.1).
[default]

Required block or inline body text describing the statistic. Gives screen reader users context for the data value.
Note: [default] unnamed slots do not have a slot="name" attribute.
cta

Optional call to action (rh-cta element). Only focusable element; receives Tab focus and activates with Enter or Space.

Attributes 5 1

Attribute DOM Property Description Type Default
icon icon

The icon name to display above the statistic. When set, the component dynamically imports rh-icon and renders it using the specified icon set.

 
IconNameFor<IconSetName>
 
unknown
icon-set iconSet

The icon set from which to load the icon. Only applies when the icon attribute is set.

 
'ui' | 'standard' | 'social' | 'microns'
 
'standard'
top top

Controls the visual ordering of the title and statistic slots. When set to statistic, the data value appears above the title text.

 
'default' | 'statistic'
 
'default'
size size

The size variant of the statistic. The large size increases the data text font size and icon dimensions.

 
'default' | 'large'
 
'default'
Attribute DOM Property Description Type Default
is-mobile isMobile

Forces the compact type scale, including when the stat is wider than 768px. The compact scale otherwise applies on its own when the stat is narrower than 768px.

 
boolean
 
false

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 17

Token Description Copy
--rh-color-text-brand-on-light

Brand accent color for light scheme

Brand text color for light theme
--rh-color-text-primary-on-dark

Primary text accent color for dark scheme

Primary text color for dark theme
--rh-color-icon-secondary

Icon color
--rh-size-icon-04

Default slotted icon width

40px icon box
--rh-size-icon-06

Large slotted icon width

64px icon box
--rh-font-weight-body-text-regular

Title font weight

Regular font weight
--rh-font-weight-heading-medium

Statistic font weight

Medium font weight for headings
--rh-font-weight-heading-regular

Regular font weight for headings
--rh-font-family-body-text

Body font family

Body text font family
--rh-space-md

Margin above body text

8px spacer
--rh-font-family-heading

Title font family

Statistic font family

CTA font family

Heading font family
--rh-space-lg

Margin above CTA

16px spacer
--rh-font-size-body-text-xl

Title text size at containers >= md

20px font size
--rh-font-size-body-text-md

Compact body text size

Large variant body text size

Compact body text size

Body text size at containers >= md

16px font size
--rh-font-size-heading-lg

Statistic text size at containers >= md

h3 heading font size
--rh-font-size-heading-2xl

h1 heading font size
--rh-font-size-body-text-lg

Compact title text size

Compact title text size

CTA text size

18px font size
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify