Stat
Examples
Base
1
High Utilization
1
Critical Performing
2
Services Down
3
Scheduled Maintenance
<div class="chi-stat">
<div class="chi-stat__item">
<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>
</div>
<div class="chi-stat__item">
<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>
</div>
<div class="chi-stat__item -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>
</div>
<div class="chi-stat__item">
<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>
</div>
</div>
Center
1
High Utilization
1
Critical Performing
2
Services Down
3
Scheduled Maintenance
<div class="chi-stat -center">
<div class="chi-stat__item">
<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>
</div>
<div class="chi-stat__item">
<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>
</div>
<div class="chi-stat__item -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>
</div>
<div class="chi-stat__item">
<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>
</div>
</div>
Background Icons
1
High Utilization
1
Critical Performing
2
Services Down
3
Scheduled Maintenance
<div class="chi-stat">
<div class="chi-stat__item">
<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" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="chi-stat__item -active">
<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" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="chi-stat__item">
<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" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="chi-stat__item">
<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" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
Compact
Use -compact
when 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-stat -compact">
<div class="chi-stat__item">
<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 -xs -flat" id="example__help-button" aria-label="Help" data-target="#example__help-popover" data-position="bottom" aria-describedby="example__help-popover">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item">
<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 -xs -flat" id="example__help-button2" aria-label="Help" data-target="#example__help-popover2" data-position="bottom" aria-describedby="example__help-popover2">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item -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 -xs -flat" id="example__help-button3" aria-label="Help" data-target="#example__help-popover3" data-position="bottom" aria-describedby="example__help-popover3">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item">
<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 -xs -flat" id="example__help-button4" aria-label="Help" data-target="#example__help-popover4" data-position="bottom" aria-describedby="example__help-popover4">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item">
<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 -xs -flat" id="example__help-button5" aria-label="Help" data-target="#example__help-popover5" data-position="bottom" aria-describedby="example__help-popover5">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item">
<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 -xs -flat" id="example__help-button6" aria-label="Help" data-target="#example__help-popover6" data-position="bottom" aria-describedby="example__help-popover6">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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>
<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>
Base
ALL
Services
366
Communications
932
Hybrid & Cloud IT
0
Recently Closed
301
Managed & IT Services
6
Recently Closed
100
Networking & Cloud IT
2
Security
0
Recently Closed
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<div class="chi-stat">
<div class="chi-stat__item -active">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">ALL</div>
<div class="chi-stat-metric__title">Services</div>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">366</div>
<div class="chi-stat-metric__title">Communications</div>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-base-help-button2" aria-label="Help" data-target="#example__portal-base-help-popover2" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">932</div>
<div class="chi-stat-metric__title">Hybrid & Cloud IT</div>
</div>
<div class="chi-stat-submetric">
<div class="chi-stat-submetric__value">0</div>
<div class="chi-stat-submetric__title">Recently Closed</div>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-base-help-button3" aria-label="Help" data-target="#example__portal-base-help-popover3" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">301</div>
<div class="chi-stat-metric__title">Managed & IT Services</div>
</div>
<div class="chi-stat-submetric">
<div class="chi-stat-submetric__value">6</div>
<div class="chi-stat-submetric__title">Recently Closed</div>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-base-help-button4" aria-label="Help" data-target="#example__portal-base-help-popover4" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">100</div>
<div class="chi-stat-metric__title">Networking & Cloud IT</div>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-base-help-button5" aria-label="Help" data-target="#example__portal-base-help-popover5" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">2</div>
<div class="chi-stat-metric__title">Security</div>
</div>
<div class="chi-stat-submetric">
<div class="chi-stat-submetric__value">0</div>
<div class="chi-stat-submetric__title">Recently Closed</div>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-base-help-button6" aria-label="Help" data-target="#example__portal-base-help-popover6" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<section class="chi-popover chi-popover--bottom" id="example__portal-base-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__portal-base-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__portal-base-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__portal-base-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__portal-base-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__portal-base-help-button2'));
chi.popover(document.getElementById('example__portal-base-help-button3'));
chi.popover(document.getElementById('example__portal-base-help-button4'));
chi.popover(document.getElementById('example__portal-base-help-button5'));
chi.popover(document.getElementById('example__portal-base-help-button6'));
</script>
Background Icons
ALL
Services
366
Communications
932
Hybrid & Cloud IT
0
Recently Closed
301
Managed & IT Services
6
Recently Closed
100
Networking & Cloud IT
2
Security
0
Recently Closed
<div class="chi-stat">
<div class="chi-stat__item -active">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">ALL</div>
<div class="chi-stat-metric__title">Services</div>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">366</div>
<div class="chi-stat-metric__title">Communications</div>
</div>
<div class="chi-stat-background-icon">
<chi-marketing-icon icon="platform-voice-unified-communications" variant="outline"></chi-marketing-icon>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button2" aria-label="Help" data-target="#example__portal-bgicons-help-popover2" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">932</div>
<div class="chi-stat-metric__title">Hybrid & Cloud IT</div>
</div>
<div class="chi-stat-submetric">
<div class="chi-stat-submetric__value">0</div>
<div class="chi-stat-submetric__title">Recently Closed</div>
</div>
<div class="chi-stat-background-icon">
<chi-marketing-icon icon="platform-it-agility-hybrid-cloud" variant="outline"></chi-marketing-icon>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button3" aria-label="Help" data-target="#example__portal-bgicons-help-popover3" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">301</div>
<div class="chi-stat-metric__title">Managed & IT Services</div>
</div>
<div class="chi-stat-submetric">
<div class="chi-stat-submetric__value">6</div>
<div class="chi-stat-submetric__title">Recently Closed</div>
</div>
<div class="chi-stat-background-icon">
<chi-marketing-icon icon="business-support-ticket" variant="outline"></chi-marketing-icon>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button4" aria-label="Help" data-target="#example__portal-bgicons-help-popover4" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">100</div>
<div class="chi-stat-metric__title">Networking & Cloud IT</div>
</div>
<div class="chi-stat-background-icon">
<chi-marketing-icon icon="platform-adaptive-networking" variant="outline"></chi-marketing-icon>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button5" aria-label="Help" data-target="#example__portal-bgicons-help-popover5" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">2</div>
<div class="chi-stat-metric__title">Security</div>
</div>
<div class="chi-stat-submetric">
<div class="chi-stat-submetric__value">0</div>
<div class="chi-stat-submetric__title">Recently Closed</div>
</div>
<div class="chi-stat-background-icon">
<chi-marketing-icon icon="platform-connected-security" variant="outline"></chi-marketing-icon>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button6" aria-label="Help" data-target="#example__portal-bgicons-help-popover6" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<section class="chi-popover chi-popover--bottom" id="example__portal-bgicons-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__portal-bgicons-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__portal-bgicons-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__portal-bgicons-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__portal-bgicons-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__portal-bgicons-help-button2'));
chi.popover(document.getElementById('example__portal-bgicons-help-button3'));
chi.popover(document.getElementById('example__portal-bgicons-help-button4'));
chi.popover(document.getElementById('example__portal-bgicons-help-button5'));
chi.popover(document.getElementById('example__portal-bgicons-help-button6'));
</script>
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<div class="chi-stat">
<div class="chi-stat__item -active">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">ALL</div>
<div class="chi-stat-metric__title">Services</div>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">366</div>
<div class="chi-stat-metric__title">Communications</div>
</div>
<div class="chi-stat-background-icon">
<i class="chi-icon icon-file" aria-hidden="true"></i>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button2" aria-label="Help" data-target="#example__portal-bgicons-help-popover2" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">932</div>
<div class="chi-stat-metric__title">Hybrid & Cloud IT</div>
</div>
<div class="chi-stat-submetric">
<div class="chi-stat-submetric__value">0</div>
<div class="chi-stat-submetric__title">Recently Closed</div>
</div>
<div class="chi-stat-background-icon">
<i class="chi-icon icon-warning" aria-hidden="true"></i>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button3" aria-label="Help" data-target="#example__portal-bgicons-help-popover3" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">301</div>
<div class="chi-stat-metric__title">Managed & IT Services</div>
</div>
<div class="chi-stat-submetric">
<div class="chi-stat-submetric__value">6</div>
<div class="chi-stat-submetric__title">Recently Closed</div>
</div>
<div class="chi-stat-background-icon">
<i class="chi-icon icon-map-marker" aria-hidden="true"></i>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button4" aria-label="Help" data-target="#example__portal-bgicons-help-popover4" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">100</div>
<div class="chi-stat-metric__title">Networking & Cloud IT</div>
</div>
<div class="chi-stat-background-icon">
<i class="chi-icon icon-mail" aria-hidden="true"></i>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button5" aria-label="Help" data-target="#example__portal-bgicons-help-popover5" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">2</div>
<div class="chi-stat-metric__title">Security</div>
</div>
<div class="chi-stat-submetric">
<div class="chi-stat-submetric__value">0</div>
<div class="chi-stat-submetric__title">Recently Closed</div>
</div>
<div class="chi-stat-background-icon">
<i class="chi-icon icon-file" aria-hidden="true"></i>
</div>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__portal-bgicons-help-button6" aria-label="Help" data-target="#example__portal-bgicons-help-popover6" data-position="bottom">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<section class="chi-popover chi-popover--bottom" id="example__portal-bgicons-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__portal-bgicons-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__portal-bgicons-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__portal-bgicons-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__portal-bgicons-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__portal-bgicons-help-button2'));
chi.popover(document.getElementById('example__portal-bgicons-help-button3'));
chi.popover(document.getElementById('example__portal-bgicons-help-button4'));
chi.popover(document.getElementById('example__portal-bgicons-help-button5'));
chi.popover(document.getElementById('example__portal-bgicons-help-button6'));
</script>
Compact
Use -compact
when 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-stat -compact">
<div class="chi-stat__item">
<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 -xs -flat" id="example__portal-help-button" aria-label="Help" data-target="#example__portal-help-popover" data-position="bottom" aria-describedby="example__portal-help-popover">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item">
<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 -xs -flat" id="example__portal-help-button2" aria-label="Help" data-target="#example__portal-help-popover2" data-position="bottom" aria-describedby="example__portal-help-popover2">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item -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 -xs -flat" id="example__portal-help-button3" aria-label="Help" data-target="#example__portal-help-popover3" data-position="bottom" aria-describedby="example__portal-help-popover3">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item">
<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 -xs -flat" id="example__portal-help-button4" aria-label="Help" data-target="#example__portal-help-popover4" data-position="bottom" aria-describedby="example__portal-help-popover4">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item">
<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 -xs -flat" id="example__portal-help-button5" aria-label="Help" data-target="#example__portal-help-popover5" data-position="bottom" aria-describedby="example__portal-help-popover5">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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 class="chi-stat__item">
<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 -xs -flat" id="example__portal-help-button6" aria-label="Help" data-target="#example__portal-help-popover6" data-position="bottom" aria-describedby="example__portal-help-popover6">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></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>
<section class="chi-popover chi-popover--bottom" id="example__portal-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__portal-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__portal-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__portal-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__portal-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__portal-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__portal-help-button'));
chi.popover(document.getElementById('example__portal-help-button2'));
chi.popover(document.getElementById('example__portal-help-button3'));
chi.popover(document.getElementById('example__portal-help-button4'));
chi.popover(document.getElementById('example__portal-help-button5'));
chi.popover(document.getElementById('example__portal-help-button6'));
</script>
Carousel
1
High Utilization
2
Critical Performing
3
Services Down
4
Scheduled Maintenance
5
High Utilization
6
Critical Performing
7
Services Down
8
Scheduled Maintenance
<chi-carousel>
<div class="chi-stat" slot="items">
<div class="chi-stat__item">
<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>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">2</div>
<div class="chi-stat-metric__title">Critical Performing</div>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">3</div>
<div class="chi-stat-metric__title">Services Down</div>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">4</div>
<div class="chi-stat-metric__title">Scheduled Maintenance</div>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">5</div>
<div class="chi-stat-metric__title">High Utilization</div>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">6</div>
<div class="chi-stat-metric__title">Critical Performing</div>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">7</div>
<div class="chi-stat-metric__title">Services Down</div>
</div>
</div>
</div>
<div class="chi-stat__item">
<div class="chi-stat__content">
<div class="chi-stat-metric">
<div class="chi-stat-metric__value">8</div>
<div class="chi-stat-metric__title">Scheduled Maintenance</div>
</div>
</div>
</div>
</div>
</chi-carousel>
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.
Helpful information goes here.