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 ReferenceDetails
.bg-{color}Use {color} as primary, secondary, warning, danger, success, info, azure, blue, pink, indigo, dark, gray, orange, teal, purple, lighter
.bg-{color}-dimUse {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 ReferenceDetails
.{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>    
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Bordered
Sidebar Style
White
Dark
Theme
Primary Skin
Default
Blue Light
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?