{# ========================================================================== #}
{# :: Info #}
{# ========================================================================== #}
{% set info %}

The bubble component consists of an empty div that forms a bubble. This bubble
is 5 times the width of its border-radius. The arrow attached to it is two times
the width of the border-radius and is positioned two times the border-radius
from the left or from the top.

{% endset %}

{# ========================================================================== #}
{# :: Modifiers #}
{# ========================================================================== #}
{% set modifiers %}

- c-bubble--arrow-bottom

	Use this modifier to set an arrow at the bottom of the bubble

- c-bubble--arrow-top

	Use this modifier to set an arrow at the top of the bubble

- c-bubble--arrow-right

	Use this modifier to set an arrow at the right of the bubble

- c-bubble--arrow-left

	Use this modifier to set an arrow at the left of the bubble

{% endset %}

{# ========================================================================== #}
{# :: States #}
{# ========================================================================== #}
{# {% set states %}

{% endset %} #}

{# ========================================================================== #}
{# :: JavaScript #}
{# ========================================================================== #}
{# {% set javascript %}

{% endset %} #}