Components

Avatar

A flat, sharp square showing uppercase initials or a cover-fit image clipped to a 1px bordered tile. Three sizes, plus an overlapping group with a "+N" overflow count.

Sizes

Small · default · large
VD VD VD 
<span class="ds-avatar ds-avatar--sm">VD</span>
<span class="ds-avatar">VD</span>
<span class="ds-avatar ds-avatar--lg">VD</span>

Image

Cover-fit image
Maria Vance Leo Marsh Ada Okafor 
<span class="ds-avatar">
  <img class="ds-avatar__img" src="https://i.pravatar.cc/96?img=32" alt="Leo Marsh">
</span>

Group

Overlap with +N overflow
Maria Vance Leo Marsh JL +3 
<div class="ds-avatar-group">
  <span class="ds-avatar"><img class="ds-avatar__img" src="…?img=12" alt="Maria Vance"></span>
  <span class="ds-avatar"><img class="ds-avatar__img" src="…?img=32" alt="Leo Marsh"></span>
  <span class="ds-avatar">JL</span>
  <span class="ds-avatar ds-avatar--count" aria-label="3 more">+3</span>
</div>

React

Avatar · AvatarGroup 
import { Avatar, AvatarGroup } from "@diametral/design-system/react";

<Avatar initials="VD" size="lg" />
<Avatar src="https://i.pravatar.cc/96?img=32" alt="Leo Marsh" />

<AvatarGroup max={3}>
  <Avatar src="https://i.pravatar.cc/96?img=12" alt="Maria Vance" />
  <Avatar src="https://i.pravatar.cc/96?img=32" alt="Leo Marsh" />
  <Avatar initials="JL" />
  <Avatar initials="AO" />
  <Avatar initials="RK" />
  <Avatar initials="TM" />
</AvatarGroup>