A card that can be expanded or collapsed, allowing the user to toggle visibility of the content for a more dynamic and space-efficient presentation.
<div class="card">
<div class="card-header">
<div class="text-wrapper">
<h4 class="card-title">Card Title</h4>
</div>
<div class="card-actions">
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleCardId" aria-expanded="true" aria-controls="collapsibleCardId">
<i class="fa-solid fa-minus icon"></i>
</button>
</div>
</div>
<div class="collapse show" id="collapsibleCardId">
<div class="card-body">
<p>Your text here...</p>
</div>
</div>
</div>:root {
--light-primary: #6562fb;
--light-primary-border-color: #9e9cff;
--light-primary-text-color: #fff;
--light-success-1: #00aa44;
--light-success-1-border-color: #12d35f;
--light-success-1-text-color: #fff;
--light-info-1: #06b9ef;
--light-info-1-border-color: #59d9ff;
--light-info-1-text-color: #fff;
--light-warning-1: #ff960b;
--light-warning-1-border-color: #ffb85b;
--light-warning-1-text-color: #fff;
--light-danger-1: #f93131;
--light-danger-1-border-color: #ff7373;
--light-danger-1-text-color: #fff;
--light-light-1: #fff;
--light-light-1-border-color: #d2d2d2;
--light-light-1-text-color: #363636;
--light-dark-1: #21242b;
--light-dark-1-border-color: #918e99;
--light-dark-1-text-color: #fff;
--default-card-border-radius: 6px;
--light-card-background-color: #fff;
--light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
--dark-card-background-color: #21242b;
--dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
--card-header-padding: 10px 16px;
--card-body-padding: 16px;
--card-footer-padding: 8px 16px;
}
.card {
background-color: var(--light-card-background-color);
-webkit-box-shadow: var(--light-card-box-shadow);
box-shadow: var(--light-card-box-shadow);
border: 0px;
border-radius: var(--default-card-border-radius);
overflow: hidden;
}
.card > *:first-child {
border-top-left-radius: var(--default-card-border-radius);
border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
border-bottom-left-radius: var(--default-card-border-radius);
border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
font-size: 19.6px;
line-height: 27.44px;
margin-bottom: 10px;
}
.card .card-subtitle {
font-size: 14.28px;
line-height: 19.992px;
font-weight: 600;
margin-bottom: 8px;
}
.card .card-header {
padding: var(--card-header-padding);
min-height: 50px;
background-color: var(--light-card-background-color);
border: 0px;
-webkit-transition: background-color var(--transition-theme), border-color var(--transition-theme);
transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.card .card-header > *:first-child {
margin-top: 0px;
}
.card .card-header > *:last-child {
margin-bottom: 0px;
}
.card .card-header:has(.card-actions) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.card .card-header:has(.card-actions) .text-wrapper {
width: 100%;
}
.card .card-header:has(.card-actions) .text-wrapper > *:first-child {
margin-top: 0px;
}
.card .card-header:has(.card-actions) .text-wrapper > *:last-child {
margin-bottom: 0px;
}
.card:has(.card-header) .card-body {
border-top: 1px solid var(--light-border-color-1);
}
.card .card-body {
padding: var(--card-body-padding);
-webkit-transition: padding var(--transition-breakpoint);
transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
margin-top: 0px;
}
.card .card-body > *:last-child {
margin-bottom: 0px;
}
.card .card-footer {
padding: var(--card-footer-padding);
background-color: var(--light-card-background-color);
border-color: var(--light-border-color-1);
-webkit-transition: background-color var(--transition-theme), border-color var(--transition-theme);
transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.card .card-footer > *:first-child {
margin-top: 0px;
}
.card .card-footer > *:last-child {
margin-bottom: 0px;
}
.card.text-bg-primary {
background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-header, .card.text-bg-primary .card-footer {
background-color: var(--light-primary) !important;
border-color: var(--light-primary-border-color) !important;
}
.card.text-bg-primary .card-header > *, .card.text-bg-primary .card-footer > * {
color: var(--light-primary-text-color) !important;
}
.card.text-bg-primary .card-body {
border-color: var(--light-primary-border-color) !important;
}
.card.text-bg-primary .card-body > * {
color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-header, .card.text-bg-success .card-footer {
background-color: var(--light-success-1) !important;
border-color: var(--light-success-1-border-color) !important;
}
.card.text-bg-success .card-header > *, .card.text-bg-success .card-footer > * {
color: var(--light-success-1-text-color) !important;
}
.card.text-bg-success .card-body {
border-color: var(--light-success-1-border-color) !important;
}
.card.text-bg-success .card-body > * {
color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-header, .card.text-bg-info .card-footer {
background-color: var(--light-info-1) !important;
border-color: var(--light-info-1-border-color) !important;
}
.card.text-bg-info .card-header > *, .card.text-bg-info .card-footer > * {
color: var(--light-info-1-text-color) !important;
}
.card.text-bg-info .card-body {
border-color: var(--light-info-1-border-color) !important;
}
.card.text-bg-info .card-body > * {
color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-header, .card.text-bg-warning .card-footer {
background-color: var(--light-warning-1) !important;
border-color: var(--light-warning-1-border-color) !important;
}
.card.text-bg-warning .card-header > *, .card.text-bg-warning .card-footer > * {
color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-warning .card-body {
border-color: var(--light-warning-1-border-color) !important;
}
.card.text-bg-warning .card-body > * {
color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-header, .card.text-bg-danger .card-footer {
background-color: var(--light-danger-1) !important;
border-color: var(--light-danger-1-border-color) !important;
}
.card.text-bg-danger .card-header > *, .card.text-bg-danger .card-footer > * {
color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-danger .card-body {
border-color: var(--light-danger-1-border-color) !important;
}
.card.text-bg-danger .card-body > * {
color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-header, .card.text-bg-light .card-footer {
background-color: var(--light-light-1) !important;
border-color: var(--light-light-1-border-color) !important;
}
.card.text-bg-light .card-header > *, .card.text-bg-light .card-footer > * {
color: var(--light-light-1-text-color) !important;
}
.card.text-bg-light .card-body {
border-color: var(--light-light-1-border-color) !important;
}
.card.text-bg-light .card-body > * {
color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-header, .card.text-bg-dark .card-footer {
background-color: var(--light-dark-1) !important;
border-color: var(--light-dark-1-border-color) !important;
}
.card.text-bg-dark .card-header > *, .card.text-bg-dark .card-footer > * {
color: var(--light-dark-1-text-color) !important;
}
.card.text-bg-dark .card-body {
border-color: var(--light-dark-1-border-color) !important;
}
.card.text-bg-dark .card-body > * {
color: var(--light-dark-1-text-color) !important;
}$(".card-actions [data-bs-toggle='collapse']").on("click", function(){
$(this).find(".icon").removeClass($(this).attr("aria-expanded") == "true" ? "fa-plus" : "fa-minus").addClass($(this).attr("aria-expanded") == "true" ? "fa-minus" : "fa-plus");
});<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />Use these classes to apply various background colors to your card component for different contexts or themes.