logo logo-dark
AB
AB
Hospital Manegment
Dashboards
Apps
Pages
Misc Pages
Error Pages
Components
logo logo-dark
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>