Avatar

Visual representation of users through images or initials. Perfect for profiles, comments, and collaborative interfaces where user identity matters.

Basic Example

Avatars display user images or initials as a fallback.

HTML

<div class="focus-avatar">
  <img src="https://i.pravatar.cc/150?img=1" alt="User avatar">
</div>

<div class="focus-avatar">
  <span class="focus-avatar-initials">JD</span>
</div>

Sizes

Six sizes available for different contexts—from compact lists to profile headers.

HTML

<div class="focus-avatar focus-avatar-xs">
  <img src="avatar.jpg" alt="Extra small avatar">
</div>

<div class="focus-avatar focus-avatar-sm">
  <img src="avatar.jpg" alt="Small avatar">
</div>

<div class="focus-avatar">
  <img src="avatar.jpg" alt="Default avatar">
</div>

<div class="focus-avatar focus-avatar-lg">
  <img src="avatar.jpg" alt="Large avatar">
</div>

<div class="focus-avatar focus-avatar-xl">
  <img src="avatar.jpg" alt="Extra large avatar">
</div>

<div class="focus-avatar focus-avatar-xxl">
  <img src="avatar.jpg" alt="Extra extra large avatar">
</div>

Background Colors

Colorful backgrounds for initial-based avatars help distinguish users.

HTML

<div class="focus-avatar">
  <span class="focus-avatar-initials">PR</span>
</div>

<div class="focus-avatar focus-avatar-secondary">
  <span class="focus-avatar-initials">SE</span>
</div>

<div class="focus-avatar focus-avatar-success">
  <span class="focus-avatar-initials">SU</span>
</div>

<div class="focus-avatar focus-avatar-danger">
  <span class="focus-avatar-initials">DA</span>
</div>

<div class="focus-avatar focus-avatar-warning">
  <span class="focus-avatar-initials">WA</span>
</div>

<div class="focus-avatar focus-avatar-info">
  <span class="focus-avatar-initials">IN</span>
</div>

<div class="focus-avatar focus-avatar-light">
  <span class="focus-avatar-initials">LT</span>
</div>

<div class="focus-avatar focus-avatar-dark">
  <span class="focus-avatar-initials">DK</span>
</div>

Shape Variants

Choose the shape that fits your design language.

Circle

Rounded

Square

HTML

<div class="focus-avatar focus-avatar-lg">
  <img src="avatar.jpg" alt="Circle avatar">
</div>

<div class="focus-avatar focus-avatar-lg focus-avatar-rounded">
  <img src="avatar.jpg" alt="Rounded avatar">
</div>

<div class="focus-avatar focus-avatar-lg focus-avatar-square">
  <img src="avatar.jpg" alt="Square avatar">
</div>

Status Indicators

Show user availability or activity state with status badges.

HTML

<div class="focus-avatar focus-avatar-lg">
  <img src="avatar.jpg" alt="Online user">
  <span class="focus-avatar-status focus-avatar-status-online"></span>
</div>

<div class="focus-avatar focus-avatar-lg">
  <img src="avatar.jpg" alt="Away user">
  <span class="focus-avatar-status focus-avatar-status-away"></span>
</div>

<div class="focus-avatar focus-avatar-lg">
  <img src="avatar.jpg" alt="Busy user">
  <span class="focus-avatar-status focus-avatar-status-busy"></span>
</div>

<div class="focus-avatar focus-avatar-lg">
  <img src="avatar.jpg" alt="Offline user">
  <span class="focus-avatar-status focus-avatar-status-offline"></span>
</div>

Ring Style

Add a decorative ring around avatars for emphasis or selection states.

HTML

<div class="focus-avatar focus-avatar-lg focus-avatar-ring">
  <img src="avatar.jpg" alt="Avatar with ring">
</div>

<div class="focus-avatar focus-avatar-lg focus-avatar-ring">
  <span class="focus-avatar-initials">AB</span>
</div>

Clickable Avatars

Interactive avatars with hover effects for profile links or menus.

HTML

<a href="#" class="focus-avatar focus-avatar-lg focus-avatar-clickable">
  <img src="avatar.jpg" alt="Click to view profile">
</a>

<button class="focus-avatar focus-avatar-lg focus-avatar-clickable focus-avatar-success" style="border: none;">
  <span class="focus-avatar-initials">+</span>
</button>

Avatar Groups

Stack avatars to show team members or participants with an overlap effect.

HTML

<div class="focus-avatar-group">
  <div class="focus-avatar">
    <img src="user1.jpg" alt="Team member 1">
  </div>
  <div class="focus-avatar">
    <img src="user2.jpg" alt="Team member 2">
  </div>
  <div class="focus-avatar">
    <img src="user3.jpg" alt="Team member 3">
  </div>
  <div class="focus-avatar">
    <img src="user4.jpg" alt="Team member 4">
  </div>
  <div class="focus-avatar focus-avatar-secondary">
    <span class="focus-avatar-initials">+5</span>
  </div>
</div>

Placeholder Avatar

A generic placeholder for users without photos or initials.

HTML

<div class="focus-avatar focus-avatar-placeholder">
  <i class="fa fa-user"></i>
</div>

<div class="focus-avatar focus-avatar-lg focus-avatar-placeholder">
  <i class="fa fa-user"></i>
</div>

Common Use Cases

User Profile Header

Jane Doe

Product Designer

Comment Thread

Alex Kim

This looks great! I love the new design direction.

Team List

Sarah Johnson Admin

Mike Rodriguez Member

Pending Invite Invited

CSS Classes Reference

Class	Description
`.focus-avatar`	Base avatar container (required)
`.focus-avatar-initials`	Text initials inside avatar
`.focus-avatar-xs`	Extra small (24px)
`.focus-avatar-sm`	Small (32px)
`.focus-avatar-lg`	Large (56px)
`.focus-avatar-xl`	Extra large (80px)
`.focus-avatar-xxl`	Extra extra large (120px)
`.focus-avatar-secondary`	Secondary background color
`.focus-avatar-success`	Success background color
`.focus-avatar-danger`	Danger background color
`.focus-avatar-warning`	Warning background color
`.focus-avatar-info`	Info background color
`.focus-avatar-light`	Light background color
`.focus-avatar-dark`	Dark background color
`.focus-avatar-square`	Square shape with small radius
`.focus-avatar-rounded`	Rounded corners (not fully circular)
`.focus-avatar-ring`	Decorative ring border
`.focus-avatar-placeholder`	Generic placeholder styling
`.focus-avatar-clickable`	Hover effects for interactive avatars
`.focus-avatar-status`	Status indicator base (requires modifier)
`.focus-avatar-status-online`	Green online indicator
`.focus-avatar-status-away`	Yellow away indicator
`.focus-avatar-status-busy`	Red busy indicator
`.focus-avatar-status-offline`	Gray offline indicator
`.focus-avatar-group`	Container for stacked avatars