Avatars

Create single and group avatars of different sizes with this custom component.
Avatar Sizing
//- XXL Avatar
.avatar.avatar-xxl
    img.avatar-img.img-fluid(src='path/to/image')    

//- Extra Large Avatar
.avatar.avatar-xl
    img.avatar-img.img-fluid(src='path/to/image')    

//- Large Avatar
.avatar.avatar-lg
    img.avatar-img.img-fluid(src='path/to/image')    

//- Default Avatar
.avatar
    img.avatar-img.img-fluid(src='path/to/image')    

//- Small Avatar
.avatar.avatar-sm
    img.avatar-img.img-fluid(src='path/to/image')    

//- Extra Small Avatar
.avatar.avatar-xs
    img.avatar-img.img-fluid(src='path/to/image')
Square images work best when using the .avatar component. Using an image double the resoulution of the avatar size can improve image quality on high resoulution screens.
Avatar Status Inidicators
//- Offline Indicator
.avatar.avatar-offline.avatar-xxl
    img.avatar-img.img-fluid(src='path/to/image')

//- Idle Indicator
.avatar.avatar-idle.avatar-xl
    img.avatar-img.img-fluid(src='path/to/image')

//- Online Indicator    
.avatar.avatar-online.avatar-lg
    img.avatar-img.img-fluid(src='path/to/image')

//- Busy Indicator
.avatar.avatar-busy
    img.avatar-img.img-fluid(src='path/to/image')
Use one of the four status indicator options shown above by appending the class to your .avatar component. The indicator is supported on all sizes of the avatar component.