Stat
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>