Account Card

A bank account summary card showing balance, account number, and type.

Preview · Account Card

Code

HTML · @primus/ui-core

<div class="card" style="max-width:300px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary),black 30%));color:white;border:none">
  <p style="margin:0 0 1rem;font-size:0.75rem;opacity:0.8;text-transform:uppercase;letter-spacing:0.06em">Checking Account</p>
  <p style="margin:0 0 0.25rem;font-size:1.75rem;font-weight:700">$24,891.00</p>
  <p style="margin:0 0 1.25rem;font-size:0.8rem;opacity:0.75">Available balance</p>
  <div style="display:flex;justify-content:space-between;align-items:center">
    <span style="font-size:0.8rem;opacity:0.8">•••• •••• •••• 4242</span>
    <span class="badge" style="background:rgba(255,255,255,0.2);color:white">Active</span>
  </div>
</div>

React

import { PrimusAccountCard } from '@/components/ui/primus-account-card';

<PrimusAccountCard
  account={{
    id: 'acc-1',
    accountNumber: '4242424242424242',
    accountType: 'checking',
    balance: 24891,
    currency: 'USD',
    status: 'active',
  }}
  onViewDetails={(account) => console.log(account)}
  onTransfer={(account) => console.log('Transfer from', account.accountNumber)}
/>

Angular

<primus-account-dashboard [apiUrl]="'https://api.yourdomain.com'">
</primus-account-dashboard>

Props

Prop	Type	Default	Description
account	Account	required	Account data to display
onViewDetails	(account: Account) => void	—	View account details
onTransfer	(account: Account) => void	—	Initiate a transfer

TypeScript interfaces

interface Account {
  id:               string;
  accountNumber:    string;
  accountType:      'checking' | 'savings' | 'business';
  balance:          number;
  currency:         string;
  status:           'active' | 'frozen' | 'closed';
  lastTransaction?: string;   // ISO 8601
}

Events

Event	Type	Description
onViewDetails	(account: Account) => void	Fires when "View Details" is clicked
onTransfer	(account: Account) => void	Fires when "Transfer" is clicked

Version history

See the Changelog for version history and breaking changes.