Infographic Bubble

v0.0.0

Infographic Bubble for therapeutic areas.

In expanded state it shows a header and body text. When minimised it only shows a header.

For use in Infographic Bubble Grid

Bubble #

Bubble has three sizes

--sm
--md
--lg

To set in expanded state, use --expanded modifier.

Bubble can fall out of screen in this example.

Central Nervous System

Pinterest typewriter pickled brooklyn helvetica wayfarers authentic chia pbr&b diy hoodie keffiyeh.

Central Nervous System

Pbr&b brooklyn distillery cornhole dreamcatcher skateboard health letterpress gentrify kinfolk biodiesel health.

Central Nervous System

Everyday chambray organic venmo freegan umami kinfolk beard flexitarian retro portland quinoa.

<div class="d-flex justify-content-center py-0">
  <!-- Infographic Bubble (mods: --sm) -->
  <div class="vi-infographic-bubble vi-infographic-bubble--sm">
    <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>Pinterest typewriter pickled brooklyn helvetica wayfarers authentic chia pbr&amp;b diy hoodie keffiyeh.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="d-flex justify-content-center py-30">
  <!-- 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">Central Nervous System</h3>
            </div>
            <div class="vi-infographic-bubble__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
              <p>Pbr&amp;b brooklyn distillery cornhole dreamcatcher skateboard health letterpress gentrify kinfolk biodiesel health.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="d-flex justify-content-center py-60">
  <!-- Infographic Bubble (mods: --lg, --expanded) -->
  <div class="vi-infographic-bubble vi-infographic-bubble--lg vi-infographic-bubble--expanded">
    <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>Everyday chambray organic venmo freegan umami kinfolk beard flexitarian retro portland quinoa.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog


  07 Jul 2025 - fix(infographic-bubble): allow for typographic fixes


Fix

  28 June 2022 - Fix scrollparent detector


Added

  Accessibility: changes.
  RTL support.
  Initial draft