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](../assets/img/img1.jpg)
![Image Description](../assets/img/img1.jpg)
![Image Description](../assets/img/img1.jpg)
![Image Description](../assets/img/img1.jpg)
![Image Description](../assets/img/img1.jpg)
<img class="u-xs-avatar" src="../assets/img/img1.jpg" alt="Image Description">
<img class="u-sm-avatar" src="../assets/img/img1.jpg" alt="Image Description">
<img class="u-avatar" src="../assets/img/img1.jpg" alt="Image Description">
<img class="u-lg-avatar" src="../assets/img/img1.jpg" alt="Image Description">
<img class="u-xl-avatar" src="../assets/img/img1.jpg" alt="Image Description">
Bordered
Use bordered classes to wrap .u-avatar
elements with borders.
![Image Description](../assets/img/img1.jpg)
![Image Description](../assets/img/img1.jpg)
<img class="u-sm-avatar u-sm-avatar--bordered mr-2" src="../assets/img/img1.jpg" alt="Image Description">
<img class="u-lg-avatar u-lg-avatar--bordered" src="../assets/img/img1.jpg" alt="Image Description">
Important
Front 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/
.