Skip to main content

Avatars

Examples for opting different size of image classes.

Example

Avatar classes are applied to the image so that it scales with the parent element.

Image Description Image Description Image Description Image Description 
<img class="u-avatar" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
<img class="u-sm-avatar" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
<img class="u-md-avatar" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
<img class="u-lg-avatar" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
Copy

Bordered

Use bordered classes to wrap .u-avatar elements with borders.

Image Description Image Description 
<img class="u-sm-avatar u-sm-avatar--bordered" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
<img class="u-xl-avatar u-xl-avatar--bordered" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
Copy

Important

Space does not include all classes, but includes only used classes to reduce the size of CSS files. However, you can add more sizes by adding entries to the Sass map variable via: assets/include/scss/base/avatar/.