layout
Card
ホバー時にリフトするコンテンツコンテナ。ヘッダー・コンテンツ・フッターのスロットを持つ複合コンポーネント。
インポート
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@stella-ds/react'CardCardHeaderCardTitleCardDescriptionCardContentCardFooter
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| hoverable | boolean | false | Adds hover lift (box-shadow + translateY) |
Preview
Card Title
A short description of the card content.
This is the main content area of the card.
使用例
Full
<Card hoverable>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description goes here.</CardDescription>
</CardHeader>
<CardContent>Main content area.</CardContent>
<CardFooter><Button size="sm">Action</Button></CardFooter>
</Card>