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 | true |
className | string | Add custom className for card | '' |
children | node | Add content for card | No default value it's a required prop. |
import type { CardProps } from "@material-tailwind/react";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 | true |
floated | boolean | Makes card header floated | true |
className | string | Add custom className for card header | '' |
children | node | Add content for card header | No default value it's a required prop. |
import type { CardHeaderProps } from "@material-tailwind/react";The following props are available for card body component. These are the custom props that come with we've added for the card body component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
className | string | Add custom className for card body | '' |
children | node | Add content for card body | No default value it's a required prop. |
import type { CardBodyProps } from "@material-tailwind/react";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 |
className | string | Add custom className for card footer | '' |
children | node | Add content for card footer | No default value it's a required prop. |
import type { CardFooterProps } from "@material-tailwind/react";type variant = "filled" | "gradient";type color =
| "transparent"
| "white"
| "blue-gray"
| "gray"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";