# Card

> Compound surface with header, body, footer slots. Elevated, outlined, and flat variants.

- Package: `@sisyphos-ui/card`
- Docs: https://sisyphosui.com/docs/components/card
- npm: https://www.npmjs.com/package/@sisyphos-ui/card

## Installation

```bash
pnpm add @sisyphos-ui/card @sisyphos-ui/core
```

Or use the umbrella package:

```bash
pnpm add @sisyphos-ui/ui
```

## Import

```tsx
import "@sisyphos-ui/card/styles.css";
import { Card } from "@sisyphos-ui/card";
```

## Examples

### Compound API

`Card` ships with `Header`, `Body`, and `Footer` subcomponents.

```tsx
import { Button, Card, Chip } from "@sisyphos-ui/ui";

export function Example() {
  return (
    <Card className="max-w-md">
      <Card.Header>
        <div className="flex flex-col gap-0.5">
          <h3 className="text-[15px] font-semibold">Monthly report</h3>
          <p className="text-xs text-neutral-500">
            Updated 2 hours ago · 24 pages
          </p>
        </div>
        <Chip variant="soft" color="success" size="sm">
          Ready
        </Chip>
      </Card.Header>
      <Card.Body>
        <p className="text-sm leading-relaxed text-neutral-600">
          Summary of platform events and metrics for the past 30 days, with
          comparisons to the previous period and a breakdown by team.
        </p>
      </Card.Body>
      <Card.Footer>
        <Button variant="text" size="sm">View all</Button>
        <Button size="sm">Download PDF</Button>
      </Card.Footer>
    </Card>
  );
}
```

### Variants

`elevated` (shadow), `outlined` (border), and `filled` (solid background).

```tsx
import { Card } from "@sisyphos-ui/ui";

export function Example() {
  return (
    <>
      <Card variant="elevated"><Card.Body>elevated</Card.Body></Card>
      <Card variant="outlined"><Card.Body>outlined</Card.Body></Card>
      <Card variant="filled"><Card.Body>filled</Card.Body></Card>
    </>
  );
}
```

### Interactive

`interactive` promotes the card to a button role with focus/hover states.

```tsx
import { Card } from "@sisyphos-ui/ui";

export function Example() {
  return (
    <Card interactive onClick={() => alert("Opened workspace")}>
      <Card.Body>
        <h3>Acme Inc.</h3>
        <p>12 members · 43 projects · owner</p>
      </Card.Body>
    </Card>
  );
}
```

### Padding

`padding` tunes inner spacing — useful for dense grids.

```tsx
import { Card } from "@sisyphos-ui/ui";

export function Example() {
  return (
    <>
      <Card padding="none"><Card.Body>padding="none"</Card.Body></Card>
      <Card padding="sm"><Card.Body>padding="sm"</Card.Body></Card>
      <Card padding="md"><Card.Body>padding="md"</Card.Body></Card>
      <Card padding="lg"><Card.Body>padding="lg"</Card.Body></Card>
    </>
  );
}
```