# Goal Card

> A goal with its progress toward a target, a due date, milestones and a note.

Component · Life · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/GoalCard/)

A goal with its progress toward a target, a due date, milestones and a note.

- `format` shows value and target as a number (with `unit`), money or a percentage.
- The bar is a progressbar with the value in words ("€3,100 of €5,000").

## Example

```tsx
import type * as React from "react";
import { GoalCard } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "repeat(2, minmax(0, 1fr))",
          "--cols-sm": "1fr",
          gap: 16,
        } as React.CSSProperties
      }
    >
      <GoalCard
        title="Emergency fund"
        icon="wallet"
        tint="mint"
        value={3100}
        target={5000}
        format="money"
        due={new Date(2027, 5, 1)}
        note="€275 a month keeps you on track."
      />
      <GoalCard
        title="Run a half marathon"
        icon="trend"
        tint="blush"
        value={14}
        target={21}
        unit="km"
        due={new Date(2027, 3, 26)}
        milestones={[
          { label: "5 km without a break", done: true },
          { label: "10 km under an hour", done: true },
          { label: "15 km long run" },
          { label: "Race day" },
        ]}
      />
    </div>
  );
}
```

## Props

### GoalCard

| Prop | Type | Notes |
| --- | --- | --- |
| `surface?` | `Surface` | `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. |
| `title` | `string` | Required |
| `value` | `number` | Required |
| `target` | `number` | Required |
| `format?` | `"number" \| "money" \| "percent"` | How to show value and target (default number). |
| `unit?` | `string` | Unit after numbers ("km", "books"). |
| `currency?` | `string` |  |
| `due?` | `Date \| string \| number` |  |
| `icon?` | `IconName` |  |
| `tint?` | `Tint` |  |
| `milestones?` | `{ label: string; done?: boolean }[]` |  |
| `note?` | `ReactNode` | A note under the progress ("€250 a month keeps you on track"). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |