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
Examples

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.

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.

Header Elements
Card Header
New

Sample card header with badge.

Card Title
10

Sample card title with outline badge.

Card Header

Sample card header with extra small button.

Card Title

Sample card title with small icon button.

Card Header

Sample card header with extra search input box.

Card Title

Sample card title with switch.

Card Header
Sample Text

Sample card header with text.

Card Title
Sample Text

Sample card title with text.

Card Header
Hello!
Action Another action Something else here
Separated link

Sample card header with badge and dropdown.

Card Title

Sample card title with switch, select box & button.

Draggable Cards
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.

Drag me!
Danger card title

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

Drag me!
Warning card title

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

Drag me!
Info card title

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

Buy Now