Card

A common container component.

The basic Card usage.

You can apply a fancy hover animation with the hoverable prop.

You can apply a fancy hover animation with the bordered prop.

You can apply shadow with the shadow prop.

Show different states with colors.

You can use the Card.Footer component to add actions, details or another information to the Card.

You can use the Image component to add an image to the Card.

Show different types of content using Divider.

Attribute	Description	Type	Accepted values	Default
hoverable	add effect on hover	`boolean`	-	`false`
shadow	show shadow	`boolean`	-	`false`
type	card type	CardType	-	`default`
filled	filled variant, solid background	`boolean`	-	`false`
ghost	outline variant, always shows a border	`boolean`	-	`false`
subtle	subtle variant, no background	`boolean`	-	`false`
...	native props	`HTMLAttributes`	`'id', className', ...`	-

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', className', ...`	-

Attribute	Description	Type	Accepted values	Default
disableAutoMargin	cancel automatic margin value	`boolean`	-	`false`
...	native props	`HTMLAttributes`	`'id', className', ...`	-

type CardType =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'
  | 'dark'
  | 'lite'