Para ti · por tu brecha en Comunicación de valor
Tarjetas para gastos de viaje
Roberto viaja seguido por trabajo y paga sus viajes con otra tarjeta. Aceptó revisar contigo cuál le conviene.
Avanzada~10 min1 intento
Cliente simulado · IAFeatureCard
El destacado de una página: texto a la izquierda (kicker, título, texto, tags, acciones) e imagen a la derecha. lg en Practicar («Para ti»), sm en Aprender.
Abrir en Figma (446:31340)Size lg · sm (con tag de producto, sin secundaria)
Cliente simulado · IAContinúa donde quedaste
Tarjetas para gastos de viaje
Roberto viaja seguido por trabajo y paga sus viajes con otra tarjeta. Aceptó revisar contigo cuál le conviene.
Mastercard BlackAvanzada~10 min
Cliente simulado · IAFicha
- 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
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).