Avatar
Image with a fallback, representing a user or entity.
Unfortunately without Javascript, it isn't possible to remove the broken image icon on Chromium, and on Firefox an
alt value is required to remove it. To get rid of default borders, again an alt value is
required, on both browsers. This shouldn't be a problem, as the alt value should always be set for
images.
Structure
The avatar is made of a <picture>, directly containing
an <img> and a
<small> element for the name or initials of the user, which is used as a fallback when the image
is not
available.
Examples
Sizing
The avatar can be made square and the size can be adjusted.
The square class can be added to the <picture> to make it square (with minimal
rounding), and to adjust the size, any width and height can be set on the
<picture> element as well, rather than the <img> element.
Grouping
Several avatars can be grouped together to represent a group of users, overlapping each other.
Grouping can be done by wrapping multiple <picture> elements in any element with
<role="group"> on it. But note that due to the implementation limitation, only up to 10
avatars
can be grouped together.