Card Actions options provides very useful features like cards actions, header elements & draggable cards.
Usage
In order to use card action on your page you will need to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/spinkit/spinkit.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/block-ui/block-ui.js"></script>
<script src="assets/vendor/libs/sortablejs/sortable.js"></script>
Include the following custom script in the "Page JS" area from the page's footer:
<script src="assets/js/cards-actions.js"></script>
Cards Action include a collapse button , refresh button , expand button and a close button . All these are fully customizable and come with callback functions to integrate with your code. Clicking on the refresh button will simulate an AJAX call.
Action | Icon | Details |
---|---|---|
Collapse | Collapse card content using collapse action. | |
Refresh Content | Refresh your card content using refresh action. | |
Expand Card | Maximize your card using expand action | |
Remove Card | Remove card from page using remove card action |
Use .card-action
class with .card
class to create action card. Use .card-action-title
for action card title and .card-action-element
to warp the actions icons.
<div class="row">
<div class="col-md">
<div class="card card-action mb-6">
<div class="card-header">
<div class="card-action-title">Collapsible Card</div>
<div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-collapsible"><i class="tf-icons ri-arrow-up-s-line"></i></a>
</li>
</ul>
</div>
</div>
<div class="collapse show">
<div class="card-body">
<p class="card-text">To create a collapsible card, use <code>.card-collapsible</code> class with action item. To show the collapsible content default use <code>.show</code> class with <code>.collapse</code>.</p>
<p class="card-text">Click on <i class="tf-icons ri-arrow-up-s-line"></i> to see card collapse in action.</p>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="card card-action mb-6">
<div class="card-alert"></div>
<div class="card-header">
<div class="card-action-title">Refresh Content</div>
<div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-reload"><i class="tf-icons ri-refresh-line scaleX-n1-rtl"></i></a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<p class="card-text">To create a card with refresh action, use <code>.card-reload</code> class with action item. Use <code>.card-alert</code> class to show custom response message.</p>
<br />
<p class="card-text">Click on <i class="tf-icons ri-refresh-line scaleX-n1-rtl"></i> icon to see refresh card content in action.</p>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-md">
<div class="card card-action mb-6">
<div class="card-header">
<div class="card-action-title">Expand Card</div>
<div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-expand"><i class="tf-icons ri-fullscreen-line"></i></a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<p class="card-text">To create a card with expand(fullscreen) action, use <code>.card-expand</code> class with action item. Use <kbd>ESC</kbd> key to exit from the fullscreen mode.</p>
<p class="card-text">Click on <i class="tf-icons ri-fullscreen-line"></i> icon to see expand card in action.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card card-action mb-6">
<div class="card-alert"></div>
<div class="card-header">
<div class="card-action-title">Remove Card</div>
<div class="card-action-element">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="javascript:void(0);" class="card-close"><i class="tf-icons ri-close-line"></i></a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<p class="card-text">Remove card action hide the card, use <code>.card-close</code> class with action item.</p>
<br />
<p class="card-text">Click on <i class="tf-icons ri-close-line"></i> icon to see remove card in action.</p>
</div>
</div>
</div>
</div>
Add custom elements in card header by using .header-elements
class with
.card-header
.
If you are using element in card title, wrap the elements with .card-title-elements
class.
If you are using element in card header, wrap the elements with .card-header-elements
class.
Sample card header with badge.
Sample card title with outline badge.
<div class="row">
<div class="col-md">
<div class="card mb-6">
<div class="card-header header-elements">
<span class="card-header-title me-2">Card Header</span>
<!-- Wrap elements with `.card-header-elements` -->
<div class="card-header-elements ms-auto">
<span class="badge bg-primary rounded-pill">New</span>
</div>
</div>
<div class="card-body">
<p class="card-text">Sample card header with badge.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card mb-6">
<div class="card-body">
<div class="card-title header-elements">
<h5 class="m-0 me-2">Card Title</h5>
<!-- Wrap elements with `.card-title-elements` -->
<div class="card-title-elements ms-auto">
<span class="badge badge-outline-primary rounded-pill">10</span>
</div>
</div>
<p class="card-text">Sample card title with outline badge.</p>
</div>
</div>
</div>
</div>
Simply reorderable drag-and-drop cards. Make sure you include SortableJS: as it is used in draggable cards as shown above.
Some quick example text to build on the card title and make up.
Some quick example text to build on the card title and make up.
Some quick example text to build on the card title and make up.
<div class="row" id="sortable-4">
<div class="col">
<div class="card bg-primary text-white mb-4">
<div class="card-header cursor-move">Drag me!</div>
<div class="card-body">
<h4 class="card-title text-white">Primary card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-secondary text-white mb-4">
<div class="card-header cursor-move">Drag me!</div>
<div class="card-body">
<h4 class="card-title text-white">Secondary card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-success text-white mb-4">
<div class="card-header cursor-move">Drag me!</div>
<div class="card-body">
<h4 class="card-title text-white">Success card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up.
</p>
</div>
</div>
</div>
</div>