Bank Card
FinanceAnimated debit/credit card component with 5 themes, 3 card networks (Visa, Mastercard, Amex), physical/virtual/frozen variants, and number reveal interaction.
Import
import { FqBankCard } from '@/components/harlowui/finance/fq-bank-card'Themes
5 visual themes to match your brand and product tier.
Harlow Bank
Card Holder
Alex Morgan
Expires
12/27
Balance
$12,485.50
VISA
Harlow Bank
Card Holder
Alex Morgan
Expires
12/27
Balance
$4,200.00
Harlow Bank
Card Holder
Alex Morgan
Expires
12/27
Balance
$8,500.00
AMEX
Card States
Physical, virtual, and frozen card variants.
Physical
Harlow Bank
Card Holder
Alex Morgan
Expires
12/27
Balance
$12,485.50
VISA
Virtual
Harlow Bank
VirtualCard Holder
Alex Morgan
Expires
12/27
Balance
$12,485.50
Frozen
Harlow Bank
FrozenCard Holder
Alex Morgan
Expires
12/27
Balance
$0.00
VISA
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | "dark" | "gradient-orange" | "titanium" | "gradient-dark" | "light" | "dark" | Visual theme of the card |
cardType | "visa" | "mastercard" | "amex" | "visa" | Card network logo |
variant | "physical" | "virtual" | "frozen" | "physical" | Card state variant |
balance | number | - | Card balance to display |
bankName | string | "Harlow Bank" | Bank name displayed on card |
cardholderName | string | "Alex Morgan" | Cardholder name |
cardNumber | string | "4532015112830366" | Full card number |
expiryDate | string | "12/27" | Expiry date |