Intro

The card header, positioned at the top of a card, provides essential information about the card and its related content on the detail page, offering a quick overview with key details such as a title, subtitle, and status.

Card header examples

Usage

Use a card header to include essential information about the content of a card.

Don't

Don’t use the card header to provide more detailed information on the card, use the card body instead.

Use a maximum of three lines in total for title and subtitle in main card header.
Use a maximum of three rows for the extended card header.
Incorporate only icon buttons within the card header that have a direct impact on the card, for example, to favorite or bookmark it.
Make sure that the title on the header image has a good contrast to the image. For example, use a white title on a darker image and a black title on a lighter image.
Maintain consistent positioning of the components in the card header throughout the app. For example, if one card header contains tags in the first line, all the other cards in your app should have them too.
Only use a counter if the card body includes list components such as card cells or data table.
Don’t place other components, such as a chart or a calendar component, in the card header. Use the card body instead.

Cards with good title contrast on image

Cards with bad title contrast on image

Card with well-balanced content in card header

Card with too many elements in card header

Anatomy

A. Header Container

The header container is the element that holds the header image, main header, and extended header of the card.

B. Header Image (Media)

The header image, referred to as “media” in the SDK, can be added as an optional decorative element to complement the card’s context.

C. Main Header

The main header contains essential information about the card, such as a title, subtitle, left and right accessory, and flex item.

D. Extended Header

The extended header contains additional elements that provide more information, such as labels, status, rating controls, tags, text, and/or a numeric value like a KPI.

Card header anatomy

Variations

Main Header Components

All components in the main header are optional, including the title. If there is already a title in the header image, it is not recommended to duplicate it or use it for other information in the main header.

A. Flex Item
The flex item is a flexible container that can be used to add additional content inside the card header by swapping the slot with preferred components. It supports any SAP BTP SDK for iOS components, such as tags, labels, or other UI elements, and can also hold custom components if needed.

The flex item can be positioned in two ways within the main header. By default, it sits above the left accessory and title/subtitle container, sharing horizontal space with the right accessory. Alternatively, it can be placed inside the title/subtitle container, offering three alignment options: above the title, between the title and subtitle, or below both.

B. Title
The title provides a short description of the card.

C. Subtitle
The subtitle can serve to refine the title or provide clarification, with its usage varying according to the type of card.

D. Left Accessory
The left accessory can contain a thumbnail, avatar, or icon stack.

E. Right Accessory
The right accessory can accommodate up to two UI elements, including an icon button, a counter, or a custom composable. Due to limited space, it's best to use compact custom components. The right accessory is designed to hug the content and expands to the left if needed.

information

Counter: The counter indicates the number of list items shown in a card and the total number of list items in a list report. The SDK provides a string, however, you need to implement the counter's logic based on the dataset it is referencing.

Schematic examples (left) and main card header components (right)

Schematic examples displaying the flexibility of the right accessory

Schematic examples showing the flexibility of the flex-item

Extended Header Components

Every element in the extended header is optional. To maintain consistency, it’s advisable to arrange the components in the same order across different rows. For instance, if your card includes a status in the first row, it’s recommended to place the status in the same position for other cards throughout your app. You can also have different components within one line. The following components can be placed in the extended header:

A. Status Info Label
A status info label provides additional information about the card content using a flexible combination of text and an icon.

B. Rating Control
A rating control indicates an average rating for the card content.

C. Tags (Tag Bar)
Tags display quick and useful bits of information to the user, such as keywords, labels, categories, or statuses.

D. Text

E. Right Accessory
The flexible slot is designed to hold either a KPI or a custom composable. The slot's dimensions are flexible. The width limits the available horizontal space for elements in the two rows next to the slot. The height of the rows can grow to the height of the slot.

Schematic examples (left) and extended header components (right)

information

Row Behavior/Configuration:
Every row can display UI elements such as tags, description, etc.

Three rows with right accessory: The first row is displayed above the group and limited to one line. The second and third row build a group with the right accessory which is placed next to the two rows. The row height is limited to the height of the right accessory.

Two rows with right accessory: The row height is limited to the height of the accessory. Both rows are placed next to the accessory.

One row with right accessory: The row wraps until it reaches the height of the accessory. The row is positioned next to the accessory.

Wrapping row, no right accessory: A row with one UI element can wrap up to three lines and fill the extended header container.

Right accessory only: The right accessory is set to hug. It can be positioned left, center, or right in the extended header.

Behavior and Interaction

Tapping the overflow button opens a menu with host actions that directly impact the card, such as hiding the card. To close the menu, users can tap anywhere on the card or tap the overflow icon again.

Overflow menu interaction, Picture

Overflow menu interaction

Action Button

If a card requires only one specific action, you can place the corresponding icon button directly on the card, removing the need for the overflow menu.

Bookmark interaction, Picture