# Card

A structured surface for a heading, supporting content and independent actions.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Card, Button, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Card title="Project details" description="Keep your team in sync."
        footer={<Button variant="subtle">Open project</Button>}>
        <Text as="p" size="compact">A calm place for the next idea.</Text>
      </Card>
    </FloodRoot>
  );
}
```

## Design notes

- Card composes Surface with optional title, description, header actions, children and footer. Missing slots add no empty wrapper or reserved space.
- Use Surface for unstructured containment; use Card when its header/body/footer structure is useful. Card is a noninteractive div, not a button or link. Put named actions inside.
- Title uses Heading at headingLevel (2 by default); choose the level according to the page. Supply phrasing content for the title. Description accepts supporting React content.
- Density compact/comfortable controls padding and section rhythm using existing semantic spacing. Header actions wrap naturally; content is never clipped to the radius.
- Root HTMLDivElement ref and native div props/style/className target the surface. The title prop is content, not the native HTML tooltip attribute. Available in 0.2.4.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `title` | `ReactNode` | `—` |
| `description` | `ReactNode` | `—` |
| `actions` | `ReactNode` | `—` |
| `footer` | `ReactNode` | `—` |
| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `2` |
| `density` | `"compact" \| "comfortable"` | `"comfortable"` |
| `elevation` | `"default" \| "raised"` | `"default"` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "title">` | `Forwarded` |