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>
Primary
Use the Primary stat for home and dashboard KPIs where more visual emphasis is needed.
1
High Utilization
1
Critical Performing
2
Services Down
3
Scheduled Maintenance
<div class="chi-stat -primary">
<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 -primary">
<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>
Primary
Use the Primary stat for home and dashboard KPIs where more visual emphasis is needed.
1
High Utilization
16
Elevated
1
Critical Performing
21
Impacted
2
Services Down
47
Up
3
Scheduled Maintenance
1
Planned
<div class="chi-stat -primary">
<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-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__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 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 class="chi-stat-submetric">
<div class="chi-stat-submetric__value">47</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__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>
Background Icons
1
High Utilization
16
Elevated
1
Critical Performing
21
Impacted
2
Services Down
47
Up
3
Scheduled Maintenance
1
Planned
<div class="chi-stat -primary">
<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-submetric">
<div class="chi-stat-submetric__value">16</div>
<div class="chi-stat-submetric__title">Elevated</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-submetric">
<div class="chi-stat-submetric__value">21</div>
<div class="chi-stat-submetric__title">Impacted</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-submetric">
<div class="chi-stat-submetric__value">47</div>
<div class="chi-stat-submetric__title">Up</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-submetric">
<div class="chi-stat-submetric__value">1</div>
<div class="chi-stat-submetric__title">Planned</div>
</div>
<div class="chi-stat-background-icon">
<i class="chi-icon icon-mail" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
Secondary
Use the Base stat for home and dashboard KPIs.
1
High Utilization
16
Elevated
1
Critical Performing
21
Impacted
2
Services Down
47
Up
3
Scheduled Maintenance
1
Planned
<div class="chi-stat -sm">
<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-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__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 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 class="chi-stat-submetric">
<div class="chi-stat-submetric__value">47</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__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>
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>
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.