Ficha
- Categoría
- Layout
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 393:9553
- Fuente
design-system/componentes/Card.md
Tarjeta blanca (base/fixed/white) sobre el panel de contenido arena: radius-5x, Shadow/Card, filo blanco de 0.5 (reglas/08 §08.6). Estados default · hover · focus · pressed para tarjetas clicables; hint (la que asoma en un carrusel) no tiene estados interactivos. El slot Content admite cualquier composición.
Cuándo usarlo
- Contenedor de un bloque de contenido sobre la arena; tarjeta clicable con
hrefuonClick. - Variante hint para la tarjeta parcialmente visible de un carrusel.
Cuándo NO usarlo
- Secciones de página completa o el panel principal de contenido (eso es la tarjeta del AppShell); burbujas de chat (ChatBubble).
Anatomía
Caja radius-5x, padding 20, gap 12, filo 0.5 blanco, Shadow/Card; slot Content.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
children | Content | nodos | — |
variant | Variant | base · hint | base |
href / onClick | — | la hacen interactiva (enlace / botón) | — |
ariaLabel | — | nombre accesible cuando el contenido no basta | — |
Estados
default · hover (filo borders/neutral/04-tint) · focus (anillo 2 px borders/brand/focus) · pressed (relleno surface/neutral/03-soft); estados reales del DOM. hint: card-hint (Shadow/Card + Blur/Hint + Alpha/alpha-70).
Accesibilidad
- Presentacional por defecto (sin rol). Cuando toda la tarjeta es clicable es un único enlace o botón con un solo nombre accesible y anillo de foco; nunca controles anidados dentro.
Contenido
Una idea por tarjeta; kicker (body/xs) + título (body/sm-strong) es el contenido por defecto.
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).