Tailwind CSS Card - Props

Card Container Props

The following props are available for card component. These are the custom props that come with we've added for the card component and you can use all the other native props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change card variant	`filled`
`color`	Color	Change card color	`white`
`shadow`	`boolean`	Add box-shadow for card	`false`

Card Header Props

The following props are available for card header component. These are the custom props that come with we've added for the card header component and you can use all the other native props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change card header variant	`filled`
`color`	Color	Change card header color	`white`
`shadow`	`boolean`	Add box-shadow for card header	`false`
`floated`	`boolean`	Makes card header floated	`false`

Card Footer Props

The following props are available for card footer component. These are the custom props that come with we've added for the card footer component and you can use all the other native props as well.

Attribute	Type	Description	Default
`divider`	`boolean`	Add border-top for card footer	`false`

Types - Variant

type variant = "filled" | "gradient"

Types - Color

type variant = 
  | "transparent"
  | "white"
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-blue"
  | "blue"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red"

Examples

Checkout different examples for card component.