Card

Card is a component that groups and displays related information. By default, it renders a section element.

Import

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

Copied!

Card: A wrapper component for the card.
CardHeader: A component that displays the header of the card.
CardBody: A component that displays the main content of the card.
CardFooter: A component that displays the footer of the card.

Usage

Editable example

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

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

Copied!

Change Variant

Editable example

<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!

Change Size

Editable example

<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!

Change Color Scheme

Editable example

<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!

Customize Layout

Editable example

<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!

Editable example

<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!

Edit this page on GitHub

PreviousList NextStat