Avatar

View Storybook

An avatar is a visual representation of a user or object.

Classes

Class Applies to Description
.d-avatar N/A Base avatar style.
.d-avatar--icon .d-avatar Applies icon style.
.d-avatar--initials .d-avatar Applies initials style.
.d-avatar--sm .d-avatar Applies small size (24px).
.d-avatar--md .d-avatar Applies medium size (32px).
.d-avatar--lg .d-avatar Applies large size (48px).
.d-avatar--orange-200 .d-avatar Applies orange-200 color.
.d-avatar--orange-300 .d-avatar Applies orange-300 color.
.d-avatar--orange-400 .d-avatar Applies orange-400 color.
.d-avatar--orange-500 .d-avatar Applies orange-500 color.
.d-avatar--pink-300 .d-avatar Applies pink-300 color.
.d-avatar--pink-400 .d-avatar Applies pink-400 color.
.d-avatar--pink-500 .d-avatar Applies pink-500 color.
.d-avatar--pink-600 .d-avatar Applies pink-600 color.
.d-avatar--purple-200 .d-avatar Applies purple-200 color.
.d-avatar--purple-300 .d-avatar Applies purple-300 color.
.d-avatar--purple-500 .d-avatar Applies purple-500 color.
.d-avatar--purple-600 .d-avatar Applies purple-600 color.
.d-avatar--yellow-200 .d-avatar Applies yellow-200 color.
.d-avatar--yellow-300 .d-avatar Applies yellow-300 color.
.d-avatar--yellow-400 .d-avatar Applies yellow-400 color.
.d-avatar--yellow-500 .d-avatar Applies yellow-500 color.

Examples

Icons

Images

Initials

Sizes

Accessibility

Initial avatars' background and font color combinations have been paired to ensure minimum contrast is met.

When it comes to voiceover, avatars accompanying a label should generally be considered decorative and shouldn't be focusable or read out. An example is a user's avatar next to their name.

Avatars unaccompanied by labels, especially those representing functionality or navigation, should be focusable and readout in voiceover. Please refer to WCAG references for your specific usage.