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 · 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.

Tokens que usa

--card--line--shadow-card

Enlace con producción

Superficie	Fuente	Estado	Huella	Revisada en
Portal de clientes	src/components/ui/card.tsx	Sincronizado	1dcab529edc3f4c1	61df637

Producción en el commit 455e861 (2026-10-13). Sync del 2026-10-13.

Relacionados

componentes/tarjeta · Actualizado el 2026-10-11