Avatar Sizes
An avatar can have different sizes like larger and smaller avatar.
<div class="demo-avatar-group">
<div class="main-img-user avatar-xs">
<img alt="avatar" class="rounded-circle" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/2.jpg">
</div>
<div class="main-img-user avatar-sm">
<img alt="avatar" class="rounded-circle" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/3.jpg">
</div>
<div class="main-img-user">
<img alt="avatar" class="rounded-circle" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/4.jpg">
</div>
<div class="main-img-user avatar-md">
<img alt="avatar" class="rounded-circle" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/5.jpg">
</div>
<div class="main-img-user avatar-lg">
<img alt="avatar" class="rounded-circle" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/6.jpg">
</div>
<div class="main-img-user avatar-xl d-none d-sm-block">
<img alt="avatar" class="rounded-circle" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/7.jpg">
</div>
<div class="main-img-user avatar-xxl d-none d-sm-block">
<img alt="avatar" class="rounded-circle" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/8.jpg">
</div>
</div>Avatar Shapes
An avatar can have different shapes like square and round, radius avatars.
<div class="demo-avatar-group">
<div class="main-img-user avatar-md">
<img alt="avatar" class="rounded-circle" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/4.jpg">
</div>
<div class="main-img-user avatar-md">
<img alt="avatar" class="square" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/5.jpg">
</div>
<div class="main-img-user avatar-md">
<img alt="avatar" class="radius" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/6.jpg">
</div>
</div>Initials Avatars
An avatar can have a temporary use of user's initial name while their photos are not yet available.
A
U
C
X
E
M
NB
<div class="demo-avatar-group avatar-list">
<div class="avatar avatar-xs bg-primary rounded-circle">
A
</div>
<div class="avatar avatar-sm bg-secondary rounded-circle">
U
</div>
<div class="avatar bg-info rounded-circle">
C
</div>
<div class="avatar avatar-md bg-success rounded-circle">
X
</div>
<div class="avatar avatar-lg bg-warning rounded-circle">
E
</div>
<div class="avatar avatar-xl d-none d-sm-flex bg-danger rounded-circle">
M
</div>
<div class="avatar avatar-xxl d-none d-sm-flex bg-pink rounded-circle">
NB
</div>
</div>Status Indicator
An avatar can have a status indicator to indicate users availability.
eb
<div class="demo-avatar-group">
<div class="main-avatar avatar online">
<img alt="avatar" class="rounded-circle avatar" src="https://laravel.spruko.com/azira/leftmenu_light/assets/img/faces/9.jpg">
</div>
<div class="main-avatar avatar-md offline">
eb
</div>
</div>