Card

Card agrupa información que se lee junta, como un servicio, un pago o un vencimiento. Puede ser estática o funcionar como un botón completo.

Toyota Yaris

Tus servicios

AgendadaJTRX-12

Mantención 10.000 km

Jueves 24 oct · 10:00 · Providencia

Total pagado$89.990

Variantes

Default es la superficie principal. Filled sirve para jerarquías internas, como un total dentro de una tarjeta de servicio.

Revisión técnicaVence el 12 de noviembreTe avisamos 30 días antes.
DefaultSuperficie blanca con borde. La base para agrupar contenido sobre fondos claros.
Resumen$89.990Incluye retiro y entrega.
FilledFondo gris sin borde. Para bloques de apoyo dentro de una superficie blanca.

Interactiva

Con as='button' toda la tarjeta es tocable y accesible por teclado. Úsala cuando la tarjeta entera lleva a un solo destino.

Card no trae estilos de hover ni de foco. Suma la receta de la sección Código para que la tarjeta responda al cursor y al teclado.

ReposoMismo aspecto que una Card estática, con un chevron que anticipa la acción.
HoverReceta: un anillo primary y un leve desplazamiento hacia arriba. Sin sombras difusas.

Uso

SOAP 2027Vigente hasta el 31 de marzo
Sí
Una Card por unidad de información, con espacio interno generoso.
SOAP 2027Vigente
No
Cards default anidadas. Los bordes se acumulan y la jerarquía se pierde.
Multas JTRX-12
2 pendientes$64.200
Sí
Para un bloque interno, usa Filled dentro de una Card default.
TAG a domicilio

Instalación en 24 horas

No
Un botón dentro de una Card tocable. Dos acciones superpuestas confunden el toque.

Código

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

<Card className='p-5'>Mantención 10.000 km</Card>
<Card variant='filled' className='p-5'>Resumen</Card>
<Card
  as='button'
  onClick={onSelect}
  className='p-5 text-left transition-all hover:-translate-y-0.5 hover:ring-2 hover:ring-primary/30 focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:outline-none'
>
  TAG a domicilio
</Card>