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 toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Statistic

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

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'
is-mobile isMobile

Whether the statistic renders in a mobile layout with reduced font sizes. Managed internally via ScreenSizeController but can be set explicitly.

 
boolean
 
false

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 15

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

Brand accent color in light mode

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

Primary text accent color in dark mode

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-size-body-text-xl

Title text size

20px font size
--rh-font-weight-body-text-regular

Title font weight

Regular font weight
--rh-font-size-heading-lg

Statistic text size

h3 heading font size
--rh-font-weight-heading-regular

Statistic font weight

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

Body font family

Body text font family
--rh-space-sm

Margin above body text

6px 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-lg

Body text size

CTA text size

Mobile body text size

18px font size
--rh-font-size-heading-2xl

h1 heading font size
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify