Card

情報を整理する枠。コンテンツを視覚的にグループ化するコンテナです。

基本構成

プロジェクト・アルファ

進行中

最終更新：2時間前

カードコンポーネントは、薄い境界線と弱い影を使用して、清潔感のあるモダンな外観を作り出します。

TSX

<Card>
  <CardHeader>
    <CardTitle>プロジェクト名</CardTitle>
    <CardDescription>説明文</CardDescription>
  </CardHeader>
  <CardContent>
    <p>コンテンツ</p>
  </CardContent>
  <CardFooter>
    <Button>アクション</Button>
  </CardFooter>
</Card>

シンプルなカード

128

アクティブユーザー

プロジェクト

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）