Display
Card
Displays a card with header, content, and footer sections. Used for grouping related information.
Create projectDeploy your new project in one-click.
Sections
Cards are composed of several smaller components for structure.
CardHeader
TitleDescription
CardContent
Main content goes here.
CardFooter
Footer actions
Props
| Component | Description |
|---|---|
Card | The main container component for the card. |
CardHeader | Contains the title and description. |
CardTitle | A heading element for the card. |
CardDescription | Supporting text for the title. |
CardContent | The body of the card. |
CardFooter | Actions or additional information at the bottom. |
Usage
import { Card, CardContent } from '@/components/ui/card';
// Simple data card
<Card>
<CardContent className="pt-6">
<Text>Quick info card.</Text>
</CardContent>
</Card>