Default Header

The header displays general information about the card. Using properties you can configure the title, subtitle, status text, and icon.

Example of default header

Usage

You should always set a title. To show a KPI or any numeric information, use the numeric header instead.

Properties

Property Type Required Description Schema Version Since
type string No The type of the header. Should be set to "Default" or omitted. 1.14.0 1.64
title string Yes The title. 1.14.0 1.64
subTitle string No The subtitle. 1.14.0 1.64
actions array No Represents description of actions that can be applied on a part of a card. 1.15.0 1.65
icon Icon No Represents the icon of the card. 1.14.0 1.64
status No Represents the status of the card. 1.14.0 1.64
actions Actions[] No Actions that are triggered when the header is pressed. 1.15.0 1.65
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

Icon Properties

Property Type Required Description Schema Version Since
src string No Icon name or source URL 1.14.0 1.64
shape sap.m.AvatarShape No The shape of the icon. 1.14.0 1.64
alt string No Alternative text for the icon. If not provided, a default value is set, which might be confusing for screen reader users, when there are more than one card in the view. 1.26.0 1.82
backgroundColor sap.m.AvatarColor No By default it is set to "Transparent".
Note: This property is experimental and may change!
1.27.0 1.83

Example

"header": {
	"title": "An example title",
	"subTitle": "Some subtitle",
	"icon": {
		"src": "sap-icon://business-objects-experience"
	},
	"status": {
		"text": "5 of 20"
	}
}
Try It Out