src/assets/sass/core/components/_variables.scss
and adds additonal options
in src/assets/sass/core/components/_card.scss/
.
<div class="card shadow-sm">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-light">
Action
</button>
</div>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>
.card-scroll
and height classes .h-{size}
on a card's body to have a card with scrollable content:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div class="card bg-light shadow-sm">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-light">
Action
</button>
</div>
</div>
<div class="card-body card-scroll h-200px">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>
.collapse
plugin to enable quick collapsible cards. For more info,
please refer to the official documentation.
<div class="card shadow-sm">
<div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#kt_docs_card_collapsible">
<h3 class="card-title">Title</h3>
<div class="card-toolbar rotate-180">
<i class="ki-duotone ki-down fs-1"></i>
</div>
</div>
<div id="kt_docs_card_collapsible" class="collapse show">
<div class="card-body">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>
<a href="#" class="card hover-elevate-up shadow-sm parent-hover">
<div class="card-body d-flex align-items">
<span class="svg-icon fs-1">
...
</span>
<span class="ms-3 text-gray-700 parent-hover-primary fs-6 fw-bold">
Example link title
</span>
</div>
</a>
data-kt-card-action="remove"
attribute to enable removing the card on click with confirm popup:
<div class="card shadow-sm">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-sm btn-active-color-primary" data-kt-card-action="remove" data-kt-card-confirm="true" data-kt-card-confirm-message="Are you sure to remove this card ?" data-bs-toggle="tooltip" title="Remove card" data-bs-dismiss="click">
<i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
.card-flush
class to remove a card header and footer borders:
<div class="card card-flush shadow-sm">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-light">
Action
</button>
</div>
</div>
<div class="card-body py-5">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>
.card-px-0
to reset a card header, body and footer's side paddings:
<div class="card card-px-0 shadow-sm">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-light">
Action
</button>
</div>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>
.card-bordered
to a card to remove it's shadow and enable borders.
<div class="card card-bordered">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-light">
Action
</button>
</div>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>
.card-dashed
to a card to remove it's shadow and enable dashed style borders.
<div class="card card-dashed">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-light">
Action
</button>
</div>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text...
</div>
<div class="card-footer">
Footer
</div>
</div>
.card-{mode}
or responsive .card-{breakpoint}-{mode}
for sm
, md
, lg
, xl
, and xxl
.
mode
is one of:
stretch
- for setting 100% stretch heightstretch-75
- for setting 75% stretch heightstretch-50
- for setting 50% stretch heightstretch-33
- for setting 33.333% stretch heightstretch-25
- for setting 25% stretch height<div class="row g-5">
<div class="col-lg-4">
<div class="card card-stretch card-bordered mb-5">
<div class="card-header">
<h3 class="card-title">Height 100%</h3>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card card-stretch-50 card-bordered mb-5">
<div class="card-header">
<h3 class="card-title">Height 100%</h3>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text
</div>
<div class="card-footer">
Footer
</div>
</div>
<div class="card card-stretch-50 card-bordered mb-5">
<div class="card-header">
<h3 class="card-title">Height 100%</h3>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card card-stretch-33 card-bordered mb-5">
<div class="card-header">
<h3 class="card-title">Height 33.333%</h3>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text
</div>
<div class="card-footer">
Footer
</div>
</div>
<div class="card card-stretch-33 card-bordered mb-5">
<div class="card-header">
<h3 class="card-title">Height 33.333%</h3>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text
</div>
<div class="card-footer">
Footer
</div>
</div>
<div class="card card-stretch-33 card-bordered mb-5">
<div class="card-header">
<h3 class="card-title">Height 33.333%</h3>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>
</div>
.card-{property}
class on other elements to required card style properties defined
through the SASS variables in src/assets/sass/core/components/_variables.scss
and src/assets/sass/core/components/_card.scss/
.
property
is one of:
p
- to set paddings from cardpx
- to set left and right paddings of cardpy
- to set top and bottom paddings of cardcard-rounded
- to set border radiuses of cardcard-rounded-top
- to set top left and top right radiuses of cardcard-rounded-bottom
- to set bottom left and top right radiuses of card<div class="card shadow-sm">
<div class="card-header">
<h3 class="card-title">Fluid Image</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-light">
Action
</button>
</div>
</div>
<div class="card-body p-0">
<div class="card-p mb-10">Lorem Ipsum is simply dummy text ...
<div class="text-center px-4">
<img class="mw-100 mh-300px card-rounded-bottom" alt="" src="examples.png"/>
</div>
</div>
</div>