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
Card Props
Demonstrates the Card component props: cardSize, elevated, borderless, and component.
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) extends Box. 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. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
borderless | boolean | false | Remove the card border |
component | ContainerElement | CustomComponent | 'div' | The HTML element or React component to render |
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) |
className | string | — | Additional CSS classes to apply to the component |
CardHeader
Header section of the card containing title, description, and actions extends Box. 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. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CardTitle
Main title of the card (renders as Typography with h4 variant) extends Typography. 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. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CardSubtitle
Secondary heading below the title (renders as Typography with subtitle1 variant) extends Typography. 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. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CardDescription
Description text for the card (renders as Typography) extends Typography. 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. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CardContent
Main content area of the card extends Box. 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. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CardFooter
Footer section of the card, typically for actions or summary extends Box. 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. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CardImage
Image component for the card (renders as Box with image styling) extends Box. 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. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CardAction
Action area in the card header, typically for buttons or menus extends Box. 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. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
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.