ScenarioCard

Ver la demo

Ficha

Categoría
Data display
Nivel
molécula
Estado
en revisión
Radix
no
Actualizado
2026-10-26
Figma
394:13393
Fuente
design-system/componentes/ScenarioCard.md

Tarjeta de escenario del catálogo de Practicar: foto opcional del cliente (decorativa, el nombre va en Meta), título (≤ 2 líneas), situación del cliente (≤ 3), producto · duración, y el Badge con el estado del último intento. 224 de alto para que la fila alinee (fijo; el texto se trunca). Superficie blanca como Card.

Cuándo usarlo

  • Cada escenario en un grupo de nivel de Practicar (y sus versiones filtradas / «otra sugerencia»).

Cuándo NO usarlo

  • El único escenario sugerido («Para ti»: FeatureCard); sugerencias de Inicio (SuggestionCard).

Anatomía

Enlace 224 de alto, padding 20, columna space-between: cuerpo (media 120 opcional + título body/md-strong, situación body/sm, meta body/sm-strong) · pie con Badge y chevron 20.

Props

PropFigmaValoresPor defecto
titleTitletextoUso de la tarjeta en compras cotidianas
situationSituationtextoLa usa seguido; aceptó conversar sobre sus hábitos de pago.
metaMetatextoStandard · ~8 min
showStatusShow statusbooleantrue
showMediaShow mediabooleanfalse
href—ruta del escenario—

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 cuyo nombre es el título; el estado es texto (Badge con palabra), nunca solo color; el chevron es decorativo.

Contenido

Title = nombre del escenario; Situation = quién es el cliente y qué quiere, una frase; Meta = «Producto · ~N min». Estado: Sin intentar (neutral) · Parcialmente logrado (warning) · Logrado (positive).

Errores conocidos

  • Ninguno medido.

Changelog

  • 2026-10-26 · con showMedia la tarjeta mide 348 (antes 224 fijo y la foto tapaba el título): medido en Figma Practicar · 01 (T-04).
  • 2026-10-26 · nace (T-02).

Tokens que consume