Infographic Card
v0.0.0
The Infographic Plain element shows a decorative icon together with a value and label elements.
It has 3 responsive variants. The Infographic Plain element should be used inside a grid.
200,000,000
people
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-md-4 col-lg-6 col-xl-4">
<!-- Infographic Card -->
<div class="vi-infographic-card">
<div class="vi-infographic-card__content">
<div class="vi-infographic-card__head">
<div class="vi-infographic-card__visual">
...
</div>
</div>
<div class="vi-infographic-card__main">
<div class="vi-infographic-card__value">200,000,000</div>
<div class="vi-infographic-card__label">people</div>
</div>
</div>
</div>
</div>
</div>
</div>Reverse #
To create a reversed version of the smallest responsive variant use modifier --reverse on all elements.
200,000,000
people
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-md-4 col-lg-6 col-xl-4">
<!-- Infographic Card (mods: --reverse) -->
<div class="vi-infographic-card vi-infographic-card--reverse">
<div class="vi-infographic-card__content vi-infographic-card__content--reverse">
<div class="vi-infographic-card__head vi-infographic-card__head--reverse">
<div class="vi-infographic-card__visual vi-infographic-card__visual--reverse">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--reverse">
<div class="vi-infographic-card__value vi-infographic-card__value--reverse">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--reverse">people</div>
</div>
</div>
</div>
</div>
</div>
</div>Display #
The display version only has 2 responsive variants. Use modifier --display on all elements to skip middle variant.
200,000,000
people
200,000,000
people
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --display) -->
<div class="vi-infographic-card vi-infographic-card--display">
<div class="vi-infographic-card__content vi-infographic-card__content--display">
<div class="vi-infographic-card__head vi-infographic-card__head--display">
<div class="vi-infographic-card__visual vi-infographic-card__visual--display">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--display">
<div class="vi-infographic-card__value vi-infographic-card__value--display">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--display">people</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --display, --reverse) -->
<div class="vi-infographic-card vi-infographic-card--display vi-infographic-card--reverse">
<div class="vi-infographic-card__content vi-infographic-card__content--display vi-infographic-card__content--reverse">
<div class="vi-infographic-card__head vi-infographic-card__head--display vi-infographic-card__head--reverse">
<div class="vi-infographic-card__visual vi-infographic-card__visual--display vi-infographic-card__visual--reverse">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--display vi-infographic-card__main--reverse">
<div class="vi-infographic-card__value vi-infographic-card__value--display vi-infographic-card__value--reverse">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--display vi-infographic-card__label--reverse">people</div>
</div>
</div>
</div>
</div>
</div>
</div>Circle #
Use modifier --circle to fit the Infographic Visual Circle
200,000,000
people
200,000,000
people
200,000,000
people
200,000,000
people
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --circle) -->
<div class="vi-infographic-card vi-infographic-card--circle">
<div class="vi-infographic-card__content vi-infographic-card__content--circle">
<div class="vi-infographic-card__head vi-infographic-card__head--circle">
<div class="vi-infographic-card__visual vi-infographic-card__visual--circle">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--circle">
<div class="vi-infographic-card__value vi-infographic-card__value--circle">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--circle">people</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --circle, --display) -->
<div class="vi-infographic-card vi-infographic-card--circle vi-infographic-card--display">
<div class="vi-infographic-card__content vi-infographic-card__content--circle vi-infographic-card__content--display">
<div class="vi-infographic-card__head vi-infographic-card__head--circle vi-infographic-card__head--display">
<div class="vi-infographic-card__visual vi-infographic-card__visual--circle vi-infographic-card__visual--display">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--circle vi-infographic-card__main--display">
<div class="vi-infographic-card__value vi-infographic-card__value--circle vi-infographic-card__value--display">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--circle vi-infographic-card__label--display">people</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --circle, --reverse) -->
<div class="vi-infographic-card vi-infographic-card--circle vi-infographic-card--reverse">
<div class="vi-infographic-card__content vi-infographic-card__content--circle vi-infographic-card__content--reverse">
<div class="vi-infographic-card__head vi-infographic-card__head--circle vi-infographic-card__head--reverse">
<div class="vi-infographic-card__visual vi-infographic-card__visual--circle vi-infographic-card__visual--reverse">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--circle vi-infographic-card__main--reverse">
<div class="vi-infographic-card__value vi-infographic-card__value--circle vi-infographic-card__value--reverse">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--circle vi-infographic-card__label--reverse">people</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --circle, --display, --reverse) -->
<div class="vi-infographic-card vi-infographic-card--circle vi-infographic-card--display vi-infographic-card--reverse">
<div class="vi-infographic-card__content vi-infographic-card__content--circle vi-infographic-card__content--display vi-infographic-card__content--reverse">
<div class="vi-infographic-card__head vi-infographic-card__head--circle vi-infographic-card__head--display vi-infographic-card__head--reverse">
<div class="vi-infographic-card__visual vi-infographic-card__visual--circle vi-infographic-card__visual--display vi-infographic-card__visual--reverse">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--circle vi-infographic-card__main--display vi-infographic-card__main--reverse">
<div class="vi-infographic-card__value vi-infographic-card__value--circle vi-infographic-card__value--display vi-infographic-card__value--reverse">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--circle vi-infographic-card__label--display vi-infographic-card__label--reverse">people</div>
</div>
</div>
</div>
</div>
</div>
</div>Pre value text #
Use the optional .vi-infographic-card__pre-value within class="vi-infographic-card__main to place text above the value
appr.
200,000,000
people
appr.
200,000,000
people
appr.
200,000,000
people
appr.
200,000,000
people
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --circle) -->
<div class="vi-infographic-card vi-infographic-card--circle">
<div class="vi-infographic-card__content vi-infographic-card__content--circle">
<div class="vi-infographic-card__head vi-infographic-card__head--circle">
<div class="vi-infographic-card__visual vi-infographic-card__visual--circle">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--circle">
<div class="vi-infographic-card__pre-value vi-infographic-card__pre-value--circle">appr.</div>
<div class="vi-infographic-card__value vi-infographic-card__value--circle">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--circle">people</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --circle, --display) -->
<div class="vi-infographic-card vi-infographic-card--circle vi-infographic-card--display">
<div class="vi-infographic-card__content vi-infographic-card__content--circle vi-infographic-card__content--display">
<div class="vi-infographic-card__head vi-infographic-card__head--circle vi-infographic-card__head--display">
<div class="vi-infographic-card__visual vi-infographic-card__visual--circle vi-infographic-card__visual--display">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--circle vi-infographic-card__main--display">
<div class="vi-infographic-card__pre-value vi-infographic-card__pre-value--circle vi-infographic-card__pre-value--display">appr.</div>
<div class="vi-infographic-card__value vi-infographic-card__value--circle vi-infographic-card__value--display">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--circle vi-infographic-card__label--display">people</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --circle, --reverse) -->
<div class="vi-infographic-card vi-infographic-card--circle vi-infographic-card--reverse">
<div class="vi-infographic-card__content vi-infographic-card__content--circle vi-infographic-card__content--reverse">
<div class="vi-infographic-card__head vi-infographic-card__head--circle vi-infographic-card__head--reverse">
<div class="vi-infographic-card__visual vi-infographic-card__visual--circle vi-infographic-card__visual--reverse">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--circle vi-infographic-card__main--reverse">
<div class="vi-infographic-card__pre-value vi-infographic-card__pre-value--circle vi-infographic-card__pre-value--reverse">appr.</div>
<div class="vi-infographic-card__value vi-infographic-card__value--circle vi-infographic-card__value--reverse">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--circle vi-infographic-card__label--reverse">people</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<!-- Infographic Card (mods: --circle, --display, --reverse) -->
<div class="vi-infographic-card vi-infographic-card--circle vi-infographic-card--display vi-infographic-card--reverse">
<div class="vi-infographic-card__content vi-infographic-card__content--circle vi-infographic-card__content--display vi-infographic-card__content--reverse">
<div class="vi-infographic-card__head vi-infographic-card__head--circle vi-infographic-card__head--display vi-infographic-card__head--reverse">
<div class="vi-infographic-card__visual vi-infographic-card__visual--circle vi-infographic-card__visual--display vi-infographic-card__visual--reverse">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--circle vi-infographic-card__main--display vi-infographic-card__main--reverse">
<div class="vi-infographic-card__pre-value vi-infographic-card__pre-value--circle vi-infographic-card__pre-value--display vi-infographic-card__pre-value--reverse">appr.</div>
<div class="vi-infographic-card__value vi-infographic-card__value--circle vi-infographic-card__value--display vi-infographic-card__value--reverse">200,000,000</div>
<div class="vi-infographic-card__label vi-infographic-card__label--circle vi-infographic-card__label--display vi-infographic-card__label--reverse">people</div>
</div>
</div>
</div>
</div>
</div>
</div>Longer texts #
Examples with slightly longer value or label texts.
200,000,000
people
Two lines of text
people
200,000,000
Longer text on multiple lines
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-md-4 col-lg-6 col-xl-4">
<!-- Infographic Card -->
<div class="vi-infographic-card">
<div class="vi-infographic-card__content">
<div class="vi-infographic-card__head">
<div class="vi-infographic-card__visual">
...
</div>
</div>
<div class="vi-infographic-card__main">
<div class="vi-infographic-card__value">200,000,000</div>
<div class="vi-infographic-card__label">people</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-6 col-xl-4">
<!-- Infographic Card (mods: --reverse) -->
<div class="vi-infographic-card vi-infographic-card--reverse">
<div class="vi-infographic-card__content vi-infographic-card__content--reverse">
<div class="vi-infographic-card__head vi-infographic-card__head--reverse">
<div class="vi-infographic-card__visual vi-infographic-card__visual--reverse">
...
</div>
</div>
<div class="vi-infographic-card__main vi-infographic-card__main--reverse">
<div class="vi-infographic-card__value vi-infographic-card__value--reverse">Two lines of text</div>
<div class="vi-infographic-card__label vi-infographic-card__label--reverse">people</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-6 col-xl-4">
<!-- Infographic Card -->
<div class="vi-infographic-card">
<div class="vi-infographic-card__content">
<div class="vi-infographic-card__head">
<div class="vi-infographic-card__visual">
...
</div>
</div>
<div class="vi-infographic-card__main">
<div class="vi-infographic-card__value">200,000,000</div>
<div class="vi-infographic-card__label">Longer text on multiple lines</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Stylesheets #
The following stylesheets are required to display this component.
The following additional stylesheets are used to display the example(s).
JavaScript #
The following javascripts are required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- Unreachable link issue (section 1)
Added
- Accessibility: changes.
- RTL support.
- Initial draft