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>
Accessibility#
Accessibility guidelines coming soon