Example with Variations
Add any of the below mentioned modifier classes to change the appearance of a avatar.
Default Preview
- AB
- AB
- AB
Code Example
<div class="user-avatar bg-primary"> <span>AB</span> </div> <div class="user-avatar bg-success"> <em class="icon ni ni-user-alt"></em> </div> <div class="user-avatar"> <img src="#" alt=""> </div> <!-- With status badge --> <div class="user-avatar bg-primary"> <span>AB</span> <div class="status dot dot-lg bg-success"></div> </div> <div class="user-avatar bg-success"> <em class="icon ni ni-user-alt"></em> <div class="status dot dot-lg bg-secondary"></div> </div> <div class="user-avatar"> <img src="#" alt=""> <div class="status dot dot-lg bg-warning"></div> </div> <!-- With border --> <div class="user-avatar br"> <img src="#" alt=""> </div> <div class="user-avatar br"> <img src="#" alt=""> </div> <div class="user-avatar br"> <img src="#" alt=""> </div> <!-- With square --> <div class="user-avatar sq bg-primary"> <span>AB</span> </div> <div class="user-avatar sq bg-success"> <em class="icon ni ni-user-alt"></em> </div> <div class="user-avatar sq"> <img src="#" alt=""> </div>
Example with Use Case
Lets take a look at some real use case for avatar.
User card 1
User card 2
User card 3
User card 4
KA
Code Example
<!-- User card 1 --> <div class="user-card"> <div class="user-avatar"> <img src="#" alt=""> </div> <div class="user-info"> <div class="user-status text-primary">Administrator</div> <div class="user-name dropdown-indicator">Kamran Ahmed</div> </div> </div> <!-- User card 2 --> <div class="user-card"> <div class="user-avatar"> <img src="#" alt=""> </div> <div class="user-info"> <span class="lead-text">Jesicca Brown</span> <span class="sub-text">jesicca@softnio.com</span> </div> </div> <!-- User card 3 --> <div class="user-card br"> <div class="user-avatar sm"> <img src="#" alt=""> </div> <div class="user-info"> <div class="user-name dropdown-indicator">293.74 USD</div> </div> </div> <!-- User card 4 --> <div class="user-card"> <div class="user-avatar bg-primary sm"> KA </div> <div class="user-info"> <span class="lead-text">Kamran Ahmed</span> </div> </div>
Example with Sizes
Add any of the below mentioned modifier classes to change the appearance of a avatar.
Use lg, md, sm to .user-avatar class.
Code Example
<div class="user-avatar bt-primary lg"> <img src="#" alt=""> </div> <div class="user-avatar bt-primary md"> <img src="#" alt=""> </div> <div class="user-avatar bt-primary sm"> <img src="#" alt=""> </div>