Avatar

Size Variants (with Image)

5 sizes: xl (84px), lg (60px), md (44px), sm (36px), xs (28px)

XL (84px)

LG (60px)

MD (44px)

SM (36px)

XS (28px)

<div class="avatar avatar--md elv-size-11 elv-size-11">
  <img src="user.jpg" alt="User name" class="avatar__image">
</div>

Initials (Fallback)

When no image is available, show user initials on purple background

<div class="avatar avatar--md elv-size-11">
  <div class="avatar__initials">JD</div>
</div>

Placeholder (Anonymous)

When neither image nor initials are available

<div class="avatar avatar--md elv-size-11">
  <div class="avatar__placeholder">
    <svg>...</svg>
  </div>
</div>

Anonymous Profile (Colorful Pictograms)

Decorative anonymous avatars in 4 colors for when users haven't set a profile image

Blue

Purple

Rorange

Teal

Usage: Randomly assign one of the 4 colors to anonymous users for visual variety

<div class="avatar avatar--lg elv-size-15">
  <img src="pictogram-anonymous-avatar-blue.svg" alt="Anonymous" class="avatar__image">
</div>

With Notification Badge

Optional notification badge in top-right corner

3

With count

SC

12

Double digit

Dot only

<div class="avatar avatar--lg elv-size-15">
  <img src="user.jpg" alt="User" class="avatar__image">
  <span class="avatar__notification">3</span>
</div>

In Context

Common usage patterns in UI

Team Members

Jane Doe

Product Manager

AS

Alex Smith

Designer

2

Mike Chen

Engineer

Assigned Team

JK

+3 more

Accessibility Notes

• Alt Text: Always provide descriptive alt text for avatar images
• ARIA Labels: Use aria-label for notification badges to convey count
• Color Independence: Initials are readable on purple background (WCAG AA)
• Focus States: If avatar is interactive (clickable), add visible focus ring

Design System Specs