Installation
bash
npx axis-cli add cardUsage
Card Title
Card Description
Card Content
Card Footer
tsx
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@ax/ui'
export function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>
)
}With Form
Create project
Deploy your new project in one-click.
tsx
<Card className="w-[350px]">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy your new project in one-click.</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Name of your project" />
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</CardFooter>
</Card>Components
Card카드 컨테이너
CardHeader카드 헤더 영역
CardTitle카드 제목
CardDescription카드 설명
CardContent카드 본문
CardFooter카드 푸터
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
children* | ReactNode | - | 카드 내용 |