Card

elevated / filled / outlined の M3 カードコンテナ。コンテンツグループ化に使用します。

参考: Material Design 3 公式ガイドライン m3.material.io/components/cards/overview

ライブデモ

elevated

M3 elevated カード

filled

M3 filled カード

outlined

M3 outlined カード

import { Card, ThemeProvider } from '@m3-baseui/react-tailwind';

<Card variant="elevated" className="p-4">
  <h3 className="text-title-medium">タイトル</h3>
  <p className="text-body-medium">本文</p>
</Card>

Prop	型	既定値	説明
`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`	カードバリアント