Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
4 patterns
Initials avatar
A deterministic text fallback when no image is available.
initialsfallback
Accessibility
The initials avatar exposes the full person name as its accessible label.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Fallback avatar
A neutral silhouette for an unknown or decorative identity.
fallbackicon
Accessibility
The wrapper supplies meaning while the internal icon remains decorative.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Avatar with identity
Initials, name and role grouped into a compact identity block.
identityprofile
Accessibility
The avatar is hidden because adjacent text already identifies the person.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Avatar group
A labelled overlapping group that remains understandable without imagery.
groupteam
Accessibility
The group label names every visible member; repeated initials are decorative.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.