Statistic

OverviewStyleGuidelinesCodeAccessibilityDemos

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines
NPM
npm install @rhds/elements
Copy to Clipboard Wrap lines
JSPM
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

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

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.

Slots 5
Slot Name Description
icon

Optional icon

title

Statistic title

statistic

Statistic data

cta

Call to action

Description of the stat

Attributes 5
Attribute DOM Property Description Type Default
icon icon

The icon to display in the statistic

IconNameFor<IconSetName> | undefined
unknown
icon-set iconSet

Icon set to display in the statistic

IconSetName
'standard'
top top

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

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

The size of the statistic

'default' | 'large'
'default'
is-mobile 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 16
Token Copy
--rh-color-icon-secondary-on-dark
Full CSS Variable Permalink to this token
--rh-color-icon-secondary-on-light
Full CSS Variable Permalink to this token
--rh-color-text-brand-on-light
Full CSS Variable Permalink to this token
--rh-color-text-primary-on-dark
Full CSS Variable Permalink to this token
--rh-font-family-body-text
Full CSS Variable Permalink to this token
--rh-font-family-heading
Full CSS Variable Permalink to this token
--rh-font-size-body-text-lg
Full CSS Variable Permalink to this token
--rh-font-size-body-text-xl
Full CSS Variable Permalink to this token
--rh-font-size-heading-2xl
Full CSS Variable Permalink to this token
--rh-font-size-heading-lg
Full CSS Variable Permalink to this token
--rh-font-weight-body-text-regular
Full CSS Variable Permalink to this token
--rh-font-weight-heading-regular
Full CSS Variable Permalink to this token
--rh-size-icon-04
Full CSS Variable Permalink to this token
--rh-size-icon-06
Full CSS Variable Permalink to this token
--rh-space-lg
Full CSS Variable Permalink to this token
--rh-space-sm
Full CSS Variable Permalink to this token