Skip to content

role presentation

Avatar draft v0.1.0

Represents a person or an entity with a picture, or their initials when there is none.

An avatar shows who or what something belongs to: the author of a comment, the members of a project, a workspace. It displays a picture when there is one and the initials of the name otherwise, in a circle or a rounded square. Assistive technology reads it as an image named by the person, unless the name is written right next to it, in which case the avatar is decoration.

Playground

HTML 
<span
  class="ds-avatar"
  data-size="medium"
  data-shape="circle"
  role="img"
  aria-label="Ada Lovelace"
>
  <span
    class="ds-avatar__initials"
    data-part="initials"
    aria-hidden="true"
  >AL</span>
</span>