Card
Cardは、関連するコンテンツをグループ化して表示するためのコンテナコンポーネントです。 ヘッダー、コンテンツ、フッターの構造で情報を整理し、画像やアクションを含む多様なレイアウトに対応します。
Playground
Card Title
Card description goes here.
This is the main content area of the card. It can contain any content.
<Card>
<CardHeader>
<CardTitle icon={<Layers />}>Card Title</CardTitle>
<CardDescription>Card description goes here.</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm text-text-muted">
This is the main content area of the card. It can contain any content.
</p>
</CardContent>
<CardFooter>
<Button size="sm" variant="ghost" className="ml-auto" rightIcon={<ChevronRight />}>
Learn more
</Button>
</CardFooter>
</Card>Variants
3つのバリアントで、カードの視覚的な重要度を制御できます。
Default
シャドウで浮き上がるスタイル
Outline
ボーダーのみのフラットなスタイル
Ghost
背景・ボーダーなしの最小スタイル
Sizes
smdefaultlg| Size | 横パディング | 上パディング | 内部下 | 末尾下 | プレビュー |
|---|---|---|---|---|---|
sm | 16px | 20px | 12px | 20px | TitleContent |
default | 24px | 24px | 16px | 24px | TitleContent |
lg | 32px | 32px | 16px | 32px | TitleContent |
レスポンシブ： default・lgサイズはモバイル（640px未満）で自動的にパディングが一段階小さくなります。 smサイズは固定値です。
Features
Orientation
垂直・水平のレイアウト方向を切り替えられます。水平レイアウトでは画像が左側に配置されます。
Vertical (Default)
Vertical Card
Image on top, content below.
Horizontal
Horizontal Card
Image on left, content on right.
Header Action
Notifications
You have 3 unread messages.
Image Overlay
Tropical Beach
Discover the most beautiful beaches.
Customization
overlayOpacityとoverlayClassNameで画像オーバーレイをカスタマイズできます。
透明度の調整
ライト (30%)
デフォルト (60%)
ダーク (80%)
<CardImage overlay overlayOpacity={30} /> {/* ライト */}
<CardImage overlay /> {/* デフォルト 60% */}
<CardImage overlay overlayOpacity={80} /> {/* ダーク */}フルカスタマイズ
{/* グラデーション方向を変更 */}
<CardImage overlay overlayClassName="from-black/60 bg-gradient-to-b" />
{/* カラーオーバーレイ */}
<CardImage overlay overlayClassName="from-blue-900/50" />Tip：overlayClassNameを指定するとoverlayOpacityより優先されます。グラデーション方向や色を自由に変更できます。
API
Component Structure
Card— Radix Slot.ImagePropsカード画像（overlay対応）.HeaderPropsヘッダー領域.TitlePropsタイトル（icon prop対応）.DescriptionProps補足テキスト.ActionPropsアクション要素（ヘッダー右上）.ContentPropsメインコンテンツ領域.FooterPropsフッター領域Props
Card
variant"default""default" | "outline" | "ghost"カードのビジュアルスタイル
size"default""sm" | "default" | "lg"コンテンツのパディングスケール（レスポンシブ対応）
radius"xl""sm" | "base" | "md" | "lg" | "xl" | "2xl"角丸の大きさ (2/4/6/8/12/16px)
direction"vertical""vertical" | "horizontal"レイアウト方向
interactivefalsebooleanホバー時のシャドウ強化・リフト効果（クリック可能なカード用）
asChildfalsebooleanSlotパターンで子要素として描画
| Name | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "ghost" | "default" | カードのビジュアルスタイル |
size | "sm" | "default" | "lg" | "default" | コンテンツのパディングスケール（レスポンシブ対応） |
radius | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "xl" | 角丸の大きさ (2/4/6/8/12/16px) |
direction | "vertical" | "horizontal" | "vertical" | レイアウト方向 |
interactive | boolean | false | ホバー時のシャドウ強化・リフト効果（クリック可能なカード用） |
asChild | boolean | false | Slotパターンで子要素として描画 |
CardTitle
iconundefinedReact.ReactNodeタイトルの先頭に表示するアイコン
| Name | Type | Default | Description |
|---|---|---|---|
icon | React.ReactNode | undefined | タイトルの先頭に表示するアイコン |
CardImage
overlayfalsebooleanグラデーションオーバーレイを表示
overlayOpacity60numberオーバーレイの透明度（10〜90）
overlayClassNameundefinedstringオーバーレイのカスタムクラス（overlayOpacityより優先）
alt""string画像の代替テキスト
| Name | Type | Default | Description |
|---|---|---|---|
overlay | boolean | false | グラデーションオーバーレイを表示 |
overlayOpacity | number | 60 | オーバーレイの透明度（10〜90） |
overlayClassName | string | undefined | オーバーレイのカスタムクラス（overlayOpacityより優先） |
alt | string | "" | 画像の代替テキスト |
CardHeader / CardContent / CardFooter / CardAction / CardDescription
標準のHTMLDivAttributes（CardDescriptionはHTMLParagraphAttributes）を継承。カードのsizeコンテキストに基づいてパディングが自動調整されます。