Avatars

A set of CSS utility classes to format single avatars and overlapping groups of avatars.

Basic Usage

Avatar 
<img class="avatar" src="..." alt="..." />
.avatar

Apply to <img> to format as an avatar

Sizes

Avatar Avatar Avatar Avatar 
<img class="avatar avatar-sm" src="..." alt="..." />
<img class="avatar avatar" src="..." alt="..." />
<img class="avatar avatar-lg" src="..." alt="..." />
<img class="avatar avatar-xlg" src="..." alt="..." />
.avatar-sm

Apply to .avatar to reduce default size

.avatar-lg

Apply to .avatar to increase default size

.avatar-xlg

Apply to .avatar to greatly increase default size

Group

  • Avatar
  • Avatar
  • Avatar
  • Avatar 
<ul class="avatars">
  <li>
    <img src="..." alt="..." class="avatar">
  </li>
  <li>
    <img src="..." alt="..." class="avatar">
  </li>
  <li>
    <img src="..." alt="..." class="avatar">
  </li>
</ul>
.avatars

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