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>
