Avatar

An avatar is perfect to represent small images, such as profile picture or thumbnails.

Add 'avatar' on image tag to create an avatar. To handle size add supporting classes like 'avatar--sm' or 'avatar--md' or 'avatar--lg'. Adding 'sq' class makes avatar square with curved vertices.

Copied!

<img src="image.png" alt="Avatar" class="avatar avatar--sm"/>
<img src="image.png" alt="Avatar" class="avatar avatar--md"/>
<img src="image.png" alt="Avatar" class="avatar avatar--lg"/>

Copied!

<img src="image.png" alt="Avatar" class="avatar avatar--sm sq"/>
<img src="image.png" alt="Avatar" class="avatar avatar--md sq"/>
<img src="image.png" alt="Avatar" class="avatar avatar--lg sq"/>