RZREDZ.UI

Avatars

A round mark of a person: their initials in the accent, 32 px or 24 px with avatar-sm.

Examples

An avatar beside the person's name hides from assistive technology; an avatar alone - the profile button - is named by its button.

Marina K. Arthit T. 
<span class="hstack gap-8"><span class="avatar" aria-hidden="true">MK</span>Marina K.</span>
<span class="hstack gap-8"><span class="avatar avatar-sm" aria-hidden="true">AT</span>Arthit T.</span>
<button class="btn btn-text btn-icon" type="button" aria-label="MK, profile"><span class="avatar">MK</span></button>

Accessibility

  • The initials are 4.5:1 against the fill in both themes.
  • Where a person's photo is wanted, put an <img alt=""> inside the avatar; the name beside it carries the meaning.

Tokens

From css/components/avatar.css, which declares no custom property of its own.

It reads the theme's --redz-primary-subtle, --redz-primary, --redz-fs-12.