A Stat Card shows one headline metric at a glance: a large value, a short title and an optional description. The value can be a number, a currency amount, a percentage, a duration or plain text, and its formatting follows the Type you pick. Add-ons let you place a trend pill next to the value and short prefix or suffix text around it. All fields are bindable, so Stat Cards work well on live dashboards driven by data source queries.
Tip: Use Stat Card for a single, prominent metric. Use Multi Stats Card when you need several related metrics in one card. Mixing both on a dashboard (a large Stat Card for the primary KPI, a Multi Stats Card for supporting metrics) is a common pattern.
Properties Reference
Property | Section | Default | Description |
|---|---|---|---|
Title | Content | Metric | The metric label shown at the top of the card. Leave it empty to hide the title row. |
Description | Content | — | Optional text shown under the value. |
Type | Content | Number | How the value is formatted: Currency, Number, Percent, String or Duration. Each type shows its own formatting options. |
Value | Content | 1234 | The metric itself — usually a binding to a data source field. |
Decimal Places, Pad Decimal Places, Notation | Content (Number) | 2, —, standard | Decimal places to keep, whether to pad them with zeros, and the notation: standard (100,000), compact (100K) or scientific (1E5). |
Currency Code, Notation, Decimal Places | Content (Currency) | INR, standard, — | The currency to format in, plus notation and decimal places. |
Decimal Places | Content (Percent) | — | Decimal places for the percentage. |
Max Significant Units, Precision | Content (Duration) | — | How many time units to show (for example |
Transform | Content (String) | — | Uppercase, lowercase or capitalize the value. |
Trend Color | Content | Off | Colors the main value green or red by comparing it to the threshold. Not offered for the String type. |
Threshold, Invert trend | Content | 0, off | Shown when Trend Color is on. The comparison point for coloring, and a switch to flip the colors when lower is better. |
Fallback Value | Content | — | Text shown instead of the value when the value is empty or not usable. Without it, a dash (-) shows. |
Add-ons | Content | Trend on | Trend (a colored pill with its own value and formatting), Prefix Text and Suffix Text (short text before or after the value, such as "USD" or "%"). |
Interactions | Content | — | One event: On Click. The card shows a pointer and hover state only once this event is added. The handler's actions receive the stat as field, so {{ field.value }} reads the value that was on screen. |
Permissions | Content | — | Restricts who can see the block. |
Trend Add-on
The Trend add-on shows a pill next to the value — usually the change since the last period. It has no direction field. Instead, you give it a value and it decides the color by comparing that value to a threshold.
Setting | What it does |
|---|---|
Type | Number, Currency or Percent. Controls how the trend value is formatted. |
Value | The trend number, such as the percentage change. If it isn't numeric, the pill is hidden. |
Trend color | Turns on green/red coloring. Without it, the pill stays gray. |
Threshold | The comparison point. A value at or above the threshold shows green; below shows red. Usually 0. |
Invert trend | Flips the colors, for metrics where lower is better (for example open tickets or error rate). |
Sign Display | How the sign is shown: Negative Only, Positive and Negative, or Arrows. With a sign display, the pill shows the absolute value and the sign or arrow carries the direction. |
Tip: Bind the trend Value to a percentage change such as {{ ((currentMonth - lastMonth) / lastMonth * 100).toFixed(1) }}, keep Threshold at 0, and leave Sign Display on Arrows. Turn on Invert trend when a drop is good news.
Appearance
The Appearance panel has typography controls for the Title, Value and Description (color, size and weight), Visibility conditions, and a Styles panel for width, height, padding, border, radius and background. To make a hero KPI, increase the Value size here.
Adding a Stat Card
Drop the block: Drag Stat Card onto your canvas. A new card shows the value 1,234, the title "Metric" and a 9.9% trend pill.
Set title and value: In the Content inspector, enter a Title (e.g. "Monthly Revenue") and bind Value to one field of your data source, for example
{{ ds_revenue.data.totalRevenue }}. The path depends on your data source's response — if it returns a list, pick the field from one row, such as{{ ds_revenue.data[0].totalRevenue }}. Set Type to Currency, Percent or Duration if you need that formatting.Configure the trend: Under Add-ons, open Trend and bind its Value to the percentage change. Turn on Trend color, set Threshold and, if lower is better, turn on Invert trend.
Add units (optional): Turn on Prefix Text or Suffix Text for labels such as "USD" or "hrs".
Loading: While the bound data source loads, the card shows a skeleton for the value and hides the trend pill. You don't need to configure this.
Examples
Example: Revenue KPI card
Title: "Revenue MTD". Type: Currency. Value: {{ ds_revenue.data.totalRevenue }}. Trend add-on: Value 8.3, Type Percent, Trend color on, Threshold 0, Sign Display Arrows. Increase the Value size in Appearance for a hero card at the top of a finance dashboard.
Example: Open support tickets (where down is good)
Title: "Open Tickets". Value: {{ ds_tickets.data.openCount }}. Trend add-on: Value {{ ds_tickets.data.weekOverWeekChange }}, Trend color on, Threshold 0, Invert trend on — a drop turns green because fewer tickets is better. Description: SLA breach risk: {{ ds_tickets.data.atRiskCount }}.
Exposed State
The Stat Card has no state of its own. Other blocks read its resolved content — the values after bindings run. Any other setting can be read the same way under id.content or id.appearance.
Binding | Type | Description |
|---|---|---|
| string or number | The current value |
| string | The current title text (shown as Title in the inspector) |
| string | The description text under the value |
| string | The selected Type, for example NUMBER or CURRENCY |
Related Pages
Page | Relationship |
|---|---|
Several metrics in one card block, with the same per-stat settings | |
Pair a gauge chart with a Stat Card for visual + numeric KPI presentation | |
Loader patterns for blocks that don't show a skeleton on their own |