ListRow

ListRow muestra un ítem con ícono, texto y un detalle a la derecha. Stack las agrupa en una sola superficie con divisores automáticos.

Toyota Yaris · JTRX-12

Documentos

Anatomía

Solo el título es obligatorio. Leading suele ser un ícono o Avatar y trailing un chevron, un Badge o un valor.

Revisión técnica

Vence el 12 de noviembre

  1. Leading
  2. Título
  3. Subtítulo
  4. Trailing

Variantes

Direcciones

2 guardadas

DefaultTítulo primero. Para ajustes, navegación y listas de ítems.

Servicio

Mantención 10.000 km
DetailEtiqueta arriba y valor destacado. Para resúmenes y datos de una reserva.

Alineación

Recordatorios

Por WhatsApp

centerPor defecto. Leading y trailing se centran con el texto.
Recordatorios

Por WhatsApp

Te avisamos 30 días antes de cada vencimiento y el día anterior a tu hora.

startCon texto de apoyo largo, todo se alinea arriba.

Stack

Stack agrupa ListRows en una sola Card y dibuja los divisores entre filas. Con as='button' e interactive, cada fila marca el hover en desktop.

DefaultSuperficie blanca con borde. Pasa el cursor sobre las filas.
FilledFondo gris, para listas dentro de una superficie blanca.

Uso

Sí
Filas relacionadas dentro de un mismo Stack.
Notificaciones
Direcciones
No
Una Card por fila. Se pierde el grupo y la lista se alarga.
Revisión técnica

Vence el 12 de noviembre

Sí
Títulos cortos y el detalle en el subtítulo.
Tu revisión técnica vence el 12 de noviembre
No
Todo en el título. Se trunca y el dato clave desaparece.

Código

import { ListRow } from '@carvuk/design-system/components/list-row';
import { Stack } from '@carvuk/design-system/components/stack';

<Stack>
  <ListRow as='button' interactive leading={<IconBell />} title='Notificaciones' />
  <ListRow title='Revisión técnica' subtitle='Vence el 12 de noviembre' />
</Stack>