Credit Card Visual

Visual credit card component showing number, holder name, expiry, and brand.

Preview · Credit Card Visual

Code

HTML · @primus/ui-core

<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>

React

import { PrimusCreditCard } from '@/components/ui/primus-credit-card';

<PrimusCreditCard
  card={{
    id: 'card-1',
    cardNumber: '4111111111114242',
    holderName: 'Jane Doe',
    expiryDate: '12/28',
    type: 'visa',
    variant: 'platinum',
    balance: 1250,
    limit: 10000,
  }}
  onViewTransactions={(card) => console.log('Transactions for', card.id)}
  onManage={(card) => console.log('Manage', card.id)}
/>

Angular

<primus-credit-card cardHolder="Jane Doe" last4="4242"
  expiry="12/28" brand="visa" variant="platinum">
</primus-credit-card>

Props

Prop	Type	Default	Description
card	Card	required	Card data to display
showDetails	boolean	false	Show the full unmasked card number
onViewTransactions	(card: Card) => void	—	View transaction history
onManage	(card: Card) => void	—	Manage card settings

TypeScript interfaces

interface Card {
  id:          string;
  cardNumber:  string;   // Full number; masked unless showDetails=true
  holderName:  string;
  expiryDate:  string;   // e.g. '12/28'
  type:        'visa' | 'mastercard' | 'amex' | 'discover';
  variant:     'platinum' | 'gold' | 'standard' | 'business';
  balance?:    number;
  limit?:      number;
}

Version history

See the Changelog for version history and breaking changes.