---
title: Card
description: "`Card` is a component that groups and displays related information. By default, it renders a `article` element."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/card/card.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/card
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-card--basic
---

# Card

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

## Usage

```tsx
<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>
```

```tsx
import { Card } from "@yamada-ui/react"
```

```tsx
import { Card } from "@/components/ui"
```

```tsx
import { Card } from "@workspaces/ui"
```

```tsx
<Card.Root>
  <Card.Header />
  <Card.Body />
  <Card.Footer />
</Card.Root>
```

### Change Variant

```tsx
<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>
```

### Change Size

```tsx
<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>
```

### Change Color Scheme

```tsx
<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>
```

### Customize Layout

```tsx
<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>
```

```tsx
<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

### Card.Root

| Prop          | Default   | Type                                                                                                                      | Description                                |
| ------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -         | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -         | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -         | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `size`        | `"md"`    | `"lg" \| "md" \| "sm" \| "xl"`                                                                                            | The size of the component.                 |
| `variant`     | `"panel"` | `"elevated" \| "outline" \| "panel" \| "solid" \| "subtle" \| "surface" ...`                                              | The variant of the component.              |

### Card.Body

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Card.Footer

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Card.Header

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Similar Components

- [NativeTable](https://yamada-ui.com/docs/components/native-table.md): `NativeTable` is a component for efficiently organizing and displaying data.
- [Stat](https://yamada-ui.com/docs/components/stat.md): `Stat` is used to display numbers or data within a box.
- [Table](https://yamada-ui.com/docs/components/table.md): `Table` is a table component equipped with column sorting, row selection, and click event features.
- [AreaChart](https://yamada-ui.com/docs/components/area-chart.md): `AreaChart` is a component for drawing area charts to compare multiple sets of data.
- [Badge](https://yamada-ui.com/docs/components/badge.md): `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
- [BarChart](https://yamada-ui.com/docs/components/bar-chart.md): `BarChart` is a component for drawing bar charts to compare multiple sets of data.
- [ComposedChart](https://yamada-ui.com/docs/components/composed-chart.md): `ComposedChart` is a component for drawing composed charts to compare multiple sets of data.
- [DataList](https://yamada-ui.com/docs/components/data-list.md): `DataList` is used to display a list of data items.