Card
Card is a compound component that provides card functionality.
Active
Create project
Deploy your new project in one-click.
Installation
npm install @your-design-system/cardimport {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
export function CardDemo() {
return (
<Card className="w-[350px]">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy your new project in one-click.</CardDescription>
</CardHeader>
<CardContent>
<p>Card content goes here.</p>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</CardFooter>
</Card>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children* | string | - | The content to display inside the component. |
title | string | - | The title prop for the component. |
description | string | - | The description prop for the component. |
Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.
Base Classes
rounded-lgbordershadow-smvariant Variants
default
bg-cardtext-card-foregroundborderDesign System Compliance
This component is validated against atomic design principles and foundation token usage.
✓ Atomic Design Compliant
This component follows atomic design principles and properly uses foundation tokens.
On This Page