Avatar — Veritheme

Sizes

Available in small, default, and large sizes.

html

S

sm

JD

md

JD

lg

JD

xl

<!-- Small 24px -->
<div class="vt-avatar vt-avatar-sm">
  <span>S</span>
</div>

<!-- Default 40px -->
<div class="vt-avatar vt-avatar-md">
  <span>JD</span>
</div>

<!-- Large 56px -->
<div class="vt-avatar vt-avatar-lg">...</div>

<!-- XL 80px -->
<div class="vt-avatar vt-avatar-xl">...</div>

With Image

Avatar with a user photo.

html

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

Fallback

Initials or icon when no image is available.

html

AB

CD

<!-- Initials -->
<div class="vt-avatar vt-avatar-md">
  <span class="vt-text-sm vt-font-medium vt-text-mains-quaternary">AB</span>
</div>

<!-- Icon -->
<div class="vt-avatar vt-avatar-md">
  <svg class="vt-w-5 vt-h-5 vt-text-mains-quaternary">...</svg>
</div>

With Status

Online/offline indicator on the avatar.

html

EF

GH

<div class="vt-relative vt-inline-flex">
  <div class="vt-avatar vt-avatar-md">
    <img src="..." alt="User" />
  </div>
  <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3
    vt-rounded-full vt-bg-info-primary
    vt-border-2 vt-border-surfaces-background"></span>
</div>

Avatar Group

Stack multiple avatars together.

html

+5

<div class="vt-flex vt--space-x-3">
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surfaces-background">
    <img src="..." alt="User" />
  </div>
  <!-- ...more avatars -->
  <div class="vt-avatar vt-avatar-md vt-ring-2 vt-ring-surfaces-background">
    <span class="vt-text-xs vt-font-medium">+5</span>
  </div>
</div>

API Reference

All CSS classes available for the Avatar component.

Class	Type	Description
`vt-avatar`	Base	Base avatar — rounded, centered, overflow hidden, muted background
`vt-avatar-sm`	Size	Small avatar (24px)
`vt-avatar-md`	Size	Default avatar (40px)
`vt-avatar-lg`	Size	Large avatar (56px)
`vt-avatar-xl`	Size	Extra large avatar (80px)

Accessibility

Keyboard and screen reader support.

Feature	Details
Alt text	Always provide meaningful alt text for user images
Fallback	Initials or icon fallback when image is unavailable
Status	Status indicators should have sr-only text describing the status
Decorative	If avatar is next to username, use alt="" to avoid redundancy