CSS Balloons

Balloon left

Hi there! I'm a balloon with the arrow on the left.

	                <div class="balloon balloon-left">
	<p>Hi there! I'm a balloon with the arrow on the left.</p>
</div>
                

Balloon right

Hi there! I'm a balloon with the arrow on the right.

	                <div class="balloon balloon-right">
	<p>Hi there! I'm a balloon with the arrow on the right.</p>
</div>
                

Balloon top

Hi there! I'm a balloon with the arrow on the top.

	                <div class="balloon balloon-top">
	<p>Hi there! I'm a balloon with the arrow on the top.</p>
</div>
                

Balloon bottom

Hi there! I'm a balloon with the arrow on the bottom.

	                <div class="balloon balloon-bottom">
	<p>Hi there! I'm a balloon with the arrow on the bottom.</p>
</div>
                

Balloons with different background colors

To customize the color of the background use balloon-#{color} modifiers. Check this examples:

Hi there! I'm a balloon with color-primary as background.

Hi there! I'm a balloon with color-secondary as background.

Hi there! I'm a balloon with color-foreground as background.

Hi there! I'm a balloon with color-background as background.

Hi there! I'm a balloon with color-ko as background.

Hi there! I'm a balloon with color-ok as background.

Hi there! I'm a balloon with color-info as background.

Hi there! I'm a balloon with color-warning as background.

	                <div class="balloon balloon-left balloon-primary">
	<p>Hi there! I'm a balloon with color-primary as background.</p>
</div>

<div class="balloon balloon-right balloon-secondary">
	<p>Hi there! I'm a balloon with color-secondary as background.</p>
</div>

<div class="balloon balloon-top balloon-foreground">
	<p>Hi there! I'm a balloon with color-foreground as background.</p>
</div>

<div class="balloon balloon-bottom balloon-background">
	<p>Hi there! I'm a balloon with color-background as background.</p>
</div>

<div class="balloon balloon-left balloon-ko">
	<p>Hi there! I'm a balloon with color-ko as background.</p>
</div>

<div class="balloon balloon-right balloon-ok">
	<p>Hi there! I'm a balloon with color-ok as background.</p>
</div>

<div class="balloon balloon-top balloon-info">
	<p>Hi there! I'm a balloon with color-info as background.</p>
</div>

<div class="balloon balloon-bottom balloon-warning">
	<p>Hi there! I'm a balloon with color-warning as background.</p>
</div>
                

Customize the appearance

You can customize the appearance of this object by setting up in your config folder the following map. By default de values are the indicated here.

 $object-balloons-vars-custom: (
// Default Background color:
default-background-color: $color-box,
// Padding:
padding: $spacing,
// Triangle size
triangle-size: $spacing/2,
// Border Radius
border-radius: $default-border-radius,
// Font family first level
font-family: $font-face-default,
// Font weight first level
font-weight: normal,
// Font size first level
font-size: $font-size-default,
) !global !default;