Ficha
- Categoría
- Data display
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 394:12491
- Fuente
design-system/componentes/BenefitCard.md
Tarjeta de beneficio o producto dentro de una respuesta del coach (carrusel): slot Media arriba, título (≤ 2 líneas), texto corto (≤ 3) y un enlace «Ver detalle →». 166 de ancho, alto según contenido. Variant base · hint (la última tarjeta parcialmente visible de un carrusel: Card/Hint blur + alpha-70; sin estados interactivos).
Cuándo usarlo
- Datos de producto que el coach adjunta a una respuesta (AX-05); beneficios en un Carousel.
Cuándo NO usarlo
- Sugerencias de Inicio (SuggestionCard); contenedores genéricos (Card).
Anatomía
Enlace 166 de ancho, radius-5x, Shadow/Card: media 96 · contenido padding 16 space-between (título body/sm-strong, subtítulo body/xs al 70 %, enlace body/xs brand/action + arrow-right 16).
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
title | Title | texto | Priceless |
subtitle | Subtitle | texto | Experiencias y ofertas exclusivas. |
link | Link | texto | Ver detalle |
showLink | Show link | boolean | true |
media | Media | nodos | — |
variant | Variant | base · hint | base |
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. hint: card-hint, aria-hidden y fuera del orden de tabulación.
Accesibilidad
- Toda la tarjeta es un enlace cuyo nombre es el título; el texto del enlace es visual; la imagen es decorativa (alt=""); la tarjeta hint va aria-hidden hasta que entra en vista.
Contenido
Title = nombre del beneficio; una línea de lo que da, desde la ficha del producto, nunca inventado. Enlace «Ver detalle» salvo que el destino diga otra cosa; Show link apagado cuando no hay detalle.
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).