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--medfor an avatar equivalent to 50px wide and tall.avatar--smallfor an avatar equivalent to 30px wide and tall