# Valuation Card

> Real-estate figures: ValuationCard (estimate with range and asking price), SavedSearch (a search that runs on its own and reports new hits) and EnergyClass (the energy label scale).

Component · Real estate · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/ValuationCard/)

Real-estate figures: `ValuationCard` (estimate with range and asking price), `SavedSearch` (a search that runs on its own and reports new hits) and `EnergyClass` (the energy label scale).

ValuationCard: `value`, `low`, `high`, `asking`, `perSqm`, `compare`, `currency`, `confidence` (0–1) or `confidenceLabel`, `facts` (KeyValue items), `note`, `title`, `action`.
SavedSearch: `name`, `criteria` (strings), `lastRun`, `frequency`, `newCount`, `enabled` + `onToggle`, `onEdit`, `onOpen`, `openLabel`, `icon`, `tint`.
EnergyClass: `value`, `kwh`, `kind`, `scale` (default A+…H).

## Example

```tsx
import * as React from "react";
import { EnergyClass, SavedSearch, ValuationCard } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "1fr 1fr",
          gap: 16,
          alignItems: "start",
        } as React.CSSProperties
      }
    >
      <div className="tf-panel">
        <ValuationCard
          value={612000}
          low={571000}
          high={655000}
          asking={649000}
          perSqm={7286}
          compare="district average €6,940"
          confidence={0.78}
          facts={[
            ["Comparables", "42 sales, last 18 months"],
            ["Method", "Comparable sales"],
            ["As of", "Nov 8, 2026"],
          ]}
          note="An estimate, not an appraisal."
        />
      </div>
      <div
        className="tf-col"
        style={{
          gap: 16,
        }}
      >
        <SavedSearch
          name="Eppendorf 3 rooms"
          criteria={[
            "Buy",
            "Hamburg-Eppendorf",
            "€400k–700k",
            "70–110 m²",
            "3+ rooms",
            "Private sellers",
          ]}
          lastRun="06:00"
          frequency="Daily mail"
          newCount={4}
          onToggle={() => {}}
          onEdit={() => {}}
          onOpen={() => {}}
        />
        <div
          className="tf-panel"
          style={{
            gap: 12,
          }}
        >
          <b>Energy</b>
          <EnergyClass value="C" kwh={92} kind="Consumption · gas" />
        </div>
      </div>
    </div>
  );
}
```

## Props

### EnergyClass

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | Required |
| `kwh?` | `number` |  |
| `kind?` | `string` |  |
| `scale?` | `string[]` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### SavedSearch

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `criteria?` | `ReactNode[]` |  |
| `lastRun?` | `string` |  |
| `frequency?` | `string` |  |
| `newCount?` | `number` |  |
| `enabled?` | `boolean` |  |
| `onToggle?` | `() => void` |  |
| `onEdit?` | `() => void` |  |
| `onOpen?` | `() => void` |  |
| `openLabel?` | `string` |  |
| `icon?` | `IconName` |  |
| `tint?` | `Tint` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### ValuationCard

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `number` | Required |
| `low` | `number` | Required |
| `high` | `number` | Required |
| `asking?` | `number` |  |
| `perSqm?` | `number` |  |
| `compare?` | `string` |  |
| `currency?` | `string` |  |
| `confidence?` | `number` |  |
| `confidenceLabel?` | `string` |  |
| `facts?` | `KeyValueItem[]` |  |
| `note?` | `ReactNode` |  |
| `title?` | `string` |  |
| `action?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |