# Insight Card

> Something the assistant noticed: what, where it comes from, why it is shown and what to do.

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

Something the assistant noticed: what, where it comes from, why it is shown and what to do.

- `sources` are chips like the ones under chat answers; `why` folds away behind "Why am I seeing
  this?".
- `onAccept` (with `acceptLabel`), `onSnooze` and `onDismiss` add the actions.
- `tone` sets the accent: info, success, warning or highlight.

## Example

```tsx
import { InsightCard } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div className="tf-col" style={{ gap: 16, maxWidth: 560 }}>
      <InsightCard
        tone="warning"
        icon="zap"
        meta="Money · 2 h ago"
        title="Your electricity bill went up 18 %"
        sources={[
          { title: "Bank account · Nov debit", icon: "card" },
          { title: "Tariff letter (PDF)", icon: "file" },
        ]}
        why="Your monthly debit rose from €84 to €99 in November. The new tariff letter from your supplier names a price change from 1 November."
        acceptLabel="Compare tariffs"
        onAccept={() => {}}
        onSnooze={() => {}}
        onDismiss={() => {}}
      >
        At your usage, switching to a fixed tariff would save about €140 a year.
      </InsightCard>
      <InsightCard
        tone="success"
        icon="moon"
        meta="Sleep · this week"
        title="You slept 40 minutes longer on walk days"
        sources={[
          { title: "Watch · sleep", icon: "moon" },
          { title: "Habits", icon: "check" },
        ]}
        onDismiss={() => {}}
      >
        On the five days with a morning walk you fell asleep earlier and woke up less often.
      </InsightCard>
    </div>
  );
}
```

## Props

### InsightCard

| 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 |
| `children?` | `ReactNode` |  |
| `icon?` | `IconName` |  |
| `tone?` | `"info" \| "success" \| "warning" \| "highlight"` |  |
| `meta?` | `ReactNode` | Above the title: area and time ("Money · 2 h ago"). |
| `sources?` | `Source[]` | Where the insight comes from, as chips (like chat sources). |
| `why?` | `ReactNode` | Why the assistant shows it; folded away behind "Why am I seeing this?". |
| `onAccept?` | `() => void` |  |
| `acceptLabel?` | `string` |  |
| `onSnooze?` | `() => void` |  |
| `onDismiss?` | `() => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |