Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Statistic

Overview Style Guidelines Code Demos Accessibility
  1. Installation
  2. Usage
  3. rh-stat
  1. Installation
  2. Usage
  3. rh-stat

Installation

Usage

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

rh-stat

Slots 5
Slot Name Description
icon

Optional icon

title

Statistic title

statistic

Statistic data

cta

Call to action

Description of the stat

Attributes 5
DOM Property Description Type Default
icon

The icon to display in the statistic

IconNameFor<IconSetName> | undefined
unknown
iconSet

Icon set to display in the statistic

IconSetName
'standard'
top

Whether the title or statistic should be displayed on top in the statistic

'default' | 'statistic'
'default'
size

The size of the statistic

'default' | 'large'
'default'
isMobile

Whether the statistic is in a mobile view or not for styling

boolean
false
Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 0

None

© 2021-2024 Red Hat, Inc. Deploys by Netlify