Contains the very specific layout styling of the infographic (css only).
Basic structure markup looks like this:
<!-- Infographic Layout (mods: --sample-section) -->
<div class="vi-infographic-layout vi-infographic-layout--sample-section">
<div class="vi-infographic-layout__content">
<div class="vi-infographic-layout__section vi-infographic-layout__section--sample-section vi-infographic-layout__section--sample-section-head vi-infographic-layout__section--head">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
...
</div>
</div>
<div class="vi-infographic-layout__section vi-infographic-layout__section--sample-section vi-infographic-layout__section--sample-section-body vi-infographic-layout__section--body">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-infographic-layout__visual">
...
</div>
</div>
</div>
<div class="vi-infographic-layout__section vi-infographic-layout__section--sample-section vi-infographic-layout__section--sample-section-foot vi-infographic-layout__section--foot">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
...
</div>
</div>
</div>
</div>
The following stylesheet is required to display this component.
The following additional stylesheet is used to display the example(s).
Usage documentation can be found here.
Changelog
Fix
- Unreachable link issue (section 1)
Added
- Accessibility: changes.
- RTL support.
- Initial draft