StepItem

Un paso de una explicación corta de «cómo funciona»; en filas de 3–4 que llenan el ancho.

Abrir en Figma (394:15756)

Fila de 4 (sin título)

  1. El cliente te habla primero en un video corto; después respondes tú.

  2. Escribe o dicta tus respuestas; puedes corregir antes de enviar.

  3. Mantén el objetivo a la vista durante toda la conversación.

  4. Al terminar recibes tu calificación con lo que pudiste decir.

Con título (Show title)

  1. Video de apertura

    El cliente te habla primero en un video corto; después respondes tú.

  2. Conversación

    Respondes por texto o dictado, sin pistas del coach.

  3. Calificación

    Cinco dimensiones y los errores críticos, con evidencia.

Ficha

Categoría
Data display
Nivel
átomo
Estado
en revisión
Radix
no
Actualizado
2026-10-26
Figma
394:15756
Fuente
design-system/componentes/StepItem.md

Cuándo usarlo

  • Explicar un proceso antes de empezarlo (Practicar «Cómo funciona», onboarding, Cómo funciona de Acceso).

Cuándo NO usarlo

  • Progreso real del usuario por pasos → ProgressBar / stepper.
  • Listas de reglas → Callout o texto.

Anatomía

<li> columna, gap 12: círculo 40 blanco con Icon 20 · título (body/sm-strong, opcional) · descripción (body/sm).

Props

PropFigmaValoresPor defecto
iconIcon (swap, preferidos)nombre de ícono—
titleTitletexto—
showTitleShow titlebooleanfalse
descriptionDescription≤ 2 líneas—

Estados

Sin estados.

Accesibilidad

  • Se renderiza como <li>; la pantalla lo mete en un <ol> (lista ordenada). El ícono es decorativo.

Contenido

Una idea por paso, ≤ 2 líneas; empieza por el actor («El cliente…», «Tú…»). 3–4 pasos, nunca más de 5.

Errores conocidos

  • Ninguno medido.

Changelog

  • 2026-10-26 · nace (T-02).

Tokens que consume