AccountCard

Molecules

Feature-rich account card displaying account type, name, balance, trend indicator, and action buttons. Minimum 300x200px with elevation shadow and optional interactive states. Ideal for dashboard account overviews and financial summaries.

Examples

Checking Account

Basic checking account with positive balance.

Personal Checking

•••• 1234

$5,432.10

Available

Code:

<AccountCard
  accountType="checking"
  accountName="Personal Checking"
  balance={5432.10}
  accountNumber="1234"
/>

Savings with Upward Trend

Savings account showing positive growth trend.

Emergency Fund

•••• 5678

$12,500.00

Available

+2.5%

Code:

<AccountCard
  accountType="savings"
  accountName="Emergency Fund"
  balance={12500.00}
  accountNumber="5678"
  trend="up"
  trendValue="+2.5%"
  action={{
    label: 'Deposit',
    onClick: () => console.log('Deposit'),
    icon: 'add'
  }}
/>

Credit Card with Balance Due

Credit card showing negative balance (debt) with downward trend.

Platinum Card

•••• 9012

−$1,234.56

Available

-15% from limit

Code:

<AccountCard
  accountType="credit"
  accountName="Platinum Card"
  balance={-1234.56}
  accountNumber="9012"
  trend="down"
  trendValue="-15% from limit"
  action={{
    label: 'Pay Now',
    onClick: () => console.log('Pay'),
    variant: 'primary'
  }}
  secondaryAction={{
    label: 'View Transactions',
    onClick: () => console.log('View')
  }}
/>

Investment Account

Investment account with neutral trend and actions.

Growth Portfolio

$45,678.90

Available

0.0% today

Code:

<AccountCard
  accountType="investment"
  accountName="Growth Portfolio"
  balance={45678.90}
  trend="neutral"
  trendValue="0.0% today"
  action={{
    label: 'Trade',
    onClick: () => console.log('Trade'),
    variant: 'primary'
  }}
  secondaryAction={{
    label: 'Reports',
    onClick: () => console.log('Reports')
  }}
/>

Interactive Card

Clickable card with hover and focus states.

Business Checking

•••• 3456

$25,000.00

Available

+$1,250

Code:

<AccountCard
  accountType="checking"
  accountName="Business Checking"
  balance={25000.00}
  accountNumber="3456"
  trend="up"
  trendValue="+$1,250"
  onClick={() => alert('Card clicked - navigate to details')}
/>

Account Grid

Multiple account cards in a responsive grid layout.

Checking

$5,432.10

Available

+$150

Savings

$12,500.00

Available

+2.5%

Credit Card

−$1,234.56

Available

-15%

Code:

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '16px' }}>
  <AccountCard
    accountType="checking"
    accountName="Checking"
    balance={5432.10}
    trend="up"
    trendValue="+$150"
  />
  <AccountCard
    accountType="savings"
    accountName="Savings"
    balance={12500.00}
    trend="up"
    trendValue="+2.5%"
  />
  <AccountCard
    accountType="credit"
    accountName="Credit Card"
    balance={-1234.56}
    trend="down"
    trendValue="-15%"
  />
</div>

Props

Prop	Type	Default	Required	Description
`accountType`	`'checking' \| 'savings' \| 'credit' \| 'investment' \| 'loan'`	—	Required	Type of account determining the icon displayed in the header
`accountName`	`string`	—	Required	Display name of the account shown as h4 heading
`balance`	`number`	—	Required	Account balance displayed in large xlarge size with bold weight
`accountNumber`	`string`	—	—	Last 4 digits of account number shown as •••• 1234 in subdued caption text
`trend`	`'up' \| 'down' \| 'neutral'`	—	—	Trend direction showing balance change with directional arrow icon
`trendValue`	`string`	—	—	Trend value text (e.g., "+2.5%" or "$150") displayed with trend icon
`action`	`{ label: string; onClick: () => void; icon?: IconName; variant?: 'primary' \| 'secondary' \| 'naked' }`	—	—	Primary action button with label, click handler, optional icon and variant
`secondaryAction`	`{ label: string; onClick: () => void; icon?: IconName; variant?: 'primary' \| 'secondary' \| 'naked' }`	—	—	Secondary action button (defaults to naked variant) with label and click handler
`currency`	`string`	`'AUD'`	—	Currency code for balance display (passed to MoneyDisplay component)
`onClick`	`() => void`	—	—	Click handler making entire card interactive with hover, active, and focus states
`data-testid`	`string`	—	—	Test identifier. Propagates to balance and action buttons with suffixes.

Design Tokens Used

component.accountCard.header.minHeightcomponent.accountCard.minWidthsemantic.space.400semantic.space.300semantic.space.200semantic.space.100semantic.color.fill.mutedsemantic.color.fill.inversesemantic.color.border.defaultsemantic.radius.mdsemantic.color.icon.accentsemantic.color.icon.inversesemantic.color.text.mutedsemantic.color.text.successsemantic.color.text.dangersemantic.typography.h4semantic.typography.captionsemantic.elevation.floatingsemantic.elevation.raisedsemantic.border.focussemantic.border.focusOffsetsemantic.motion.duration.moderatesemantic.motion.easing.decelerate

Accessibility

General Notes:

• Uses role="article" for non-interactive cards and role="button" for clickable cards• Keyboard accessible with Tab, Enter, and Space key support for interactive cards• Descriptive aria-label on clickable cards includes account name and balance• Account type icon has descriptive aria-label• Trend icon has descriptive aria-label indicating direction• Focus visible outline with 2px border and offset meets WCAG 2.2 AA• Action buttons maintain full keyboard and screen reader accessibility• Card elevation and hover states provide visual feedback for interactivity• Trend colors (green/red) provide additional context but not sole indicator

Keyboard Navigation:

Tab: Focus card (if clickable) or actions | Enter/Space: Activate card onClick | Tab through action buttons

Screen Reader:

Announces account type, name, balance, optional account number, trend information, and available actions

Color Contrast:

All text and icons meet WCAG AA contrast (4.5:1). Trend colors provide context but text labels ensure clarity

Focus Management:

Interactive cards receive focus with visible outline. Action buttons maintain independent focus states.

Anatomy

Card container with header section, balance display, optional trend, and action buttons

Structure Diagram:


┌──────────────────────────────────────┐
│ Box (300x200 min)                    │
│ ┌──────────────────────────────────┐ │
│ │ StyledHeader                     │ │
│ │  ┌────┐  Account Name            │ │
│ │  │Icon│  •••• 1234               │ │
│ │  └────┘                          │ │
│ └──────────────────────────────────┘ │
│                                      │
│ ┌──────────────────────────────────┐ │
│ │ BalanceSection                   │ │
│ │  Balance (caption, subdued)      │ │
│ │  $12,345.67 (xlarge, bold)       │ │
│ │  ↑ +2.5% (xs icon + caption)     │ │
│ └──────────────────────────────────┘ │
│                                      │
│ ┌──────────────────────────────────┐ │
│ │ StyledActions                    │ │
│ │  [Primary Button] [Secondary]    │ │
│ └──────────────────────────────────┘ │
└──────────────────────────────────────┘

Component Parts:

Box (Card Container)Root Box component with min dimensions, padding, border, and shadow

semantic.space.400semantic.color.fill.mutedsemantic.color.border.default

StyledHeaderHeader section with flex layout containing icon and account name/number

semantic.space.300

StyledIconWrapperIcon container with inverse background color, rounded corners, and fixed dimensions (40x40px)

semantic.color.fill.inversesemantic.radius.mdsemantic.color.icon.accent

Account Type IconMedium-sized icon indicating account type with inverse color

semantic.color.icon.inverse

Account NameH4 heading for account display name

semantic.typography.h4

Account NumberOptional last 4 digits in subdued caption text with bullet prefix

semantic.typography.captionsemantic.color.text.muted

StyledBalanceSectionBalance display area with label, amount, and optional trend

semantic.space.400

Balance LabelCaption text reading "Balance" in subdued color

semantic.typography.captionsemantic.color.text.muted

MoneyDisplayLarge balance display (xlarge size, bold weight) with currency formatting

StyledTrendSectionTrend indicator with directional icon and value text

semantic.space.100semantic.space.200

Trend IconSmall directional arrow (up/down/right) with semantic color

semantic.color.text.successsemantic.color.text.dangersemantic.color.text.muted

Trend ValueCaption text showing trend percentage or amount with matching color

semantic.typography.caption

StyledActionsAction button container with flex layout and equal-width buttons

semantic.space.200

Additional Notes

• Composes from Stack, Box, Icon, Typography, MoneyDisplay, and Button atoms• Minimum dimensions 300x200px ensure consistent card sizes in grids• Elevation shadow provides depth and hierarchy• Interactive cards raise their shadow on hover• Account type icons use placeholder icons until custom financial icons added• Trend indicators use directional arrows with semantic colors (green=up, red=down, gray=neutral)• Action buttons expand to fill available width with equal distribution• Primary action defaults to primary variant, secondary to naked variant• Balance displayed in xlarge bold for prominent visibility• Account number masked with bullets (••••) for security indication• Works in grid layouts with responsive wrapping• data-testid propagates to balance and action buttons for testing