CarCard

CarCard identifica un auto con su imagen, patente, año y modelo. Aparece en el garage, los checkouts y cada flujo donde el usuario elige su auto.

Mis autos

JTRX-12 • 2021

Toyota Yaris

KDLP-48 • 2021

Mazda CX-5

Anatomía

Identifica un auto de un vistazo. La patente va primero porque es lo que el usuario reconoce, y el modelo confirma que es el correcto.

Imagen del auto
Patente y año
Modelo
Verificación

Variantes

defaultFondo relleno, sin borde. Para listas dentro de una card o un sheet.

cardCon borde y fondo blanco. Para autos sueltos sobre fondos de color.

Tamaños

imageSize defaultImagen de 64 px. El tamaño estándar en listas.

imageSize largeImagen de 80 px. Para el auto protagonista de una vista.

Estados

VerificadoisVerified suma un check cuando la patente está validada.

CargandoSilueta y texto con shimmer mientras se consulta la patente.

KDLP-48 • 2021

Mazda CX-5

Sin imagenSin imageUrl se muestra la silueta del auto.

Patente • Año

Modelo

VacíoSin datos muestra los placeholders hasta que el usuario ingresa la patente.

Uso

Sí
Una sola acción en trailing, como cambiar de auto.

No
Varias acciones en trailing aprietan el modelo y confunden.

Sí
Una lista de autos usa siempre la misma variante.

No
Mezclar default y card en la misma lista se ve desordenado.

Código

import { CarCard } from '@carvuk/design-system/components/car-card';

<CarCard plate='JTRX-12' year={2021} model='Toyota Yaris' isVerified />
<CarCard variant='card' imageSize='large' imageUrl={imageUrl} />
<CarCard isLoading />