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 -->
<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.
<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.
<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.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
<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>
<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>
</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>
<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>
</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>
<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>
</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>
<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>
</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>
<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>
</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>
<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>
</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>
<script>chi.popover(document.getElementById('example__help-button'));</script>
<script>chi.popover(document.getElementById('example__help-button2'));</script>
<script>chi.popover(document.getElementById('example__help-button3'));</script>
<script>chi.popover(document.getElementById('example__help-button4'));</script>
<script>chi.popover(document.getElementById('example__help-button5'));</script>
<script>chi.popover(document.getElementById('example__help-button6'));</script>
Portal
Apply -portal
to easily theme a Stat for portal dashboards.
<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.
<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>