Infographic Bubble Grid
v0.0.0
The Infographic Bubble Grid provides layout and controls stack for the four bubbles representing the four therapeutic areas.
Central Nervous System
Bespoke tousled gastropub try-hard 8-bit migas pinterest gluten-free goth farm-to-table ennui umami.
Pain
Gluten-free slow-carb selfies sustainable keytar mustache mixtape polaroid health vice truffaut portland.
Respiratory
Pickled dreamcatcher flexitarian forage actually heirloom brooklyn ennui 8-bit asymmetrical vice bushwick.
Oncology
Thundercats goth crucifix hella authentic pbr&b selfies roof wolf neutra distillery squid.
[visual alignment test]
<!-- Infographic Bubble Grid -->
<div class="vi-infographic-bubble-grid">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Infographic Bubble Grid inner -->
<div class="vi-infographic-bubble-grid__inner">
<div class="vi-infographic-bubble-grid__items">
<div class="vi-grid">
<div class="vi-grid__row">
<div class="position-static col-12 col-sm-5 col-md-4 offset-sm-2 col-xl-3 offset-xl-1 d-flex justify-content-start justify-content-sm-center">
<div class="vi-infographic-bubble-grid__item vi-infographic-bubble-grid__item--1">
<!-- Infographic Bubble (mods: --md, --first) -->
<div class="vi-infographic-bubble vi-infographic-bubble--md vi-infographic-bubble--first">
<div class="vi-infographic-bubble__bubble">
<div class="vi-infographic-bubble__inner">
<div aria-hidden="true" class="vi-infographic-bubble__object vi-pattern vi-pattern--random-gradient-moment" data-pattern-seed="random"></div>
<div class="vi-infographic-bubble__main">
<div class="vi-infographic-bubble__sections">
<div class="vi-infographic-bubble__head">
<h3 class="vi-infographic-bubble__title">Central Nervous System</h3>
</div>
<div class="vi-infographic-bubble__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
<p>Bespoke tousled gastropub try-hard 8-bit migas pinterest gluten-free goth farm-to-table ennui umami.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="position-static col-12 col-sm-5 col-md-4 offset-sm-7 offset-md-6 col-xl-4 offset-xl-3 d-flex justify-content-end justify-content-sm-center mt-sm-n60 mt-xl-n40 order-xl-last">
<div class="vi-infographic-bubble-grid__item vi-infographic-bubble-grid__item--2">
<!-- Infographic Bubble (mods: --md) -->
<div class="vi-infographic-bubble vi-infographic-bubble--md">
<div class="vi-infographic-bubble__bubble">
<div class="vi-infographic-bubble__inner">
<div aria-hidden="true" class="vi-infographic-bubble__object vi-pattern vi-pattern--random-gradient-moment" data-pattern-seed="random"></div>
<div class="vi-infographic-bubble__main">
<div class="vi-infographic-bubble__sections">
<div class="vi-infographic-bubble__head">
<h3 class="vi-infographic-bubble__title">Pain</h3>
</div>
<div class="vi-infographic-bubble__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
<p>Gluten-free slow-carb selfies sustainable keytar mustache mixtape polaroid health vice truffaut portland.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="position-static col-12 col-sm-5 col-md-4 offset-sm-3 col-xl-3 offset-xl-2 d-flex justify-content-start justify-content-sm-center mt-xl-40">
<div class="vi-infographic-bubble-grid__item vi-infographic-bubble-grid__item--3">
<!-- Infographic Bubble (mods: --md) -->
<div class="vi-infographic-bubble vi-infographic-bubble--md">
<div class="vi-infographic-bubble__bubble">
<div class="vi-infographic-bubble__inner">
<div aria-hidden="true" class="vi-infographic-bubble__object vi-pattern vi-pattern--random-gradient-moment" data-pattern-seed="random"></div>
<div class="vi-infographic-bubble__main">
<div class="vi-infographic-bubble__sections">
<div class="vi-infographic-bubble__head">
<h3 class="vi-infographic-bubble__title">Respiratory</h3>
</div>
<div class="vi-infographic-bubble__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
<p>Pickled dreamcatcher flexitarian forage actually heirloom brooklyn ennui 8-bit asymmetrical vice bushwick.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="position-static col-12 col-sm-5 col-md-4 offset-sm-7 col-xl-3 offset-xl-0 d-flex justify-content-end justify-content-sm-center">
<div class="vi-infographic-bubble-grid__item vi-infographic-bubble-grid__item--4">
<!-- Infographic Bubble (mods: --sm, --last) -->
<div class="vi-infographic-bubble vi-infographic-bubble--sm vi-infographic-bubble--last">
<div class="vi-infographic-bubble__bubble">
<div class="vi-infographic-bubble__inner">
<div aria-hidden="true" class="vi-infographic-bubble__object vi-pattern vi-pattern--random-gradient-moment" data-pattern-seed="random"></div>
<div class="vi-infographic-bubble__main">
<div class="vi-infographic-bubble__sections">
<div class="vi-infographic-bubble__head">
<h3 class="vi-infographic-bubble__title">Oncology</h3>
</div>
<div class="vi-infographic-bubble__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
<p>Thundercats goth crucifix hella authentic pbr&b selfies roof wolf neutra distillery squid.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</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
- 28 June 2022 - Fix scrollparent detector
Added
- Accessibility: changes.
- RTL support.
- Initial draft