Usage
Use .avatar-img on an image within an .avatar element to create a user avatar.
<div class="avatar">
<img class="avatar-img" src="..." alt="" />
</div>
<div class="avatar">
<svg class="svg-icon absolute bottom-0 right-0 text-primary bg-white border border-white circle" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12">
<path fill="currentColor" d="M6 0C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm2.3 7H3.7c-.3 0-.4-.3-.3-.5C3.9 7.6 4.9 7 6 7s2.1.6 2.6 1.5c.1.2 0 .5-.3.5z"/>
</svg>
<img class="avatar-img" src="..." alt="" />
</div>Inline SVG icons or badges can be used to indicate something special about a user, like their status as an agent.
Sizes
Use the .avatar-{size} modifier class to create avatars of different sizes.
<div class="avatar avatar-sm">
<img class="avatar-img" src="..." alt="" />
</div>
<div class="avatar">
<img class="avatar-img" src="..." alt="" />
</div>
<div class="avatar avatar-lg">
<img class="avatar-img" src="..." alt="" />
</div>Avatar groups
Wrap two or move .avatar elements in a .avatar-group to display within an overlapping group.
<ul class="avatar-group">
<li class="avatar">
<img class="avatar-img" src="..." alt="" />
</li>
<li class="avatar">
<img class="avatar-img" src="..." alt="" />
</li>
<li class="avatar">
<img class="avatar-img" src="..." alt="" />
</li>
</ul>