Card

Cardは、関連する情報をグループ化して表示するコンポーネントです。デフォルトでは、section要素をレンダリングします。

インポート

import { Card, CardHeader, CardBody, CardFooter } from "@yamada-ui/react"

Copied!

Card: カードのラッパーコンポーネントです。
CardHeader: カードのヘッダーを表示するコンポーネントです。
CardBody: カードのメインコンテンツを表示するコンポーネントです。
CardFooter: カードのフッターを表示するコンポーネントです。

使い方

編集可能な例

<Card>
  <CardHeader>
    <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
  </CardHeader>

  <CardBody>
    <Text>
      『SLAM
      DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
    </Text>
  </CardBody>
</Card>

Copied!

バリアントを変更する

編集可能な例

<VStack>
  <Card variant="elevated">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>

  <Card variant="outline">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>

  <Card variant="subtle">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>

  <Card variant="solid">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>
</VStack>

Copied!

サイズを変更する

編集可能な例

<VStack>
  <Card size="sm">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>

  <Card size="md">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>

  <Card size="normal">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>

  <Card size="lg">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>
</VStack>

Copied!

カラースキームを変更する

編集可能な例

<VStack>
  <Card variant="subtle" colorScheme="green">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>

  <Card variant="solid" colorScheme="pink">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>
  </Card>
</VStack>

Copied!

レイアウトをカスタマイズする

編集可能な例

<Card maxW="md">
  <CardHeader justifyContent="center">
    <Image
      src="https://slamdunk-movie.jp/files/images/p_gallery_03.jpg"
      w="full"
      rounded="md"
    />
  </CardHeader>

  <CardBody>
    <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>

    <Text>
      『SLAM
      DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
    </Text>
  </CardBody>

  <CardFooter>
    <Button colorScheme="primary">Wikipedia</Button>
  </CardFooter>
</Card>

Copied!

編集可能な例

<Card
  direction={{ 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">
    <CardHeader>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </CardHeader>

    <CardBody>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </CardBody>

    <CardFooter>
      <Button colorScheme="primary">Wikipedia</Button>
    </CardFooter>
  </VStack>
</Card>

Copied!

GitHubでこのページを編集する

前List 次Stat