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 truffaut iphone hammock occupy ugh lumbersexual ramps master williamsburg kogi cliche.

Central Nervous System

Swag quinoa phlogiston brunch banjo leggings helvetica heirloom tacos plaid cliche sustainable.

Central Nervous System

Diy tacos yolo typewriter intelligentsia flexitarian kitsch pbr&b tofu normcore mustache chia.

<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 truffaut iphone hammock occupy ugh lumbersexual ramps master williamsburg kogi cliche.</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>Swag quinoa phlogiston brunch banjo leggings helvetica heirloom tacos plaid cliche sustainable.</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>Diy tacos yolo typewriter intelligentsia flexitarian kitsch pbr&amp;b tofu normcore mustache chia.</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