Avatar

Square initials or an image, three sizes, an overlap group and a status corner.

.avatar.avatar-groupCSS only

Examples

Avatars

AL AL MK

ALMKJR+4

AL MK JR

Anatomy

`.avatar-group`	Optional row that overlaps its avatars, each ringed in the page colour.
`span.avatar`	Initials as text, tinted in the tone, or an image.
`> img`	Optional photo; covers the square.

API

Attribute	Values	Description
`data-tone`	`accentsuccesswarningdangerinfo`	Colours the initials and their tint. Default accent.
`data-size`on `.avatar`	`sl`	Smaller or larger square. Default sits between.
`data-status`on `.avatar`	`onlineawaybusyoffline`	Square in the bottom end corner: success, warning or danger. Any other value, or the bare attribute, shows it muted.

Accessibility

Initials are read as letters. Give the avatar role="img" and an aria-label with the person's name, or hide it with aria-hidden="true" when the name is printed beside it.
A photo needs alt with the name, or alt="" when the name is already next to it.
The status corner is a pseudo-element and is not announced. Add the status to the label or in .sr-only text.