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

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