Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.
Button
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.
ButtonCard title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereFeatured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card Colored
Special title treatment
With supporting text below as a natural lead-in to additional content.
ButtonLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card Bordered
Special title treatment
With supporting text below as a natural lead-in to additional content.
ButtonSpecial title treatment
With supporting text below as a natural lead-in to additional content.
ButtonSpecial title treatment
With supporting text below as a natural lead-in to additional content.
ButtonHorizontal Card
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Stretched link
Card with stretched link
Go somewhere
Card with stretched link
Some quick example text to build on the card up the bulk of the card's content.
Card with stretched link
Go somewhere
Card with stretched link
Some quick example text to build on the card up the bulk of the card's content.
Card Group
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Custom Card Portlets
Card title
Card title
Card title
<div class="row">
<div class="col-md-4">
<!-- Portlet card -->
<div class="card mb-md-0 mb-3">
<div class="card-body">
<div class="card-widgets">
<a href="javascript:;" data-bs-toggle="reload"><i class="mdi mdi-refresh"></i></a>
<a data-bs-toggle="collapse" href="#cardCollpase1" role="button" aria-expanded="false" aria-controls="cardCollpase1"><i class="mdi mdi-minus"></i></a>
<a href="#" data-bs-toggle="remove"><i class="mdi mdi-close"></i></a>
</div>
<h5 class="card-title mb-0">Card title</h5>
<div id="cardCollpase1" class="collapse pt-3 show">
...
</div>
</div>
</div> <!-- end card-->
</div><!-- end col -->
<div class="col-md-4">
<!-- Portlet card -->
<div class="card bg-primary text-white mb-md-0 mb-3">
<div class="card-body">
<div class="card-widgets">
<a href="javascript:;" data-bs-toggle="reload"><i class="mdi mdi-refresh"></i></a>
<a data-bs-toggle="collapse" href="#cardCollpase2" role="button" aria-expanded="false" aria-controls="cardCollpase2"><i class="mdi mdi-minus"></i></a>
<a href="#" data-bs-toggle="remove"><i class="mdi mdi-close"></i></a>
</div>
<h5 class="card-title mb-0">Card title</h5>
<div id="cardCollpase2" class="collapse pt-3 show">
...
</div>
</div>
</div> <!-- end card-->
</div><!-- end col -->
<div class="col-md-4">
<!-- Portlet card -->
<div class="card bg-success text-white mb-0">
<div class="card-body">
<div class="card-widgets">
<a href="javascript:;" data-bs-toggle="reload"><i class="mdi mdi-refresh"></i></a>
<a data-bs-toggle="collapse" href="#cardCollpase3" role="button" aria-expanded="false" aria-controls="cardCollpase3"><i class="mdi mdi-minus"></i></a>
<a href="#" data-bs-toggle="remove"><i class="mdi mdi-close"></i></a>
</div>
<h5 class="card-title mb-0">Card title</h5>
<div id="cardCollpase3" class="collapse pt-3 show">
...
</div>
</div>
</div> <!-- end card-->
</div><!-- end col -->
</div>
<!-- end row -->