Avatar

User profile pictures with initials fallback and status indicators

Basic Usage

Avatars display user profile pictures or initials with a glassmorphism design.

HTML 
<div class="bl-avatar" data-initials="JD"></div>

Sizes

Avatars come in four sizes: small, medium (default), large, and extra large.

HTML 
<div class="bl-avatar bl-avatar-sm" data-initials="SM"></div>
<div class="bl-avatar bl-avatar-md" data-initials="MD"></div>
<div class="bl-avatar bl-avatar-lg" data-initials="LG"></div>
<div class="bl-avatar bl-avatar-xl" data-initials="XL"></div>

Status Indicators

Add status indicators to show online, offline, away, or busy states.

HTML 
<div style="position: relative;">
  <div class="bl-avatar" data-initials="ON"></div>
  <span class="bl-avatar-status bl-avatar-status-online"></span>
</div>

Square Avatars

Use bl-avatar-square for rounded square avatars instead of circular.

HTML 
<div class="bl-avatar bl-avatar-square" data-initials="SQ"></div>

Avatar Groups

Display multiple avatars in an overlapping group.

HTML 
<div class="bl-avatar-group">
  <div class="bl-avatar" data-initials="JD"></div>
  <div class="bl-avatar" data-initials="AS"></div>
  <div class="bl-avatar" data-initials="MK"></div>
  <div class="bl-avatar" data-initials="LR"></div>
</div>

Features

  • Initials Fallback: Automatically displays initials using data-initials attribute
  • Image Support: Add an <img> tag inside the avatar for photos
  • Status Indicators: Four status states: online, offline, away, busy
  • Multiple Sizes: Small (32px), Medium (40px), Large (56px), XL (80px)
  • Shape Variants: Circle (default) or square with rounded corners
  • Avatar Groups: Overlapping avatar display for team members