Infographic Visual Icon
v0.0.0
Visual for Infographic Card.
Shows Icon with correct spacing for use in card.
<div style="max-width: 300px;">
<!-- Infographic Visual Icon -->
<div class="vi-infographic-visual-icon">
<div class="vi-infographic-visual-icon__icon">
<!-- Icon globe (mods: --gradient) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--gradient" aria-label="globe"><path d="M10 45.6h14.1c.6-12.7 3.6-23.8 8.2-31.8-12.1 6-20.8 17.9-22.3 31.8zm22.9 0h12.7V11.3c-6.2 4.2-11.9 17-12.7 34.3zm21.5 0h12.7c-.8-17.3-6.5-30.1-12.7-34.4v34.4zm21.5 0H90c-1.5-14-10.2-25.8-22.3-31.8 4.6 8 7.6 19.2 8.2 31.8zm0 8.8c-.6 12.6-3.6 23.8-8.2 31.8 12.1-6 20.8-17.8 22.3-31.8H75.9zm-65.9 0c1.5 14 10.2 25.8 22.3 31.8-4.6-8-7.6-19.1-8.2-31.8H10zm22.9 0c.8 17.3 6.5 30.1 12.7 34.4V54.4H32.9zm21.5 0v34.4c6.2-4.2 11.9-17.1 12.7-34.4H54.4zM50 99C23 99 1 77 1 50S23 1 50 1s49 22 49 49-22 49-49 49z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</div>In card #
Example of use in Infographic Card.
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-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">
<!-- Infographic Visual Icon -->
<div class="vi-infographic-visual-icon">
<div class="vi-infographic-visual-icon__icon">
<!-- Icon globe (mods: --gradient) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--gradient" aria-label="globe"><path d="M10 45.6h14.1c.6-12.7 3.6-23.8 8.2-31.8-12.1 6-20.8 17.9-22.3 31.8zm22.9 0h12.7V11.3c-6.2 4.2-11.9 17-12.7 34.3zm21.5 0h12.7c-.8-17.3-6.5-30.1-12.7-34.4v34.4zm21.5 0H90c-1.5-14-10.2-25.8-22.3-31.8 4.6 8 7.6 19.2 8.2 31.8zm0 8.8c-.6 12.6-3.6 23.8-8.2 31.8 12.1-6 20.8-17.8 22.3-31.8H75.9zm-65.9 0c1.5 14 10.2 25.8 22.3 31.8-4.6-8-7.6-19.1-8.2-31.8H10zm22.9 0c.8 17.3 6.5 30.1 12.7 34.4V54.4H32.9zm21.5 0v34.4c6.2-4.2 11.9-17.1 12.7-34.4H54.4zM50 99C23 99 1 77 1 50S23 1 50 1s49 22 49 49-22 49-49 49z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</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>
<hr>
<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">
<!-- Infographic Visual Icon -->
<div class="vi-infographic-visual-icon">
<div class="vi-infographic-visual-icon__icon">
<!-- Icon globe (mods: --gradient) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--gradient" aria-label="globe"><path d="M10 45.6h14.1c.6-12.7 3.6-23.8 8.2-31.8-12.1 6-20.8 17.9-22.3 31.8zm22.9 0h12.7V11.3c-6.2 4.2-11.9 17-12.7 34.3zm21.5 0h12.7c-.8-17.3-6.5-30.1-12.7-34.4v34.4zm21.5 0H90c-1.5-14-10.2-25.8-22.3-31.8 4.6 8 7.6 19.2 8.2 31.8zm0 8.8c-.6 12.6-3.6 23.8-8.2 31.8 12.1-6 20.8-17.8 22.3-31.8H75.9zm-65.9 0c1.5 14 10.2 25.8 22.3 31.8-4.6-8-7.6-19.1-8.2-31.8H10zm22.9 0c.8 17.3 6.5 30.1 12.7 34.4V54.4H32.9zm21.5 0v34.4c6.2-4.2 11.9-17.1 12.7-34.4H54.4zM50 99C23 99 1 77 1 50S23 1 50 1s49 22 49 49-22 49-49 49z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</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>When card has modifier --display.
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">
<!-- Infographic Visual Icon -->
<div class="vi-infographic-visual-icon">
<div class="vi-infographic-visual-icon__icon">
<!-- Icon globe (mods: --gradient) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--gradient" aria-label="globe"><path d="M10 45.6h14.1c.6-12.7 3.6-23.8 8.2-31.8-12.1 6-20.8 17.9-22.3 31.8zm22.9 0h12.7V11.3c-6.2 4.2-11.9 17-12.7 34.3zm21.5 0h12.7c-.8-17.3-6.5-30.1-12.7-34.4v34.4zm21.5 0H90c-1.5-14-10.2-25.8-22.3-31.8 4.6 8 7.6 19.2 8.2 31.8zm0 8.8c-.6 12.6-3.6 23.8-8.2 31.8 12.1-6 20.8-17.8 22.3-31.8H75.9zm-65.9 0c1.5 14 10.2 25.8 22.3 31.8-4.6-8-7.6-19.1-8.2-31.8H10zm22.9 0c.8 17.3 6.5 30.1 12.7 34.4V54.4H32.9zm21.5 0v34.4c6.2-4.2 11.9-17.1 12.7-34.4H54.4zM50 99C23 99 1 77 1 50S23 1 50 1s49 22 49 49-22 49-49 49z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</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">
<!-- Infographic Visual Icon -->
<div class="vi-infographic-visual-icon">
<div class="vi-infographic-visual-icon__icon">
<!-- Icon globe (mods: --gradient) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--gradient" aria-label="globe"><path d="M10 45.6h14.1c.6-12.7 3.6-23.8 8.2-31.8-12.1 6-20.8 17.9-22.3 31.8zm22.9 0h12.7V11.3c-6.2 4.2-11.9 17-12.7 34.3zm21.5 0h12.7c-.8-17.3-6.5-30.1-12.7-34.4v34.4zm21.5 0H90c-1.5-14-10.2-25.8-22.3-31.8 4.6 8 7.6 19.2 8.2 31.8zm0 8.8c-.6 12.6-3.6 23.8-8.2 31.8 12.1-6 20.8-17.8 22.3-31.8H75.9zm-65.9 0c1.5 14 10.2 25.8 22.3 31.8-4.6-8-7.6-19.1-8.2-31.8H10zm22.9 0c.8 17.3 6.5 30.1 12.7 34.4V54.4H32.9zm21.5 0v34.4c6.2-4.2 11.9-17.1 12.7-34.4H54.4zM50 99C23 99 1 77 1 50S23 1 50 1s49 22 49 49-22 49-49 49z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</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>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
- 28 June 2022 - Fix scrollparent detector
Added
- Accessibility: changes.
- RTL support.
- Initial draft