Statistic
On this page
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow 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
Copied!
Wrap lines
Overflow 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
Copied!
Wrap lines
Overflow lines
rh-stat
A statistic showcases a data point or quick fact visually.
Slot Name | Description |
---|---|
icon |
Optional icon |
title |
Statistic title |
statistic |
Statistic data |
cta |
Call to action |
|
Description of the stat |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
icon |
icon |
The icon to display in the statistic |
|
|
icon-set |
iconSet |
Icon set to display in the statistic |
|
|
top |
top |
Whether the title or statistic should be displayed on top in the statistic |
|
|
size |
size |
The size of the statistic |
|
|
is-mobile |
isMobile |
Whether the statistic is in a mobile view or not for styling |
|
|
Token | Copy |
---|---|
--rh-color-icon-secondary-on-dark
|
|
--rh-color-icon-secondary-on-light
|
|
--rh-color-text-brand-on-light
|
|
--rh-color-text-primary-on-dark
|
|
--rh-font-family-body-text
|
|
--rh-font-family-heading
|
|
--rh-font-size-body-text-lg
|
|
--rh-font-size-body-text-xl
|
|
--rh-font-size-heading-2xl
|
|
--rh-font-size-heading-lg
|
|
--rh-font-weight-body-text-regular
|
|
--rh-font-weight-heading-regular
|
|
--rh-size-icon-04
|
|
--rh-size-icon-06
|
|
--rh-space-lg
|
|
--rh-space-sm
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.