Card
El contenedor del sistema: plano con borde o elevado con sombra, nunca las dos.
Usar
import {
Card,
KpiCard,
} from "@unozero-ai/ui/react";
<Card></Card>Configurador
Cambia las props y mira el componente y su código al mismo tiempo.
<Card heading="Política de cancelación">Gratis hasta 48 h antes de la llegada.</Card>Anatomía
heading y description forman la cabecera: el título en Manrope y la descripción en texto secundario, separados del cuerpo por un hairline y 16 px de aire. El slot header va a la derecha del título, para una insignia o una acción, y el slot footer separa las acciones del mismo modo. Cabecera y pie solo aparecen si tienen algo.
Sustituyen a CardHeader, CardTitle, CardDescription y CardFooter del kit React, que ya no existen. Los importes van en mono con tabular-nums para que se comparen en columna (la Regla de los Tres Papeles), y el pie lleva una sola acción rellena (la Regla de una Sola Decisión).
- Suite Junior · 3 noches
- $ 1.236.000
- Desayuno · 2 adultos
- $ 168.000
- IVA 19 %
- $ 266.760
Plana o elevada
Una superficie lleva borde o sombra, nunca las dos: es la Regla del O Uno o el Otro. default es plana, con un borde de 1 px y sin sombra, y es la tarjeta de casi todo el panel. elevated quita el borde y lleva sombra: úsala solo para lo que de verdad flota sobre el resto, como el resumen de una reserva.
No sumes un border o un shadow-* desde fuera, ni por className ni por ::part(base). Si una tarjeta plana no se distingue del fondo, el problema es el contraste del lienzo, no la tarjeta.
Gratis hasta 48 h antes de la llegada. Después se cobra la primera noche.
Suite Junior, del 14 al 17 de noviembre, 2 adultos. Total $ 1.670.760.
La tarjeta con filo
La firma del sistema no es la sombra, que es casi neutra, sino un hairline cian de 1 px en el canto superior de la tarjeta elevada (el light-catch). Solo se percibe de cerca y hace que la tarjeta se lea como un objeto con canto, no como un rectángulo pintado. Míralo en modo oscuro, donde es lo que define el borde.
Ese filo pertenece a los contenedores —tarjeta, modal, popover— y a nada más (la Regla del Light-Catch): ni a una cabecera, ni a la barra lateral, ni a un botón. Viene con variant="elevated"; no lo copies a mano.
Superficies de apoyo
simple rellena el fondo en gris suave y conserva el borde: agrupa contenido secundario dentro de otra vista, como una nota interna en la ficha de una reserva. ghost no pinta nada y solo aporta radio y padding, para alinear un bloque vacío o informativo con las tarjetas de al lado.
Nota interna
Pidió cuna para la habitación y llega en el vuelo de las 22:40.
Sin solicitudes especiales
El huésped no ha pedido nada para esta estancia.
Interactiva
Con href, la tarjeta entera es un enlace que se abre con teclado y, al pasar el ratón, sube 2 px, vira el borde a cian y enciende el glow. Es el único caso en que una tarjeta se mueve, y el glow cian está reservado a esto, al botón brand y al FAB (la Regla del Glow Reservado). En el kit React había que envolverla en un enlace; ahora no. No pongas botones dentro de una tarjeta con href.
hoverable pinta lo mismo sin href, pero la tarjeta sigue siendo un div: no la uses en tarjetas que no llevan a ningún sitio. Para que las tarjetas de una fila midan lo mismo, estira también su parte base, como aquí con [&::part(base)]:h-full.
KpiCard
Una métrica con su variación frente al periodo anterior. heading es su nombre (el title de KPICard en el kit React) y el icono va en el slot icon. changeType colorea el cambio en el tono de éxito o de error, pero el signo, la flecha y la unidad lo dicen primero (la Regla del Tenant): «+1,1 pp» en cancelaciones es malo aunque suba. Sin changeType el cambio queda neutro.
La cifra cuenta desde 0 la primera vez que entra en pantalla y conserva el formato que le das: escribe value ya formateado, con un espacio duro entre cifra y unidad. Con href, la tarjeta es un enlace a la métrica completa.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).