# Card

Groups related content and actions on one surface.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<Card>
  <CardHeader>
    <CardTitle>Login to your account</CardTitle>
    <CardDescription>
      Enter your email below to login to your account
    </CardDescription>
    <CardAction>
      <Button variant="link">Sign Up</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="email">Email</FieldLabel>
        <Input id="email" placeholder="m@acme.com" type="email" />
      </Field>
    </FieldGroup>
  </CardContent>
  <CardFooter>
    <Button>Login</Button>
  </CardFooter>
</Card>
```

## Installation

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

## Usage

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

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

## Composition

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

## Card Action

Put a control in `CardAction` to pin it to the header's end, beside the title and description, like a [Dropdown Menu](https://constella.aayush.cv/docs/components/dropdown-menu/index.md).

```tsx
<CardHeader>
  <CardTitle>Weekly digest</CardTitle>
  <CardDescription>Sent every Monday to 12 people.</CardDescription>
  <CardAction>
    <DropdownMenu>…</DropdownMenu>
  </CardAction>
</CardHeader>
```

## Size

Use the `size` prop on `Card` to set its padding. `flush` drops it, for rows that run edge to edge and pad themselves.

| Size      | Padding |
| --------- | ------- |
| `default` | 16px    |
| `sm`      | 12px    |
| `flush`   | 0       |

```tsx
<Card size="sm">
  <CardHeader>
    <CardTitle>Scheduled reports</CardTitle>
  </CardHeader>
</Card>
```

## Variant

Use the `variant` prop on `Card` to set its surface.

| Variant   | Surface                           |
| --------- | --------------------------------- |
| `default` | A `border` edge on `raised`       |
| `well`    | A `fillSubtle` tray around a card |
| `filled`  | A `fillSubtle` fill with no edge  |

### Well

Use `variant="well"` for a tinted tray around a card and the header that labels it. The card inside takes the next corner down, so the two stay concentric.

```tsx
<Card variant="well">
  <CardHeader>
    <CardTitle>Models</CardTitle>
    <CardDescription>Available to everyone in the workspace.</CardDescription>
  </CardHeader>
  <Card size="flush">{rows}</Card>
</Card>
```

### Filled

Use `variant="filled"` for a flat tinted section or stat that sits on the page, with no edge.

```tsx
<Card variant="filled">
  <CardHeader>
    <CardTitle>Usage this month</CardTitle>
    <CardDescription>Resets on the 1st.</CardDescription>
  </CardHeader>
  <CardContent>1,284 of 2,000 messages used.</CardContent>
</Card>
```

Small cards fit a grid of numbers, each with its change as a status badge.

```tsx
<Card size="sm">
  <CardHeader>
    <CardDescription>Messages</CardDescription>
    <CardAction>
      <Badge color="success" variant="secondary">
        +12.5%
      </Badge>
    </CardAction>
  </CardHeader>
  <CardContent>48,210</CardContent>
</Card>
```

## API Reference

| Part | Adds |
| --- | --- |
| `Card` | `size`: `"sm"`, `"default"` or `"flush"`; `variant`: `"default"`, `"well"` or `"filled"` |
| `CardTitle` | `render`, to make it a heading: `render={<h3 />}` |

Every part takes `sx`, applied last, and renders a `div`. For `render`, see [Base UI useRender](https://base-ui.com/react/utils/use-render).