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

Avatars use a dedicated 8-colour palette derived from the extended palette (Red, Blue, Green, Purple, Teal, Orange, Pink, Brown). All eight maintain at least 4.5:1 contrast with white initials. Use --avatar-bg-1 through --avatar-bg-8; do not introduce arbitrary hex values.

<span class="avatar" style="background-color: var(--avatar-bg-1)">AB</span>
<span class="avatar" style="background-color: var(--avatar-bg-2)">CD</span>
<!-- ... through --avatar-bg-8 -->

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 a deterministic avatar colour from the user's name by hashing the string and using the result as an index into the avatar palette. This keeps the same user the same colour across pages and sessions.

function getAvatarTokenIndex(name) {
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }
  // Returns 1–8, mapping to --avatar-bg-1 through --avatar-bg-8
  return (Math.abs(hash) % 8) + 1;
}

// Usage:
const index = getAvatarTokenIndex('John Doe');
element.style.backgroundColor = `var(--avatar-bg-${index})`;

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 { }