> For the complete documentation index, see [llms.txt](https://docs.notionapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.notionapps.com/how-to-guides/metric-card.md).

# Metric Card

## Metric Card

### Metric Card

Show a single number, formula, or rollup as a large, readable **Metric Card** on Details (and other view screens) — ideal for scores, totals, and KPIs.

{% hint style="info" %}
**What changed**\
A new view component, **Metric Card**, binds to Notion **number**, **formula**, or **rollup** fields and renders the value prominently instead of burying it in a standard Details row.
{% endhint %}

***

#### What you get

| Capability            | Maker setup                     | End-user result                      |
| --------------------- | ------------------------------- | ------------------------------------ |
| Large numeric display | Add **Metric Card**, bind field | Big value (for example Score `92`)   |
| Field types           | Number, formula, rollup         | Same number Notion shows             |
| Placement             | Details (or other view layouts) | Sits with your other view components |

![Details screen including Metric Card for Score](https://iili.io/Cwe3bnI.png)

***

#### Before you start

* A Notion property that is **number**, **formula**, or **rollup**
* A **Details** (or view) screen for that database
* **Reload Data** after the property exists in Notion

***

#### Step 1 — Add Metric Card

1. Open the Details screen in the builder.
2. Choose **Add component** → **Metric Card**.
3. Bind it to your number / formula / rollup field (for example **Score**).
4. Set the label if you want a title above the value.

***

#### Step 2 — Preview and publish

1. Select a record that has a non-empty value.
2. Confirm the Metric Card shows the expected number in preview.
3. **Publish** and open the same record in the live app.

![Details components including Metric Card before final assert](https://iili.io/Cwe3QuR.png)

***

#### Checklist

* [ ] Metric Card bound to number, formula, or rollup
* [ ] Preview shows the correct value for a sample record
* [ ] Published Details matches preview
* [ ] Empty values look acceptable (no crash / blank layout break)

***

#### Troubleshooting

| Symptom                  | Likely cause                              | Fix                                                        |
| ------------------------ | ----------------------------------------- | ---------------------------------------------------------- |
| Card empty               | Formula/rollup not computed in Notion yet | Fill source props in Notion; Reload Data                   |
| Wrong field type         | Bound to text/status                      | Re-bind to number/formula/rollup                           |
| Value formatting differs | Formula display limits from Notion API    | Confirm value in Notion; see formula docs for known limits |

***

#### Related reading

* [Board layouts and Details polish (overview)](https://docs.notionapps.com/guides/board-layouts-and-details-polish)
* [Formulas & Rollups](https://docs.notionapps.com/customize/formulas-and-rollups)
* [20 Jul 2026 Release](https://docs.notionapps.com/release-notes/20-jul-2026-release)

## Annotated builder screenshots

![Annotated builder screenshot: List Appearance](https://4233028229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5ZqDXcVVffWUqEIZVhmn%2Fuploads%2FkHDXh2VqYnQxiFHzt1cY%2Fp23-1786203265-12-14-section-appearance.jpg?alt=media)

![Annotated builder screenshot: List Data](https://4233028229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5ZqDXcVVffWUqEIZVhmn%2Fuploads%2F6oSVDWe8351TnibEXCQG%2Fp23-1786203265-13-02-section-data.jpg?alt=media)

## Complete Builder Options Reference

Metric-style presentations reuse List **Data** and **Appearance** controls (View Type / Style / mapped fields). See [List (View Items)](https://docs.notionapps.com/screens-and-components/types-of-screens/list-view-items) for the full option inventory.

#### Data mappings used as metrics

**What it does:** Chooses which properties feed the card’s primary number/label.\
**How to use it:** Map the numeric or status field users care about first.\
**Why / recommended default:** One metric idea per card; avoid overcrowding Caption/Tag.