Card

A common container component.

Basic

Hoverable

Shadow

Types

Show different states with colors.

With Footer

With Image

With Divider

Show different types of content using Divider

APIs

Card.Props

AttributeDescriptionTypeAccepted valuesDefault
hoverableadd effect on hoverboolean-false
shadowshow shadowboolean-false
typecard typeCardType-default
...native propsHTMLAttributes'id', className', ...-

Card.Content.Props[alias: Card.Body]

AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes'id', className', ...-

Card.Footer.Props[alias: Card.Actions]

AttributeDescriptionTypeAccepted valuesDefault
disableAutoMargincancel automatic margin valueboolean-false
...native propsHTMLAttributes'id', className', ...-

CardType

type CardType =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'
  | 'alert'
  | 'purple'
  | 'violet'
  | 'cyan'
Add