Card
Displays a card with header, content, and footer.
Saved preference for
elorm init --ui-library base-uiCreate project
Deploy your new elorm/ui components in one click.
Copy-paste components with full ownership of the source code.
PreviewCode
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
export function CardDemo() {
return (
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>
Deploy your new elorm/ui components in one click.
</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Copy-paste components with full ownership of the source code.
</p>
</CardContent>
<CardFooter>
<Button>Get started</Button>
</CardFooter>
</Card>
)
}
Installation#
Usage#
import { Card } from "@/components/ui/card"Displays a card with header, content, and footer.
Use full composition: CardHeader, CardTitle, CardDescription, CardContent, CardFooter.
Examples#
Basic#
Title
Content
PreviewCode
import { Card } from "@/components/ui/card"
export function CardDemo() {
return (
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
</CardHeader>
<CardContent>Content</CardContent>
</Card>
)
}Avoid#
- Do not dump all content into CardContent without header