Sizing

By default the card has 100% width and auto height. This means the card takes the 100% of the surrounding container's width and the height should grow depending on the card content. However, this behavior is highly dependent on the layout that the card is put in.

In order to limit the height grow of the card indefinitely the card developer should use property "maxItems" for List, Table and Timeline cards.

Layout

The layout in which the card will be placed will be essential for the card's display. It is responsibility of the host developer to create a layout that avoids card truncation. For more information read the Layout Requirements.

Responsive Behavior

Some of the cards can rearrange their content automatically, depending on the provided width. Such cards are:

• Calendar Card
• Object Card

minItems and maxItems Properties

The "minItems" property defines the minimum number of expected items in the card. Its purpose is the calculation of the minimum card height, based on estimated item's height. When "minItems" is not defined, then the "maxItems" or "pageSize" will be used for calculating the minimum card height. This calculation is needed to prevent the card of changing its height too much, until data is loaded. Note that there will be an empty space if you set "minItems" to 5, but there are only 3 items.

The "maxItems" property defines the maximum number of items the card may contain. It is used to set a (preliminary) sizing limit in the model, used during the initial loading animation.

{
	"sap.card": {
		"content": {
			"data": {
			},
			"minItems": 2,
			"maxItems": 10
		}
	}
}

The content minItems and maxItems properties can be used in:

• List Card
• Table Card
• Timeline Card

requiredHeight and requiredWidth Properties

You should provide "requiredHeight" and "requiredWidth" properties to hint the hosting environment if the end user is trying to put it on too narrow or too short space.

{
	"sap.card": {
		"requiredHeight": "40rem",
		"requiredWidth": "20rem",
	}
}