『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
Card
Cardは、関連する情報をグループ化して表示するコンポーネントです。デフォルトでは、article要素をレンダリングします。
使い方
<Card.Root>
<Card.Header>
<Heading size="xl">『SLAM DUNK』（スラムダンク）</Heading>
</Card.Header>
<Card.Body color="fg.muted">
<Text>
『SLAM
DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
</Text>
</Card.Body>
</Card.Root>
import { Card } from "@yamada-ui/react"
import { Card } from "@/components/ui"
import { Card } from "@workspaces/ui"
<Card.Root>
<Card.Header />
<Card.Body />
<Card.Footer />
</Card.Root>
バリアントを変更する
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
<VStack>
<For each={["elevated", "outline", "subtle", "solid"]}>
{(variant, index) => (
<Card.Root key={index} variant={variant}>
<Card.Header>
<Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
</Card.Header>
<Card.Body>
<Text>
『SLAM
DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
</Text>
</Card.Body>
</Card.Root>
)}
</For>
</VStack>
サイズを変更する
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
<VStack>
<For each={["sm", "md", "lg", "xl"]}>
{(size, index) => (
<Card.Root key={index} size={size}>
<Card.Header>
<Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
</Card.Header>
<Card.Body>
<Text>
『SLAM
DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
</Text>
</Card.Body>
</Card.Root>
)}
</For>
</VStack>
カラースキームを変更する
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
<VStack>
<For
each={[
{ variant: "subtle", colorScheme: "green" },
{ variant: "solid", colorScheme: "pink" },
]}
>
{({ variant, colorScheme }, index) => (
<Card.Root key={index} variant={variant} colorScheme={colorScheme}>
<Card.Header>
<Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
</Card.Header>
<Card.Body>
<Text>
『SLAM
DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
</Text>
</Card.Body>
</Card.Root>
)}
</For>
</VStack>
レイアウトをカスタマイズする
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
<Card.Root maxW="md">
<Card.Header justifyContent="center">
<Image
src="https://slamdunk-movie.jp/files/images/p_gallery_03.jpg"
w="full"
rounded="l2"
/>
</Card.Header>
<Card.Body>
<Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
<Text>
『SLAM
DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
</Text>
</Card.Body>
<Card.Footer>
<Button>Wikipedia</Button>
</Card.Footer>
</Card.Root>
『SLAM DUNK』（スラムダンク）
『SLAM DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
<Card.Root
flexDirection={{ base: "row", md: "column" }}
overflow="hidden"
variant="outline"
>
<Image
src="https://slamdunk-movie.jp/files/images/p_gallery_03.jpg"
objectFit="cover"
maxW={{ base: "30%", md: "100%" }}
/>
<VStack gap="0">
<Card.Header>
<Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
</Card.Header>
<Card.Body>
<Text>
『SLAM
DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
</Text>
</Card.Body>
<Card.Footer>
<Button>Wikipedia</Button>
</Card.Footer>
</VStack>
</Card.Root>
Props
類似のコンポーネント
NativeTable
NativeTableは、データを効率的に整理して表示するコンポーネントです。
Stat
Statは、数値やデータをボックス内に表示するために使用されます。
Table
Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。
AreaChart
AreaChartは、複数のデータを比較するためのエリアチャートを描画するコンポーネントです。
Badge
Badgeは、アイテムのステータスを強調表示して、すぐに認識できるようにするコンポーネントです。
BarChart
BarChartは、複数のデータを比較するための棒グラフを描画するコンポーネントです。
ComposedChart
ComposedChartは、複数のデータを比較するための複合チャートを描画するコンポーネントです。
DataList
DataListは、データ項目のリストを表示するために使用されます。