user-avatar

User profile images with fallback support and optional status indicators. Perfect for user interfaces and comment systems.

Attributes

Attribute Values Default Description
data-size xs, sm, md, lg, xl, 2xl md Avatar size
data-shape square, rounded circle Border radius style
data-ring boolean - Add border ring

Sizes

Avatars come in six sizes for different contexts.

XS SM MD LG XL 2XL

Code

<user-avatar data-size="sm"> <span data-fallback>SM</span> </user-avatar> <user-avatar data-size="lg"> <span data-fallback>LG</span> </user-avatar>

With Image

Display a user's profile image.

Jane Doe John Smith Alex Johnson

Code

<user-avatar data-size="lg"> <img src="user-photo.jpg" alt="Jane Doe" /> </user-avatar>

Fallback (Initials)

Display initials when no image is available.

JD AS MK

Code

<user-avatar data-size="lg"> <span data-fallback>JD</span> </user-avatar>

Shapes

Choose between circle (default), rounded, or square shapes.

C R S

Code

<user-avatar><span data-fallback>C</span></user-avatar> <user-avatar data-shape="rounded"><span data-fallback>R</span></user-avatar> <user-avatar data-shape="square"><span data-fallback>S</span></user-avatar>

Status Indicator

Show online/offline status with a colored dot.

Online User AW BY OF

Code

<user-avatar data-size="lg"> <img src="user-photo.jpg" alt="User Name" /> <span data-status="online"></span> </user-avatar>

Avatar Group

Display multiple avatars in an overlapping stack using layout-cluster with data-layout-overlap.

User 1 User 2 User 3 +5

Code

<layout-cluster data-layout-overlap> <user-avatar><img src="user1.jpg" alt="User 1" /></user-avatar> <user-avatar><img src="user2.jpg" alt="User 2" /></user-avatar> <user-avatar><img src="user3.jpg" alt="User 3" /></user-avatar> <user-avatar><span data-fallback>+5</span></user-avatar> </layout-cluster>

With Ring

Add a decorative ring around the avatar.

User RG

Code

<user-avatar data-size="lg" data-ring> <img src="user-photo.jpg" alt="User" /> </user-avatar>

Related Elements