Avatar
User or entity thumbnail representation. Supports image with fallback to initials.
Default
JD
Base
| Class | Description |
|---|---|
.ui-avatar | Base class |
Size
| Class | Value |
|---|---|
.ui-avatar--xs | xs |
.ui-avatar--sm | sm |
.ui-avatar--lg | lg |
.ui-avatar--xl | xl |
Square
| Class | Description |
|---|---|
.ui-avatar--square | square |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-avatar-size |
calc(var(--ui-unit) * 5) |
Overall size |
--ui-avatar-bg |
var(--ui-color-bg-subtle) |
Background color |
--ui-avatar-color |
var(--ui-color-text-muted) |
Text color |
--ui-avatar-font-size |
var(--ui-font-size-sm) |
Font size |
--ui-avatar-radius |
50% |
Corner radius |
--ui-avatar-size-xs |
calc(var(--ui-unit) * 3) |
Overall size at extra-small size |
--ui-avatar-font-size-xs |
var(--ui-font-size-xs) |
Font size at extra-small size |
--ui-avatar-size-sm |
calc(var(--ui-unit) * 4) |
Overall size at small size |
--ui-avatar-font-size-sm |
var(--ui-font-size-xs) |
Font size at small size |
--ui-avatar-size-lg |
calc(var(--ui-unit) * 6) |
Overall size at large size |
--ui-avatar-font-size-lg |
var(--ui-font-size-md) |
Font size at large size |
--ui-avatar-size-xl |
calc(var(--ui-unit) * 8) |
Overall size at extra-large size |
--ui-avatar-font-size-xl |
var(--ui-font-size-lg) |
Font size at extra-large size |
--ui-avatar-radius-square |
var(--ui-radius-md) |
Radius square |
Sizes
XS
SM
MD
LG
XL
<div class="ui-avatar ui-avatar--xs">
<span class="ui-avatar__fallback">XS</span>
</div>
<div class="ui-avatar ui-avatar--sm">
<span class="ui-avatar__fallback">SM</span>
</div>
<div class="ui-avatar">
<span class="ui-avatar__fallback">MD</span>
</div>
<div class="ui-avatar ui-avatar--lg">
<span class="ui-avatar__fallback">LG</span>
</div>
<div class="ui-avatar ui-avatar--xl">
<span class="ui-avatar__fallback">XL</span>
</div>Square Shape
ORG
<div class="ui-avatar ui-avatar--square">
<span class="ui-avatar__fallback">ORG</span>
</div>
<div class="ui-avatar ui-avatar--square">
<img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=org" alt="Org"></img>
</div>With Images
<div class="ui-avatar ui-avatar--sm">
<img class="ui-avatar__image" src="https://i.pravatar.cc/64?u=a" alt="User A"></img>
</div>
<div class="ui-avatar">
<img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=b" alt="User B"></img>
</div>
<div class="ui-avatar ui-avatar--lg">
<img class="ui-avatar__image" src="https://i.pravatar.cc/96?u=c" alt="User C"></img>
</div>Avatar Group
+5
<div class="ui-avatar-group">
<div class="ui-avatar">
<img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=g1" alt></img>
</div>
<div class="ui-avatar">
<img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=g2" alt></img>
</div>
<div class="ui-avatar">
<img class="ui-avatar__image" src="https://i.pravatar.cc/80?u=g3" alt></img>
</div>
<div class="ui-avatar">
<span class="ui-avatar__fallback">+5</span>
</div>
</div>