Card is a flexible container for grouping and displaying content. It supports custom backgrounds, borders, layouts, and composition via subcomponents for body, title, and actions. Use Card to present information in a visually distinct and organized way.
The Card components include the following:
The main wrapper for card content. Customize its appearance with props for border, layout, and size. Use with CardBody, CardTitle, and CardActions for best results.
| Card Props | Type | Description |
|---|---|---|
is | string | object | function | The HTML tag or component to render as the card root. Default is |
border | boolean | Adds a border to the card (1px base-color). |
dash | boolean | Adds a dashed border to the card. |
side | boolean | Places the card body next to the image (horizontal layout). |
imageFull | boolean | Places the image behind the card body. |
size | string | Sets the card size to one of the below boolean props. |
| Â Â Â xl | boolean | Sets size to |
| Â Â Â lg | boolean | Sets size to |
| Â Â Â md | boolean | Sets size to |
| Â Â Â sm | boolean | Sets size to |
| Â Â Â xs | boolean | Sets size to |
| Card Slots | Description |
|---|---|
default | The default slot. Place CardBody, CardTitle, CardActions, images, or other content here. |
| CardBody Props | Type | Description |
|---|---|---|
is | string | The HTML tag to render as the CardBody root. Default is |
| CardBody Slots | Description |
|---|---|
default | The default slot. Content to be displayed inside the card body. |
| CardTitle Props | Type | Description |
|---|---|---|
is | string | The HTML tag to render as the CardTitle root. Default is |
| CardTitle Slots | Description |
|---|---|
default | The default slot. Content to be displayed as the card title. |
| CardActions Props | Type | Description |
|---|---|---|
is | string | The HTML tag to render as the CardActions root. Default is |
| CardActions Slots | Description |
|---|---|
default | The default slot. Content to be displayed as card actions (e.g., buttons). |
Demonstrates a card with actions placed at the top of the card.
Shows how to use the border prop to add a border to the card.
Centers card content vertically and horizontally.
Applies a custom background color or image to the card.
Places the card image at the bottom.
Places the image behind the card body using the imageFull prop.
Uses a neutral background color for the card.
A card layout without an image.
Demonstrates responsive card layouts.
Places the card body next to the image using the side prop.
Places the card body to the right of the image.
Shows how to add a badge to a card for extra context or status.
A pricing card with a badge, feature list, and subscribe button.
Demonstrates all supported card sizes (xs, sm, md, lg, xl).
A neutral card for cookie consent with accept/deny actions.
A side card layout styled like a movie/album card with image and actions.
A minimal card with only a title and actions.
A card demonstrating integration with Avatar, Badge, and Button components.
