Avatar

Avatars are used to represent people or objects using an image, initials, or an icon. boodoo's avatar component supports sizes, color variants, groups, and status dots.

Basic avatar

DJ AI

<span class="avatar">DJ</span>
<span class="avatar avatar-primary">
  <img src="..." alt="">
</span>

Sizes

Shapes

Avatar group

Stack avatars with .avatar-group; the count overflow is shown with .avatar-more.

Status indicator

Add .avatar-status with a color modifier to indicate presence.

Soft variants