'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
PaymentCard
Una tarjeta bancaria como imagen: emisor, final del número, titular y vencimiento sobre un degradado. Las tarjetas congeladas se vuelven grises con un copo de nieve.
import { PaymentCard } from '@alea/ui';
Ejemplos
Tarjetas en una billetera
Un tono por tarjeta. Los lectores de pantalla oyen una frase por tarjeta.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…
Space
--alea-space-2…--alea-space-5…
Radius
--alea-radius-lg…
Type
--alea-font-family-mono…--alea-font-size-lg…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Shadow
--alea-shadow-card…--alea-shadow-pop…
Motion
--alea-motion-ease-emphasized…
Component
--alea-motion-duration-normal…
Props
PaymentCard props
Una tarjeta bancaria como imagen: emisor, final del número, titular y vencimiento sobre un degradado. Una sola imagen para lectores de pantalla ("Tarjeta física de Ana, termina en 4410").
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
holderobligatoria | string | - | El nombre en la tarjeta. |
last4obligatoria | string | - | Los últimos cuatro dígitos. |
brand | ReactNode | - | El nombre del emisor, arriba a la izquierda. |
className | string | - | Clases extra para el elemento raíz. |
expiry | string | - | MM/AA. |
frozen | boolean | - | Congelada: apagada, con un copo de nieve. |
href | string | - | Convierte la tarjeta en un enlace (a sus detalles), nombrado como la imagen. |
kind | string | - | Física, Virtual, Débito… arriba a la derecha. |
tone | "accent" | "graphite" | "emerald" | "indigo" | "sunset" | 'accent' | El color de la tarjeta. Por defecto accent (sigue el tema). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
toneaccentgraphiteemeraldindigosunset- Estados
- Hover
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-payment-card.alea-payment-card-top.alea-payment-card-brand.alea-payment-card-kind.alea-payment-card-number.alea-payment-card-bottom- Atributos data
data-tone=graphitedata-tone=emeralddata-tone=indigodata-tone=sunsetdata-frozen
Accesibilidad
- Una sola imagen para lectores de pantalla, nombrada con el tipo, el titular, el final y si está congelada.
- El texto mantiene 4.5:1 en todos los tonos.
Qué hacer y qué evitar
Hacer
- Muestra solo los últimos cuatro dígitos.
- Da a cada tarjeta de una persona un tono distinto.
Evitar
- No muestres el número completo ni el código de seguridad.
En Figma
Payment card con Tone y Frozen.