Statistic
On this page
On this page
Overview
A statistic showcases a data point or quick fact visually.
Edit element properties
import '@rhds/elements/rh-stat/rh-stat.js';<rh-stat>
<span slot="statistic">Statistic Placeholder</span>
<span>Description Placeholder</span>
</rh-stat>The icon to display in the statistic
Icon set to display in the statistic
Whether the title or statistic should be displayed on top in the statistic
The size of the statistic
Whether the statistic is in a mobile view or not for styling
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
When to use
- When you need to add visual emphasis to a statistic
- When you need to pair a data point with supporting text to add more context
- When you need to display several statistics together in a group
A vertically aligned stack of elements; includes a small red icon, large red
data text showing 80% percent, and two lines of black body text!--Image of a
spinner element
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component is available in the RH Shared Libs repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
