# Card

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

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://www.sisyphosui.com/docs/components/card

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

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

## Framework usage

### React 18+

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

export const Profile = () => (
  <Card>
    <Card.Header>Profile</Card.Header>
    <Card.Body>Welcome back, Volkan.</Card.Body>
    <Card.Footer>Updated 5 minutes ago</Card.Footer>
  </Card>
);
```

### Vue 3+

```vue
<script setup lang="ts">
import { Card, CardHeader, CardBody, CardFooter } from "@sisyphos-ui/vue";
</script>

<template>
  <Card>
    <CardHeader>Profile</CardHeader>
    <CardBody>Welcome back, Volkan.</CardBody>
    <CardFooter>Updated 5 minutes ago</CardFooter>
  </Card>
</template>
```

### Angular 17+

```ts
import { Component } from "@angular/core";
import { Card, CardHeader, CardBody, CardFooter } from "@sisyphos-ui/angular";

@Component({
  selector: "app-profile",
  standalone: true,
  imports: [Card, CardHeader, CardBody, CardFooter],
  template: `
    <sui-card>
      <sui-card-header>Profile</sui-card-header>
      <sui-card-body>Welcome back, Volkan.</sui-card-body>
      <sui-card-footer>Updated 5 minutes ago</sui-card-footer>
    </sui-card>
  `,
})
export class ProfileComponent {}
```

## Examples

### Compound API

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

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

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/react";

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/react";

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/react";

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>
    </>
  );
}
```

<!-- exports: { "Card": "@sisyphos-ui/react" } -->