Avatar

Use avatars to represent users with their photo or initials.

Default Avatar (Initials)

<span class="avatar avatar-sm">JD</span>
<span class="avatar">JD</span>
<span class="avatar avatar-lg">JD</span>
<span class="avatar avatar-xl">JD</span>

With Image

<span class="avatar">
  <img src="/user-photo.jpg" alt="John Doe">
</span>

Avatar Colours

Avatar with Status

<span class="avatar-container">
  <span class="avatar">JD</span>
  <span class="status-dot status-dot-success"></span>
</span>

Avatar Group

<div class="avatar-group">
  <span class="avatar">AB</span>
  <span class="avatar">CD</span>
  <span class="avatar">EF</span>
  <span class="avatar avatar-count">+5</span>
</div>

Generating Initials

function getInitials(name) {
  const names = name.trim().split(' ');
  if (names.length === 1) {
    return names[0].charAt(0).toUpperCase();
  }
  return (names[0].charAt(0) + names[names.length - 1].charAt(0)).toUpperCase();
}

// Examples
getInitials('John Doe'); // 'JD'
getInitials('Jane'); // 'J'
getInitials('John Michael Doe'); // 'JD'

Colour from Name

Generate consistent colours based on the user's name:

function getAvatarColor(name) {
  const colors = [
    '#AD0908', '#2563eb', '#7c3aed', '#059669',
    '#d97706', '#dc2626', '#0891b2', '#4f46e5'
  ];

  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }

  return colors[Math.abs(hash) % colors.length];
}

Sizes

Accessibility

• Always provide alt text for image avatars
• Use aria-hidden="true" for decorative avatars
• Ensure initials have sufficient contrast
• Don't rely on avatars alone to identify users

CSS Classes

.avatar { }
.avatar-sm { }
.avatar-lg { }
.avatar-xl { }
.avatar-container { }
.avatar-group { }