# Card

A surface with a header, body and footer, built on the base card styles.

```ehtml Example
import {
  Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter,
} from "@elements/ui/card";
import { Button } from "@elements/ui/button";

<Card title="Login to your account" description="Enter your email below to login.">
  <CardAction slot="action"><Button variant="link">Sign up</Button></CardAction>
  <CardContent>...</CardContent>
  <CardFooter align="stack">
    <Button variant="primary">Login</Button>
  </CardFooter>
</Card>
```

## Parts

| Part | What it is |
|---|---|
| `CardHeader` | .card-head: title and description, with the action at the top right. |
| `CardTitle` | .card-title, role=heading with aria-level. |
| `CardDescription` | .card-description, helper text. |
| `CardAction` | .card-action, top right of the header. |
| `CardContent` | .card-body, the padded body. |
| `CardFooter` | .card-foot, actions on a tinted strip. |
| `.card-bleed` | Content that runs edge to edge inside the body. |
| `--card-spacing` | The padding every part uses. Set it on the card to change them all. |

## Attributes

### Card

| Attribute | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `""` | Renders a header with a title. |
| `description` | `string` | `""` | Renders a description in that header. |
| `size` | `"md" \| "sm"` | `"md"` | sm pads with the theme's small surface padding. |
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3` | Heading level of the title. |
| `class` | `string` | `""` | Extra classes on the surface. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Other attributes: id, style (set --card-spacing), aria-\*. |

### CardTitle

| Attribute | Type | Default | Description |
|---|---|---|---|
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3` | aria-level of the heading. |

### CardFooter

| Attribute | Type | Default | Description |
|---|---|---|---|
| `align` | `"end" \| "start" \| "stack"` | `"end"` | Where the footer's actions sit; stack is full-width buttons in a column. |

### every part

| Attribute | Type | Default | Description |
|---|---|---|---|
| `class` | `string` | `""` | Extra classes. |

## Slots

| Slot | Part | Content |
|---|---|---|
| `default` | `Card` | The parts, an image, anything. |
| `action` | `Card` | The header action when the header comes from title. |
| `default` | `each part` | The part's content. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-size` | `"md" \| "sm"` | root |
| `data-slot` | `"card" \| "card-header" \| "card-title" \| "card-description" \| "card-action" \| "card-content" \| "card-footer"` | every part |

## Accessibility

- The title is role="heading" with aria-level (3 by default), so the outline is right whatever size the theme draws it.
- The card itself is a div. Put it in an `<article>` or a labelled `<section>` when it is a landmark.

## See also

- [Button](button): A button or a link that looks like one, in six variants and four sizes.
- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Kbd](kbd): A keyboard key or shortcut, as text.
- [Separator](separator): A horizontal or vertical rule between content, semantic or decorative.