Dialtone

Avatar

View Storybook

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

Classes

ClassApplies toDescription

Examples

Icons

<div class="d-avatar d-avatar--icon d-avatar--purple-600">...</div>

Images

<div class="d-avatar d-avatar--{$size}">
    <img src="/path/to/image" />
</div>

Initials

<div class="d-avatar d-avatar--initials d-avatar--{$color} ...">DP</div>

Sizes

<div class="d-avatar d-avatar--sm ...">DP</div>
<div class="d-avatar d-avatar--md ...">DP</div>
<div class="d-avatar d-avatar--lg ...">DP</div>

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.

Last Updated: