# Card

> Displays a card with a header, content, and footer.

Source: https://ui.cortexcn.dev/docs/components/card

## Installation

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

## Usage

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

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

### Login

A card with an action in the header, a form in the content, and buttons in the footer.

### Size

Use `size="sm"` to make the card small. The small size uses tighter spacing.

### Spacing

Besides the `size` prop, the `--card-spacing` CSS variable controls the gap between sections and the inset of every card part.

### Edge to edge

Use negative margins with `-mx-(--card-spacing)` to take content edge to edge while keeping it aligned with the card inset. When that content sits above a footer, add `-mb-(--card-spacing)` to `CardContent` to remove the section gap.

### Image

Put an image before the card header to create a card with a cover image.

## API Reference

### Card

The root container for the card content.

| Prop        | Type                | Default     |
| ----------- | ------------------- | ----------- |
| `size`      | `"default" \| "sm"` | `"default"` |
| `className` | `string`            | -           |

### CardHeader

Holds the title, description, and an optional action.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### CardTitle

The card title.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### CardDescription

Helper text under the title.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### CardAction

Places content in the top-right of the header, such as a button or a badge.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### CardContent

The main card body.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### CardFooter

Actions and secondary content at the bottom of the card.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

Adapted from the [shadcn/ui Card](https://ui.shadcn.com/docs/components/card) (MIT).