Card

A basic Card with CardHeader, CardContent, and CardFooter sections. The header contains a CardTitle and CardDescription for structured metadata, while the footer typically holds action buttons.

A minimal Card using only the root container without CardHeader or CardFooter. Use the Class parameter to add padding directly when sub-components are not needed. This pattern is useful for quick callouts and informational boxes.

Place an <img> at the top of a Card before CardHeader to create a media card. Use overflow-hidden on the card and rounded-t-lg is handled automatically. This pattern works well for blog posts, product listings, and portfolio items.

A Card with a clear header/footer separation. The CardHeader holds a CardTitle, CardDescription, and a CardAction for top-right controls. The CardFooter contains a row of action buttons and secondary text. This layout is typical for settings panels and detail views.

Use the Class parameter to apply custom Tailwind CSS classes for project-specific styling. Override borders, backgrounds, and shadows with gradients, custom colours, or unique border treatments to match your design system or create visual hierarchy.

A Card containing a form layout. CardContent holds the form fields while CardFooter contains the action buttons. Use the Class parameter on sub-components like CardContent and CardFooter to apply spacing and alignment utilities.

A Card styled as a notification list. CardDescription provides a summary count, while CardContent renders individual notification items. The CardFooter contains a full-width action button for bulk actions like marking all as read.

Multiple Card components arranged in a responsive grid to display statistics. Each card reverses the order of CardDescription and CardTitle within CardHeader to place the label above the value, a common dashboard pattern for KPI displays.