Card component - 16
COPY
<section class="py-5">
<div class="container px-4 mt-3">
<div class="row justify-content-center mb-2">
<div class="col-md-9">
<h2 class="h3">Products list</h2>
</div>
<div class="col-md-3">
<div class="position-relative">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="ps-4-5 input-search form-control rounded-5 form-control-sm mt-1 w-100">
</div>
</div>
</div>
<div class="row g-3 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="col mb-2">
<div class="card h-100 rounded-0">
<div class="image-wrapper">
<img class="image-on img-fluid" src="/component/images/product/shoes-with-green.jpg" alt="normal">
<img class="image-hover img-fluid" src="/component/images/product/chair-with-rack.jpg" alt="hover">
</div>
<div class="text-center mn-10 position-absolute w-100 bg-white bg-opacity-75 bottom-0 py-3">
<h6 class="fw-bolder">Fancy Product</h6>
<span class="text-danger">$40.00 - $80.00</span>
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100 rounded-0">
<div class="image-wrapper">
<img class="image-on img-fluid" src="/component/images/product/shoes-with-apple.jpg" alt="normal">
<img class="image-hover img-fluid" src="/component/images/product/chair-with-rack.jpg" alt="hover">
</div>
<div class="badge bg-danger rounded-1 text-white position-absolute" style="top: 0.5rem; right: 0.5rem">
<h6 class="m-0 fw-normal fs-8 lh-sm">Sale</h6>
</div>
<div class="text-center mn-10 position-absolute w-100 bg-white bg-opacity-75 bottom-0 py-3">
<h6 class="fw-bolder">Special Item</h6>
<span class="text-decoration-line-through text-danger">$20.00</span> - $18.00
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100 rounded-0">
<div class="image-wrapper">
<img class="image-on img-fluid" src="/component/images/product/shower-gel.jpg" alt="normal">
<img class="image-hover img-fluid" src="/component/images/product/chair-with-rack.jpg" alt="hover">
</div>
<div class="badge bg-success rounded-1 text-white position-absolute" style="top: 0.5rem; right: 0.5rem">
<h6 class="m-0 fw-normal fs-8 lh-sm">Promotional</h6>
</div>
<div class="text-center mn-10 position-absolute w-100 bg-white bg-opacity-75 bottom-0 py-3">
<h6 class="fw-bolder">Fancy Product</h6>
<span class="text-decoration-line-through text-danger">$20.00</span> - $18.00
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100 rounded-0">
<div class="image-wrapper">
<img class="image-on img-fluid" src="/component/images/product/ginger-deer.jpg" alt="normal">
<img class="image-hover img-fluid" src="/component/images/product/chair-with-rack.jpg" alt="hover">
</div>
<div class="badge bg-primary rounded-1 text-white position-absolute" style="top: 0.5rem; right: 0.5rem">
<h6 class="m-0 fw-normal fs-8 lh-sm">Discounted</h6>
</div>
<div class="text-center mn-10 position-absolute w-100 bg-white bg-opacity-75 bottom-0 py-3">
<h6 class="fw-bolder">Special Item</h6>
<span class="text-decoration-line-through text-danger">$20.00</span> - $18.00
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100 rounded-0">
<div class="image-wrapper">
<img class="image-on img-fluid" src="/component/images/product/shoes-with-green.jpg" alt="normal">
<img class="image-hover img-fluid" src="/component/images/product/chair-with-rack.jpg" alt="hover">
</div>
<div class="text-center mn-10 position-absolute w-100 bg-white bg-opacity-75 bottom-0 py-3">
<h6 class="fw-bolder">Fancy Product</h6>
<span class="text-danger">$40.00 - $80.00</span>
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100 rounded-0">
<div class="image-wrapper">
<img class="image-on img-fluid" src="/component/images/product/shoes-with-apple.jpg" alt="normal">
<img class="image-hover img-fluid" src="/component/images/product/chair-with-rack.jpg" alt="hover">
</div>
<div class="badge bg-danger rounded-1 text-white position-absolute" style="top: 0.5rem; right: 0.5rem">
<h6 class="m-0 fw-normal fs-8 lh-sm">Sale</h6>
</div>
<div class="text-center mn-10 position-absolute w-100 bg-white bg-opacity-75 bottom-0 py-3">
<h6 class="fw-bolder">Special Item</h6>
<span class="text-decoration-line-through text-danger">$20.00</span> - $18.00
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100 rounded-0">
<div class="image-wrapper">
<img class="image-on img-fluid" src="/component/images/product/shower-gel.jpg" alt="normal">
<img class="image-hover img-fluid" src="/component/images/product/chair-with-rack.jpg" alt="hover">
</div>
<div class="badge bg-success rounded-1 text-white position-absolute" style="top: 0.5rem; right: 0.5rem">
<h6 class="m-0 fw-normal fs-8 lh-sm">Promotional</h6>
</div>
<div class="text-center mn-10 position-absolute w-100 bg-white bg-opacity-75 bottom-0 py-3">
<h6 class="fw-bolder">Fancy Product</h6>
<span class="text-decoration-line-through text-danger">$20.00</span> - $18.00
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100 rounded-0">
<div class="image-wrapper">
<img class="image-on img-fluid" src="/component/images/product/ginger-deer.jpg" alt="normal">
<img class="image-hover img-fluid" src="/component/images/product/chair-with-rack.jpg" alt="hover">
</div>
<div class="badge bg-primary rounded-1 text-white position-absolute" style="top: 0.5rem; right: 0.5rem">
<h6 class="m-0 fw-normal fs-8 lh-sm">Discounted</h6>
</div>
<div class="text-center mn-10 position-absolute w-100 bg-white bg-opacity-75 bottom-0 py-3">
<h6 class="fw-bolder">Special Item</h6>
<span class="text-decoration-line-through text-danger">$20.00</span> - $18.00
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
}
.cart-item-img {
max-width: 80px;
}
.cart-item {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e9ecef;
}
.fs-7 {
font-size: 0.9rem;
}
.fs-8 {
font-size: 0.85rem;
}
.image-wrapper {
position: relative;
}
.image-hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-out;
}
.image-hover:hover {
opacity: 1;
}
.mn-10 {
margin-top: -10px;
}
.sr-icon {
top: 6px;
left: 13px;
}
.ps-4-5 {
padding-left: 35px;
}
Card component - 15
COPY
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-6 col-md-3">
<!-- Card -->
<div class="card card-lg rounded-1 border-0">
<div class="card-circle card-circle-lg card-circle-end shadow">
<strong class="fs-xs text-decoration-line-through opacity-80">$99.00</strong>
<span class="fs-6 fw-bold">$59.00</span>
</div>
<img class="rounded-top-1" src="/component/images/product/shoes-woman.jpg" alt="...">
<div class="card-body position-relative mx-lg-11 bg-light text-center" style="margin-top: -50px;">
<h5 class="mb-2">Woman Showes</h5>
<a class="btn text-primary text-decoration-none" href="#">
Shop Now <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card card-lg rounded-1 border-0">
<div class="card-circle card-circle-lg card-circle-end shadow">
<strong class="fs-xs text-decoration-line-through opacity-80">$99.00</strong>
<span class="fs-6 fw-bold">$59.00</span>
</div>
<img class="rounded-top-1" src="/component/images/product/set-gel.jpg" alt="...">
<div class="card-body position-relative mx-lg-11 bg-light text-center" style="margin-top: -50px;">
<h5 class="mb-2">Shower Gel Set</h5>
<a class="btn btn-link text-primary text-decoration-none" href="#">
Shop Now <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<!-- Card -->
<div class="card card-lg rounded-1 border-0">
<div class="card-circle card-circle-lg card-circle-end shadow">
<strong class="fs-xs text-decoration-line-through opacity-80">$99.00</strong>
<span class="fs-6 fw-bold">$59.00</span>
</div>
<img class="rounded-top-1" src="/component/images/product/ginger-deer.jpg" alt="...">
<div class="card-body position-relative mx-lg-11 bg-light text-center" style="margin-top: -50px;">
<h5 class="mb-2">Cropped Trousers</h5>
<a class="btn btn-link text-primary text-decoration-none" href="#">
Shop Now <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card card-lg rounded-1 border-0">
<div class="card-circle card-circle-lg card-circle-end shadow">
<strong class="fs-xs text-decoration-line-through opacity-80">$99.00</strong>
<span class="fs-6 fw-bold">$59.00</span>
</div>
<img class="rounded-top-1" src="/component/images/product/chair-with-rack.jpg" alt="...">
<div class="card-body position-relative mx-lg-11 bg-light text-center" style="margin-top: -50px;">
<h5 class="mb-2">Leather Sneakers</h5>
<a class="btn btn-link text-primary text-decoration-none" href="#">
Shop Now <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-green: #06b300;
--bs-green-dark: #016615;
--bs-black: #000000;
--bs-red: #d11800;
--bs-red-dark: #a01300;
--bs-white: #ffffff;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
}
body {
font-size: .90rem;
}
.card-circle-end {
right: 1.25rem;
}
.text-primary {
color: var(--bs-primary) !important;
}
.card-circle-lg {
height: 96px;
width: 96px;
}
.card-circle {
align-items: center;
background-color: var(--bs-primary);
border-radius: 50%;
color: #fff;
display: flex;
flex-direction: column;
height: 70px;
justify-content: center;
position: absolute;
top: 1.25rem;
width: 70px;
z-index: 1;
border: 1px solid #ffffff93;
}
.fs-xs {
font-size: .75rem !important;
}
.card:hover .card-body {
box-shadow: 0 .5rem 1rem rgba(94, 94, 94, 0.15) !important;
}
@media (min-width: 992px) {
.mx-lg-11 {
margin-left: 2rem !important;
margin-right: 2rem !important;
}
}
Card component - 12
COPY
<section class="p-3 p-md-5 comment">
<div class="row">
<div class="col-12">
<h5 class="mb-4">Ask Your Question</h5>
<div class="d-flex mb-4">
<div class="avatar avatar-sm flex-shrink-0 me-2">
<a href="#"> <img class="avatar-img rounded-circle" width="40" src="/component/images/avatar/m3.jpg" alt=""> </a>
</div>
<form class="w-100 d-flex">
<textarea class="one form-control pe-4 bg-light" id="autoheighttextarea" rows="1" placeholder="Add a comment..." spellcheck="false"></textarea>
<button class="btn btn-primary ms-2 mb-0" type="button">Post</button>
</form>
</div>
<div class="border p-2 p-sm-4 rounded-3 mb-4">
<ul class="list-unstyled mb-0">
<li class="comment-item">
<div class="d-flex mb-3">
<div class="avatar avatar-sm flex-shrink-0">
<a href="#">
<img class="avatar-img
rounded-circle" width="40" src="/component/images/avatar/m1.jpg" alt="">
</a>
</div>
<div class="ms-2 flex-fill">
<div class="bg-light p-3 rounded">
<div class="d-flex w-100">
<div class="me-2 flex-fill">
<h6 class="mb-1 fw-bold">
<a href="#">Frances
Guerrero</a>
</h6>
<p class="mb-0">Removed
demands expense account
in outward tedious
do. Particular way
thoroughly unaffected
projection?</p>
</div>
<small class="fs-8 text-muted">5hr</small>
</div>
</div>
<ul class="nav py-2 ms-3">
<li class="nav-item">
<a class="fs-8 small me-3" href="#">Like(13)</a>
</li>
<li class="nav-item">
<a class="fs-8 small me-3" href="#"> Reply(5)</a>
</li>
<li class="nav-item">
<a class="fs-8 small" href="#">
View 5 replies</a>
</li>
</ul>
</div>
</div>
<ul class="list-unstyled ms-4">
<li class="comment-item">
<div class="d-flex">
<div class="avatar avatar-xs
flex-shrink-0">
<a href="#">
<img class="avatar-img
rounded-circle" width="40" src="/component/images/avatar/m2.jpg" alt="">
</a>
</div>
<div class="ms-2 flex-fill">
<div class="bg-light p-3
rounded">
<div class="d-flex w-100">
<div class="me-2
flex-fill">
<h6 class="mb-1
fw-bold">
<a href="#">
Lori Stevens
</a>
</h6>
<p class="mb-0">See
resolved
goodness
felicity shy
civility
domestic had but
Drawings
offended yet
answered
Jennings
perceive.
Domestic had but
Drawings
offended yet
answered
Jennings
perceive.</p>
</div>
<small class="fs-8
text-muted">2hr</small>
</div>
</div>
<ul class="nav py-2 ms-3">
<li class="nav-item"><a class="fs-8 small
me-3" href="#">Like(1)</a></li>
<li class="nav-item"><a class="fs-8 small" href="#"> Reply(1)</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="border p-2 p-sm-4 rounded-3">
<ul class="list-unstyled mb-0">
<li class="comment-item">
<div class="d-flex">
<div class="avatar avatar-sm flex-shrink-0">
<a href="#">
<img class="avatar-img
rounded-circle" width="40" src="/component/images/avatar/m4.jpg" alt="">
</a>
</div>
<div class="ms-2 flex-fill">
<div class="bg-light p-3 rounded">
<div class="d-flex w-100">
<div class="me-2 flex-fill">
<h6 class="mb-1 fw-bold"><a href="#"> Louis
Ferguson </a></h6>
<p class="mb-0">Removed
demands expense account
in outward tedious
do. Particular way
thoroughly unaffected
projection?</p>
</div>
<small class="fs-8 text-muted">5hr</small>
</div>
</div>
<ul class="nav py-2 ms-3">
<li class="nav-item"> <a class="fs-8
small me-3" href="#"> Like</a>
</li>
<li class="nav-item"> <a class="fs-8
small" href="#"> Reply</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: .80rem;
}
a {
text-decoration: none;
}
a:hover {
color: #333;
}
.fs-7 {
font-size: .85rem;
}
.fs-8 {
font-size: .80rem;
}
Card component - 11
COPY
<section class="p-2 p-md-5 comment">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card shadow-sm p-3 p-md-4 bg-white mb-3">
<div class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="40" src="/component/images/avatar/m2.jpg" alt="">
<div class="">
<div class="text-primary fw-bold fs-7">Michael
Richard <span class="ms-2 badge bg-primary bg-opacity-10
text-primary fw-normal rounded-1">New</span>
</div>
<div class="text-muted small mt-1">Today at 10
PM</div>
</div>
</div>
<div class="d-flex align-items-center text-muted">
<div class="ms-4 text-center">
<div class="dropdown">
<a href="#" class="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">Save</a></li>
<li><a class="dropdown-item" href="#">Copy link</a></li>
<li><a class="dropdown-item" href="#">Report post</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="my-3">
<p>Dear MHUSA Community,</p>
<p>We are very excited to announce that by the end of
spring, access to your personalized benefits information
on mybenefistatlvmh.com will become much easier. </p>
<p>Currently, you can access the site by entering your
username and password. After the transition, the log-in
will be completed for you via the single sign-on process
(SSO). If you are in the office or on the VPN, you will
be automatically directed to mybenefitsatlvmh.com. If
you are not on the VPN or on a persona... <a href="#" class="text-muted">see more</a></p>
<img src="/component/images/people/fd-1.webp" class="img-fluid" width="500">
</div>
<div class="d-flex">
<div>
<button type="button" title="Like it?" class="btn btn-sm
btn-vote p-vote">
<i class="bi bi-hand-thumbs-up me-1"></i>
Yes
</button>
</div>
<div class="ms-2">
<button type="button" title="Not like it?" class="btn
btn-sm btn-vote n-vote">
<i class="bi bi-hand-thumbs-down me-1"></i>
No
</button>
</div>
<div class="ms-2">
<a href="#" title="Not like it?" class="fs-7 px-3 py-2
d-block">
<i class="bi bi-chat me-1"></i>
12
</a>
</div>
<div class="ms-2">
<a href="#" title="Not like it?" class="fs-7 px-3 py-2
d-block">
<i class="bi bi-share-fill me-1"></i>
</a>
</div>
</div>
<div class="d-flex mt-4 justify-content-between">
<img class="me-3 rounded-circle" width="35" src="/component/images/avatar/m5.jpg" alt="">
<div class="ms-auto w-100 position-relative">
<input type="text" class="form-control rounded-5" placeholder="Write a comment">
<a href="#" title="Image">
<i class="bi bi-card-image position-absolute" style="top: 7px;right: 18px;"></i>
</a>
</div>
</div>
</div>
<!-- Card end -->
<div class="card shadow-sm p-3 p-md-4 bg-white mb-3">
<div class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="40" src="/component/images/avatar/m1.jpg" alt="">
<div class="">
<div class="text-primary fw-bold fs-7">Michael
Richard <span class="ms-2 badge bg-primary bg-opacity-10
text-primary fw-normal rounded-1">New</span>
</div>
<div class="text-muted small mt-1">Yesterday at 10
PM</div>
</div>
</div>
<div class="d-flex align-items-center text-muted">
<div class="ms-4 text-center">
<div class="dropdown">
<a href="#" class="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">Save</a></li>
<li><a class="dropdown-item" href="#">Copy link</a></li>
<li><a class="dropdown-item" href="#">Report post</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="my-3">
<p>Dear MHUSA Community,</p>
<p class="m-0">We are very excited to announce that by the end of
spring, access to your personalized benefits information
on mybenefistatlvmh.com will become much easier. </p>
</div>
<div class="d-flex border-top pt-3">
<div>
<button type="button" title="Like it?" class="btn btn-sm
btn-vote p-vote">
<i class="bi bi-hand-thumbs-up me-1"></i>
Yes
</button>
</div>
<div class="ms-2">
<button type="button" title="Not like it?" class="btn
btn-sm btn-vote n-vote">
<i class="bi bi-hand-thumbs-down me-1"></i>
No
</button>
</div>
<div class="ms-2">
<a href="#" title="Not like it?" class="fs-7 px-3 py-2
d-block">
<i class="bi bi-chat me-1"></i>
12
</a>
</div>
<div class="ms-2">
<a href="#" title="Not like it?" class="fs-7 px-3 py-2
d-block">
<i class="bi bi-share-fill me-1"></i>
</a>
</div>
</div>
<div class="d-flex mt-4 justify-content-between">
<img class="me-3 rounded-circle" width="35" src="/component/images/avatar/m5.jpg" alt="">
<div class="ms-auto w-100 position-relative">
<input type="text" class="form-control rounded-5" placeholder="Write a comment">
<a href="#" title="Image">
<i class="bi bi-card-image position-absolute" style="top: 7px;right: 18px;"></i>
</a>
</div>
</div>
</div>
<!-- Cart start -->
<div class="card shadow-sm p-3 p-md-4 bg-white mb-3">
<div class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="40" src="/component/images/avatar/m6.jpg" alt="">
<div class="">
<div class="text-primary fw-bold fs-7">Michael
Richard <span class="ms-2 badge bg-primary bg-opacity-10
text-primary fw-normal rounded-1">New</span>
</div>
<div class="text-muted small mt-1">Today at 10
PM</div>
</div>
</div>
<div class="d-flex align-items-center text-muted">
<div class="ms-4 text-center">
<div class="dropdown">
<a href="#" class="" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">Save</a></li>
<li><a class="dropdown-item" href="#">Copy link</a></li>
<li><a class="dropdown-item" href="#">Report post</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="my-3">
<p>Dear MHUSA Community,</p>
<p>We are very excited to announce that by the end of
spring, access to your personalized benefits information
on mybenefistatlvmh.com will become much easier. </p>
<p>Currently, you can access the site by entering your
username and password. After the transition, the log-in
will be completed for you via the single sign-on process
(SSO). If you are in the office or on the VPN, you will
be automatically directed to mybenefitsatlvmh.com. If
you are not on the VPN or on a persona... <a href="#" class="text-muted">see more</a></p>
<div class="row g-1">
<div class="col-12">
<img src="/component/images/product/wine-1.jpg" class="img-fluid">
</div>
<div class="col-6">
<img src="/component/images/product/wine-2.jpg" class="img-fluid">
</div>
<div class="col-6">
<img src="/component/images/product/wine-3.jpg" class="img-fluid">
</div>
</div>
</div>
<div class="d-flex border-top pt-3">
<div>
<button type="button" title="Like it?" class="btn btn-sm
btn-vote p-vote">
<i class="bi bi-hand-thumbs-up me-1"></i>
Yes
</button>
</div>
<div class="ms-2">
<button type="button" title="Not like it?" class="btn
btn-sm btn-vote n-vote">
<i class="bi bi-hand-thumbs-down me-1"></i>
No
</button>
</div>
<div class="ms-2">
<a href="#" title="Not like it?" class="fs-7 px-3 py-2
d-block">
<i class="bi bi-chat me-1"></i>
12
</a>
</div>
<div class="ms-2">
<a href="#" title="Not like it?" class="fs-7 px-3 py-2
d-block">
<i class="bi bi-share-fill me-1"></i>
</a>
</div>
</div>
<div class="d-flex mt-4 justify-content-between">
<img class="me-3 rounded-circle" width="35" src="/component/images/avatar/m5.jpg" alt="">
<div class="ms-auto w-100 position-relative">
<input type="text" class="form-control rounded-5" placeholder="Write a comment">
<a href="#" title="Image">
<i class="bi bi-card-image position-absolute" style="top: 7px;right: 18px;"></i>
</a>
</div>
</div>
</div>
<!-- Card end -->
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #03173a;
--bs-blue-light: #1369ff;
--bs-blue-dark: #004fd8;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.comment {
background: #FAFAFA;
}
a {
color: var(--bs-blue);
text-decoration: none;
}
.fs-7 {
font-size: .85rem;
}
.fs-8 {
font-size: .80rem;
}
.rounded-circle {
background: #757575;
}
.me--2 {
margin-right: -15px;
}
.me--1 {
margin-right: -10px;
}
.border-2 {
border: 2px solid #ffffff;
}
.border-1 {
border: 1px solid #ffffff;
}
.form-control {
font-size: .85rem;
background: #FAFAFA;
}
.btn-vote {
font-size: .85rem;
padding: .5rem 1rem !important;
border-radius: var(--bs-border-radius-xxl);
line-height: normal;
}
.p-vote {
border: 1px solid #dceaff;
background-color: #e6f0ff;
color: #0d6efd;
}
.p-vote:hover {
border: 1px solid #0d6efd;
background-color: #dceaff;
color: #0d6efd;
}
.n-vote {
border: 1px solid var(--bs-danger-bg-subtle);
background-color: #ffe6e7;
color: #ce0022;
}
.n-vote:hover {
border: 1px solid #ce0022;
background-color: #ffddde;
color: #ce0022;
}
.dropdown-menu {
--bs-dropdown-font-size: 0.9rem;
}
Card component - 10
COPY
<section class="bg-light">
<div class="container p-2 p-md-5">
<div class="row g-3 justify-content-center mb-4 pt-3">
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb rounded-1 position-relative">
<div class="text-center w-100">
<img class="me-3 rounded-circle align-self-start border" width="75" src="/component/images/avatar/m2.jpg" alt="" style="margin-top: -55px;">
<div class="mt-2">
<div class="fw-medium">Michael Richard <span class="badge bg-primary bg-opacity-10 text-primary rounded-1">NEW</span>
</div>
<div class="text-muted">richard@example.com</div>
<div class="ms-auto me-auto mt-3">
<img class="me--2 border-2 rounded-circle" width="30" src="/component/images/avatar/m1.jpg" alt="">
<img class="me--2 border-2 rounded-circle" width="30" src="/component/images/avatar/m3.jpg" alt="">
<img class="me--2 border-2 rounded-circle" width="30" src="/component/images/avatar/m4.jpg" alt="">
<a href="#" data-bs-toggle="dropdown" aria-expanded="false" class="ms-3 line-height">
<i class="bi bi-three-dots fs-5"></i>
</a>
</div>
<div class="d-flex justify-content-between mt-4">
<div>
<button class="btn btn-sm btn-primary shadow-sm me-1 ">Follow</button>
</div>
<div>
<button class="btn btn-sm btn-outline-dark shadow-sm">Message
</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #1c1a28;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
a:hover {
color: var(--bs-primary) !important;
}
.fs-10 {
font-size: .80rem !important;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dropdown-menu {
--bs-dropdown-font-size: 0.8rem;
}
.me--2 {
margin-right: -15px;
}
Card component - 9
COPY
<section class="bg-light">
<div class="container p-2 p-md-5">
<div class="row g-3 justify-content-center mb-4 pt-3">
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-between">
<img class="me-3 rounded-circle align-self-start" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="fw-medium">Michael Richard <span class="badge bg-warning bg-opacity-10 text-warning rounded-1">Admin</span>
</div>
<div class="text-muted">richard@example.com</div>
<p class="text-muted small mt-3">Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi.</p>
<a href="#" class="btn btn-sm btn-outline-primary shadow-sm me-1">Details</a>
<a href="#" class="btn btn-sm btn-outline-dark shadow-sm">Message</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #1c1a28;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
.fs-10 {
font-size: .80rem !important;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dropdown-menu {
--bs-dropdown-font-size: 0.8rem;
}
Card component - 8
COPY
<section class="bg-light">
<div class="container p-2 p-md-5">
<div class="row g-3 justify-content-center mb-4 pt-3">
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="">
<img class="me-3 rounded-circle align-self-start" width="45" src="/component/images/avatar/m2.jpg" alt="">
<div class="mt-2">
<div class="fw-medium">Michael Richard <span class="badge bg-primary bg-opacity-10 text-primary rounded-1">Super Admin</span>
</div>
<div class="text-muted">richard@example.com</div>
<p class="text-muted small mt-3">Vulputate commodo tincidunt risus. Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi.</p>
<div class="py-1">
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fw-medium" href="#">
<i class="bi bi-calendar3 me-2"></i>Dec 4
</a>
<a class="nav-link d-inline-block me-4 p-0 text-black-50 fw-medium" href="#">
<i class="bi bi-chat me-2"></i>2
</a>
<a class="nav-link d-inline-block me-3 p-0 text-black-50 fw-medium" href="#">
<i class="bi bi-share me-2"></i>12
</a>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #1c1a28;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
a:hover {
color: var(--bs-primary) !important;
}
.fs-10 {
font-size: .80rem !important;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dropdown-menu {
--bs-dropdown-font-size: 0.8rem;
}
Card component - 7
COPY
<section class="bg-light">
<div class="container p-2 p-md-5">
<div class="row pb-2 border-bottom">
<div class="col-md-5">
<h3 class="fs-5 m-0">Member list</h3>
</div>
<div class="col-md-5">
<div class="position-relative">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="ps-4-5 input-search form-control rounded-5 form-control-sm mt-1 bg-dark bg-opacity-10 w-100">
</div>
</div>
<div class="col-md-2">
<a href="#" class="float-end btn btn-sm rounded-5 btn-outline-primary px-3">Add New</a>
</div>
</div>
<div class="row g-3 justify-content-center mb-4 pt-3 text-center">
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m6.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m3.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m2.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m6.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m4.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m4.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m4.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m4.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m6.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #1c1a28;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.text-primary {
--bs-text-opacity: .75;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
.fs-10 {
font-size: .80rem !important;
}
.card-footer,
.card-header {
background-color: #ffffff !important;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dropdown-menu {
--bs-dropdown-font-size: 0.8rem;
}
.ps-4-5 {
padding-left: 35px;
}
.sr-icon {
top: 7px;
left: 13px;
}
.input-search {
border: 1px solid #00000027 !important;
}
Card component - 6
COPY
<section class="bg-light ">
<div class="container p-2 p-md-5">
<div class="row">
<div class="col-md-8">
<h3 class="fs-5 m-0">Team members</h3>
</div>
<div class="col-md-4">
<a href="#" class="float-end btn btn-sm rounded-5 btn-outline-primary px-3">Add More</a>
</div>
</div>
<div class="row g-3 justify-content-center mb-4 pt-3 text-center">
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-body position-relative">
<div class="dropdown text-end position-absolute end-0 me-3">
<a href="#" class="d-block text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow rounded-1">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m1.jpg" class=" img-fluid rounded-circle border p-1 mt-2 mt-2">
</div>
<div class="fs-6 fw-medium">Amil Evana</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
<div class="card-footer p-0">
<div class="d-flex justify-content-around text-muted">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-body">
<div class="dropdown text-end position-absolute end-0 me-3">
<a href="#" class="d-block text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow rounded-1">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m2.jpg" class=" img-fluid rounded-circle border p-1 mt-2">
</div>
<div class="fs-6 fw-medium">David Forman</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
<div class="card-footer p-0">
<div class="d-flex justify-content-around text-muted">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-body">
<div class="dropdown text-end position-absolute end-0 me-3">
<a href="#" class="d-block text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow rounded-1">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m4.jpg" class=" img-fluid rounded-circle border p-1 mt-2">
</div>
<div class="fs-6 fw-medium">Shophia Lg</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
<div class="card-footer p-0">
<div class="d-flex justify-content-around text-muted">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-body">
<div class="dropdown text-end position-absolute end-0 me-3">
<a href="#" class="d-block text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow rounded-1">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m6.jpg" class=" img-fluid rounded-circle border p-1 mt-2">
</div>
<div class="fs-6 fw-medium">David Forman</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
<div class="card-footer p-0">
<div class="d-flex justify-content-around text-muted">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-body">
<div class="dropdown text-end position-absolute end-0 me-3">
<a href="#" class="d-block text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow rounded-1">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m4.jpg" class=" img-fluid rounded-circle border p-1 mt-2">
</div>
<div class="fs-6 fw-medium">Shophia Lg</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
<div class="card-footer p-0">
<div class="d-flex justify-content-around text-muted">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-body">
<div class="dropdown text-end position-absolute end-0 me-3">
<a href="#" class="d-block text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow rounded-1">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m6.jpg" class=" img-fluid rounded-circle border p-1 mt-2">
</div>
<div class="fs-6 fw-medium">David Forman</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
<div class="card-footer p-0">
<div class="d-flex justify-content-around text-muted">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-body">
<div class="dropdown text-end position-absolute end-0 me-3">
<a href="#" class="d-block text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow rounded-1">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m2.jpg" class=" img-fluid rounded-circle border p-1 mt-2">
</div>
<div class="fs-6 fw-medium">David Forman</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
<div class="card-footer p-0">
<div class="d-flex justify-content-around text-muted">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-body">
<div class="dropdown text-end position-absolute end-0 me-3">
<a href="#" class="d-block text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow rounded-1">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m1.jpg" class=" img-fluid rounded-circle border p-1 mt-2">
</div>
<div class="fs-6 fw-medium">Amil Evana</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
<div class="card-footer p-0">
<div class="d-flex justify-content-around text-muted">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
.h-100v {
height: 100vh;
}
.fs-10 {
font-size: .80rem !important;
}
.card-footer,
.card-header {
background-color: #ffffff !important;
}
.card-footer a:hover {
background: #f1f1f3;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dropdown-menu {
--bs-dropdown-font-size: 0.8rem;
}
Card component - 5
COPY
<div class="p-3 p-md-5">
<div class="row g-3">
<div class="col-md-2">
<div class="card shadow-sm border rounded-0">
<img src="/component/images/course/css-banner.jpg" class="card-img-top" alt="...">
<div class="card-body pb-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge text-primary bg-success-soft rounded-1 fw-normal">
Beginner
</span>
<a href="#" class="text-muted fs-6">
<i class="bi bi-heart"></i>
</a>
</div>
<h5 class="card-title fs-8 mb-2">CSS Course</h5>
<small class="text-muted">By: Royan Miki</small>
<div class="lh-1 mt-3">
<span>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
</span>
<span class="text-danger mx-1">4.0</span>
<span class="fs-8 text-muted">(150)</span>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card shadow-sm border rounded-0">
<img src="/component/images/course/html-banner.jpg" class="card-img-top" alt="...">
<div class="card-body pb-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge text-primary bg-success-soft rounded-1 fw-normal">
Beginner
</span>
<a href="#" class="text-muted fs-6">
<i class="bi bi-heart"></i>
</a>
</div>
<h5 class="card-title fs-8 mb-2">HTML Course</h5>
<small class="text-muted">By: Royan Miki</small>
<div class="lh-1 mt-3">
<span>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
</span>
<span class="text-danger mx-1">4.0</span>
<span class="fs-8 text-muted">(150)</span>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card shadow-sm border rounded-0">
<img src="/component/images/course/php-banner.jpg" class="card-img-top" alt="...">
<div class="card-body pb-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge text-primary bg-success-soft rounded-1 fw-normal">
Beginner
</span>
<a href="#" class="text-muted fs-6">
<i class="bi bi-heart"></i>
</a>
</div>
<h5 class="card-title fs-8 mb-2">PHP Course</h5>
<small class="text-muted">By: Royan Miki</small>
<div class="lh-1 mt-3">
<span>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
</span>
<span class="text-danger mx-1">4.0</span>
<span class="fs-8 text-muted">(150)</span>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card shadow-sm border rounded-0">
<img src="/component/images/course/python-banner.jpg" class="card-img-top" alt="...">
<div class="card-body pb-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge text-primary bg-success-soft rounded-1 fw-normal">
Beginner
</span>
<a href="#" class="text-muted fs-6">
<i class="bi bi-heart"></i>
</a>
</div>
<h5 class="card-title fs-8 mb-2">Python Course</h5>
<small class="text-muted">By: Royan Miki</small>
<div class="lh-1 mt-3">
<span>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
</span>
<span class="text-danger mx-1">4.0</span>
<span class="fs-8 text-muted">(150)</span>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card shadow-sm border rounded-0">
<img src="/component/images/course/laravel-banner.jpg" class="card-img-top" alt="...">
<div class="card-body pb-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge text-primary bg-success-soft rounded-1 fw-normal">
Beginner
</span>
<a href="#" class="text-muted fs-6">
<i class="bi bi-heart"></i>
</a>
</div>
<h5 class="card-title fs-8 mb-2">Laravel Course</h5>
<small class="text-muted">By: Royan Miki</small>
<div class="lh-1 mt-3">
<span>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
<i class="bi bi-star-fill fs-10 text-warning"></i>
</span>
<span class="text-danger mx-1">4.0</span>
<span class="fs-8 text-muted">(150)</span>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card rounded-0" aria-hidden="true">
<svg class="placeholder" width="100%" height="130" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveaspectratio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#ccd8e7"></rect>
</svg>
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-12"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #009ce4;
--bs-blue-rgb: 0, 156, 228;
--bs-black: #000000;
--bs-white: #ffffff;
--bs-purple: #7924c9;
--bs-purple-dark: #500399;
--bs-black: #000000;
--bs-red: #d11800;
--bs-red-dark: #a01300;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
color: var(--bs-primary);
}
a:hover,
.nav-link.active,
.nav-link:hover {
color: var(--bs-black) !important;
}
.bg-gray-200 {
--geeks-bg-opacity: 1;
background-color: #e2e8f0 !important;
}
.bg-success-soft {
background: rgb(var(--bs-primary-rgb), 0.1) !important;
}
.fs-7 {
font-size: .95rem !important;
}
.fs-8 {
font-size: .90rem !important;
}
.fs-9 {
font-size: .85rem !important;
}
.fs-10 {
font-size: .80rem !important;
}
.placeholder-glow .placeholder {
background: #acbed3;
}
.card-footer {
background-color: rgb(245 245 245);
padding: 8px 17px !important;
}
Card component - 4
COPY
<section class="bg-light h-100v p-section">
<div class="container p-3 p-md-5">
<div class="row">
<div class="col-md-8">
<h3 class="fs-5 m-0">Team members</h3>
</div>
<div class="col-md-4">
<a href="#" class="float-end btn btn-sm rounded-5 btn-outline-primary px-3">Add More</a>
</div>
</div>
<div class="row g-3 justify-content-center mb-4 pt-3 text-center">
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-header d-flex justify-content-around text-muted p-0 m-0">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
<div class="card-body">
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m1.jpg" class="img-fluid rounded-circle border p-1">
</div>
<div class="fs-6 fw-medium">Amil Evana</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-header d-flex justify-content-around text-muted p-0 m-0">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
<div class="card-body">
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m2.jpg" class="img-fluid rounded-circle border p-1">
</div>
<div class="fs-6 fw-medium">David Forman</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-header d-flex justify-content-around text-muted p-0 m-0">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
<div class="card-body">
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m4.jpg" class="img-fluid rounded-circle border p-1">
</div>
<div class="fs-6 fw-medium">Shophia Lg</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-2 m-3 m-md-0 shadow-bb border-0">
<div class="card-header d-flex justify-content-around text-muted p-0 m-0">
<a href="#" class="p-3 text-center w-50 text-decoration-none">
<i class="bi bi-envelope-fill me-2"></i> Email
</a>
<a href="#" class="p-3 text-center w-50 border-start text-decoration-none">
<i class="bi bi-telephone-fill me-2"></i> Call
</a>
</div>
<div class="card-body">
<div class="px-3 px-md-3 px-lg-5 pb-3">
<img src="/component/images/avatar/m6.jpg" class="img-fluid rounded-circle border p-1">
</div>
<div class="fs-6 fw-medium">David Forman</div>
<div class="text-muted mb-2">Assurance Administrator</div>
<a href="#" class="btn btn-sm rounded-5 btn-outline-primary fs-10 mt-2 mb-2 px-3">Administrator</a>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
}
.h-100v {
height: 100vh;
}
.fs-10 {
font-size: .80rem !important;
}
.card-footer,
.card-header {
background-color: #ffffff !important;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.card-header a:hover {
background: #f1f1f3;
}
Card component - 14
COPY
<section class="py-5">
<div class="container px-4 mt-5">
<div class="row justify-content-center text-center pb-4 mb-sm-2 mb-lg-3">
<div class="col-xl-6 col-lg-7 col-md-9">
<h2 class="h1 mb-lg-4 text-success">Latest Products</h2>
<p class="fs-lg text-muted mb-0">Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?.</p>
</div>
</div>
<div class="row row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="col mb-5">
<div class="card h-100">
<img class="card-img-top" src="/component/images/product/shoes-with-green.jpg" alt="...">
<div class="card-body p-2 p-md-4">
<div class="text-center">
<h6 class="fw-bolder">Fancy Product</h6>
<span class="text-danger">$40.00 - $80.00</span>
</div>
</div>
<div class="card-footer p-3 pt-0 border-top-0 bg-transparent mb-3">
<div class="text-center">
<a class="btn btn-sm rounded-pill btn-outline-success mt-auto px-3" href="#">View options</a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<div class="badge bg-danger rounded-1 text-white position-absolute" style="top: 0.5rem; right: 0.5rem">
<h6 class="m-0 fw-normal fs-8 lh-sm">Sale</h6>
</div>
<img class="card-img-top" src="/component/images/product/shoes-with-apple.jpg" alt="...">
<div class="card-body p-2 p-md-4">
<div class="text-center">
<h6 class="fw-bolder">Special Item</h6>
<span class="text-decoration-line-through text-danger">$20.00</span>
$18.00
<div class="d-flex justify-content-center small text-warning mt-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
</div>
</div>
<div class="card-footer p-3 pt-0 border-top-0 bg-transparent mb-3">
<div class="text-center">
<a class="btn btn-sm rounded-pill btn-outline-danger mt-auto px-3" href="#">Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<div class="badge bg-success rounded-1 text-white position-absolute" style="top: 0.5rem; right: 0.5rem">
<h6 class="m-0 fw-normal fs-8 lh-sm">Promotional</h6>
</div>
<img class="card-img-top" src="/component/images/product/shower-gel.jpg" alt="...">
<div class="card-body p-2 p-md-4">
<div class="text-center">
<h6 class="fw-bolder">Fancy Product</h6>
<span class="text-decoration-line-through text-danger">$20.00</span>
$18.00
<div class="d-flex justify-content-center small text-warning mt-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
</div>
</div>
<div class="card-footer p-3 pt-0 border-top-0 bg-transparent mb-3">
<div class="text-center">
<a class="btn btn-sm rounded-pill btn-outline-danger mt-auto px-3" href="#">Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<div class="badge bg-primary rounded-1 text-white position-absolute" style="top: 0.5rem; right: 0.5rem">
<h6 class="m-0 fw-normal fs-8 lh-sm">Discounted</h6>
</div>
<img class="card-img-top" src="/component/images/product/ginger-deer.jpg" alt="...">
<div class="card-body p-2 p-md-4">
<div class="text-center">
<h6 class="fw-bolder">Special Item</h6>
<span class="text-decoration-line-through text-danger">$20.00</span>
$18.00
<div class="d-flex justify-content-center small text-warning mt-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
</div>
</div>
<div class="card-footer p-3 pt-0 border-top-0 bg-transparent mb-3">
<div class="text-center">
<a class="btn btn-sm rounded-pill btn-outline-danger mt-auto px-3" href="#">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
}
.cart-item-img {
max-width: 80px;
}
.cart-item {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e9ecef;
}
.card:hover {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.fs-7 {
font-size: 0.9rem;
}
.fs-8 {
font-size: 0.85rem;
}
Card component - 3
COPY
<section class="">
<div class="container p-2 p-md-5">
<div class="row pb-2 border-bottom">
<div class="col-md-5">
<h3 class="fs-5 m-0">Member list</h3>
</div>
<div class="col-md-5">
<div class="position-relative">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="ps-4-5 input-search form-control rounded-5 form-control-sm mt-1 bg-dark bg-opacity-10 w-100">
</div>
</div>
<div class="col-md-2">
<a href="#" class="float-end btn btn-sm rounded-5 btn-outline-primary px-3">Add New</a>
</div>
</div>
<div class="row g-3 justify-content-center mb-4 pt-3 text-center">
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m2.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m5.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m2.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m3.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m2.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m5.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #1c1a28;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.text-primary {
--bs-text-opacity: .75;
color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
.fs-10 {
font-size: .80rem !important;
}
.card-footer,
.card-header {
background-color: #ffffff !important;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dropdown-menu {
--bs-dropdown-font-size: 0.8rem;
}
.ps-4-5 {
padding-left: 35px;
}
.sr-icon {
top: 7px;
left: 13px;
}
.input-search {
border: 1px solid #00000027 !important;
}
Card component - 2
COPY
<section class="">
<div class="container p-2 p-md-5">
<div class="row pb-2 border-bottom">
<div class="col-md-5">
<h3 class="fs-5 m-0">Member list</h3>
</div>
<div class="col-md-5">
<div class="position-relative">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="ps-4-5 input-search form-control rounded-5 form-control-sm mt-1 bg-dark bg-opacity-10 w-100">
</div>
</div>
<div class="col-md-2">
<a href="#" class="float-end btn btn-sm rounded-5 btn-outline-primary px-3">Add New</a>
</div>
</div>
<div class="row g-3 justify-content-center mb-4 pt-3 text-center">
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m2.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m5.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m2.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m3.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m2.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-between bg-white p-3 shadow-bb">
<div class="d-flex justify-content-sm-end">
<img class="me-3 rounded-circle" width="45" src="/component/images/avatar/m5.jpg" alt="">
<div class="mt-1">
<div class="text-primary fw-medium">Michael Richard <span class="badge bg-light text-success">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="mt-2 d-block" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical fs-5"></i>
</a>
<ul class="dropdown-menu shadow p-2">
<li><a class="dropdown-item" href="#">Send message</a></li>
<li><a class="dropdown-item" href="#">View profile</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #1264ff;
--bs-blue-rgb: 18, 100, 255;
--bs-black: #1c1a28;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.text-primary {
--bs-text-opacity: .75;
color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
.fs-10 {
font-size: .80rem !important;
}
.card-footer,
.card-header {
background-color: #ffffff !important;
}
.shadow-bb {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dropdown-menu {
--bs-dropdown-font-size: 0.8rem;
}
.ps-4-5 {
padding-left: 35px;
}
.sr-icon {
top: 7px;
left: 13px;
}
.input-search {
border: 1px solid #00000027 !important;
}
Card component - 1
COPY
<div class="p-3 p-md-5">
<div class="row g-3">
<div class="col-md-3">
<div class="card" aria-hidden="true">
<svg class="placeholder" width="100%" height="130" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveaspectratio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#ccd8e7"></rect>
</svg>
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-12"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" aria-hidden="true">
<svg class="placeholder" width="100%" height="130" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveaspectratio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#ccd8e7"></rect>
</svg>
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-12"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" aria-hidden="true">
<svg class="placeholder" width="100%" height="130" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveaspectratio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#ccd8e7"></rect>
</svg>
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-12"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" aria-hidden="true">
<svg class="placeholder" width="100%" height="130" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveaspectratio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#ccd8e7"></rect>
</svg>
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-12"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #009ce4;
--bs-blue-rgb: 0, 156, 228;
--bs-black: #000000;
--bs-white: #ffffff;
--bs-purple: #7924c9;
--bs-purple-dark: #500399;
--bs-black: #000000;
--bs-red: #d11800;
--bs-red-dark: #a01300;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-white-rgb: 255, 255, 255;
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
color: var(--bs-primary);
}
a:hover,
.nav-link.active,
.nav-link:hover {
color: var(--bs-black) !important;
}
.bg-gray-200 {
--geeks-bg-opacity: 1;
background-color: #e2e8f0 !important;
}
.bg-success-soft {
background: rgb(var(--bs-primary-rgb), 0.1) !important;
}
.fs-7 {
font-size: .95rem !important;
}
.fs-8 {
font-size: .90rem !important;
}
.fs-9 {
font-size: .85rem !important;
}
.fs-10 {
font-size: .80rem !important;
}
.placeholder-glow .placeholder {
background: #acbed3;
}
.card-footer {
background-color: rgb(245 245 245);
padding: 8px 17px !important;
}
More coming soon