Card · contenedor agrupador
La Card agrupa una unidad atómica de contenido relacionado, navegable como una sola pieza. Su frontera con la Section editorial y con el Item de lista se ha redibujado tres veces. Esta ficha documenta la versión vigente: Card es lo que se puede llevar fuera de su contexto sin perder sentido.
Decomposición del componente
Las seis capas del componente
01 · Átomo color.neutral.50 · color.neutral.200 · space.12 · radius.md Primitivos compartidos con todas las superficies secundarias del sistema.
02 · Compuesto color.surface.card.bg · color.border.card · space.card.padding · radius.card Semánticos de Card. El borde es opcional; si la Card vive sobre superficie distinta puede prescindir de él.
03 · Regla test de portabilidad · variant interactive explícita · schema estructural mínimo Governance. Si el contenido no es comprensible fuera del padre, no es Card: es Section. La variant interactive debe declararse (no se asume).
04 · Pieza <Card interactive={bool}>...</Card> Schema con regla: debe contener al menos Heading + cuerpo. Cards vacías o solo-imagen se rechazan.
05 · Familia Containers · sibling de Section, Drawer, Modal Card es la unidad atómica portable; Section es la división editorial in-context.
06 · Estado default · hover (si interactive) · focus-visible (si interactive) · selected · loading · disabled hover y focus-visible solo aparecen si interactive=true. Card informativa no se 'hoverea'.
Tokens consumidos
Semánticos
color.surface.card.bg oklch(0.98 0.005 75) Fondo de la Card sobre la superficie del cuerpo
color.border.card oklch(0.88 0.005 75) Borde sutil opcional, no obligatorio si la Card vive sobre un fondo distinto
space.card.padding 1.5rem Padding interno, descontable si la Card contiene una imagen edge-to-edge
radius.card 0.5rem Curvatura, alineada con resto de surfaces
Técnicas de governance aplicadas
Técnicas activas
Test de portabilidad
Si el contenido de la Card no es comprensible cuando se saca de su contexto (página padre), no es Card: es Section. La regla evita el abuso de Card como decoración.
Interactividad opcional, no automática
Una Card no se vuelve clickable por defecto. La interactividad se declara con interactive=true, y eso activa role=button + cursor + focus visible + Enter/Space handlers. Las Cards informativas siguen siendo article.
Estado físico
Agentic-consumable desde noviembre de 2025. Schema con regla: una Card debe contener al menos un encabezado (h3-h5) y al menos un bloque de cuerpo. Cards vacías o solo con imagen son rechazadas.
Estados soportados
hover (solo si interactive=true), focus-visible (idem), selected, loading (skeleton mientras carga), disabled. Sin agent-aware distinto: la Card es contenedor, los componentes internos heredan la marca.
Composiciones prohibidas
Reglas activas
Card sin Heading ni cuerpo
Card vacía o solo con imagen se rechaza. Alternativa: <ImageTile /> separado.
Card clickable más link interno clickable
El link interno no se puede activar sin disparar el click de la Card. Rechazo con sugerencia: card-clickable o link-clickable, nunca ambos.
Card usada como sección de página
Si el contenido pertenece al contexto de la página y no tiene sentido como unidad portable, no es Card.
Interoperabilidad
- Consumido por:
Grid,Stack,Carousel,ListView,Dashboard. - Consume:
Heading,Paragraph,Image(opcional),Badge,Button(en footer). - Con qué compone mal: como hija directa de Modal (doble superficie); dentro de Tooltip (incompatible con el tamaño del Tooltip).
- Sustituibles por:
Sectionsi no es portable;ArticleTeasersi el contenido es editorial.
Medición propuesta
Eventos planificados
card.impression
Atributos: ruta, posición en el grid, interactive, origin. Detecta cards que aparecen pero nunca reciben interacción (candidatas a Section).
card.click_ratio
Ratio clicks/impresiones. Cards interactivas con ratio <2% indican que la apariencia clickable confunde.
Mutación plástica (Estado 3)
Qué muta y qué permanece
Densidad interna padding = derive(viewport × content-density) Mobile reduce padding a 12; desktop lo sube a 24 cuando la Card vive en grid.
Borde visible border-visibility = derive(superficie-padre) Si la superficie padre es crema sólido, el borde se muestra. Si es gradiente o imagen, el borde se omite para no competir visualmente.
Elevación shadow = omitida El sistema no usa sombras. La elevación se comunica por borde y color de fondo. Esta regla es inviolable también en Estado 3.
Fijo por contract schema mínimo (heading + body) · interactive explícito · role apropiado Nunca mutan.
Rollback si la mutación propone añadir sombra (la disciplina Tufte lo prohíbe en todo el sitio) o si la densidad reduce el padding por debajo de 12 (hit-target de Button interno lo requiere).
Genealogía
Árbol de evolución
Card como div con sombra
Estilo importado de Material Design. Sombras pesadas, sin policy de uso.
Consumidor Producto · 6 productos
Card sin sombra, con borde sutil
Migración a estilo más editorial. Documentación primer borrador.
Consumidor Producto · 18 productos
Card governable + test de portabilidad
Lint editorial que rechaza Cards con contenido no portable. Variant interactive explícita.
Consumidor Producto · 28 productos
Card.AI · expuesto vía MCP
Schema estructural mínimo.
Consumidor Humano + agente
Notas del editor
Descartes catalogados
Variants rechazadas
variant='media-only' Card que contenía solo una imagen sin texto. Rompía la regla del schema mínimo (encabezado + cuerpo). Movido a componente <ImageTile /> con su contrato propio.
variant='glass' Backdrop-filter blur sobre fondo translúcido. Inconsistente con la paleta editorial crema sobre tinta. Visualmente conflictivo con el rojo accent.
variant='full-clickable-with-link-inside' Card entera clickable más un link visible dentro. Patrón anti-accesible (el link no se puede activar sin disparar también el click de la card). Reescrito como variant solo-card-clickable o solo-link-clickable, nunca ambos.
Referencias cruzadas
- Familia: Containers.
- Componente hermano: Nº 0253 · Modal.