Credit Card Visual
Visual credit card component showing number, holder name, expiry, and brand.
Code​
- HTML · @primus/ui-core
- React
- Angular
<div style="max-width:300px;padding:1.25rem;border-radius:12px;background:linear-gradient(135deg,#1e1b4b,#312e81);color:white">
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem">
<div style="font-weight:700;letter-spacing:0.05em;font-size:0.9rem">PRIMUS</div>
<div style="font-size:0.7rem;opacity:0.8">VISA</div>
</div>
<p style="margin:0 0 0.5rem;letter-spacing:0.2em;font-size:0.975rem;font-family:monospace">•••• •••• •••• 4242</p>
<div style="display:flex;justify-content:space-between;font-size:0.75rem;opacity:0.8">
<span>JANE DOE</span><span>12/28</span>
</div>
</div>
import { CreditCardVisual } from 'primus-react-ui';
<CreditCardVisual cardHolder="Jane Doe" last4="4242"
expiry="12/28" brand="visa" variant="platinum" />
<primus-credit-card cardHolder="Jane Doe" last4="4242"
expiry="12/28" brand="visa" variant="platinum">
</primus-credit-card>
Props​
| Prop | Type | Default | Description |
|---|---|---|---|
cardHolder | string | — | Name on card |
last4 | string | — | Last 4 digits |
expiry | string | — | Expiry MM/YY |
brand | visa | mastercard | amex | — | Card network |
variant | black | blue | gold | platinum | black | Card theme |
Props — full reference​
| Prop | Type | Default | Description |
|---|---|---|---|
cardHolder | string | — | Name on card |
last4 | string | — | Last 4 digits |
expiry | string | — | Expiry MM/YY |
brand | 'visa' | 'mastercard' | 'amex' | 'discover' | — | Card network |
variant | 'black' | 'blue' | 'gold' | 'platinum' | 'black' | Visual theme |
masked | boolean | true | Show masked card number |
Version history
See the Changelog for version history and breaking changes.