Ficha
- Categoría
- Data display
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 394:12329
- Fuente
design-system/componentes/SuggestionCard.md
Tarjeta de sugerencia de Inicio («Te sugiero»): un slot Media libre detrás de un panel de vidrio con kicker + título. Un solo componente; solo cambia el contenido. Ancho fluido (FILL en su fila), 200 de alto; el panel crece hacia arriba con un título de 2 líneas.
Cuándo usarlo
- Las sugerencias de Inicio: continuar la simulación, tu avance (anillo), tu brecha (producto).
Cuándo NO usarlo
- Contenedores genéricos (Card); calificaciones y resultados (Badge); beneficios de producto (BenefitCard).
Anatomía
Enlace 200 de alto, radius-5x, filo blanco 0.5, Shadow/Card: media absoluto (imagen o nodo) + panel inferior surface/glass/white-a10 + Blur/Card, padding 24/20, gap 2: kicker body/xs (70 %) · título body/sm-strong.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
kicker | Kicker | texto | Tu brecha: beneficios |
title | Title | texto | Mastercard Platinum |
media | Media | nodos | — |
src | Media (relleno del placeholder) | ruta de imagen | — |
href | — | destino | — |
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.
Accesibilidad
- Toda la tarjeta es un enlace con un solo nombre = Title; el media es decorativo (alt="") salvo visuales de datos, que además imprimen su valor en texto. Sin disabled/loading: una sugerencia no disponible no se muestra.
Contenido
El kicker dice qué es («Tu brecha: beneficios», «Continúa la simulación», «Tu avance»); Title ≤ 2 líneas.
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).