---
titulo: Tarjeta
resumen: Superficie blanca con borde y sombra suave que agrupa un bloque de
  contenido. Cabecera, título y cuerpo opcionales.
estado: produccion
funcion: contenido
nivel: molecula
creado: 2026-10-11
actualizado: 2026-10-11
tokens:
  - card
  - line
  - shadow-card
relacionados:
  - componentes/cabecera-de-pagina
  - fundamentos/tipografia
plataformas:
  web:
    estado: produccion
    superficies:
      - id: portal
        fuente: src/components/ui/card.tsx
id: componentes/tarjeta
url: /designloop/componentes/tarjeta
sync: ok
---

# Tarjeta

Superficie blanca con borde y sombra suave que agrupa un bloque de contenido. Cabecera, título y cuerpo opcionales.

`Card`, `CardHeader`, `CardTitle` y `CardBody`, en `src/components/ui/card.tsx`. Solo existe en el portal.

```tsx
import { Card, CardBody, CardHeader, CardTitle } from '@/components/ui';

<Card>
  <CardHeader className="flex-col gap-1">
    <CardTitle>{t('sectionSubscription')}</CardTitle>
    <p className="text-sm text-muted">{t('sectionSubscriptionHint')}</p>
  </CardHeader>
  <CardBody>…</CardBody>
</Card>
```

## Ejemplo

```html preview superficie=portal
<div class="rounded-2xl border border-line bg-card shadow-card" style="max-width:560px">
  <div class="flex items-start justify-between gap-4 px-5 pt-5 sm:px-6 sm:pt-6 flex-col gap-1">
    <h2 class="font-display text-xl leading-tight">Suscripción</h2>
    <p class="text-sm text-muted">Estado, límites y espacio. Los cambios se aplican al momento.</p>
  </div>
  <div class="px-5 py-5 sm:px-6"><p class="text-sm text-ink-2">…</p></div>
</div>
```

## Piezas

| Pieza | Etiqueta | Clases |
| --- | --- | --- |
| `Card` | `div` | `rounded-2xl border border-line bg-card shadow-card` |
| `CardHeader` | `div` | `flex items-start justify-between gap-4 px-5 pt-5 sm:px-6 sm:pt-6` |
| `CardTitle` | `h2` | `font-display text-xl leading-tight` |
| `CardBody` | `div` | `px-5 py-5 sm:px-6` |

Todas aceptan las props de su etiqueta y `className`.

## Reglas

| Regla | Cómo se comprueba |
| --- | --- |
| Una tarjeta, un tema. El título lo nombra en una o dos palabras. | Títulos de producción: «Suscripción», «Personas». |
| El título es un `h2`: la página tiene un solo `h1` (la cabecera de página). | `CardTitle` renderiza `h2`. |
| Margen interior de 20 px en móvil y 24 px desde `sm`. | `px-5` / `sm:px-6`. |
| Las listas que llegan al borde quitan el margen lateral del cuerpo. | `CardBody className="px-0 …"` en la lista de peticiones del cliente. |

## Antipatrones

- **Tarjetas dentro de tarjetas:** usa separadores o secciones dentro del cuerpo.
- **Tarjeta como botón entero** sin un enlace real dentro.
- **Sombra más fuerte para destacar:** `--shadow-pop` es para lo que flota (menús, diálogos), no para tarjetas.

# Enlace con producción

| Fuente | Estado | Huella |
| --- | --- | --- |
| `src/components/ui/card.tsx` | Sincronizado | 1dcab529edc3f4c1 |
| `tokens.produccion.json` | Sincronizado | — |