Charts
Overview
Metronic extends Bootstrap Card through the SASS variables in src/sass/components/_variables.scss
and adds additonal options in src/sass/components/_card.scss/
.
Basic
Basic Card example with
Title
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.
Footer
<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
Use .card-scroll
and height classes .h-{size}
on a card's body to have a card with scrollable content:
Title
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.
Footer
<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>
Collapsible
Add on Bootstrap's .collapse
plugin to enable quick collapsible cards. For more info, please refer to the official documentation.
Title
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.
Footer
<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>
Linkable
Basic Card example with
[
Example link title
](https://preview.keenthemes.com/html/metronic/docs/base/cards#)
[
Example link title
](https://preview.keenthemes.com/html/metronic/docs/base/cards#)
[
Example link title
](https://preview.keenthemes.com/html/metronic/docs/base/cards#)
<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>
Removable
Add data-kt-card-action="remove"
attribute to enable removing the card on click with confirm popup:
Title
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 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>
Flush Borders
Use .card-flush
class to remove a card header and footer borders:
Title
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.
Footer
<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>
Reset Side Paddings
Add .card-px-0
to reset a card header, body and footer's side paddings:
Title
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.
Footer
<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>
Bordered Style
Add .card-bordered
to a card to remove it's shadow and enable borders.
Title
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.
Footer
<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>
Dashed Style
Add .card-dashed
to a card to remove it's shadow and enable dashed style borders.
Title
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.
Footer
<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 Stretch
To have same height cards within Bootstrap Grid use .card-{mode}
or responsive .card-{breakpoint}-{mode}
for sm
, md
, lg
, xl
, and xxl
.
Where 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
Height 100%
Lorem Ipsum is simply dummy text
Footer
Height 50%
Lorem Ipsum is simply dummy text
Footer
Height 50%
Lorem Ipsum is simply dummy text
Footer
Height 33.333%
Lorem Ipsum is simply dummy text
Footer
Height 33.333%
Lorem Ipsum is simply dummy text
Footer
Height 33.333%
Lorem Ipsum is simply dummy text
Footer
<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>
Utility Classes
Use .card-{property}
class on other elements to required card style properties defined through the SASS variables in src/sass/components/_variables.scss
and src/sass/components/_card.scss/
.
Where 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
Fluid Image
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<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>