Docs / Avatar

Avatar

vel-src: avatar.css

Avatar component for displaying user initials or images, with size variants, color fills, ring borders, online/away/offline status dots, and group stacking.

ClassProperties
vel-avatarBase avatar — circle, flex center, default size, surface background
vel-avatar-xsExtra-small size (1.5rem)
vel-avatar-smSmall size (2rem)
vel-avatar-lgLarge size (3.5rem)
vel-avatar-xlExtra-large size (5rem)
vel-avatar-2xlDouble-extra-large size (6.5rem)
vel-avatar-primaryPrimary gradient background fill
vel-avatar-successSuccess green background fill
vel-avatar-ringAdds a subtle border ring around the avatar
vel-avatar-ring-primaryPrimary color ring border
vel-avatar-statusEnables status dot positioning (use with status modifier)
vel-avatar-status-onlineGreen status dot — online
vel-avatar-status-awayAmber status dot — away
vel-avatar-status-offlineGray status dot — offline
vel-avatar-groupOverlapping avatar group — negative margin stacking

Examples

Gradient fills with initials

AB
CD
EF
GH
LG
example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:12px;align-items:center;">
  <div class="vel-avatar vel-avatar-primary" style="color:#fff;font-weight:600;">AB</div>
  <div class="vel-avatar vel-avatar-success" style="color:#fff;font-weight:600;">CD</div>
  <div class="vel-avatar" style="background:#f0416c;color:#fff;font-weight:600;">EF</div>
  <div class="vel-avatar" style="background:#38bdf8;color:#fff;font-weight:600;">GH</div>
  <div class="vel-avatar vel-avatar-lg vel-avatar-primary" style="color:#fff;font-weight:600;">LG</div>
</div>

With status dot

AB
CD
EF
example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:20px;align-items:center;">
  <div class="vel-avatar vel-avatar-primary vel-avatar-status vel-avatar-status-online" style="color:#fff;font-weight:600;">AB</div>
  <div class="vel-avatar vel-avatar-primary vel-avatar-status vel-avatar-status-away" style="color:#fff;font-weight:600;">CD</div>
  <div class="vel-avatar vel-avatar-primary vel-avatar-status vel-avatar-status-offline" style="color:#fff;font-weight:600;">EF</div>
</div>

Avatar group

A
B
C
+4
example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-avatar-group">
    <div class="vel-avatar vel-avatar-ring-primary" style="background:#7c5cfc;color:#fff;font-weight:600;">A</div>
    <div class="vel-avatar vel-avatar-ring-primary" style="background:#0ecb81;color:#fff;font-weight:600;">B</div>
    <div class="vel-avatar vel-avatar-ring-primary" style="background:#f0416c;color:#fff;font-weight:600;">C</div>
    <div class="vel-avatar vel-avatar-ring-primary" style="background:#1a2236;color:#94a3b8;font-weight:600;font-size:0.75rem;">+4</div>
  </div>
</div>