kaze風
Card
カードコンポーネント
プレビュー
デフォルト
カードタイトル
ボーダー + 白背景のスタンダードなカードです。
Fill
背景カード
ボーダーなし、背景色のみのカードです。
Interactive
ホバーでボーダーが強調されるカードです。
使いどころ
使う場面
- 関連する情報を 1 つのまとまりとして囲む（ダッシュボードの指標、設定のグループ、一覧の 1 件）
- カード全体が 1 つの遷移先になるときは interactive、情報量が多い一覧では compact、背景で区切るだけなら fill を使う
- 見出しは CardTitle（h3）、補足は CardDescription、操作は CardFooter に置いて構造を揃える
使わない場面
- カードの中にカードを入れること。区切りたいだけなら Divider か余白を使う
- 行と列で比べるデータ。Table を使う
- カードが 1 枚しかなく、周囲に並ぶものがないとき。囲まずに Heading と本文で見せる
使い方
{/* デフォルト（ボーダー付き） */}
<Card>
<CardHeader>
<CardTitle>タイトル</CardTitle>
</CardHeader>
<CardBody>内容</CardBody>
</Card>
{/* Fill（背景のみ、ボーダーなし） */}
<Card variant="fill">
<CardBody>背景カード</CardBody>
</Card>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
variant | "default" | "interactive" | "compact" | "fill" | "default" | カードのスタイルバリアント |
children | React.ReactNode | なし | カードの内容 |
CardHeader | サブコンポーネント | なし | カードのヘッダー領域 |
CardTitle | サブコンポーネント | なし | カードのタイトル |
CardBody | サブコンポーネント | なし | カードの本文領域 |
CardFooter | サブコンポーネント | なし | カードのフッター領域 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- interactive は見た目（hover 時の強調）を変えるだけで、フォーカスや役割は付かない。押せるカードにするときは中のタイトルを <a> か Button にし、クリック対象を利用者側で用意する
- CardTitle は h3 を出力する。ページの見出し階層に合わせ、h2 の下に置く
文言
- タイトルは名詞で短く（「今月の売上」「通知の設定」）。説明は 1 文で、タイトルの言い換えにしない