Card

Cardは、関連するコンテンツをグループ化して表示するためのコンテナコンポーネントです。ヘッダー、コンテンツ、フッターの構造で情報を整理し、画像やアクションを含む多様なレイアウトに対応します。

Variants

Sizes

Orientations

Pure

React

Playground

Preview

D24px

Card Title

Card description goes here.

This is the main content area of the card. It can contain any content.

Variant

Size

Radius

Direction

Options

<Card>
  <Card.Header>
    <Card.Title icon={<Layers />}>Card Title</Card.Title>
    <Card.Description>Card description goes here.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p className="text-sm text-text-muted">
      This is the main content area of the card. It can contain any content.
    </p>
  </Card.Content>
  <Card.Footer>
    <Button size="sm" variant="ghost" className="ml-auto" rightIcon={<ChevronRight />}>
      Learn more
    </Button>
  </Card.Footer>
</Card>

Variants

3つのバリアントで、カードの視覚的な重要度を制御できます。

Default

シャドウで浮き上がるスタイル

メインUI

Outline

ボーダーのみのフラットなスタイル

リスト・グリッド

Ghost

背景・ボーダーなしの最小スタイル

グループ内

Sizes

sm

横16px

上20px

内部下12px

末尾下20px

default

横24px

上24px

内部下16px

末尾下24px

lg

横32px

上32px

内部下16px

末尾下32px

Size	横パディング	上パディング	内部下	末尾下	プレビュー
`sm`	16px	20px	12px	20px	Title Content
`default`	24px	24px	16px	24px	Title Content
`lg`	32px	32px	16px	32px	Title Content

レスポンシブ： default・lgサイズはモバイル（640px未満）で自動的にパディングが一段階小さくなります。smサイズは固定値です。

Features

Orientation

垂直・水平のレイアウト方向を切り替えられます。水平レイアウトでは画像が左側に配置されます。

Vertical (Default)

Image Area

Vertical Card

Image on top, content below.

<Card>
  <Card.Image src="/placeholder.jpg" alt="Preview" />
  <Card.Header>
    <Card.Title>Vertical Card</Card.Title>
    <Card.Description>Image on top, content below.</Card.Description>
  </Card.Header>
</Card>

Horizontal

Horizontal Card

Image on left, content on right.

<Card direction="horizontal">
  <Card.Image src="/placeholder.jpg" alt="Preview" />
  <Card.Header>
    <Card.Title>Horizontal Card</Card.Title>
    <Card.Description>Image on left, content on right.</Card.Description>
  </Card.Header>
</Card>

Header Action

Notifications

You have 3 unread messages.

<Card>
  <Card.Header>
    <Card.Title>Notifications</Card.Title>
    <Card.Description>You have 3 unread messages.</Card.Description>
    <Card.Action>
      <DropdownMenu>
        <DropdownMenu.Trigger asChild>
          <IconButton variant="ghost" size="sm">
            <MoreHorizontal />
          </IconButton>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content align="end">
          <DropdownMenu.Item>Edit</DropdownMenu.Item>
          <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item>Delete</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
    </Card.Action>
  </Card.Header>
</Card>

Image Overlay

Tropical Beach

Discover the most beautiful beaches.

<Card variant="outline">
  <Card.Image
    src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=300&fit=crop"
    alt="Beach"
    overlay
    className="h-48"
  />
  <Card.Header>
    <Card.Title>Tropical Beach</Card.Title>
    <Card.Description>Discover the most beautiful beaches.</Card.Description>
  </Card.Header>
</Card>

Customization

overlayOpacityとoverlayClassNameで画像オーバーレイをカスタマイズできます。

透明度の調整

ライト (30%)

デフォルト (60%)

ダーク (80%)

<Card.Image overlay overlayOpacity={30} />  {/* ライト */}
<Card.Image overlay />                      {/* デフォルト 60% */}
<Card.Image overlay overlayOpacity={80} />  {/* ダーク */}

フルカスタマイズ

{/* Change gradient direction */}
<Card.Image overlay overlayClassName="from-black/60 bg-gradient-to-b" />

{/* Color overlay */}
<Card.Image overlay overlayClassName="from-blue-900/50" />

Tip: overlayClassNameを指定するとoverlayOpacityより優先されます。グラデーション方向や色を自由に変更できます。

API

Component Structure

Card— Radix Slot

.ImageProps.HeaderProps.TitleProps.DescriptionProps.ActionProps.ContentProps.FooterProps

.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"

レイアウト方向

interactivefalse

boolean

ホバー時のシャドウ強化・リフト効果（クリック可能なカード用）

asChildfalse

boolean

Slotパターンで子要素として描画

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パターンで子要素として描画

Card.Title

iconundefined

React.ReactNode

タイトルの先頭に表示するアイコン

Name	Type	Default	Description
`icon`	`React.ReactNode`	`undefined`	タイトルの先頭に表示するアイコン

Card.Image

overlayfalse

boolean

グラデーションオーバーレイを表示

overlayOpacity60

number

オーバーレイの透明度（10〜90）

overlayClassNameundefined

string

オーバーレイのカスタムクラス（overlayOpacityより優先）

alt""

string

画像の代替テキスト

Name	Type	Default	Description
`overlay`	`boolean`	`false`	グラデーションオーバーレイを表示
`overlayOpacity`	`number`	`60`	オーバーレイの透明度（10〜90）
`overlayClassName`	`string`	`undefined`	オーバーレイのカスタムクラス（overlayOpacityより優先）
`alt`	`string`	`""`	画像の代替テキスト

Card.Header / Card.Content / Card.Footer / Card.Action / Card.Description

標準のHTMLDivAttributes（Card.DescriptionはHTMLParagraphAttributes）を継承。カードのsizeコンテキストに基づいてパディングが自動調整されます。

Anatomy

Card Title

⋯

Short description text here

Cancel

Confirm

Padding X24px

Padding top24px

Radius12px(xl)

Root

Card

Image

Card.Image

Header

Card.Header

Icon

Card.Title icon

Title

Card.Title

Action

Card.Action

Content

Card.Content

Footer

Card.Footer

Best Practices

✓

推奨

✓関連するコンテンツを1枚のカードにまとめる
✓一貫したvariantとsizeを同じセクション内で使用する
✓クリック可能なカードにはinteractive propを使用する
✓画像にはalt属性を設定する

避けるべき

✗カード内にカードをネストしない
✗1枚のカードに過剰なコンテンツを詰め込まない
✗interactiveカードの中にボタン等を配置しない（クリックが競合）
✗レイアウトのためだけにカードを使用しない

Accessibility

セマンティクス

asChildリンクカードには<a>を使用

h3Card.Titleはh3要素で出力

ARIA / WCAG

Card.Titleのアイコンに aria-hidden="true"
Card.Imageに alt 属性サポート
見出し階層（h3）を適切に使用
DOM順序がビジュアル順序と一致

Card

Playground

Card Title

Variants

Default

Outline

Ghost

Sizes

Title

Title

Title

Features

Orientation

Vertical (Default)

Vertical Card

Horizontal

Horizontal Card

Header Action

Notifications

Image Overlay

Tropical Beach

Customization

透明度の調整

フルカスタマイズ

API

Component Structure

Props

Card

Card.Title

Card.Image

Card.Header / Card.Content / Card.Footer / Card.Action / Card.Description

Anatomy

Best Practices

推奨

避けるべき

Accessibility

セマンティクス

ARIA / WCAG

Related

Badge

Button

Avatar

MetricCard