Avatars

Avatars are used to quickly identify a customer’s properties including: studies, drafts, highlight reels, etc.

Avatars

DW
ZM
<div class="avatar mb-2x">
  <span class="avatar__initials">DW</span>
</div>
<div class="avatar avatar--alt">
  <span class="avatar__initials">ZM</span>
</div>
<avatar initials="DW" class="mb-2x"></avatar>
<avatar alternative="true" initials="ZM"></avatar>

Description

Avatars show the initials of an individual. There are two background colors, $interface-white and $interface-midnight.

Do

  • Show username on hover (requires JS)

Don't

  • Change the color of the avatar background

Accessibility

  • Does not receive :focus