logo logo-dark

Do you know the latest update of 2022? A overview of our is now available on YouTube
Components

Avatar

Documentation and examples for avatars.

Example with Variations

Add any of the below mentioned modifier classes to change the appearance of a avatar.

Default Style's
  • AB
Status Style's
  • AB
Square Style's
  • AB
Status Style's
  • AB
Group Style's
  • AB
    NL
  • AB
Group Style's v2
  • A
    N
  • A
Code Example
//code for default/basic Avatar
<div class="user-avatar">
    <span>AB</span>
</div>
Code Example
//code for Avatar with status
<div class="user-avatar">
    <span>AB</span>
    <div class="status dot dot-lg dot-success"></div>
</div>
Code Example
//code for Avatar with Squared
<div class="user-avatar sq">
    <span>AB</span>
</div>
Code Example
//code for Avatar Group
<div class="user-avatar-group">
    <div class="user-avatar">
        <span>AB</span>
    </div>
    <div class="user-avatar">
        <span>NL</span>
    </div>
</div>
Code Example
//code for Multiple avatar with diffrent style
<div class="user-avatar user-avatar-multiple">
    <div class="user-avatar">
        <span>A</span>
    </div>
    <div class="user-avatar">
        <span>N</span>
    </div>
</div>
Example with Color Variations

Add any of the below mentioned modifier classes to change the appearance of a avatar.

Avatar Fill Color
  • AB
  • NL
  • CH
  • SW
  • GO
  • PS
  • DM
  • HS
  • SM
  • TM
  • JC
  • VA
  • EH
  • AF
  • HW
  • KR
Avatar Dim Color
  • AB
  • NL
  • CH
  • SW
  • GO
  • PS
  • DM
  • HS
  • SM
  • TM
  • JC
  • VA
  • EH
  • AF
  • HW
  • KR
Class Reference Details
.bg-{color} Use {color} as primary, secondary, warning, danger, success, info, azure, blue, pink, indigo, dark, gray, orange, teal, purple, lighter
.bg-{color}-dim Use {color} as primary, secondary, warning, danger, success, info, azure, blue, pink, indigo, dark, gray, orange, teal, purple, light
Use light without -dim postfix
Example with Sizes

Add any of the below mentioned modifier classes to change the appearance of a avatar.

Rounded Avatars
  • AB
  • AB
  • AB
  • A
Squared Avatars
  • AB
  • AB
  • AB
  • A
Class Reference Details
.{size} Use {size} as xl, lg, md, sm, xs
Example with Use Case

Lets take a look at some real use case for avatar.

User Card 1
User Card 2
User Card 3
AB
Abu Bin Ishtiyak
Code Example
//code for User Card 1
<div class="user-toggle">
    <div class="user-avatar">
        <em class="icon ni ni-user-alt"></em>
    </div>
    <div class="user-info">
        <div class="user-status text-primary">Administrator</div>
        <div class="user-name dropdown-indicator">Abu Bin Ishityak</div>
    </div>
</div>
Code Example
//code for User Card 2
<div class="user-card">
    <div class="user-avatar">
        <img src="avatar/c-sm.jpg" alt="">
    </div>
    <div class="user-info">
        <span class="lead-text">Keith Jensen</span>
        <span class="sub-text">keith@softnio.com</span>
    </div>
</div>
Code Example
//code for User Card 3
<div class="user-card">
    <div class="user-avatar sm bg-purple">
        <span>AB</span>
    </div>
    <div class="user-name">
        <span class="tb-lead">Abu Bin Ishtiyak</span>
    </div>
</div>
© 2022 DashLite. Template by Softnio