Card

コンテンツをグループ化するためのコンテナコンポーネント

Basic

基本的なカード

Card Title

This is a description of the card content.

Card content goes here. You can put any content inside.

With Footer

フッター付きカード

Subscription Plan

Choose your preferred plan

$29/mo

Unlimited projects
Priority support
Advanced analytics

Padding Options

パディングのバリエーション

None

Custom padding content

Small

Small padding

Medium (Default)

Medium padding

Large

Large padding

Shadow Options

シャドウのバリエーション

None

No shadow

Small (Default)

Small shadow

Medium

Medium shadow

Large

Large shadow

Hover Effect

ホバーエフェクト付きカード

Hover me

Interactive

Hover me

Active

Hover me

Pending

Usage

コンポーネントの使用例

tsx

class="token keyword">import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

class="token keyword">class=class="token keyword">class="token string">"token comment">// Basic card
<class="token tag">Card>
  <class="token tag">CardHeader>
    <class="token tag">CardTitle>Title</class="token tag">CardTitle>
    <class="token tag">CardDescription>Description</class="token tag">CardDescription>
  </class="token tag">CardHeader>
  <class="token tag">CardContent>
    Content goes here
  </class="token tag">CardContent>
  <class="token tag">CardFooter>
    <class="token tag">Button>Action</class="token tag">Button>
  </class="token tag">CardFooter>
</class="token tag">Card>

class="token keyword">class=class="token keyword">class="token string">"token comment">// Card with options
<class="token tag">Card
  padding=class="token keyword">class="token string">"lg"
  shadow=class="token keyword">class="token string">"md"
  hover
  border={class="token keyword">false}
>
  Content
</class="token tag">Card>

Props

コンポーネントのプロパティ

Prop	Type	Default	Description
padding	"none" \| "sm" \| "md" \| "lg"	"md"	内部パディング
shadow	"none" \| "sm" \| "md" \| "lg"	"sm"	シャドウの深さ
border	boolean	true	ボーダーの表示
hover	boolean	false	ホバー時のシャドウ効果