Cards Actions

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:

SpinKit: Simple CSS Spinners for card refresh content animation.

<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:

SpinKit: BlockUI Plugin lets you simulate synchronous behavior when using AJAX for card refresh content animation.
SortableJS: Used in draggable cards.

<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

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.

Cards Action

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.

Preview
HTML

Collapsible Card

To create a collapsible card, use .card-collapsible class with action item. To show the collapsible content default use .show class with .collapse.

Click on to see card collapse in action.

Refresh Content

To create a card with refresh action, use .card-reload class with action item. Use .card-alert class to show custom response message.

Click on icon to see refresh card content in action.

Expand Card

To create a card with expand(fullscreen) action, use .card-expand class with action item. Use ESC key to exit from the fullscreen mode.

Click on icon to see expand card in action.

Remove Card

Remove card action hide the card, use .card-close class with action item.

Click on icon to see remove card in action.

<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>

Header Elements

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.

Preview
HTML

Card Header

New

Sample card header with badge.

Card Title

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>

Draggable Cards

Simply reorderable drag-and-drop cards. Make sure you include SortableJS: as it is used in draggable cards as shown above.

Preview
HTML

Drag me!

Primary card title

Some quick example text to build on the card title and make up.

Drag me!

Secondary card title

Some quick example text to build on the card title and make up.

Drag me!

Success card title

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 text-white">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 text-white">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 text-white">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>