Avatar

Display user profile images, initials, or placeholders with .velin-avatar. Supports five sizes, a status indicator, square variant, and stacked avatar groups.

Basic Example

<!-- Initials fallback -->
<span class="velin-avatar" data-velin-initials="AB"></span>

<!-- Image -->
<span class="velin-avatar">
  <img src="avatar.jpg" alt="User">
</span>

Sizes

<span class="velin-avatar velin-avatar--xs" data-velin-initials="XS"></span>
<span class="velin-avatar velin-avatar--sm" data-velin-initials="SM"></span>
<span class="velin-avatar" data-velin-initials="MD"></span> <!-- default -->
<span class="velin-avatar velin-avatar--lg" data-velin-initials="LG"></span>
<span class="velin-avatar velin-avatar--xl" data-velin-initials="XL"></span>
<span class="velin-avatar velin-avatar--2xl" data-velin-initials="2X"></span>

Status Indicator

<span class="velin-avatar" data-velin-initials="ON">
  <span class="velin-avatar__status velin-avatar__status--online"></span>
</span>
<span class="velin-avatar" data-velin-initials="AW">
  <span class="velin-avatar__status velin-avatar__status--away"></span>
</span>
<span class="velin-avatar" data-velin-initials="BY">
  <span class="velin-avatar__status velin-avatar__status--busy"></span>
</span>

Avatar Group

<div class="velin-avatar-group">
  <span class="velin-avatar"><img src="user1.jpg" alt="User 1"></span>
  <span class="velin-avatar"><img src="user2.jpg" alt="User 2"></span>
  <span class="velin-avatar"><img src="user3.jpg" alt="User 3"></span>
  <span class="velin-avatar" data-velin-initials="+5"></span>
</div>

Accessibility

Always provide alt text on <img> inside avatars.
For initials-only avatars, add aria-label with the user's full name.
Status dots are decorative — pair them with visible text elsewhere on the page.

CSS Variables

Variable	Description
`--velin-color-primary-subtle`	Default avatar background
`--velin-color-primary`	Default avatar text/initials color
`--velin-color-surface-bright`	Border & ring color
`--velin-radius-full`	Fully round (circle)
`--velin-radius-md`	Square variant radius
`--velin-color-success`	Online status
`--velin-color-warning`	Away status
`--velin-color-danger`	Busy status