Avatars
Basic Avatar
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<img class="wh-100 rounded-circle" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3">
<img class="wh-80 rounded-circle" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3">
<img class="wh-60 rounded-circle" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3">
<img class="wh-40 rounded-circle" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
</ul>
Indicators Avatar
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li class="avatar online dot-30">
<img class="wh-100 rounded-circle" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3 avatar out-online dot-25">
<img class="wh-80 rounded-circle" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3 avatar offline dot-20">
<img class="wh-60 rounded-circle" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3 avatar online dot-15">
<img class="wh-40 rounded-circle" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
</ul>
Shapes Avatar
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<img class="wh-100 rounded-2" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3">
<img class="wh-80 rounded-circle" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3">
<img class="wh-60 rounded-3" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3">
<img class="wh-40 rounded-0" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
</ul>
Square Avatar
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<img class="wh-100" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3">
<img class="wh-80" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3">
<img class="wh-60" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-3">
<img class="wh-40" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
</ul>
Initials Shapes Avatar
- AG
- AG
- AG
- AG
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<span class="wh-100 bg-primary text-white fw-medium d-inline-block fs-30 align-items-center d-flex justify-content-center rounded-2">AG</span>
</li>
<li class="ms-3">
<span class="wh-80 bg-success text-white fw-medium d-inline-block fs-25 align-items-center d-flex justify-content-center rounded-circle">AG</span>
</li>
<li class="ms-3">
<span class="wh-60 bg-danger text-white fw-medium d-inline-block fs-20 align-items-center d-flex justify-content-center rounded-3">AG</span>
</li>
<li class="ms-3">
<span class="wh-40 bg-warning text-white fw-medium d-inline-block fs-15 align-items-center d-flex justify-content-center">AG</span>
</li>
</ul>
Initials Square Avatar
- AG
- AG
- AG
- AG
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<span class="wh-100 bg-primary text-white fw-medium d-inline-block fs-30 align-items-center d-flex justify-content-center rounded-2">AG</span>
</li>
<li class="ms-3">
<span class="wh-80 bg-success text-white fw-medium d-inline-block fs-25 align-items-center d-flex justify-content-center rounded-circle">AG</span>
</li>
<li class="ms-3">
<span class="wh-60 bg-danger text-white fw-medium d-inline-block fs-20 align-items-center d-flex justify-content-center rounded-3">AG</span>
</li>
<li class="ms-3">
<span class="wh-40 bg-warning text-white fw-medium d-inline-block fs-15 align-items-center d-flex justify-content-center">AG</span>
</li>
</ul>
Group Avatar Total & Add
-
-
-
- 50
<!-- Total Avatar -->
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-minus-20">
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-2.jpg" alt="user-2">
</li>
<li class="ms-minus-20">
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-3.jpg" alt="user-3">
</li>
<li class="ms-minus-20">
<span class="wh-60 rounded-circle border border-2 border-white box-shadow bg-primary text-white fw-medium d-inline-block fs-15 align-items-center d-flex justify-content-center">50</span>
</li>
</ul>
<!-- Add Avatar -->
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-minus-20">
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-2.jpg" alt="user-2">
</li>
<li class="ms-minus-20">
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-3.jpg" alt="user-3">
</li>
<li class="ms-minus-20">
<a href="javascript:;" class="wh-60 rounded-circle border border-2 border-white box-shadow bg-primary text-white fw-medium d-inline-block fs-20 align-items-center d-flex justify-content-center text-decoration-none">+</a>
</li>
</ul>
Animation Y-axis & X-axis Avatar
-
-
-
- 50
<!-- Total Avatar -->
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-minus-20">
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-2.jpg" alt="user-2">
</li>
<li class="ms-minus-20">
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-3.jpg" alt="user-3">
</li>
<li class="ms-minus-20">
<span class="wh-60 rounded-circle border border-2 border-white box-shadow bg-primary text-white fw-medium d-inline-block fs-15 align-items-center d-flex justify-content-center">50</span>
</li>
</ul>
<!-- Add Avatar -->
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-1.jpg" alt="user-1">
</li>
<li class="ms-minus-20">
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-2.jpg" alt="user-2">
</li>
<li class="ms-minus-20">
<img class="wh-60 rounded-circle border border-2 border-white box-shadow" src="assets/images/user/user-3.jpg" alt="user-3">
</li>
<li class="ms-minus-20">
<a href="javascript:;" class="wh-60 rounded-circle border border-2 border-white box-shadow bg-primary text-white fw-medium d-inline-block fs-20 align-items-center d-flex justify-content-center text-decoration-none">+</a>
</li>
</ul>