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 { AccountDashboard } from 'primus-react-ui';

<AccountDashboard apiUrl="https://api.yourdomain.com" />

Angular

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

Props

Prop	Type	Default	Description
apiUrl	string	—	API base URL

TypeScript interfaces

interface AccountCardData {
  id:          string;
  type:        'checking' | 'savings' | 'credit';
  balance:     number;
  currency:    string;
  last4:       string;
  status:      'active' | 'frozen' | 'closed';
  holderName:  string;
}

Events

Event	Type	Description
onCardClick / (onCardClick)	(account: AccountCardData) => void	Fires when card is clicked

Version history

See the Changelog for version history and breaking changes.