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.

The spotlight prop adds a glow that follows the pointer. It uses the card text color, so it fits every type.

The glass prop makes the background translucent with a blur. Use it over images or gradients.

The interactive prop makes the card behave like a button: pointer cursor, lift on hover and a visible focus ring for keyboard users.

A compact card for a number and its trend.

Highlight the recommended plan with filled and spotlight, and keep the others quiet.

A person with their contact and the two actions people take next.

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`
spotlight	glow that follows the pointer on hover	`boolean`	-	`false`
glass	translucent background with blur	`boolean`	-	`false`
interactive	pointer cursor, lift on hover and focus ring	`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'