Sections

Avatars

Avatars represent users and can be used in articles, posts, requests and comments.

Usage

Use .avatar-img on an image within an .avatar element to create a user avatar.

Avatar
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="/assets/img/avatars/default.png">
</div>

<div class="avatar">
  <img class="avatar-img" src="/assets/img/avatars/default.png">
</div>

<div class="avatar avatar-lg">
  <img class="avatar-img" src="/assets/img/avatars/default.png">
</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="/assets/img/avatars/default.png">
  </li>
  <li class="avatar">
    <img class="avatar-img" src="/assets/img/avatars/default.png">
  </li>
  <li class="avatar">
    <img class="avatar-img" src="/assets/img/avatars/default.png">
  </li>
</ul>