Avatar – Tsunami

Sizes

The image sits on top of the initials. If the image has not loaded or is missing, the initials show instead.

<div class="stack" data-direction="row">
  <span class="avatar" data-size="sm"><img src="img/person-1.svg" alt="Emma Wilson" /><span>EW</span></span>
  <span class="avatar"><img src="img/person-1.svg" alt="Emma Wilson" /><span>EW</span></span>
  <span class="avatar" data-size="lg"><img src="img/person-1.svg" alt="Emma Wilson" /><span>EW</span></span>
</div>

Initials when there is no image

LN LN LN

<div class="stack" data-direction="row">
  <span class="avatar" data-size="sm"><span>LN</span></span>
  <span class="avatar"><span>LN</span></span>
  <span class="avatar" data-size="lg"><span>LN</span></span>
</div>

A logo with a transparent background sits on white, in light and dark

Avatar images always have a white background, so dark logos stay readable in dark mode.

<div class="stack" data-direction="row">
  <span class="avatar" data-size="sm"><img src="img/logo-acme.svg" alt="Acme" /></span>
  <span class="avatar"><img src="img/logo-acme.svg" alt="Acme" /></span>
  <span class="avatar" data-size="lg"><img src="img/logo-acme.svg" alt="Acme" /></span>
</div>

Circle

Use it for people, such as customers or staff. The rounded square is the default, for products and logos.

<div class="stack" data-direction="row">
  <span class="avatar" data-size="sm" data-variant="circle"><img src="img/person-2.svg" alt="Olivia Brown" /><span>OB</span></span>
  <span class="avatar" data-variant="circle"><img src="img/person-2.svg" alt="Olivia Brown" /><span>OB</span></span>
  <span class="avatar" data-size="lg" data-variant="circle"><img src="img/person-2.svg" alt="Olivia Brown" /><span>OB</span></span>
</div>

Group

Overlapping avatars with a ring in the background colour. End with the remaining count in data-count

JC +4

<div class="avatar-group">
  <span class="avatar"><img src="img/person-1.svg" alt="Emma Wilson" /><span>EW</span></span>
  <span class="avatar"><img src="img/person-2.svg" alt="Olivia Brown" /><span>OB</span></span>
  <span class="avatar"><img src="img/person-3.svg" alt="James Carter" /><span>JC</span></span>
  <span data-count>+4</span>
</div>

A count on the corner, such as the quantity of an order line

If a product has no image, use an icon instead of initials.

12 3

<div class="stack" data-direction="row">
  <span class="avatar" data-size="lg"><img src="img/product-watch.svg" alt="Watch" /><span data-count>1</span></span>
  <span class="avatar" data-size="lg"><img src="img/product-headphones.svg" alt="Headphones" /><span data-count>12</span></span>
  <span class="avatar" data-size="lg"><span><i class="icon icon-image" aria-hidden="true"></i></span><span data-count>3</span></span>
</div>

A status dot on the corner, such as a product's availability

The dot is only colour, so give it role="img" and an aria-label that names the status.

<div class="stack" data-direction="row">
  <span class="avatar" data-size="sm"><img src="img/product-mug.svg" alt="Mug" /><span data-status="ok" role="img" aria-label="Available"></span></span>
  <span class="avatar"><img src="img/product-watch.svg" alt="Watch" /><span data-status="warning" role="img" aria-label="Low stock"></span></span>
  <span class="avatar" data-size="lg"><img src="img/product-headphones.svg" alt="Headphones" /><span data-status="danger" role="img" aria-label="Unavailable"></span></span>
</div>

Attributes

Attribute / element	Values	Description
`.avatar`	`span`	Rounded avatar frame. Initials are grey.
`img`	child	Photo or logo, on top of the initials, always on white. Set `alt` to the name.
`span`	child	Initials or an icon, shown when there is no image.
`data-size`	`sm` 24px · none (default) 32px · `lg` 40px	Size.
`data-variant`	none (default) rounded · `circle`	Circle, for people.
`span[data-count]`	number	Inside `.avatar`: a count on the top-right corner, such as a quantity.
`span[data-status]`	`ok` · `warning` · `danger` · `info` · empty (default) grey	Status dot on the bottom-right corner. Needs `role="img"` + `aria-label`
`.avatar-group`	`div`	Overlapping avatars, separated by a ring in the background colour.
`.avatar-group > [data-count]`	text, e.g. `+4`	Remaining count at the end of the group.