PackagesUIComponents
Card
コンテンツをグループ化するコンテナコンポーネント。ダッシュボード、設定画面、データテーブルラッパー等で使用する。
いつ使うか
- 関連するコンテンツを視覚的にグループ化するときに使用する（設定パネル、データ表示、サマリーなど）
- セクション間に明確な境界が必要なダッシュボードレイアウトに使用する
いつ使わないか
- ページ全体を囲むコンテナには使わない。ページレイアウトコンポーネントを使用する
- インタラクティブな操作が主目的の場合は使わない。
Dialogや専用コンポーネントを使用する - 単一のテキスト表示には使わない。直接テキスト要素を使用する
Usage
import { Card, CardContent, CardFooter, CardHeader } from '@bi-shop-it/ui/card';
<Card>
<CardHeader title="タイトル" description="説明文" />
<CardContent>コンテンツ</CardContent>
<CardFooter>
<ActionButton label="保存" />
</CardFooter>
</Card>;Props
Card
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
children | ReactNode | — | カードの中身（CardHeader, CardContent 等を配置） |
CardHeader
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title | string | — | カードのタイトル |
description | string | — | タイトル下の説明テキスト |
action | ReactNode | — | ヘッダー右側に配置するアクション要素 |
CardContent
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
children | ReactNode | — | カードのメインコンテンツ |
CardFooter
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
children | ReactNode | — | アクションボタンを配置する領域（右寄せ、gap-2） |
状態
デフォルト
ヘッダーとコンテンツの基本パターン。
カードタイトル
カードの説明テキスト
カードのコンテンツ領域です。任意のコンテンツを配置できます。
<Card>
<CardHeader description="カードの説明テキスト" title="カードタイトル" />
<CardContent>
<p>カードのコンテンツ領域です。</p>
</CardContent>
</Card>アクション付き
ヘッダーにアクションボタンを配置できる。
アクション付きカード
ヘッダーにアクションボタンを配置できます。
<Card>
<CardHeader
action={
<IconButton aria-label="メニュー" icon="MoreHorizontal" variant="ghost" />
}
title="アクション付きカード"
/>
<CardContent>
<p>ヘッダーにアクションボタンを配置できます。</p>
</CardContent>
</Card>フッター付き
フッターにアクションボタンを配置する設定パネルパターン。
通知設定
設定の変更はすぐに反映されます。
通知の受信方法を設定します。
<Card>
<CardHeader description="設定の変更はすぐに反映されます。" title="通知設定" />
<CardContent>
<p>通知の受信方法を設定します。</p>
</CardContent>
<CardFooter>
<ActionButton label="キャンセル" variant="secondary" />
<ActionButton label="保存" />
</CardFooter>
</Card>シンプル
CardContent のみのシンプルなコンテナ。
CardContent のみのシンプルなカードです。軽量なコンテナとして使用できます。
<Card>
<CardContent>
<p>CardContent のみのシンプルなカードです。</p>
</CardContent>
</Card>アクセシビリティ
コンポーネントが内部で処理すること
data-slot属性でコンポーネントの役割を識別可能にする- セマンティックな HTML 要素（
div,p）を使用する
利用者が対応すること
- カードが独立したセクションを表す場合は、
<section>や<article>でラップし、適切なaria-labelを設定すること - カード全体がクリック可能なリンクの場合は、Card ではなく専用のリンクカードコンポーネントを検討すること
関連コンポーネント
Dialog— モーダルでコンテンツを表示する場合に使用するEmptyState— データが存在しない状態を表示する場合に使用する