Ficha
- Categoría
- Data display
- Nivel
- organismo
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 446:31340
- Fuente
design-system/componentes/FeatureCard.md
El destacado de una página (la recomendación, la siguiente mejor acción): columna de texto fija a la izquierda (Kicker, Title, Text, tags, acciones) y una imagen a la derecha (300 de ancho a todo el alto, redondeada por la tarjeta). Superficie blanca como Card, Shadow/Card. Size lg (300 de alto, media 300: «Para ti» en Practicar) · sm (abraza el contenido, media 220: «Continúa donde quedaste» en Aprender).
Cuándo usarlo
- «Para ti» en Practicar (lg) y «Continúa donde quedaste» en Aprender (sm): uno por pantalla.
Cuándo NO usarlo
- Listas de ítems (ScenarioCard, SuggestionCard); más de uno por pantalla.
Anatomía
<article> fila: texto (padding 32 / 24, gap 16: kicker body/xs, título heading/lg / heading/md, texto body/sm, tags, acciones Button primary + tertiary sm) · media 300 / 220 con Tag glass-light abajo a la derecha.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
showMediaLabel | Show media label | boolean | true |
kicker | Kicker | texto | Para ti · por tu brecha en Comunicación de valor |
title | Title | texto | Tarjetas para gastos de viaje |
text | Text | texto | Roberto viaja seguido por trabajo y paga sus viajes con otra tarjeta. Aceptó revisar contigo cuál le conviene. |
showProductTag | Show product tag | boolean | false |
showAttemptsTag | Show attempts tag | boolean | true |
showSecondaryAction | Show secondary action | boolean | true |
size | Size | lg · sm | lg |
product, level, duration, attempts | tag · producto / nivel / duración / intentos (Tag expuestos) | textos | — |
primaryLabel, onPrimary | practicar (Button primary) | texto · callback | — |
secondaryLabel, onSecondary | otra-sugerencia (Button tertiary sm) | texto · callback | Otra sugerencia |
media | media (relleno de imagen) | ruta | — |
Estados
Sin estados propios (las acciones los tienen).
Accesibilidad
- La imagen es decorativa cuando el texto nombra a la persona o al producto; una sola acción primaria (DV-16).
Contenido
El kicker dice por qué está aquí («Para ti · por tu brecha en …»); título ≤ 1 línea; texto ≤ 3 líneas. Las instancias solo cambian propiedades y la imagen, nunca estilos ni estructura (R4).
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 ·
mediapasa a opcional: sin imagen, la columna va en surface/sand/03-soft (Aprender · 01 «Continúa donde quedaste» usa un placeholder) (T-04). - 2026-10-26 · nace (T-02).