Real-scale credit cards with responsive viewports, supporting VISA, Mastercard, AMEX, and empty states
Payment & Credit Card Mockups
Real-scale credit card dimensions (85.60mm × 53.98mm ≈ 324×204px). They scale down automatically on narrow mobile viewports.
VISA (populated)
•••• •••• •••• 4242
Cardholder
Mario Rossi
Expiry
12/28
CVC
•••
Mastercard
•••• •••• •••• 5555
Cardholder
Jane Smith
Expiry
09/27
CVC
•••
AMEX
•••• ••••• •••• 1004
Cardholder
Alex Johnson
Expiry
03/29
CVC
1234
Empty / Add Card State
Interactive Integration
The NkCreditCard component can be wired with local form fields to provide live updates of the numbers, expiry, and name as they are typed.
<NkCreditCard
cardNumber={watchCardNumber || '•••• •••• •••• ••••'}
cardName={watchCardName || 'Cardholder Name'}
expiry={watchExpiry || 'MM/YY'}
cvc={watchCvc || '•••'}
cardType={detectedCardType}
/>