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 Image Description 
                  
                    <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 Image Description 
                  
                    <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">