-
-
-
Olivia
Olivia John
Marketing Manager
Avatar
Single User Example
<div class="card bg-white border-0 rounded-3 mb-4">
<div class="card-body p-4">
<h4 class="fs-18 mb-4">Single User Example</h4>
<div class="d-sm-flex justify-content-between align-items-center">
<div class="d-flex align-items-center mb-3 mb-sm-0">
<div class="flex-shrink-0">
<img src="assets/images/user-62.jpg" class="wh-60 rounded-circle" alt="user">
</div>
<div class="flex-grow-1 ms-3">
<h4 class="fs-16 fw-semibold mb-1">Andrew Burns</h4>
<span class="fs-14">Programmer</span>
</div>
</div>
<ul class="ps-0 mb-0 list-unstyled d-flex gap-2">
<li>
<a href="https://www.facebook.com/" target="_blank" class="text-decoration-none wh-40 bg-primary bg-opacity-10 d-block
text-center position-relative rounded-circle text-primary hover-bg">
<i class="ri-facebook-fill position-absolute top-50 start-50 translate-middle fs-18"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/" target="_blank" class="text-decoration-none wh-40 bg-primary bg-opacity-10 d-block
text-center position-relative rounded-circle text-primary hover-bg">
<i class="ri-twitter-x-line position-absolute top-50 start-50 translate-middle fs-18"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/" target="_blank" class="text-decoration-none wh-40 bg-primary bg-opacity-10 d-block
text-center position-relative rounded-circle text-primary hover-bg">
<i class="ri-linkedin-fill position-absolute top-50 start-50 translate-middle fs-18"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
Group User Example
<div class="card bg-white border-0 rounded-3 mb-4">
<div class="card-body p-4">
<h4 class="fs-18 mb-4">Group User Example</h4>
<div class="d-flex justify-content-between">
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li>
<a href="#">
<img src="assets/images/user-1.jpg" class="wh-40 rounded-circle border border-2 border-color-white" alt="user">
</a>
</li>
<li class="ms-15">
<a href="#">
<img src="assets/images/user-2.jpg" class="wh-40 rounded-circle border border-2 border-color-white" alt="user">
</a>
</li>
<li class="ms-15">
<a href="#">
<img src="assets/images/user-3.jpg" class="wh-40 rounded-circle border border-2 border-color-white" alt="user">
</a>
</li>
<li class="ms-15">
<a href="#" class="wh-40 rounded-circle bg-primary d-block text-center position-relative text-decoration-none text-white hover-bg">
<i class="ri-add-line fs-20 position-absolute top-50 start-50 translate-middle"></i>
</a>
</li>
</ul>
<a href="#" class="btn bg-primary bg-opacity-10 fw-bold fs-14 hover-bg">
<span class="position-relative top-2">View Details</span>
</a>
</div>
</div>
</div>
Single User With Badge Example
<div class="card bg-white border-0 rounded-3 mb-4">
<div class="card-body p-4">
<h4 class="fs-18 mb-4">Single User With Badge Example</h4>
<div class="d-flex justify-content-between">
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center gap-1">
<li>
<a href="#" class="position-relative d-block">
<img src="assets/images/user-1.jpg" class="wh-40 rounded-circle border border-2 border-color-white" alt="user">
<div class="position-absolute top-0 end-0 p-1 bg-success border border-2 border-white rounded-circle"></div>
</a>
</li>
<li>
<a href="#" class="position-relative d-block">
<img src="assets/images/user-2.jpg" class="wh-40 rounded-circle border border-2 border-color-white" alt="user">
<div class="position-absolute top-0 end-0 p-1 bg-primary border border-2 border-white rounded-circle"></div>
</a>
</li>
<li>
<a href="#" class="position-relative d-block">
<img src="assets/images/user-3.jpg" class="wh-40 rounded-circle border border-2 border-color-white" alt="user">
<div class="position-absolute top-0 end-0 p-1 bg-warning border border-2 border-white rounded-circle"></div>
</a>
</li>
</ul>
<a href="#" class="btn bg-primary bg-opacity-10 fw-bold fs-14 hover-bg">
<span class="position-relative top-2">View Details</span>
</a>
</div>
</div>
</div>
Avatar Size Rounded-Circle Example
<img src="assets/images/user-68.jpg" class="wh-87 rounded-circle" alt="user">
<img src="assets/images/user-68.jpg" class="wh-77 rounded-circle" alt="user">
<img src="assets/images/user-68.jpg" class="wh-67 rounded-circle" alt="user">
<img src="assets/images/user-68.jpg" class="wh-57 rounded-circle" alt="user">
<img src="assets/images/user-68.jpg" class="wh-47 rounded-circle" alt="user">
Avatar Size Simple Rounded Example
<img src="assets/images/screenshorts.jpg" class="wh-87 rounded-3" alt="screenshorts">
<img src="assets/images/screenshorts.jpg" class="wh-77 rounded-3" alt="screenshorts">
<img src="assets/images/screenshorts.jpg" class="wh-67 rounded-3" alt="screenshorts">
<img src="assets/images/screenshorts.jpg" class="wh-57 rounded-3" alt="screenshorts">
<img src="assets/images/screenshorts.jpg" class="wh-47 rounded-3" alt="screenshorts">
Avatar Size Rounded-Circle Example
Ab
Ab
Ab
Ab
Ab
<div class="wh-87 rounded-circle position-relative text-center bg-primary bg-opacity-10">
<span class="fs-3 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="wh-77 rounded-circle position-relative text-center bg-primary bg-opacity-10">
<span class="fs-24 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="wh-67 rounded-circle position-relative text-center bg-primary bg-opacity-10">
<span class="fs-20 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="wh-57 rounded-circle position-relative text-center bg-primary bg-opacity-10">
<span class="fs-16 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="wh-47 rounded-circle position-relative text-center bg-primary bg-opacity-10">
<span class="fs-14 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
Avatar Size Simple Rounded Example
Ab
Ab
Ab
Ab
Ab
<div class="wh-87 rounded-3 position-relative text-center bg-primary bg-opacity-10">
<span class="fs-3 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="wh-77 rounded-3 position-relative text-center bg-primary bg-opacity-10">
<span class="fs-24 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="wh-67 rounded-3 position-relative text-center bg-primary bg-opacity-10">
<span class="fs-20 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="wh-57 rounded-3 position-relative text-center bg-primary bg-opacity-10">
<span class="fs-16 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="wh-47 rounded-3 position-relative text-center bg-primary bg-opacity-10">
<span class="fs-14 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>