Card
情報を整理する枠。コンテンツを視覚的にグループ化するコンテナです。
基本構成
プロジェクト・アルファ
進行中最終更新:2時間前
カードコンポーネントは、薄い境界線と弱い影を使用して、清潔感のあるモダンな外観を作り出します。
TSX
<Card>
<CardHeader>
<CardTitle>プロジェクト名</CardTitle>
<CardDescription>説明文</CardDescription>
</CardHeader>
<CardContent>
<p>コンテンツ</p>
</CardContent>
<CardFooter>
<Button>アクション</Button>
</CardFooter>
</Card>シンプルなカード
128
アクティブユーザー
24
プロジェクト
99.9%
稼働率
サブコンポーネント
| Prop | Type | Default | 説明 |
|---|---|---|---|
Card | div | — | カードのルートコンテナ(p-8付き) |
CardHeader | div | — | ヘッダー領域 |
CardTitle | h3 | — | タイトル(text-2xl) |
CardDescription | p | — | 説明文(text-sm, Gray-500) |
CardContent | div | — | コンテンツ領域(pt-6) |
CardFooter | div | — | フッター領域(pt-8) |