Avatar

Portraits, initials fallbacks, presence and stacked groups.

Source: src/stylus/components/avatar.styl

Fallback initials

Sizes .sm, .lg, .xl; .rounded for a circle.

SR
AG
JD
<div class="avatar sm"><span class="avatar-fallback">SR</span></div>
<div class="avatar"><span class="avatar-fallback">AG</span></div>
<div class="avatar lg"><span class="avatar-fallback">JD</span></div>

Group

.avatar-group overlaps the children.

AG
SR
+4
<div class="avatar-group">
  <div class="avatar sm"><span class="avatar-fallback">AG</span></div>
  <div class="avatar sm"><span class="avatar-fallback">SR</span></div>
  <div class="avatar sm"><span class="avatar-fallback">+4</span></div>
</div>