Stat

Stats are used to prominently display text or number values.

Examples#

Stat components are designed to render in combination with Chi's Grid component. Grid provides Stats with responsive capabilities that enable them to stack on smaller viewports.

Base#

To display a Stat, apply the class chi-stat to a div or use an a tag to render as a link.

Base stat
1
Disabled stat
10
<!-- Base -->
<div class="chi-stat">
  <div class="chi-stat__content">
    <div class="chi-stat-metric">
      <div class="chi-stat-metric__title">Base stat</div>
      <div class="chi-stat-metric__value">1</div>
    </div>
  </div>
</div>
<!-- Disabled -->
<div class="chi-stat -disabled">
  <div class="chi-stat__content">
    <div class="chi-stat-metric">
      <div class="chi-stat-metric__title">Disabled stat</div>
      <div class="chi-stat-metric__value">10</div>
    </div>
  </div>
</div>

Stat Card#

When using Stats as menu items, use the class -active to indicate which Stat item is currently active.

Stat card
1
Active stat card
100
Stat card
10
Stat card
1000
<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">1</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Active stat card</div>
          <div class="chi-stat-metric__value">100</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">10</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">1000</div>
        </div>
      </div>
    </div>
  </div>
</div>

Center Aligned#

Apply -center to center align a Stat.

Stat card
1
Active stat card
100
Stat card
10
Stat card
1000
<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">1</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -center -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Active stat card</div>
          <div class="chi-stat-metric__value">100</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">10</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">1000</div>
        </div>
      </div>
    </div>
  </div>
</div>

Portal Compact#

Apply -portal and -compact to easily theme a Stat for portal dashboards where vertical space is limited.

Utilization
4
High
16
Elevated
Performance
0
Critical
1
Impacted
Status
12
Down
333
Up
Threshold Alerts
0
Warnings
0
Watches
Repair Tickets
2
Active
1
Closed
Sch Maintenance
2
In Progress
2
Upcoming
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-grid">
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Utilization</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button" aria-label="Help" data-target="#example__help-popover" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">4</div>
          <div class="chi-stat-submetric__title">High</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">16</div>
          <div class="chi-stat-submetric__title">Elevated</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Performance</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button2" aria-label="Help" data-target="#example__help-popover2" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">0</div>
          <div class="chi-stat-submetric__title">Critical</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">1</div>
          <div class="chi-stat-submetric__title">Impacted</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Status</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button3" aria-label="Help" data-target="#example__help-popover3" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">12</div>
          <div class="chi-stat-submetric__title">Down</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">333</div>
          <div class="chi-stat-submetric__title">Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Threshold Alerts</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button4" aria-label="Help" data-target="#example__help-popover4" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">0</div>
          <div class="chi-stat-submetric__title">Warnings</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">0</div>
          <div class="chi-stat-submetric__title">Watches</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Repair Tickets</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button5" aria-label="Help" data-target="#example__help-popover5" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">2</div>
          <div class="chi-stat-submetric__title">Active</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">1</div>
          <div class="chi-stat-submetric__title">Closed</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Sch Maintenance</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button6" aria-label="Help" data-target="#example__help-popover6" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">2</div>
          <div class="chi-stat-submetric__title">In Progress</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">2</div>
          <div class="chi-stat-submetric__title">Upcoming</div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="chi-popover chi-popover--bottom" id="example__help-popover" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover2" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover3" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover4" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover5" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover6" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>

<script>
  chi.popover(document.getElementById('example__help-button'));
  chi.popover(document.getElementById('example__help-button2'));
  chi.popover(document.getElementById('example__help-button3'));
  chi.popover(document.getElementById('example__help-button4'));
  chi.popover(document.getElementById('example__help-button5'));
  chi.popover(document.getElementById('example__help-button6'));
</script>

Portal#

Apply -portal to easily theme a Stat for portal dashboards.

1
High Utilization
16
Elevated
1
Critical Performing
21
Impacted
2
Services Down
47
Up
3
Scheduled Maintenance
1
Planned
<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">High Utilization</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">16</div>
          <div class="chi-stat-submetric__title">Elevated</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">Critical Performing</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">21</div>
          <div class="chi-stat-submetric__title">Impacted</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">2</div>
          <div class="chi-stat-metric__title">Services Down</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">47</div>
          <div class="chi-stat-submetric__title">Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">3</div>
          <div class="chi-stat-metric__title">Scheduled Maintenance</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">1</div>
          <div class="chi-stat-submetric__title">Planned</div>
        </div>
      </div>
    </div>
  </div>
</div>

Portal with Background Icons#

Use chi-stat-background-icon to define background icons for Portal Stat components.

$21,000
Outstanding Invoices
8
Active Tickets
115
Active Orders
5
New Alerts
<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">High Utilization</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-file"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">Critical Performing</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-warning"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">2</div>
          <div class="chi-stat-metric__title">Services Down</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-map-marker"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">3</div>
          <div class="chi-stat-metric__title">Scheduled Maintenance</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-mail"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Web Component#

Properties#

Web component coming soon

Accessibility#

Accessibility guidelines coming soon