Cash Card

Builds on Section Card with a fixed “Cash” title, then a total row (totalLabel, default Total cash) and per-currency rows (flag, code, amount). Pass onClick to make the whole card clickable (same exclusive action as Section Card). Use CashCardSkeleton while balances are fetching — same Section Card frame with pulse rows for the total and three currencies.

Usage

import { CashCard, CashCardSkeleton } from "@sophic/portal-ui";

<CashCard
  total="€6,205.12"
  balances={[
    { code: "EUR", amount: "€3,205.00", percent: 52 },
    { code: "USD", amount: "$2,100.00", percent: 34 },
  ]}
/>;

<CashCardSkeleton />;

Format amounts in the app (humanizeMoney, locale, etc.) — the card renders the strings you pass. percent is still accepted (0–100 share of total) for callers; the playground Cash card does not draw a bar.

Props

CashBalanceRow

CashCardSkeletonProps

Changelog

• 17 September 2026 — Optional totalLabel (home uses Total in EUR when the account base is EUR). Full notes
• 8 September 2026 — Currency rows are flag + amount (no progress bars); total is a row. Title stays inside the card. Full notes
• 8 September 2026 — Title sits inside the card via Section Card. Full notes
• 10 August 2026 — Optional onClick on CashCard / CashCardSkeleton for the Section Card chevron title. Full notes
• 3 August 2026 — CashCardSkeleton for loading cash sections. Full notes
• 29 July 2026 — Currency rows stack label/amount over the bar (Asset allocation layout). Full notes
• 24 July 2026 — Promoted from Blocks into Components. Full notes