# Card

> A bounded container grouping a header, body content, and footer actions into one ring-edged, softly lifted panel tinted by a semantic color role.

```ts
import { Card } from "@sdxc/ui";
```

The card panel: a rounded, softly lifted `<section>` tinted through the
`data-color` attribute contract. A neutral card draws its edge as a ring
shadow that takes on the tone behind it; a colored one keeps its tinted
border inside that ring. Compose Card.Header,
Card.Content, and Card.Footer inside it.

## Examples

```tsx
<Card>
	<Card.Header>
		<Card.Title>{t("plan.title")}</Card.Title>
		<Card.Description>{t("plan.description")}</Card.Description>
	</Card.Header>
	<Card.Content>{t("plan.body")}</Card.Content>
	<Card.Footer>
		<Button>{t("plan.upgrade")}</Button>
	</Card.Footer>
</Card>
```

```tsx
<Card color="danger">
	<Card.Header>
		<Card.Title>{t("errors.billing.title")}</Card.Title>
	</Card.Header>
</Card>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role. Defaults to DEFAULT_COLOR. |

Also accepts everything in `TagProps<"section">`.


### Card.Header

Renders the card's header slot: a `<header>` stacking its children in a column with a small gap, padded on every side.

Also accepts everything in `TagProps<"header">`.


### Card.Title

The card's heading, in the native heading element matching the nearest ambient heading level — `<h1>` where nothing supplies one.

Also accepts everything in `TagProps<"h1">`.


### Card.Description

Renders the card's supporting copy inside a native `<p>`, muted to seventy percent opacity so it reads as secondary to Card.Title.

Also accepts everything in `TagProps<"p">`.


### Card.Content

The card's main body slot: a `<div>` padded on its inline and block-end edges, leaving its block-start edge flush against Card.Header.

Also accepts everything in `TagProps<"div">`.


### Card.Footer

The card's footer slot: a `<footer>` laying its children out in a vertically centered row, padded on its inline and block-end edges so it sits flush against the content above.

Also accepts everything in `TagProps<"footer">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*` border, background, and foreground variables. |