Card
コンテンツをグループ化して表示するカードコンポーネント。
インポート
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from '@caroainc/ui-components'個別サブパス（バンドルサイズを抑えたい場合）:
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from '@caroainc/ui-components/card'Composition
Card
├─ CardHeader?
│ ├─ CardTitle?
│ ├─ CardDescription?
│ └─ CardAction?
├─ CardContent?
└─ CardFooter?必須なのはルートのCardだけで、各領域は内容に応じて選びます。CardTitle、CardDescription、CardActionは見出し領域としてCardHeader内に置き、CardContentやCardFooterの子に誤って入れないでください。
基本的な使い方
Loading...
<Card>
<CardHeader>
<CardTitle>カードタイトル</CardTitle>
<CardDescription>カードの説明文がここに入ります。</CardDescription>
</CardHeader>
<CardContent>
<p>カードのメインコンテンツ</p>
</CardContent>
<CardFooter>
<Button>アクション</Button>
</CardFooter>
</Card>バリアント
Loading...
<Card variant="outline">outline（デフォルト）</Card>
<Card variant="filled">filled</Card>
<Card variant="ghost">ghost</Card>シンプルなカード
シンプルなカードコンテンツ
<Card className="p-6">
<p>シンプルなカードコンテンツ</p>
</Card>実際の使用例
フォームカード
Loading...
<Card className="w-[380px]">
<CardHeader>
<CardTitle>ログイン</CardTitle>
<CardDescription>アカウントにログインしてください</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">メールアドレス</Label>
<Input id="email" type="email" placeholder="[email protected]" />
</div>
<div className="space-y-2">
<Label htmlFor="password">パスワード</Label>
<Input id="password" type="password" />
</div>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">キャンセル</Button>
<Button variant="primary">ログイン</Button>
</CardFooter>
</Card>統計カード
Loading...
<Card>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-muted-foreground">総売上</p>
<p className="text-2xl font-bold">¥1,234,567</p>
</div>
<Icon name="TrendingUp" className="text-success" size="lg" />
</div>
</CardContent>
</Card>ユーザープロフィールカード
Loading...
<Card>
<CardHeader className="flex flex-row items-center gap-4">
<Avatar>
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div>
<CardTitle>John Doe</CardTitle>
<CardDescription>[email protected]</CardDescription>
</div>
</CardHeader>
<CardContent>
{/* ... */}
</CardContent>
<CardFooter>
<Button variant="outline" className="w-full">プロフィールを編集</Button>
</CardFooter>
</Card>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'outline' | 'filled' | 'ghost' | 'outline' | カードのスタイルバリアント（既存API互換のためデフォルトはoutline。.claude/rules/components.mdの新規コンポーネント原則=baseはCardには適用されていない既存例外） |
className | string | - | 追加のCSSクラス |