Code Club Style Guide

Speech Bubbles

Speech Bubbles

Example
Hello
<div class="c-speech-bubble">
Hello
</div>
Example
Hello!
Hello!
Hello!
Hello!
<div class="c-speech-bubble c-speech-bubble--bottom c-speech-bubble--right">
Hello!
</div>
<div class="c-speech-bubble c-speech-bubble--bottom c-speech-bubble--left">
Hello!
</div>
<div class="c-speech-bubble c-speech-bubble--top c-speech-bubble--right">
Hello!
</div>
<div class="c-speech-bubble c-speech-bubble--top c-speech-bubble--left">
Hello!
</div>
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ligula sit amet quam tincidunt consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ligula sit amet quam tincidunt consequat. Aliquam quis commodo nisi, sit amet luctus massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ligula sit amet quam tincidunt consequat. Aliquam quis commodo nisi, sit amet luctus massa. Praesent in purus in elit laoreet finibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ligula sit amet quam tincidunt consequat. Aliquam quis commodo nisi, sit amet luctus massa. Praesent in purus in elit laoreet finibus. Sed non dui fringilla, bibendum nisi vitae, interdum ante. In ultricies ex nec quam consectetur mollis.
<div class="c-speech-bubble c-speech-bubble--bottom c-speech-bubble--x-small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="c-speech-bubble c-speech-bubble--bottom c-speech-bubble--small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam vel ligula sit amet quam tincidunt consequat.
</div>
<div class="c-speech-bubble c-speech-bubble--bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam vel ligula sit amet quam tincidunt consequat.
Aliquam quis commodo nisi, sit amet luctus massa.
</div>
<div class="c-speech-bubble c-speech-bubble--bottom c-speech-bubble--large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam vel ligula sit amet quam tincidunt consequat.
Aliquam quis commodo nisi, sit amet luctus massa.
Praesent in purus in elit laoreet finibus.
</div>
<div class="c-speech-bubble c-speech-bubble--bottom c-speech-bubble--x-large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam vel ligula sit amet quam tincidunt consequat.
Aliquam quis commodo nisi, sit amet luctus massa.
Praesent in purus in elit laoreet finibus.
Sed non dui fringilla, bibendum nisi vitae, interdum ante.
In ultricies ex nec quam consectetur mollis.
</div>