Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Card
description: Displays a card with header, content, and footer.
---

```astro live props={{ name: 'card' }}
---
import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---

<Card class="w-full max-w-md">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
    <CardAction>
      <Button size="sm" variant="outline">Manage</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter class="border-t">
    <Button size="sm">Continue</Button>
  </CardFooter>
</Card>
```

## Installation

### Command

```bash
npx shadcn@latest add @fulldev/card
```

### Manual

1. Copy and paste the card component files into your project.
2. Update the import paths to match your project setup.

## Usage

```ts
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
```

```astro
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>
```

## Composition

Use the following composition to build a `Card`:

```text
Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter
```

## Examples

### Image

Add an image before the card header to create a card with an image.

```astro live
---
import { Image } from "astro:assets"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import image from "@/assets/placeholder.webp"
---

<Card class="max-w-md">
  <Image
    src={image}
    alt="Card image"
    class="aspect-video w-full object-cover"
  />
  <CardHeader>
    <CardTitle>Image Card</CardTitle>
    <CardDescription>Card with media in the top slot.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>The first child image automatically gets top rounding behavior.</p>
  </CardContent>
</Card>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/card) for more information on props.