Avatars

Basic Usage

The .avatar component automatically adapts its content, whether it's an image, text, or icon.

<!-- Image Avatar -->
<figure class="avatar">
  <img src="..." alt="...">
</figure>

<!-- Text Avatar -->
<figure class="avatar">
  <span>AB</span>
</figure>

Brand Avatars

Avatars with brand indicators as badges.

<figure class="avatar avatar-xl">
  <img src="..." alt="...">
  <span class="avatar-badge avatar-netflix">
    <i class="bi bi-play-fill"></i>
  </span>
</figure>

<!-- Icon Avatar -->
<figure class="avatar">
  <i class="bi bi-person"></i>
</figure>

Shapes

Modify the border radius with .avatar-rounded or .avatar-square .

<!-- Circle (Default) -->
<figure class="avatar">...</figure>

<!-- Rounded -->
<figure class="avatar avatar-rounded">...</figure>

<!-- Square -->
<figure class="avatar avatar-square">...</figure>

Available Sizes

Control avatar dimensions from XS to XL to match your UI context.

.avatar-xl

.avatar-lg

(default)

.avatar-sm

.avatar-xs

<figure class="avatar avatar-xl">...</figure>
<figure class="avatar avatar-lg">...</figure>
<figure class="avatar">...</figure>
<figure class="avatar avatar-sm">...</figure>
<figure class="avatar avatar-xs">...</figure>

Status Indicators

Add specific .avatar-status indicators for online, busy, or away states.

<figure class="avatar">
  <img src="..." alt="...">
  <span class="avatar-status bg-success"></span>
</figure>

Avatar Groups

Stack multiple avatars together using the .avatar-group container.

<div class="avatar-group">
  <figure class="avatar">...</figure>
  <figure class="avatar">...</figure>
  <figure class="avatar">...</figure>
</div>

Interactive Lightbox

Integrated with GLightbox to preview avatar images or videos in full size.

IMG

<!-- Lightbox Image -->
<a class="avatar glightbox" href="large-image.jpg">
  <img src="thumb.jpg" alt="...">
</a>

<!-- Lightbox Video -->
<a class="glightbox" href="youtube-url">
  <figure class="avatar">...</figure>
</a>