Avatar

A round frame holding either an image or a fallback — .hui-avatar__image and .hui-avatar__fallback are alternatives, so render one or the other, not both. --sm and --lg resize it.

Sizes and fallback

Avatar group

.hui-avatar-group rings each face in --hui-background, which is what separates them where they overlap. On a card or any other surface, set --hui-avatar-ring to that surface’s token so the ring does not draw a seam — in the dark theme --hui-card is lighter than --hui-background, and the default ring would show.

.hui-avatar

A round avatar. Add --sm or --lg to resize.

<span class="hui-avatar">
  <span class="hui-avatar__fallback">AB</span>
</span>

.hui-avatar--lg

3rem avatar.

.hui-avatar--sm

2rem avatar.

.hui-avatar-group

A row of overlapping avatars, each ringed so the stack reads as faces rather than a smear. The ring is --hui-background; on another surface, such as a card, set --hui-avatar-ring to that surface's token.

<div class="hui-avatar-group">
  <span class="hui-avatar">…</span>
  <span class="hui-avatar">…</span>
</div>

.hui-avatar-group--grayscale

Drains the colour from the faces, for an empty or invitation state.

.hui-avatar__fallback

Initials shown when there is no image.

.hui-avatar__image

The avatar image, cropped to the circle.