ComponentsSpec

Avatar

A person or a client, in a circle. Photos sit grayscale to match the neutral surface; initials are the fallback.

RP RP RP

Show code

<span class="avatar avatar-sm">RP</span>
<span class="avatar">RP</span>
<span class="avatar avatar-lg">RP</span>
<span class="avatar"><img src="../assets/img/observe.webp" alt="Ravindra Pratap"></span>

Group

VRDMIR+5

Show code

<div class="avatars"><span class="avatar">VR</span><span class="avatar">DM</span><span class="avatar">IR</span><span class="avatar">+5</span></div>

Sizes

Class	Size	Use
`.avatar-sm`	28	Inline with 14px UI text
`.avatar`	40	Lists, comments
`.avatar-lg`	56	Testimonials, profile headers

An avatar is not interactive by itself; wrap it in a link or button when it is, and keep the 44px target on the wrapper.