Overview

A statistic showcases a data point or quick fact visually.

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

Sample element

80% of Fortune Global 500 telecommunications companies

Demo

View a live version of this element and see how it can be customized.

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

<script type="module">
import '@patternfly/elements/pf-icon/pf-icon.js';
import '@rhds/elements/rh-stat/rh-stat.js';
</script>
View the <rh-stat> demo in a new tab

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
© 2021-2024 Red Hat, Inc. Deploys by Netlify