Infographic Visual Circle
v0.0.0
Visual for Infographic Card.
Shows Icon in circle with correct spacing for use in card.
<div style="width: 300px; position: relative; margin-bottom: 160px">
<!-- Infographic Visual Circle -->
<div class="vi-infographic-visual-circle">
<div class="vi-infographic-visual-circle__inner">
<div aria-hidden="true" class="vi-infographic-visual-circle__object">
<div class="vi-infographic-visual-circle__circle"></div>
</div>
<div class="vi-infographic-visual-circle__icon">
<!-- Icon pill -->
<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" aria-label="pill"><path d="M30.4 12.4c-5.2 0-9.8 2.2-14.1 6.8-4 4.3-5.9 9-5.7 13.9.4 8.6 7.5 15 7.5 15.1l14.7 13.5L60 32 45.6 18.7c-.1-.1-6.8-6.3-15.2-6.3zM40 68.1l14.4 13.2c.1.1 6.8 6.3 15.2 6.3 5.2 0 9.8-2.2 14-6.8 4.1-4.4 5.9-9 5.7-13.9-.4-8.6-7.4-15-7.5-15L67.1 38.4 40 68.1zm29.6 29.1c-12 0-20.8-8-21.8-8.9L11.7 55.2c-1-.9-10.1-9.4-10.6-21.7C.7 26 3.4 19 9.3 12.7c6.1-6.6 13.2-9.9 21.1-9.9 12 0 20.8 8 21.8 8.9l36.1 33.1c.4.3 10 9.1 10.6 21.7.4 7.5-2.4 14.6-8.2 20.9-6 6.5-13.1 9.8-21.1 9.8z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</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 (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">
<!-- Infographic Visual Circle -->
<div class="vi-infographic-visual-circle">
<div class="vi-infographic-visual-circle__inner">
<div aria-hidden="true" class="vi-infographic-visual-circle__object">
<div class="vi-infographic-visual-circle__circle"></div>
</div>
<div class="vi-infographic-visual-circle__icon">
<!-- Icon pill -->
<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" aria-label="pill"><path d="M30.4 12.4c-5.2 0-9.8 2.2-14.1 6.8-4 4.3-5.9 9-5.7 13.9.4 8.6 7.5 15 7.5 15.1l14.7 13.5L60 32 45.6 18.7c-.1-.1-6.8-6.3-15.2-6.3zM40 68.1l14.4 13.2c.1.1 6.8 6.3 15.2 6.3 5.2 0 9.8-2.2 14-6.8 4.1-4.4 5.9-9 5.7-13.9-.4-8.6-7.4-15-7.5-15L67.1 38.4 40 68.1zm29.6 29.1c-12 0-20.8-8-21.8-8.9L11.7 55.2c-1-.9-10.1-9.4-10.6-21.7C.7 26 3.4 19 9.3 12.7c6.1-6.6 13.2-9.9 21.1-9.9 12 0 20.8 8 21.8 8.9l36.1 33.1c.4.3 10 9.1 10.6 21.7.4 7.5-2.4 14.6-8.2 20.9-6 6.5-13.1 9.8-21.1 9.8z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</div>
</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>
</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: --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">
<!-- Infographic Visual Circle -->
<div class="vi-infographic-visual-circle">
<div class="vi-infographic-visual-circle__inner">
<div aria-hidden="true" class="vi-infographic-visual-circle__object">
<div class="vi-infographic-visual-circle__circle"></div>
</div>
<div class="vi-infographic-visual-circle__icon">
<!-- Icon pill -->
<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" aria-label="pill"><path d="M30.4 12.4c-5.2 0-9.8 2.2-14.1 6.8-4 4.3-5.9 9-5.7 13.9.4 8.6 7.5 15 7.5 15.1l14.7 13.5L60 32 45.6 18.7c-.1-.1-6.8-6.3-15.2-6.3zM40 68.1l14.4 13.2c.1.1 6.8 6.3 15.2 6.3 5.2 0 9.8-2.2 14-6.8 4.1-4.4 5.9-9 5.7-13.9-.4-8.6-7.4-15-7.5-15L67.1 38.4 40 68.1zm29.6 29.1c-12 0-20.8-8-21.8-8.9L11.7 55.2c-1-.9-10.1-9.4-10.6-21.7C.7 26 3.4 19 9.3 12.7c6.1-6.6 13.2-9.9 21.1-9.9 12 0 20.8 8 21.8 8.9l36.1 33.1c.4.3 10 9.1 10.6 21.7.4 7.5-2.4 14.6-8.2 20.9-6 6.5-13.1 9.8-21.1 9.8z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</div>
</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>
</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: --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">
<!-- Infographic Visual Circle -->
<div class="vi-infographic-visual-circle">
<div class="vi-infographic-visual-circle__inner">
<div aria-hidden="true" class="vi-infographic-visual-circle__object">
<div class="vi-infographic-visual-circle__circle"></div>
</div>
<div class="vi-infographic-visual-circle__icon">
<!-- Icon pill -->
<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" aria-label="pill"><path d="M30.4 12.4c-5.2 0-9.8 2.2-14.1 6.8-4 4.3-5.9 9-5.7 13.9.4 8.6 7.5 15 7.5 15.1l14.7 13.5L60 32 45.6 18.7c-.1-.1-6.8-6.3-15.2-6.3zM40 68.1l14.4 13.2c.1.1 6.8 6.3 15.2 6.3 5.2 0 9.8-2.2 14-6.8 4.1-4.4 5.9-9 5.7-13.9-.4-8.6-7.4-15-7.5-15L67.1 38.4 40 68.1zm29.6 29.1c-12 0-20.8-8-21.8-8.9L11.7 55.2c-1-.9-10.1-9.4-10.6-21.7C.7 26 3.4 19 9.3 12.7c6.1-6.6 13.2-9.9 21.1-9.9 12 0 20.8 8 21.8 8.9l36.1 33.1c.4.3 10 9.1 10.6 21.7.4 7.5-2.4 14.6-8.2 20.9-6 6.5-13.1 9.8-21.1 9.8z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</div>
</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, --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">
<!-- Infographic Visual Circle -->
<div class="vi-infographic-visual-circle">
<div class="vi-infographic-visual-circle__inner">
<div aria-hidden="true" class="vi-infographic-visual-circle__object">
<div class="vi-infographic-visual-circle__circle"></div>
</div>
<div class="vi-infographic-visual-circle__icon">
<!-- Icon pill -->
<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" aria-label="pill"><path d="M30.4 12.4c-5.2 0-9.8 2.2-14.1 6.8-4 4.3-5.9 9-5.7 13.9.4 8.6 7.5 15 7.5 15.1l14.7 13.5L60 32 45.6 18.7c-.1-.1-6.8-6.3-15.2-6.3zM40 68.1l14.4 13.2c.1.1 6.8 6.3 15.2 6.3 5.2 0 9.8-2.2 14-6.8 4.1-4.4 5.9-9 5.7-13.9-.4-8.6-7.4-15-7.5-15L67.1 38.4 40 68.1zm29.6 29.1c-12 0-20.8-8-21.8-8.9L11.7 55.2c-1-.9-10.1-9.4-10.6-21.7C.7 26 3.4 19 9.3 12.7c6.1-6.6 13.2-9.9 21.1-9.9 12 0 20.8 8 21.8 8.9l36.1 33.1c.4.3 10 9.1 10.6 21.7.4 7.5-2.4 14.6-8.2 20.9-6 6.5-13.1 9.8-21.1 9.8z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</div>
</div>
</div>
</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>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