# Card

> La superficie que agrupa: cabecera, contenido, pie y acción. Dos variantes, dos tamaños, interactiva y seleccionable.

```tsx
import { Card, CardAction, CardContent, CardDescription, … } from "sebs7n-ui/card"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Las piezas

```tsx
import { Badge } from "sebs7n-ui/badge"
import { Button } from "sebs7n-ui/button"
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "sebs7n-ui/card"

function Completa() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Factura 0012</CardTitle>
        <CardDescription>Acme S.A. · vence el 30/09</CardDescription>
        <CardAction>
          <Badge color="green">Pagada</Badge>
        </CardAction>
      </CardHeader>
      <CardContent>
        <div className="text-heading-32 text-gray-1000 tabular-nums">$ 128.400</div>
      </CardContent>
      <CardFooter>
        <Button size="sm" variant="outline">
          Descargar
        </Button>
        <Button size="sm" variant="ghost">
          Ver detalle
        </Button>
      </CardFooter>
    </Card>
  )
}
```

### Superficie y banda

`default` es lo que flota sobre la página; `subtle` es una zona hundida.

```tsx
import { Card, CardDescription, CardHeader, CardTitle } from "sebs7n-ui/card"

function Variantes() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2">
      <Card size="sm">
        <CardHeader>
          <CardTitle>default</CardTitle>
          <CardDescription>Borde y `bg-background-100`.</CardDescription>
        </CardHeader>
      </Card>
      <Card size="sm" variant="subtle">
        <CardHeader>
          <CardTitle>subtle</CardTitle>
          <CardDescription>Sin borde, `bg-background-200`.</CardDescription>
        </CardHeader>
      </Card>
    </div>
  )
}
```

### Interactiva y seleccionada

`interactive` solo pone los estilos: para que sea clickeable tiene que ser un `<a>` o un `<button>`.

```tsx
import { Card, CardDescription, CardHeader, CardTitle } from "sebs7n-ui/card"

function Interactiva() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2">
      <a className="block" href="/docs/components/card">
        <Card interactive size="sm">
          <CardHeader>
            <CardTitle>Plan Pro</CardTitle>
            <CardDescription>Hasta 500 facturas por mes.</CardDescription>
          </CardHeader>
        </Card>
      </a>
      <Card selected size="sm">
        <CardHeader>
          <CardTitle>Plan Equipo</CardTitle>
          <CardDescription>El que está elegido.</CardDescription>
        </CardHeader>
      </Card>
    </div>
  )
}
```

## Props

### Card

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `interactive` | `boolean` | — | Estilos de hover, active y foco. No hace la tarjeta clickeable: eso lo hace el elemento. |
| `selected` | `boolean` | — | Borde y anillo de marca. |
| `size` | `"sm" \| "md"` | `"md"` | — |
| `variant` | `"default" \| "subtle"` | — | `default` superficie con borde · `subtle` banda sin borde. |
| `className` | `string` | — | — |

### CardAction

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### CardContent

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### CardDescription

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### CardFooter

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### CardHeader

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### CardTitle

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Con `interactive` (y `render` sobre un link o un botón), la tarjeta entera es una parada. |
| Enter | Activa la tarjeta interactiva. |

## Accesibilidad

- **Una tarjeta interactiva tiene que ser un `<a>` o un `<button>`.** `interactive` solo agrega los estilos de hover y foco: no la hace clickeable ni enfocable.
- Con `selected` hace falta además `aria-pressed` o `aria-checked` según el patrón: el anillo de marca es visual.
- `CardTitle` es un `<div>`: si la tarjeta encabeza una sección, poné el heading vos (`render` no aplica acá — usá tu propio `<h3>` adentro).

## Reglas de uso

- **`variant="default"` es la superficie** (borde + `bg-background-100`); **`subtle` es la banda** (`bg-background-200`, sin borde) para una zona hundida.
- Una card dentro de otra card es una señal de que falta una tabla o una lista.
- `size="sm"` en una grilla de 3 o más columnas; `md` suelta.
- `CardAction` se ubica sola arriba a la derecha si está dentro de `CardHeader`.

## Relacionados

[stat](/docs/components/stat.md) · [table](/docs/components/table.md) · [empty-state](/docs/components/empty-state.md)