Avatars
Simple Square Avatar
Html
<div class="avatar-list">
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/3.jpg)"></span>
</div>Simple Round Avatar
Html
<div class="avatar-list">
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/3.jpg)"></span>
</div>Simple Radius Avatar
Html
<div class="avatar-list">
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/3.jpg)"></span>
</div>Avatar Size
Html
<div class="avatar-list">
<span class="avatar avatar-sm" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/4.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/3.jpg)"></span>
<span class="avatar avatar-md" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/5.jpg)"></span>
<span class="avatar avatar-lg" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/6.jpg)"></span>
<span class="avatar avatar-xl" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/4.jpg)"></span>
<span class="avatar avatar-xxl" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)"></span>
</div>Rounded Avatar Size
Html
<div class="avatar-list">
<span class="avatar avatar-sm brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/15.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/13.jpg)"></span>
<span class="avatar avatar-md brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/16.jpg)"></span>
<span class="avatar avatar-lg brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)"></span>
<span class="avatar avatar-xl brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/14.jpg)"></span>
<span class="avatar avatar-xxl brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/8.jpg)"></span>
</div>Radius Avatar Size
Html
<div class="avatar-list">
<span class="avatar avatar-sm bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/15.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/13.jpg)"></span>
<span class="avatar avatar-md bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/16.jpg)"></span>
<span class="avatar avatar-lg bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)"></span>
<span class="avatar avatar-xl bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/14.jpg)"></span>
<span class="avatar avatar-xxl bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/8.jpg)"></span>
</div>Avatar Status
Html
<div class="avatar-list">
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/8.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/5.jpg)">
<span class="avatar-status"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)">
<span class="avatar-status bg-red"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/6.jpg)">
<span class="avatar-status bg-green"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)">
<span class="avatar-status bg-yellow"></span>
</span>
</div>Rounded Avatar Status
Html
<div class="avatar-list">
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/15.jpg)">
<span class="avatar-status"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)">
<span class="avatar-status bg-red"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/16.jpg)">
<span class="avatar-status bg-green"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)">
<span class="avatar-status bg-yellow"></span>
</span>
</div>Radius Avatar Status
Html
<div class="avatar-list">
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/15.jpg)">
<span class="avatar-status"></span>
</span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)">
<span class="avatar-status bg-red"></span>
</span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/16.jpg)">
<span class="avatar-status bg-green"></span>
</span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)">
<span class="avatar-status bg-yellow"></span>
</span>
</div>Avatars List
+8
Html
<div class="avatar-list avatar-list-stacked">
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/10.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/8.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/10.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/11.jpg)"></span>
<span class="avatar">+8</span>
</div>Rounded Avatars List
+8
Html
<div class="avatar-list avatar-list-stacked">
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/12.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/4.jpg)"></span>
<span class="avatar brround">+8</span>
</div>Radius Avatars List
+8
Html
<div class="avatar-list avatar-list-stacked">
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/12.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/4.jpg)"></span>
<span class="avatar bradius">+8</span>
</div>