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 for title and subtitle in the 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 key value cell or an avatar row 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 recommended number of elements in card header

Card with too many elements in the card header

Anatomy

A. Header Container

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

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 Card 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 Android 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 provides one slot for either an avatar or a v-stacked status info label. It is designed to hug the content and expands to the right if needed, limiting the space available for the title and subtitle.

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, limiting the space available for the title and subtitle.

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 showing the flexibility of the flex item

Schematic examples displaying the flexibility of the right accessory

Extended Card Header Components

All elements in the extended header are optional. You can place different SDK component types or custom components in the same row or dedicate a separate row to each type. For consistency and predictable information architecture, maintain the same order across all cards. For example, if a card includes a status in the first row, we recommend placing the status in the same position on other cards throughout your app.

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. Text

C. Rating Control

A rating control indicates an average rating for the card content.

D. Tags

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

E. Custom Composable

A custom component can be used if none of the preferred SDK components above meet your needs.

F. Right Accessory

The flexible slot is designed to hold either a KPI or a custom composable, and it takes precedence by limiting horizontal space for other elements in the extended card header.

If only one or two rows are displayed alongside the right accessory, the UI elements are aligned side by side. If the right accessory is the sole element, it can be placed to the left, center, or right within the extended header.

information

Row Behavior/Configuration:

General: Each row is limited to one line by default, but can be configured to wrap.
Three rows with right accessory: The first row appears above this group and spans the full width of the extended header. The second and third rows are grouped with the right accessory beside them.
Right accessory only: The right accessory is set to hug and expands as needed.

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

Behavior and Interaction

Users can open 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 icon button again.