skrewww

Industries · Banking

Banking Account Card

Banking Account Card is a summary card for one financial account — account type, current balance, a compact balance-history sparkline, and an action button.

No top-level variants of its own — inherits Card's elevation and Layer 3 Shape/Surface modes

betaReact AvailableFigma UnavailableDocs Partial
React last updated
2026-07-25
Documentation last updated
2026-07-25
Accessibility target
WCAG 2.2 AA (target)
Version
0.1.0-beta

Known open questions

  • No Figma reference exists for this component or for Industry Systems generally — confirmed absent via full file search on 2026-07-25, not an oversight.
  • Line Chart gained an additive `sparkline` prop for this component's balance-history treatment — a genuine Layer 2 extension (suppresses point-marker dots, uses a thinner stroke), not a Banking-specific style override (see components/ui/LineChart.tsx).
  • Glass Surface + Pill Shape inheritance was verified live (not assumed) — this component sets no background-color or border-radius of its own anywhere in its stylesheet; every surface property comes from Card's own custom properties.

Account summary

Composes Card, Tag, Button, and Line Chart in sparkline mode for the balance-history trend.

Checking and savings

Everyday Checking

Rainy Day Fund

Shape and surface inheritance

Pill shape + Flat surface

Everyday Checking

Glass surface

Everyday Checking

Account Card sets no background-color or border-radius of its own — both modes above come entirely from Card’s own --surface-fill-default and --shape-radius-container custom properties through the CSS cascade.

Purpose

Banking Account Card is a summary card for one financial account — account type, current balance, a compact balance-history sparkline, and an action button. The second Layer 4 Industry Systems pilot component; React-first, no Figma reference exists yet.

Anatomy

Composes: Card (surface shell, title + footer slots) + Tag (account type) + Button (action trigger, in Card's footer slot) + Line Chart in sparkline mode (balance history).

When to use

Dashboards or account-list views showing one account's current state and short-term balance trend at a glance.

When not to use

Detailed transaction history for an account — compose Banking Transaction Row items in a list instead; Account Card is a summary, not a ledger.

Accessibility

The balance-history chart is exposed via role="img" with an accessible name plus a visually-hidden data table (Line Chart's own accessibility model) — sparkline mode changes only the visual density, not the accessibility tree.

Common mistakes

Hardcoding the card's background or border-radius instead of leaving Card's own --surface-fill-default / --shape-radius-container custom properties untouched, which is what makes Glass Surface and Pill Shape modes repaint automatically.

Properties

accountName, accountType, balance, balanceHistory (LineChartDatum[]), balanceHistoryLabel, actionLabel, onAction.

Does Account Card need its own Surface/Shape handling?

No — it inherits Card's `--surface-fill-default` and `--shape-radius-container` custom properties entirely through the CSS cascade. Verified live in Glass Surface + Pill Shape mode rather than assumed from Card's own behavior.

Why does Line Chart need a sparkline prop instead of just a small height?

Line Chart's base design already has no axes, gridlines, or legend, so a small height alone gets most of the way there — but its hollow-ring point-marker dots are unconditional in the base design and dominate the visual at sparkline scale. The additive `sparkline` prop suppresses them and uses a thinner stroke.

Tokens used

semantic/text/primarysemantic/text/secondary

Component API

PropTypeDefaultDescription
accountNamestring—Shown as the Card's title heading.
accountTypestring—e.g. "Checking", "Savings", "Credit" — shown as a Tag.
balancestring—Pre-formatted balance string (e.g. "$4,231.09") — currency formatting is the consumer's responsibility.
balanceHistoryLineChartDatum[]—Recent balance history for the sparkline — same shape as Line Chart's own data prop.
balanceHistoryLabelstring—Accessible name for the sparkline chart.
actionLabelstring—Label for the footer action button.
onAction() => void—Called when the action button is activated.

React example

Copy React example
import { BankingAccountCard } from "@/components/ui/BankingAccountCard";

export function Example() {
  return (
    <BankingAccountCard
      accountName="Everyday Checking"
      accountType="Checking"
      balance="$4,231.09"
      balanceHistory={[
        { label: "Week 1", value: 4100 },
        { label: "Week 2", value: 4180 },
        { label: "Week 3", value: 4050 },
        { label: "Week 4", value: 4231 },
      ]}
      balanceHistoryLabel="30-day balance history for Everyday Checking"
      actionLabel="View transactions"
      onAction={() => undefined}
    />
  );
}

Related components

Related tokens

Related concepts