Message bubbles

Basic

Use .c-message-bubble to display a message bubble icon.

99+

.c-message-bubble
  .c-message-bubble__number 7
.c-message-bubble
  .c-message-bubble__number 99
.c-message-bubble
  .c-message-bubble__number.-small 99+

<div class="c-message-bubble">
  <div class="c-message-bubble__number">
    7
  </div>
</div>
<div class="c-message-bubble">
  <div class="c-message-bubble__number">
    99
  </div>
</div>
<div class="c-message-bubble">
  <div class="c-message-bubble__number -small">
    99+
  </div>
</div>

If there are unread messages, add .-unread class.

.c-message-bubble.-unread
  .c-message-bubble__number 7

<div class="c-message-bubble -unread">
  <div class="c-message-bubble__number">
    7
  </div>
</div>

If there is no messages, add .-empty class.

.c-message-bubble.-empty

<div class="c-message-bubble -empty"></div>