Components · avatars
Avatars. Faces, fallbacks, stacks.
A single .lsd-avatar displays an image or initials at six sizes. Status dots, notification badges, overlapping stacks — all composable.
01 · base
.lsd-avatar
Image-or-initials avatar. Falls back gracefully when <img> is missing.
sizes
xs / sm / md / lg / xl / 2xl
Six fixed sizes via --av-size token.
A
B
C
D
E
F
.lsd-avatar--xs / --sm / --md .lsd-avatar--lg / --xl / --2xl
fallback
Image or initials
Drop an <img> in, or render initials as text.
JT
AR
MK
<span class="lsd-avatar">JT</span>
02 · variants
Five variants
.lsd-avatar--circle
Circle (default)
Default radius is 50%.
CL
.lsd-avatar--circle
.lsd-avatar--square
Square (rounded)
Squircle with proportional rounding.
SQ
.lsd-avatar--square
.lsd-avatar--with-status
Status dot
Online (green), away (amber), offline (gray) via data-status. Pulses when data-pulse.
JT
AW
OF
.lsd-avatar--with-status data-status="away"
.lsd-avatar--with-badge
Notification badge
Floating count chip — supports any number.
JT3
MK12
<span class="lsd-avatar
lsd-avatar--with-badge">
JT<span class="lsd-avatar__badge">3</span>
</span>.lsd-avatar-group
Overlapping group
Stack of 3-5 — extra count chip at end.
A
B
C
D
+7
.lsd-avatar-group
03 · animations
Hover + status pulse
.lsd-fx--lift
Hover lift
3px lift on hover.
JT
<span class="lsd-avatar lsd-fx--lift">
status pulse
Live indicator
Status dot pulses for active presence.
JT
data-pulse="true"
.lsd-fx--scale-in
Scale-in mount
Scroll-trigger or chain on appearance.
SC
.lsd-fx--scale-in
Components · LSD primitives