Avatar
Circular containers for user profile images with flexible styling options.
Default
Standard avatar with fallback initials.
JD
Sizes
Avatars can be scaled to different sizes.
XSSMMDLGXL
Fallback Variants
Different background colors for fallback states using bg-primary/10 pattern.
ABCDEFGH
Sculpted Container
Avatars wrapped in a sculpted raised container for prominence.
EM
AC
JK
Avatar Group
Stacked avatars with overlapping effect for group representation.
A1B2C3D4+5
With Status
Avatars with online/offline status indicators.
ON
AW
OF
DND
User Card
Avatar integrated into a user information card with sculpted container.
JD
John Doe
Software Engineer
john@example.com
Square Variant
Rounded square avatars for alternative styling.
SQMDLG
In Sculpted Container
Avatars displayed within inset containers following the layer hierarchy.
Team Members
5 onlineEM
Emily Meadows
Lead Designer
AC
Alex Chen
Developer
SL
Sarah Lee
PM