> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/metric-card-component.md).

# Metric card component

Use a **Metric card** component to highlight one important number on a page. Metric cards work well for totals, counts, averages, and other summary values.

Before you add a **Metric card** component, make sure you have:

* A clear number users should see first
* A source table with the records you want to summarize
* A field that supports the aggregation you want to use

## **Add a Metric card component to a page**

{% stepper %}
{% step %}
**Open the Add tab**

In the **Settings** panel, open **Add**.
{% endstep %}

{% step %}
**Add Metric card**

Under **Views**, drag **Metric card** to the preferred location on the page.
{% endstep %}

{% step %}
**Configure the source**

In the component **Settings**:

* Choose the source **Table**.
* Select the **Field** you want to aggregate.
* Choose the **Aggregation**.
* Add a **Filter** if you want to display a **Trend**.
  {% endstep %}

{% step %}
**Adjust the display**

Choose the **Number format**.\
Optionally add an **Icon** and enable **Trend**.\
Then drag the component to move it on the page.\
Use the resize handles to adjust its size.

{% hint style="info" %}
To enable **Trend**, add a date field to the filter first.
{% endhint %}
{% endstep %}
{% endstepper %}

{% hint style="info" %}
To remove a component from a page, select the component, then click <i class="fa-trash-can">:trash-can:</i> **Delete component** in the blue menu above it.
{% endhint %}

## **Metric card component settings**

In **Settings**, you can define the basic component details:

* **Label** for the title shown on the component
* **Internal name** is filled automatically. Change it only if needed and carefully. When you script, you use **Internal name**, not **Label**.

Under **General**, configure how the card behaves:

* **On click** to define what happens when users click the card.

Under **Source**, configure the value shown on the card:

* **Data point** to set up data retrieval. Use **Manual** to configure it with controls, or **Conditional** to use a Ninox Script.\
  \
  If **Data point** is set to **Manual**:
* **Table** to choose the source table
* **Field** to choose the field Ninox should summarize
* **Aggregation** to choose **Count**, **Sum**, **Average**, **Median**, **Min**, or **Max**\
  Use **Count** to show the number of matching records. Use the other aggregation options to summarize values from the selected field.\
  \
  If **Data point** is set to **Conditional**:
* **Logic** to add the Ninox Script that retrieves the data.

Under **Display**, configure how the card appears:

* **Number format** to show the value as **Number**, **Currency**, **Percentage**, or **Compact**
* **Icon** to add a visual icon to the card\
  \
  If **Data point** is set to **Manual**:
* **Trend** to show a trend indicator when a date filter is set

  If Trend is enabled, you can set:

  * **Period** to be for **Yesterday**, **Last week**, **Last month**, or **Last year**
  * **Trend format** as **Percentage** or **Absolute** **value**
  * **Positive** to choose whether an upward or downward trend is good

{% hint style="info" %}
For the **Logic** under **Data point**, we suggest to use Ninox AI in the [Logic editor](/ninox-scripting/automate-your-workflows/explore-core-scripting-elements/logic-editor-features.md). It will support you to create a script for the required result or get an existing script explained.
{% endhint %}

**Let's look at an example:**

{% code lineNumbers="true" %}

```
sum((select appointments where status = "done").hours)
```

{% endcode %}

Use this prompt to create the script with Ninox AI:\
"Show me the total hours worked for all customers."


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/metric-card-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.