Statistic
Importing
Add rh-stat to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-stat/rh-stat.js';
</script>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>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
|
|
--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
|
|
