Cards Actions- UI elements | Materialize - Material Design HTML Admin Template

UI Elements / Cards Actions

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

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!

Sample card header with badge and dropdown.

Card Title

Sample card title with switch, select box & button.