Intro

The card header is the uppermost part of the card that provides important information about the card and its related content on the detail page. The optional card header allows for a quick overview of key information, such as a title, subtitle, or status of the card.

Card header examples, Picture

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.

In the main card header, you can include a title, subtitle, thumbnail, icon stack, symbol button, and/or a counter and/or a custom component.
Use a maximum of three rows for both the main and extended card header.
Use only an icon button within the card header that directly impacts the card, for example, to favorite or bookmark the card.
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.
Use a counter only 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, Picture

Cards with good title contrast on image

Cards with bad title contrast on image, Picture

Cards with bad title contrast on image

Card with well-balanced content in card header, Picture

Card with well-balanced content in card header

Card with too many elements in card header, Picture

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, also known as “media” in the SDK, is an optional decorative element that allows you to include an image that matches the card context.

C. Main Header

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

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, Picture

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. The following components can be placed in the main header:

A. Title B. Subtitle C. Left Accessory

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

D. 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)

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 B. Rating Control C. Tags (Tag Bar) 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 up 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