# BalanceCard

> The hero: one trusted number.

Source: https://lopifi.com/components/balance-card
Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com)

---

- **Family:** Cards — 
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/02-cards

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/balance-card
```

## Specification

> The hero. One trusted number. This is the component a user opens the product to see.

**Layer 1:** radius 24 · inset 24 · min-width 280 · height auto
**Layer 2:**
```
┌─ 24 ────────────────────────────────┐
│  [eyebrow]  ·  [account mark]        │  ← row, space-between
│   8                                  │
│  [figure]                            │
│   8                                  │
│  [delta]  ·  [as-of]                 │
│  16                                  │
│  ├─ full-bleed sparkline ──────────┤ │  ← optional, bleeds to 3 edges
└──────────────────────────────────────┘
```
**Layer 3:** eyebrow (1 line, truncate) · figure (never truncates) · delta (1 line) · media (`aspect-[4/1]`, full-bleed) · actions (max 2)
**Layer 4:**

| Slot | Token | Weight | Color |
|---|---|---|---|
| eyebrow | `label` 13/16 | 500 | `--text-secondary` |
| figure | `figure-hero` 40/48 | 500 | `--text-primary` |
| delta | `caption` 12/16 | 400 | semantic |

**3 sizes, 2 weights ✓**

**Available vs. current.** A bank balance has two values and they differ. Show **available** as the figure; current as a secondary line when they diverge. Conflating them is the most consequential copy error in consumer banking UI.

**Motion:** none at rest. Value flash when live. Sparkline draws once. Interactive variant gets press `scale(0.97)` and a 1px hover lift.

**Responsive:** figure steps 40 → 28 below a 280px container. Sparkline drops below 240px.

**Edge cases:** negative balance (overdraft — parens *and* a `--negative` figure, plus an explicit "Overdrawn" pill) · redacted · stale (dim to 0.7 + `StaleIndicator`) · very long account name.

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.