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>
  <For each={["elevated", "outline", "subtle", "solid"]}>
    {(variant, index) => (
      <Card key={index} variant={variant}>
        <CardHeader>
          <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
        </CardHeader>

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

Copied!

Change Size

Editable example

<VStack>
  <For each={["sm", "md", "normal", "lg"]}>
    {(size, index) => (
      <Card key={index} size={size}>
        <CardHeader>
          <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
        </CardHeader>

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

Copied!

Change Color Scheme

Editable example

<VStack>
  <For
    each={[
      { variant: "subtle", colorScheme: "green" },
      { variant: "solid", colorScheme: "pink" },
    ]}
  >
    {({ variant, colorScheme }, index) => (
      <Card key={index} variant={variant} colorScheme={colorScheme}>
        <CardHeader>
          <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
        </CardHeader>

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

PreviousDataList NextStat