Avatars
User representation components for profiles and comments. All avatars meet WCAG 2.1 Level AA with proper alt text and fallback states.
Avatar Sizes
JD
JD
JD
JD
JD
XS (24px)SM (32px)MD (40px)LG (48px)XL (64px)
Avatar with Image
Avatar Shapes
AB
CD
EF
CircleRoundedSquare
Avatar with Status
ON
AW
BS
OF
OnlineAwayBusyOffline
Avatar Groups
A
B
C
D
+5
Avatar with Badge
JD
3KL
99+Fallback States
JD
With InitialsIcon Fallback
Color Variants
A
B
C
D
E
F
Accessibility Guidelines
Alt TextImage avatars include descriptive alt text.
Fallback ContentInitials or icons when images fail to load.
Color ContrastInitials meet 4.5:1 contrast against background.
Status AnnouncementsStatus indicators have aria-label for screen readers.