Avatars

A set of CSS utility classes to format single avatars, groups of avatars and add badges to avatars.

Basic Usage

Avatar 
<img class="avatar" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
.avatar

Apply to <img> to format as an avatar

Sizes

avatar-xs
Avatar
avatar-sm
Avatar
avatar
Avatar
avatar-lg
Avatar
avatar-xl
Avatar 
<img class="avatar avatar-xs" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
<img class="avatar avatar-sm" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
<img class="avatar avatar" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
<img class="avatar avatar-lg" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
<img class="avatar avatar-xl" src="assets/img/avatars/female-3.jpg" alt="Avatar" />
.avatar-xs

Apply to .avatar to greatly reduce default size

.avatar-sm

Apply to .avatar to reduce default size

.avatar-lg

Apply to .avatar to increase default size

.avatar-xl

Apply to .avatar to greatly increase default size

Group

  • Avatar
  • Avatar
  • Avatar
  • Avatar 
<ul class="avatar-group">
  <li>
    <img class="avatar" src="assets/img/avatars/female-1" alt="Avatar">
  </li>
  <li>
    <img class="avatar" src="assets/img/avatars/male-2" alt="Avatar">
  </li>
  <li>
    <img class="avatar" src="assets/img/avatars/female-3" alt="Avatar">
  </li>
  <li>
    <img class="avatar" src="assets/img/avatars/male-4" alt="Avatar">
  </li>
</ul>
.avatar-group

Apply to <ul> to to format <li> and <img.avatar> children as an overlapping group

Badges

Avatar
Avatar
Avatar
Avatar
Verified 
<div class="mr-2 mb-2">
    <div class="avatar-container">
        <img alt="Avatar" class="avatar avatar-sm" src="assets/img/avatars/female-1.jpg">
        <div class="badge badge-danger"></div>
    </div>
</div>
<div class="mr-2 mb-2">
    <div class="avatar-container">
        <img alt="Avatar" class="avatar" src="assets/img/avatars/female-3.jpg">
        <div class="badge badge-success"></div>
    </div>
</div>
<div class="mr-2 mb-2">
    <div class="avatar-container">
        <img alt="Avatar" class="avatar avatar-lg" src="assets/img/avatars/male-3.jpg">
        <div class="badge badge-warning"></div>
    </div>
</div>
<div class="mr-2 mb-2">
    <div class="avatar-container">
        <img alt="Avatar" class="avatar avatar-xl" src="assets/img/avatars/male-2.jpg">
        <div class="badge badge-pill badge-primary p-0">
            <img alt="Verified" class="icon icon-xs m-2 bg-white" data-inject-svg src="assets/img/icons/interface/icon-check.svg">
        </div>
    </div>
</div>
.avatar-container

Apply to <div> containing <img.avatar> followed directly by <div.badge> to overlay badge on avatar