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 is automatically calculated, depending on the card content.

Responsive Behavior

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

maxItems Property

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.

The height of the card is calculated automatically, depending of the card content. The maxItems can be used, so the height of the card doesn't change too often. Note that there will be an empty space if you set maxItems to 10, but there are only 4 items.

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

Because of UI5 data model, the maximum number of displayed items is 100.

The content maxItems property can be used in:

requiredHeight and requiredWidth Properties

The requiredHeight and requiredWidth properties can be used by the host environment to indicate the minimum space required by the card if the end user tries to put the card on too narrow or too short space.

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