Cards
A composable Card component suite for building card UI elements with headers, titles, descriptions, content, and footers. Card extends Box and supports multiple sizes, elevation styles, and all Box style props.
Installation
Import
Usage
Use Card for displaying content in a structured container. Combine CardHeader, CardTitle, CardDescription, CardContent, CardFooter, and CardImage to build complete card layouts. Use cardSize to control padding, elevated for emphasis, and borderless for minimal styling. Cards support all Box style props for additional customization.
Design Guidelines
Use consistent card sizes throughout your application. Use elevated cards sparingly for emphasis. Maintain consistent spacing between cards (16px gap recommended). Use CardSubtitle for secondary headings. Keep card content concise and focused.
Basic Card
Simple card with header, content, and footer
Product Cards
Product cards with images, pricing, and actions in a grid layout
User Profile Card
User profile card with avatar, badges, and actions
Blog Post Card
Blog post card with image, metadata, and excerpt
Dashboard Stat Card
Metric card for displaying statistics and trends
Feature Card
Feature card with icon, description, and benefits
Card with Action
Card with action button aligned to the top-right of the header
Nested Cards
Nested cards with two levels of nesting for grouping related content with alternating backgrounds
Card
Main card container (extends Box) packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
CardHeader
Header section of the card containing title, description, and actions packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
CardTitle
Main title of the card (renders as Typography with h4 variant) packages.composedComponents.extends Typography. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
CardSubtitle
Secondary heading below the title (renders as Typography with subtitle1 variant) packages.composedComponents.extends Typography. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
CardDescription
Description text for the card (renders as Typography) packages.composedComponents.extends Typography. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
CardContent
Main content area of the card packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
CardFooter
Footer section of the card, typically for actions or summary packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
CardImage
Image component for the card (renders as Box with image styling) packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
CardAction
Action area in the card header, typically for buttons or menus packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
packages.sections.api
Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
cardSize | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of the card affecting padding |
elevated | boolean | false | Use elevated shadow (shadow-round) instead of default (shadow-md) |
borderless | boolean | false | Remove the card border |
component | ContainerElement | CustomComponent | Box | The HTML element or React component to render |
className | string | — | packages.commonProps.className.description |
Accessibility
Accessibility features and considerations
Cards should have proper heading hierarchy when using CardTitle. Use CardDescription for additional context. Ensure interactive elements within cards are keyboard accessible. Use semantic HTML structure.