'/%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}
Data display
PaymentCard
A bank card as a picture: issuer, number ending, holder and expiry on a gradient. Frozen cards turn grey with a snowflake.
import { PaymentCard } from '@alea/ui';
Examples
Cards in a wallet
One tone per card. Screen readers hear one sentence per card.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
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
A bank card as a picture: issuer, number ending, holder and expiry on a gradient. One image for screen readers ("Physical card for Ana, ending 4410").
| Prop | Type | Default | Description |
|---|---|---|---|
holderrequired | string | - | The name on the card. |
last4required | string | - | The last four digits. |
brand | ReactNode | - | The issuer's name, top left. |
className | string | - | Extra class names for the root element. |
expiry | string | - | MM/YY. |
frozen | boolean | - | Frozen: muted, with a snowflake. |
href | string | - | Makes the card a link (to its details), named like the picture. |
kind | string | - | Physical, Virtual, Debit… shown top right. |
tone | "accent" | "graphite" | "emerald" | "indigo" | "sunset" | 'accent' | The card's color. Default accent (follows the theme). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
toneaccentgraphiteemeraldindigosunset- States
- Hover
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-payment-card.alea-payment-card-top.alea-payment-card-brand.alea-payment-card-kind.alea-payment-card-number.alea-payment-card-bottom- Data attributes
data-tone=graphitedata-tone=emeralddata-tone=indigodata-tone=sunsetdata-frozen
Accessibility
- One image for screen readers, named with the kind, holder, ending and whether it is frozen.
- The text keeps 4.5:1 on every tone.
Do and don't
Do
- Show only the last four digits.
- Give each card of a person a different tone.
Don't
- Don't show a full card number or the security code.
In Figma
Payment card with Tone and Frozen.