Avatars

Wrap a square or portrait image inside a <div> or <span> with the class .avatar to apply a circular mask to the image. Here is an example from the evangelists component found on the business ecosystem template:

Open this Avatars in a new tab

HTML:

<div class="avatar">
	<img alt src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
</div>

Considerations

Note the empty alt attribute in this example. Images must always have an alt attribute - leaving it empty shows that it is a decorative image.

The default size of an avatar is equivalent to 100px wide and tall (the CSS converts the pixel value into rem units.) Additional modifier classes can be added for smaller avatars:

  • .avatar--med for an avatar equivalent to 50px wide and tall
  • .avatar--small for an avatar equivalent to 30px wide and tall