Components

Avatar

Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.

Image Avatar

Avatar is available in 4 different sizes. You need to include class avatar and for size add class according to size sm-avatar, md-avatar, lg-avatar, xlg-avatar (e.g. class="avatar lg-avatar")

Don't forget to add Responsive Image class names for img element.

user
user
user
user

Code Snippets

              
                
                

                  user
                

                

                  user
                

                

                  user
                

                

                  user

Text Avatar

You can use initial letters of user in Avatar as well. You need to include class avatar and size class. (e.g. class="avatar lg-avatar")

NG
NG
NG
NG

Code Snippets

              
                
                
NG

                
NG

                
NG

                
NG

Icon Avatar

You can give diffrent colors to Avatar as well. You need to include class blue-content and size class. (e.g. class="avatar blue-content lg-avatar")

Code Snippets
Previous Next