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
-
ABNL
-
AB
-
Group Style's v2
-
AN
-
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>
