Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card sub_title_box border-0 shadow-sm">
<div class="card-body">
<h6 class="card-title mb-1 text-capitalize">Card Title</h6>
<label>Card Subtitle</label>
<p class="card-text mt-2 mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="d-flex align-items-center flex-wrap gap-3 card-links">
<a href="#">Card-link</a>
<a href="#">Another link</a>
</div>
</div>
</div>
.card.sub_title_box h6 {
color: #2a2a4a;
}
.card.sub_title_box label {
font-size: 14px;
color: #74829c;
}
.card.sub_title_box p {
font-size: 14px;
color: #282f53;
}
.card.sub_title_box .card-links a {
color: #0093ED;
font-size: 12px;
text-decoration: none;
}
.card.sub_title_box .card-links a:hover {
text-decoration: underline;
}
Card Header
With supporting text below as a natural lead-in to additional content.
<div class="card card_header_box border-0 shadow-sm">
<div class="card-header py-3">
<h6 class="card-title">Card Header</h6>
</div>
<div class="card-body">
<p class="card-text mb-3">With supporting text below as a natural lead-in to additional content.</p>
<button class="btn">Go Somewhere</button>
</div>
</div>
.card.card_header_box h6 {
color: #2a2a4a;
}
.card.card_header_box .card-header {
background-color: transparent;
}
.card.card_header_box p {
font-size: 14px;
color: #282f53;
}
.card.card_header_box button {
font-size: 14px;
background-color: #0092ed0a;
border: 1px solid #0093ED;
color: #0093ED;
}
.card.card_header_box button:hover {
background-color: #0093ED;
color: #fff;
}
.text-start
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
.text-center
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
.text-end
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Contact Card
Laura Norda
Lorem ipsum dolor, sit amet consectetur adipisicing elit Eligendi eius illum.
<div class="card alert mb-0 p-0 card_contact_box border-0 shadow-sm">
<div class="card-header d-flex align-items-center justify-content-between py-3">
<h6>Contact Card<h6>
<div class="card-tools">
<button data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="card-toggle">
<i class="fa-solid fa-angle-down"></i>
</button>
<button data-bs-dismiss="alert" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</div>
<div class="collapse show" id="collapseExample">
<div class="card-body text-center py-4">
<div class="contact-card-box">
<img src="..." alt="user" />
<h6 class="mt-2">Laura Norda<h6>
<p class="card-text mt-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit Eligendi eius illum.<p>
</div>
</div>
<div class="card-footer py-3">
<div class="d-flex align-items-center gap-2 justify-content-center card-social-links">
<button>
<i class="fa-brands fa-google"></i>
</button>
<button>
<i class="fa-brands fa-facebook-f"></i>
</button>
<button>
<i class="fa-brands fa-twitter"></i>
</button>
</div>
</div>
</div>
</div>
.card.card_contact_box .card-footer {
background-color: transparent;
}
.card.card_contact_box .card-header {
background-color: #0093ED;
}
.card.card_contact_box .card-header h6 {
color: #fff;
}
.card.card_contact_box p {
font-size: 14px;
color: #282f53b7;
}
.card.card_contact_box .card-social-links button {
background-color: #0092ed0a;
border: 1px solid #0093ED;
color: #0093ED;
width: 35px;
height: 35px;
display: flex;
font-size: 14px;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
}
.card.card_contact_box .card-social-links button:hover {
color: #fff;
background-color: #0093ED;
}
.card.card_contact_box .contact-card-box img {
width: 75px;
height: 75px;
border-radius: 50%;
object-fit: cover;
}
.card.card_contact_box .card-tools .card-toggle {
transition: 0.3s;
}
.card.card_contact_box .card-tools .card-toggle.collapsed {
transform: rotate(180deg);
}
.card-tools {
display: flex;
align-items: center;
gap: 15px;
}
.card-tools button {
background-color: transparent;
border: none;
padding: 0;
outline: none;
color: #ffffff;
display: flex;
}
Contact Card
Laura Norda
Lorem ipsum dolor, sit amet consectetur adipisicing elit Eligendi eius illum.
<div class="card alert mb-0 p-0 card_contact_box border-0 shadow-sm">
<div class="card-header bg-danger d-flex align-items-center justify-content-between py-3">
<h6>Contact Card<h6>
<div class="card-tools">
<button data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="card-toggle">
<i class="fa-solid fa-angle-down"></i>
</button>
<button data-bs-dismiss="alert" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</div>
<div class="collapse show" id="collapseExample">
<div class="card-body text-center py-4">
<div class="contact-card-box">
<img src="..." alt="user" />
<h6 class="mt-2">Laura Norda<h6>
<p class="card-text mt-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit Eligendi eius illum.<p>
</div>
</div>
<div class="card-footer py-3">
<div class="d-flex align-items-center gap-2 justify-content-center card-social-links">
<button>
<i class="fa-brands fa-google"></i>
</button>
<button>
<i class="fa-brands fa-facebook-f"></i>
</button>
<button>
<i class="fa-brands fa-twitter"></i>
</button>
</div>
</div>
</div>
</div>
.card.card_contact_box .card-footer {
background-color: transparent;
}
.card.card_contact_box .card-header h6 {
color: #fff;
}
.card.card_contact_box p {
font-size: 14px;
color: #282f53b7;
}
.card.card_contact_box .card-social-links button {
background-color: #dc354610;
border: 1px solid #dc3545;
color: #dc3545;
width: 35px;
height: 35px;
display: flex;
font-size: 14px;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
}
.card.card_contact_box .card-social-links button:hover {
color: #fff;
background-color: #dc3545;
}
.card.card_contact_box .contact-card-box img {
width: 75px;
height: 75px;
border-radius: 50%;
object-fit: cover;
}
.card.card_contact_box .card-tools .card-toggle {
transition: 0.3s;
}
.card.card_contact_box .card-tools .card-toggle.collapsed {
transform: rotate(180deg);
}
.card-tools {
display: flex;
align-items: center;
gap: 15px;
}
.card-tools button {
background-color: transparent;
border: none;
padding: 0;
outline: none;
color: #ffffff;
display: flex;
}
Contact Card
Laura Norda
Lorem ipsum dolor, sit amet consectetur adipisicing elit Eligendi eius illum.
<div class="card alert mb-0 p-0 card_contact_box border-0 shadow-sm">
<div class="card-header bg-info d-flex align-items-center justify-content-between py-3">
<h6>Contact Card<h6>
<div class="card-tools">
<button data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="card-toggle">
<i class="fa-solid fa-angle-down"></i>
</button>
<button data-bs-dismiss="alert" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</div>
<div class="collapse show" id="collapseExample">
<div class="card-body text-center py-4">
<div class="contact-card-box">
<img src="..." alt="user" />
<h6 class="mt-2">Laura Norda<h6>
<p class="card-text mt-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit Eligendi eius illum.<p>
</div>
</div>
<div class="card-footer py-3">
<div class="d-flex align-items-center gap-2 justify-content-center card-social-links">
<button>
<i class="fa-brands fa-google"></i>
</button>
<button>
<i class="fa-brands fa-facebook-f"></i>
</button>
<button>
<i class="fa-brands fa-twitter"></i>
</button>
</div>
</div>
</div>
</div>
.card.card_contact_box .card-footer {
background-color: transparent;
}
.card.card_contact_box .card-header h6 {
color: #fff;
}
.card.card_contact_box p {
font-size: 14px;
color: #282f53b7;
}
.card.card_contact_box .card-social-links button {
background-color: #0dcaf00d;
border: 1px solid #0dcaf0;
color: #0dcaf0;
width: 35px;
height: 35px;
display: flex;
font-size: 14px;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
}
.card.card_contact_box .card-social-links button:hover {
color: #fff;
background-color: #0dcaf0;
}
.card.card_contact_box .contact-card-box img {
width: 75px;
height: 75px;
border-radius: 50%;
object-fit: cover;
}
.card.card_contact_box .card-tools .card-toggle {
transition: 0.3s;
}
.card.card_contact_box .card-tools .card-toggle.collapsed {
transform: rotate(180deg);
}
.card-tools {
display: flex;
align-items: center;
gap: 15px;
}
.card-tools button {
background-color: transparent;
border: none;
padding: 0;
outline: none;
color: #ffffff;
display: flex;
}
Contact Card
Laura Norda
Lorem ipsum dolor, sit amet consectetur adipisicing elit Eligendi eius illum.
<div class="card alert mb-0 p-0 card_contact_box border-0 shadow-sm">
<div class="card-header bg-success d-flex align-items-center justify-content-between py-3">
<h6>Contact Card<h6>
<div class="card-tools">
<button data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="card-toggle">
<i class="fa-solid fa-angle-down"></i>
</button>
<button data-bs-dismiss="alert" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</div>
<div class="collapse show" id="collapseExample">
<div class="card-body text-center py-4">
<div class="contact-card-box">
<img src="..." alt="user" />
<h6 class="mt-2">Laura Norda<h6>
<p class="card-text mt-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit Eligendi eius illum.<p>
</div>
</div>
<div class="card-footer py-3">
<div class="d-flex align-items-center gap-2 justify-content-center card-social-links">
<button>
<i class="fa-brands fa-google"></i>
</button>
<button>
<i class="fa-brands fa-facebook-f"></i>
</button>
<button>
<i class="fa-brands fa-twitter"></i>
</button>
</div>
</div>
</div>
</div>
.card.card_contact_box .card-footer {
background-color: transparent;
}
.card.card_contact_box .card-header h6 {
color: #fff;
}
.card.card_contact_box p {
font-size: 14px;
color: #282f53b7;
}
.card.card_contact_box .card-social-links button {
background-color: #1987540d;
border: 1px solid #198754;
color: #198754;
width: 35px;
height: 35px;
display: flex;
font-size: 14px;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
}
.card.card_contact_box .card-social-links button:hover {
color: #fff;
background-color: #198754;
}
.card.card_contact_box .contact-card-box img {
width: 75px;
height: 75px;
border-radius: 50%;
object-fit: cover;
}
.card.card_contact_box .card-tools .card-toggle {
transition: 0.3s;
}
.card.card_contact_box .card-tools .card-toggle.collapsed {
transform: rotate(180deg);
}
.card-tools {
display: flex;
align-items: center;
gap: 15px;
}
.card-tools button {
background-color: transparent;
border: none;
padding: 0;
outline: none;
color: #ffffff;
display: flex;
}
