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.

Example of numeric header

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.