Red Hat design system

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.

<link rel="stylesheet" href="demo.css" />
<script type="module" src="rh-stat.js"></script>

<section>
  <h2>Bare Bones</h2>
  <rh-stat>
    <span slot="statistic">Statistic Placeholder</span>
    <span>Description Placeholder</span>
  </rh-stat>
</section>

<section>
  <h2>Large</h2>
  <rh-stat size="large">
    <span slot="statistic">Statistic Placeholder</span>
    <span>Description Placeholder</span>
  </rh-stat>
</section>

<section>
  <h2>Icon Attribute</h2>
  <rh-stat icon="code" icon-set="fas">
    <span slot="statistic">Statistic Placeholder</span>
    <span>Description Placeholder</span>
  </rh-stat>
</section>

<section>
  <h2>Icon Slot</h2>
  <rh-stat>
    <pf-icon icon="code" set="fas" slot="icon"></pf-icon>
    <span slot="statistic">Statistic Placeholder</span>
    <span>Description Placeholder</span>
  </rh-stat>
</section>

<section>
  <h2>SVG in Icon Slot</h2>
  <rh-stat>
    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
      <path
        d="M17.37 8v10a.63.63 0 0 0 1.25 0V8a.63.63 0 0 0-1.25 0Zm7 0v7a.63.63 0 0 0 1.25 0V8a.63.63 0 0 0-1.25 0Zm-14 0v12a.63.63 0 0 0 1.25 0V8a.63.63 0 0 0-1.25 0ZM31 17.89a.63.63 0 0 0-.63.62v11.87H5.62v-2.93a.63.63 0 0 0-1.25 0V31a.63.63 0 0 0 .63.62h26a.62.62 0 0 0 .62-.62V18.51a.62.62 0 0 0-.62-.62Z"
      />
      <path
        d="M5 21a.63.63 0 0 0 .62-.63V5.62h24.75V9a.63.63 0 0 0 1.25 0V5a.62.62 0 0 0-.62-.62H5a.63.63 0 0 0-.63.62v15.36A.63.63 0 0 0 5 21Zm27.35-9.24a.62.62 0 0 0-.87.17C28.73 16 21.5 22.93 4 23.27a.63.63 0 0 0 0 1.25c18.07-.34 25.64-7.61 28.52-11.9a.62.62 0 0 0-.17-.86Z"
      />
    </svg>
    <span slot="statistic">Statistic Placeholder</span>
    <span>Description Placeholder</span>
  </rh-stat>
</section>

<section>
  <h2>Overwrite Slots</h2>
  <rh-stat top="statistic">
    <pf-icon slot="icon" icon="code" set="fas"></pf-icon>
    <span slot="title">Overwrite Title</span>
    <p>Stat body that includes two lines and a footnote.</p>
    <span slot="statistic">Overwrite Statistic</span>
  </rh-stat>
</section>

<rh-context-provider color-palette="darkest">
  <h2>Dark Theme</h2>

  <section>
    <h3>Bare Bones</h3>
    <rh-stat>
      <span slot="statistic">Statistic Placeholder</span>
      <span>Description Placeholder</span>
    </rh-stat>
  </section>

  <section>
    <h3>Large</h3>

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

  <section>
    <h3>Icon Attribute</h3>
    <rh-stat icon="code" icon-set="fas">
      <span slot="statistic">Statistic Placeholder</span>
      <span>Description Placeholder</span>
    </rh-stat>
  </section>

  <section>
    <h3>Icon Slot</h3>
    <rh-stat>
      <pf-icon icon="code" set="fas" slot="icon"></pf-icon>
      <span slot="statistic">Statistic Placeholder</span>
      <span>Description Placeholder</span>
    </rh-stat>
  </section>

  <section>
    <h3>Overwrite Slots</h3>

    <rh-stat top="statistic">
      <pf-icon slot="icon" icon="code" set="fas"></pf-icon>
      <span slot="title">Overwrite Title</span>
      <p>Stat body that includes two lines and a footnote.</p>
      <span slot="statistic">Overwrite Statistic</span>
    </rh-stat>
  </section>

  <section>
    <h3>SVG in Icon Slot</h3>

    <rh-stat>
      <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
        <path
          d="M17.37 8v10a.63.63 0 0 0 1.25 0V8a.63.63 0 0 0-1.25 0Zm7 0v7a.63.63 0 0 0 1.25 0V8a.63.63 0 0 0-1.25 0Zm-14 0v12a.63.63 0 0 0 1.25 0V8a.63.63 0 0 0-1.25 0ZM31 17.89a.63.63 0 0 0-.63.62v11.87H5.62v-2.93a.63.63 0 0 0-1.25 0V31a.63.63 0 0 0 .63.62h26a.62.62 0 0 0 .62-.62V18.51a.62.62 0 0 0-.62-.62Z"
        />
        <path
          d="M5 21a.63.63 0 0 0 .62-.63V5.62h24.75V9a.63.63 0 0 0 1.25 0V5a.62.62 0 0 0-.62-.62H5a.63.63 0 0 0-.63.62v15.36A.63.63 0 0 0 5 21Zm27.35-9.24a.62.62 0 0 0-.87.17C28.73 16 21.5 22.93 4 23.27a.63.63 0 0 0 0 1.25c18.07-.34 25.64-7.61 28.52-11.9a.62.62 0 0 0-.17-.86Z"
        />
      </svg>
      <span slot="statistic">Statistic Placeholder</span>
      <span>Description Placeholder</span>
    </rh-stat>
  </section>
</rh-context-provider>