# Net Worth Card

> What you own minus what you owe: the total, its change and trend, and the assets and liabilities behind it.

Component · Life · Halo kit · [Live page](https://ui.twentyfirst.media/halo/components/NetWorthCard/)

What you own minus what you owe: the total, its change and trend, and the assets and liabilities
behind it.

## Example

```tsx
import { NetWorthCard } from "@twentyfirstmedia/halo";

export default function Preview() {
  return (
    <NetWorthCard
      style={{ maxWidth: 620 }}
      change={1240}
      changeLabel="since October"
      history={[38200, 38900, 39400, 39100, 40300, 41000, 41800, 42900]}
      assets={[
        { label: "Current account", value: 4820, icon: "card" },
        { label: "Savings", value: 12600, icon: "wallet" },
        { label: "ETF portfolio", value: 31450, icon: "chart" },
        { label: "Pension fund", value: 9800, icon: "shield" },
      ]}
      liabilities={[
        { label: "Car loan", value: 11200, icon: "key" },
        { label: "Credit card", value: 670, icon: "card" },
      ]}
    />
  );
}
```

## Props

### NetWorthCard

| Prop | Type | Notes |
| --- | --- | --- |
| `surface?` | `Surface` | `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. |
| `assets` | `{ label: string; value: number; icon?: IconName }[]` | Required |
| `liabilities?` | `{ label: string; value: number; icon?: IconName }[]` |  |
| `history?` | `number[]` | Net worth over time, oldest first. |
| `change?` | `number` | Change over `changeLabel` (e.g. +1,240 "since October"). |
| `changeLabel?` | `string` |  |
| `currency?` | `string` |  |
| `title?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |