Skip to main content

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

XS SM MD LG XL 2X 
<span class="avatar avatar-xs">XS</span>
<span class="avatar avatar-sm">SM</span>
<span class="avatar avatar-md">MD</span>
<span class="avatar avatar-lg">LG</span>
<span class="avatar avatar-xl">XL</span>
<span class="avatar avatar-xxl">2X</span>

Shapes

SQ RD CI 
<span class="avatar avatar-square">SQ</span>
<span class="avatar avatar-rounded">RD</span>
<span class="avatar">CI</span>

Avatar group

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

A B C +8 
<div class="avatar-group">
  <span class="avatar avatar-primary">A</span>
  <span class="avatar avatar-success">B</span>
  <span class="avatar avatar-danger">C</span>
  <span class="avatar avatar-more">+8</span>
</div>

Status indicator

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

JD OK OF BU 
<span class="avatar avatar-primary">JD</span>
<span class="avatar avatar-success"><span class="avatar-status"></span>OK</span>
<span class="avatar avatar-danger"><span class="avatar-status avatar-status-offline"></span>OF</span>
<span class="avatar avatar-info"><span class="avatar-status avatar-status-busy"></span>BU</span>

Soft variants

P S D W I 
<span class="avatar avatar-soft-primary">P</span>
<span class="avatar avatar-soft-success">S</span>
<span class="avatar avatar-soft-danger">D</span>
<span class="avatar avatar-soft-warning">W</span>
<span class="avatar avatar-soft-info">I</span>