Avatars

User avatars supporting images, initials, sizes, colors, status dots, and overlapping groups. Build with .ziom-avatar plus optional size/color modifiers.

Sizes

XS

SM

MD

LG

XL

HTML

<div class="ziom-avatar ziom-avatar-xs"><span class="ziom-avatar-initials">XS</span></div>
<div class="ziom-avatar ziom-avatar-sm"><span class="ziom-avatar-initials">SM</span></div>
<div class="ziom-avatar"><span class="ziom-avatar-initials">MD</span></div>
<div class="ziom-avatar ziom-avatar-lg"><span class="ziom-avatar-initials">LG</span></div>
<div class="ziom-avatar ziom-avatar-xl"><span class="ziom-avatar-initials">XL</span></div>

Colors

AB

CD

EF

GH

IJ

HTML

<div class="ziom-avatar ziom-avatar-primary"><span class="ziom-avatar-initials">AB</span></div>
<div class="ziom-avatar ziom-avatar-success"><span class="ziom-avatar-initials">CD</span></div>
<div class="ziom-avatar ziom-avatar-warning"><span class="ziom-avatar-initials">EF</span></div>
<div class="ziom-avatar ziom-avatar-danger"><span class="ziom-avatar-initials">GH</span></div>
<div class="ziom-avatar ziom-avatar-info"><span class="ziom-avatar-initials">IJ</span></div>

Status Indicator

ON

BZ

HTML

<div class="ziom-avatar ziom-avatar-primary">
  <span class="ziom-avatar-initials">ON</span>
  <span class="ziom-avatar-status ziom-avatar-status-online"></span>
</div>
<div class="ziom-avatar ziom-avatar-info">
  <span class="ziom-avatar-initials">BZ</span>
  <span class="ziom-avatar-status ziom-avatar-status-busy"></span>
</div>

Avatar Group

AA

BB

CC

+5

HTML

<div class="ziom-avatar-group">
  <div class="ziom-avatar ziom-avatar-primary"><span class="ziom-avatar-initials">AA</span></div>
  <div class="ziom-avatar ziom-avatar-success"><span class="ziom-avatar-initials">BB</span></div>
  <div class="ziom-avatar ziom-avatar-warning"><span class="ziom-avatar-initials">CC</span></div>
  <div class="ziom-avatar-group-count">+5</div>
</div>