Avatar

Circular user image or initials placeholder with size variants and status indicators.

Sizes

Preview Code xs · sm · md · lg · xl

<ac-avatar size="xs" initials="JP"></ac-avatar>
<ac-avatar size="sm" initials="AB"></ac-avatar>
<ac-avatar size="md" initials="CD"></ac-avatar>
<ac-avatar size="lg" initials="EF"></ac-avatar>
<ac-avatar size="xl" initials="GH"></ac-avatar>

Copy

With image

Preview Code

<ac-avatar src="https://i.pravatar.cc/80?img=1" alt="User 1"></ac-avatar>
<ac-avatar src="https://i.pravatar.cc/80?img=2" alt="User 2"></ac-avatar>
<ac-avatar src="https://i.pravatar.cc/80?img=3" alt="User 3"></ac-avatar>

Copy

Avatar group

Preview Code

<div class="ac-avatar-group">
<ac-avatar initials="JP"></ac-avatar>
<ac-avatar initials="AB"></ac-avatar>
<ac-avatar initials="CD"></ac-avatar>
<ac-avatar initials="+4"></ac-avatar>
</div>

Copy

Status indicator

Preview Code

<span class="ac-avatar-wrapper">
<ac-avatar initials="JP" size="lg"></ac-avatar>
<span class="ac-avatar-wrapper__status ac-avatar-wrapper__status--online"></span>
</span>
<span class="ac-avatar-wrapper">
<ac-avatar initials="AB" size="lg"></ac-avatar>
<span class="ac-avatar-wrapper__status ac-avatar-wrapper__status--busy"></span>
</span>
<span class="ac-avatar-wrapper">
<ac-avatar initials="CD" size="lg"></ac-avatar>
<span class="ac-avatar-wrapper__status ac-avatar-wrapper__status--away"></span>
</span>

Copy

Attributes

Attribute	Description
src	Image URL
alt	Alt text for image
initials	Fallback text (1-2 chars)
size	xs | sm | md | lg | xl
shape	circle (default) | square | rounded