Numeric Header
The numeric header shows general information about the card and allows the configuration of a numeric value visualization. Using properties you can configure the title, subtitle, status text, and icon.

Usage
To show only basic information, use the default header instead. You should always set a title. Optionally, you can add a maximum of two side indicators that relate to the main numeric indicator.
Properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
type | string | Yes | Represents the type of the header. | 1.14.0 | 1.64 |
title | string | Yes | Represents language-dependent title. | 1.14.0 | 1.64 |
subTitle | string | No | Represents language-dependent additional information to the title. | 1.14.0 | 1.64 |
actions | array | No | Represents description of the actions that can be applied on a part of a card. | 1.15.0 | 1.65 |
unitOfMeasurement | string | No | Represents unit of measurement for the whole numeric header. | 1.14.0 | 1.64 |
mainIndicator | No | 1.14.0 | 1.64 | ||
details | string | No | Represents additional information about the numeric header. | 1.14.0 | 1.64 |
sideIndicators | string | array | Side indicators that relate to the main numeric indicator. You can have a maximum of two side indicators. | 1.14.0 | 1.64 |
status | No | Represents the status of the card. | 1.14.0 | 1.64 | |
dataTimestamp | string | No |
Defines the timestamp of the oldest data in the card. Use this to show to the end user how fresh the information in the card is. Must be in ISO 8601 format. Will be shown as a relative time like "5 minutes ago". Note: This property is experimental and may change! |
1.33.0 | 1.89 |
Example
"header": { "type": "Numeric", "title": "Project Cloud Transformation", "subTitle": "Revenue", "unitOfMeasurement": "EUR", "mainIndicator": { "number": "44", "unit": "%", "trend": "Down", "state": "Critical" }, "details": "Some details", "sideIndicators": [ { "title": "Target", "number": "17", "unit": "%" }, { "title": "Deviation", "number": "5", "unit": "%" } ] }Try It Out
Actions
Actions add behavior to the card. To add a navigation action to the header and to the items, you can configure it inside the manifest.