Skip to content

Avatar

Preview Available in release assets

Show a person or organisation as a cropped image or initials beside their name.

Avatar primary example

Show code
<span class="thin-avatar">
  <img src="/people/rb.jpg" alt="Rosa Baker">
</span>

Each authored example uses the production assets and includes copyable markup.

Image and initials

Initials stand in when no image exists.

Show code
<p class="thin-cluster">
  <span class="thin-avatar">
    <img src="/people/rb.jpg" alt="">
  </span> Rosa Baker <span class="thin-avatar" aria-hidden="true">JL</span> Jun Lee</p>

Custom size

The public property sets both dimensions.

Show code
<span class="thin-avatar" style="--thin-avatar-size: 4rem">RB</span>

Anatomy

  • span.thin-avatar
  • Child img with alternative text, or initials as text
  • Adjacent visible name where identity matters

Variants and sizes

  • Image — shown above
  • Initials — shown above
  • Custom size — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Missing image and right-to-left

A broken image keeps its alternative text inside the circle.

Show code
<p dir="rtl" lang="ar">
  <span class="thin-avatar">
    <img src="/missing.jpg" alt="ر ب">
  </span> رشا بكر</p>
  • Missing image — shown above
  • Right-to-left reading direction — shown above
  • Forced colors — shown above

Interaction and keyboard behavior

An avatar is not a control. Wrap the name and avatar in a link when they lead to a profile.

Accessibility

Give the image alternative text, or empty alt when the name is already next to it. Initials are read as text, so pair them with the full name.

Contract
NATIVE
Basis
Styles native HTML elements; no APG widget

API

Use span.thin-avatar containing an img or the person's initials. Set --thin-avatar-size to change its size.

Behavior tier: css-only

Custom properties

PropertyDefaultDescription
--thin-avatar-size2.5remInline and block size of the avatar.

Fallback

Without CSS the image or initials remain inline next to the name.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/avatar/style.ts