Balloon

The balloon is a box with an arrow that can be used to display information relative to its surroundings. E.g.: a city name on a map. It is purely presentational and has no added functionality, if what you're looking for is a tooltip or a dropdown you should check these components instead.

Structure

Add the content of the balloon inside the flix-balloon__content div.

<span style="font-size:2.5em">🤡</span>
<div class="flix-balloon flix-balloon--bottom flix-balloon--start">
  <div class="flix-balloon__content">
    A storm blew me away. Blew the whole circus away.
  </div>
</div>

The close button is optional, if you need one just add it as shown on example bellow. It reuses small link variation of Honeycomb flix-btn component with an additional flix-balloon__close CSS class.

<div class="flix-balloon">
  <div class="flix-balloon__content">
    <h3 class="flix-h3">Hello!</h3>
    <p class="flix-text">Do you want a balloon too,<br/> Georgie?</p>
  </div>
  <button type="button" aria-label="Pop" class="flix-balloon__close flix-btn flix-btn--square flix-btn--md flix-btn--link"></button>
</div>

Modifiers

Position and Alignment

The balloon position modifier controls which side of the ballon the arrow will be rendered, they can be:

flix-balloon--left

Left positioned balloon with arrow pointing right.

flix-balloon--top

Top positioned balloon with arrow pointing down.

Right

This is the default position and doesn't need a modifier, it is right positioned with arrow pointing left.

flix-balloon--bottom

Bottom positioned balloon with arrow pointing up.

The balloon alignment modifier controls the tail position relative to the side of the balloon the arrow is rendered, they are:

flix-balloon--start

Aligns arrow at the start of the balloon.

Center

This is the default alignment and doesn't need a modifier.

flix-balloon--end

Aligns arrow at the end of the balloon.

It's possible to combine them, e.g: flix-tooltip--top flix-tooltip--start will put the balloon at the top-left alignment.

<div class="flix-grid">
  <div class="flix-col" style="max-width:fit-content">
    <div class="flix-balloon flix-balloon--top flix-balloon--start">
      <div class="flix-balloon__content">Banana</div>
    </div>
    <div style="text-align:left">🍌</div>
  </div>
  <div class="flix-col" style="max-width:fit-content">
    <div class="flix-balloon flix-balloon--top">
      <div class="flix-balloon__content">Cherry</div>
    </div>
    <div style="text-align:center">🍒</div>
  </div>
  <div class="flix-col" style="max-width:fit-content">
    <div class="flix-balloon flix-balloon--top flix-balloon--end">
      <div class="flix-balloon__content">Pineapple</div>
    </div>
    <div style="text-align:right">🍍</div>
  </div>
</div>

Size

Balloons will stretch to fit any content in them, but you can set a minimum size. There are 3 different options:

Default (no modifier)

The default balloon is 252px wide.

flix-balloon--medium

The medium balloon is 372px wide.

flix-balloon--large

The large balloon is 492px wide.

The sizes are the product of a multiplication by the base spacing value of 6px.

<div class="flix-space-2-bottom">
  <div class="flix-balloon">
    <div class="flix-balloon__content">A small balloon.</div>
  </div>
</div>
<div class="flix-space-2-bottom">
  <div class="flix-balloon flix-balloon--medium">
    <div class="flix-balloon__content">A medium balloon.</div>
  </div>
</div>
<div class="flix-space-2-bottom">
  <div class="flix-balloon flix-balloon--large">
    <div class="flix-balloon__content">A large balloon.</div>
  </div>
</div>

Appearance

Additionally, we offer 2 more ways of customizing a balloon's appearance:

flix-balloon--content-fit

The minimum width depends on the content, has smaller paddings and does not break lines.

flix-balloon--danger

Danger background color with white text and icon.

<div class="flix-balloon flix-balloon--danger flix-balloon--content-fit">
  <div class="flix-balloon__content">Time to float. 🎈</div>
</div>