Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Statistic

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleSizesColor schemeConfigurationSpaceInteraction statesStyleSizesColor schemeConfigurationSpaceInteraction states

Style

A statistic is a stacked combination of elements used to visualize a data point. By default, a statistic includes data text and body text at a minimum. Optional elements include an icon, title text, and a call to action for additional emphasis or context.

Anatomy

Anatomy of a statistic with annotations; number 1 is pointing to an optional icon, number 2 is pointing to optional title text, number 3 is pointing to data text, number 4 is pointing to body text, and number 5 is pointing to an optional call to action
  1. Icon
  2. Title text
  3. Data text
  4. Body text
  5. Call to action

Sizes

There are two available sizes and the only difference is the size of some elements.

Default size and Large size statistics both with icons and body text; text under the default size says ‘Default size’ and text under the large size says ‘Large size’
Size Element Current value
Default 40px 36px
2.25rem
Large 64px 48px
3.0rem

Color scheme

A statistic is available in both light and dark color schemes. The icon, title text, and data text for light scheme are red whereas elements and text for dark scheme (not including the call to action) are white to meet accessibility contrast requirements.

Light scheme

Light scheme statistic with a red icon, red data text, and black body text

Dark scheme

Dark scheme statistic with a white icon and white text styles to meet accessibility contrast requirements

Configuration

Container

By default, all elements in a statistic, no matter how many, are all stacked and vertically aligned. In some situations, it is acceptable to align elements to the left, for example if grouped statistics are used in several rows or if surrounding content is all left aligned.

Statistic with a dotted vertical line through it

Order

A statistic was designed to be read from top to bottom. If certain optional elements are included, the order will change.

Statistic with boxes around each element slot, there are also numbers next to each box arranged 1 to 4 from top to bottom
  1. Icon (always ordered first if included)
  2. Title text and data text (ordered first if there is no icon)
  3. Body text (ordered last if there is no call to action)
  4. Call to action (always ordered last if included)

Space

Space values are the same for both Default and Large sizes and on all breakpoints. To see space values when statistics are used in a layout, go to the Guidelines page.

Default and Large size spacing between all elements

Interaction states

The optional call to action is the only interactive element. Go to the Call to action page to view the interaction states.

Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify