CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

Stat

Stats are used to prominently display text or number values.

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>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon