Card

Displays a card with header, content, and footer.

Installation


pnpm dlx bna-ui add card

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

Default

Simple

With Image

With Form

Statistics

Notification

Pricing

API Reference

Card

The main container component that wraps all card content.

Prop	Type	Description
`children`	`ReactNode`	The card content (typically header/content/footer).
`style`	`ViewStyle`	Additional styles to apply to the card container.

CardHeader

Container for the card's header content, typically containing title and description.

Prop	Type	Description
`children`	`ReactNode`	The header content (typically CardTitle/CardDescription).
`style`	`ViewStyle`	Additional styles to apply to the header container.

CardTitle

The main title text of the card.

Prop	Type	Description
`children`	`ReactNode`	The title text content.
`style`	`TextStyle`	Additional styles to apply to the title text.

CardDescription

Subtitle or description text for the card.

Prop	Type	Description
`children`	`ReactNode`	The description text content.
`style`	`TextStyle`	Additional styles to apply to the description text.

CardContent

Container for the main content of the card.

Prop	Type	Description
`children`	`ReactNode`	The main content of the card.
`style`	`ViewStyle`	Additional styles to apply to the content container.

CardFooter

Container for the card's footer content, typically containing actions or additional info.

Prop	Type	Description
`children`	`ReactNode`	The footer content (typically buttons or actions).
`style`	`ViewStyle`	Additional styles to apply to the footer container.

Design Guidelines

Visual Hierarchy

Cards help establish clear visual hierarchy in your interface:

Use CardTitle for the primary heading (larger, bolder text)
Use CardDescription for supporting information (smaller, muted text)
Organize content logically from header to content to footer

Layout Patterns

Cards work well in various layout patterns:

Single cards for focused content or forms
Card grids for displaying multiple related items
Card lists for sequential content like notifications
Dashboard cards for metrics and statistics

Content Guidelines

Keep titles concise and descriptive
Use descriptions to provide context without overwhelming
Place primary actions in the footer
Ensure adequate spacing between sections

Accessibility

The Card component follows accessibility best practices:

Semantic structure for screen readers
Proper text hierarchy with heading roles
Adequate contrast ratios for all text
Touch-friendly interactive elements
Keyboard navigation support

Responsive Design

Cards automatically adapt to different screen sizes:

Flexible width that responds to container constraints
Proper text scaling on different devices
Consistent spacing across all screen sizes
Touch-optimized interactive elements

Camera Carousel