VERSIONS

LTR VERSION RTL VERSION

Horizontal-menu Skin & styles Mode

Default Color Dark Style1 Style2

Body Skins Mode

Default Style1 Style2

Skin Modes

Light Mode
Dark Mode

Font-Family

Roboto Nunito Open Sans Lato

Navigation Style

Horizontal Left-menu
View Demo Buy Now Our Portfolio
loader
Clont logo
Projects
App Design Projects Web Design Projects App Development Projects Back-End Projects
View Projects
Settings
Multi Pages Mail Settings Default Settings Documentation
Updated
Message Sent.
3 hours ago
Order Placed
5 hour ago
Event Started
45 mintues ago
Your Admin lanuched
1 daya ago
View All Notifications
img
John Thomson App Developer
Profile Settings Inbox Message Sign out

Avatars

  1. Elements
  2. Avatars
Add new Page View the page Details Edit Page
Settings
2,978( Visitors ) 6,453( Followers )

Simple Square Avatar

<span class="avatar" style="background-image: url(./https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/1.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/1.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/2.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/3.jpg)"></span>

Simple Round Avatar

<span class="avatar  brround" style="background-image: url(./https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/12.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/13.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/11.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/12.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/14.jpg)"></span>

Simple Radius Avatar

<span class="avatar bradius" style="background-image: url(./https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/1.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/1.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/3.jpg)"></span>

Avatar Size

<span class="avatar avatar-sm" style="background-image: url(./https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/4.jpg)"></span>
<span class="avatar" style="background-image: url(./https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/3.jpg)"></span>
<span class="avatar avatar-md" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/6.jpg)"></span>
<span class="avatar avatar-lg" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/6.jpg)"></span>
<span class="avatar avatar-xl" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/4.jpg)"></span>
<span class="avatar avatar-xxl" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/7.jpg)"></span>

Rounded Avatar Size

<span class="avatar avatar-sm brround" style="background-image: url(./https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/15.jpg)"></span>
<span class="avatar brround" style="background-image: url(./https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/13.jpg)"></span>
<span class="avatar avatar-md brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/16.jpg)"></span>
<span class="avatar avatar-lg brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/17.jpg)"></span>
<span class="avatar avatar-xl brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/14.jpg)"></span>
<span class="avatar avatar-xxl brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/18.jpg)"></span>

Radius Avatar Size

<span class="avatar avatar-sm bradius" style="background-image: url(./https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/15.jpg)"></span>
<span class="avatar bradius" style="background-image: url(./https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/13.jpg)"></span>
<span class="avatar avatar-md bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/16.jpg)"></span>
<span class="avatar avatar-lg bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/17.jpg)"></span>
<span class="avatar avatar-xl bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/14.jpg)"></span>
<span class="avatar avatar-xxl bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/18.jpg)"></span>

Avatar Status

<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/8.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/5.jpg)">
  <span class="avatar-status"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-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/clont/Horizontal-Light-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/clont/Horizontal-Light-ltr/assets/images/users/7.jpg)">
  <span class="avatar-status bg-yellow"></span>
</span>

Rounded Avatar Status

<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/19.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/15.jpg)">
  <span class="avatar-status"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/20.jpg)">
  <span class="avatar-status bg-red"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-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/clont/Horizontal-Light-ltr/assets/images/users/17.jpg)">
  <span class="avatar-status bg-yellow"></span>
</span>

Radius Avatar Status

<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/19.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/15.jpg)">
  <span class="avatar-status"></span>
</span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/20.jpg)">
  <span class="avatar-status bg-red"></span>
</span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-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/clont/Horizontal-Light-ltr/assets/images/users/17.jpg)">
  <span class="avatar-status bg-yellow"></span>
</span>

Avatars List

+8 
<div class="avatar-list avatar-list-stacked">
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/10.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/8.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/9.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/10.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/11.jpg)"></span>
  <span class="avatar">+8</span>
</div>

Rounded Avatars List

+8 
<div class="avatar-list avatar-list-stacked">
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/12.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/21.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/29.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/2.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/34.jpg)"></span>
  <span class="avatar brround">+8</span>
</div>

Radius Avatars List

+8 
<div class="avatar-list avatar-list-stacked">
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/12.jpg)"></span>
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/21.jpg)"></span>
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/29.jpg)"></span>
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/2.jpg)"></span>
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-ltr/assets/images/users/34.jpg)"></span>
  <span class="avatar bradius">+8</span>
</div>