-
-
-
Mateo Luca
Admin
Avatars
Avatar Size Rounded-Circle Example
<img src="assets/images/admin.jpg" class="rounded-circle" style="width: 130px; height: 130px;" alt="admin">
<img src="assets/images/admin.jpg" class="rounded-circle" style="width: 110px; height: 110px;" alt="admin">
<img src="assets/images/admin.jpg" class="rounded-circle" style="width: 90px; height: 90px;" alt="admin">
<img src="assets/images/admin.jpg" class="rounded-circle" style="width: 70px; height: 70px;" alt="admin">
<img src="assets/images/admin.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="admin">
Avatar Size Simple Rounded Example
<img src="assets/images/blue-man.jpg" class="rounded-3" style="width: 130px; height: 130px;" alt="blue-man">
<img src="assets/images/blue-man.jpg" class="rounded-3" style="width: 110px; height: 110px;" alt="blue-man">
<img src="assets/images/blue-man.jpg" class="rounded-3" style="width: 90px; height: 90px;" alt="blue-man">
<img src="assets/images/blue-man.jpg" class="rounded-3" style="width: 70px; height: 70px;" alt="blue-man">
<img src="assets/images/blue-man.jpg" class="rounded-3" style="width: 50px; height: 50px;" alt="blue-man">
Avatar Size Rounded-Circle Example
Ab
Ab
Ab
Ab
Ab
<div class="rounded-circle position-relative text-center bg-primary bg-opacity-10" style="width: 130px; height: 130px;">
<span class="fs-3 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="rounded-circle position-relative text-center bg-primary bg-opacity-10" style="width: 110px; height: 110px;">
<span class="fs-24 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="rounded-circle position-relative text-center bg-primary bg-opacity-10" style="width: 90px; height: 90px;">
<span class="fs-20 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="rounded-circle position-relative text-center bg-primary bg-opacity-10" style="width: 90px; height: 90px;">
<span class="fs-16 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="rounded-circle position-relative text-center bg-primary bg-opacity-10" style="width: 50px; height: 50px;">
<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="rounded-10 position-relative text-center bg-primary bg-opacity-10" style="width: 130px; height: 130px;">
<span class="fs-3 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="rounded-10 position-relative text-center bg-primary bg-opacity-10" style="width: 110px; height: 110px;">
<span class="fs-24 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="rounded-10 position-relative text-center bg-primary bg-opacity-10" style="width: 90px; height: 90px;">
<span class="fs-20 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="rounded-10 position-relative text-center bg-primary bg-opacity-10" style="width: 70px; height: 70px;">
<span class="fs-16 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
<div class="rounded-10 position-relative text-center bg-primary bg-opacity-10" style="width: 50px; height: 50px;">
<span class="fs-14 text-primary fw-semibold position-absolute top-50 start-50 translate-middle">Ab</span>
</div>
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/user1.jpg" class="rounded-circle" alt="user1" style="width: 50px; height: 50PX;">
</div>
<div class="flex-grow-1 ms-12">
<h4 class="fs-16 fw-semibold mb-1">Andrew Burns</h4>
<span class="fs-14">Programmer</span>
</div>
</div>
<ul class="p-0 mb-0 list-unstyled d-flex" style="gap: 10px;">
<li>
<a href="https://www.facebook.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #3a559f;">
<i class="ri-facebook-fill"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #03a9f4;">
<i class="ri-twitter-x-line"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #007ab9;">
<i class="ri-linkedin-fill"></i>
</a>
</li>
<li>
<a href="https://www.google.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #2196f3;">
<i class="ri-mail-line"></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 align-items-center">
<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
<li class="me-minus-12">
<a href="#">
<img src="assets/images/user1.jpg" class="rounded-circle border border-2 border-color-white" style="width: 50px;" alt="user1">
</a>
</li>
<li class="me-minus-12">
<a href="#">
<img src="assets/images/user2.jpg" class="rounded-circle border border-2 border-color-white" style="width: 50px;" alt="user2">
</a>
</li>
<li class="me-minus-12">
<a href="#">
<img src="assets/images/user3.jpg" class="rounded-circle border border-2 border-color-white" style="width: 50px;" alt="user3">
</a>
</li>
<li class="me-minus-12">
<a href="#" class="rounded-circle bg-primary d-block text-center position-relative text-decoration-none text-white hover-bg" style="width: 50px; height: 50px;">
<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 fs-16 fw-normal hover-bg">
View Details
</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/user4.jpg" class="rounded-circle border border-2 border-color-white" style="width: 50px; height: 50px;" alt="user4">
<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/user5.jpg" class="rounded-circle border border-2 border-color-white" style="width: 50px; height: 50px;" alt="user5">
<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/user6.jpg" class="rounded-circle border border-2 border-color-white" style="width: 50px; height: 50px;" alt="user6">
<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-normal fs-16 hover-bg">
View Details
</a>
</div>
</div>
</div>