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 the title, subtitle, and status of the card.

Usage

When using the card header, only include essential information about the card‘s content. The card system offers various components for this purpose. Consider the following aspects when using the card header: 

• In the main header, only include a title, subtitle, left accessory, icon button, and/or a counter. 
• In the extended header, only include status info label, rating controls, tags, text, and/or a KPI. 
• For the main header, use a maximum of three rows. 
• For the extended header, use a maximum of three rows. 
• 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 the counter only if the card body includes list components such as card cells or data table. 

• Don’t overcrowd the card header with too many elements.  
• 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. 
• Don’t use the card header to provide more detailed information on the card, use the card body instead.
• Don’t add more than three rows to the main header. 
• Don’t add more than three rows to the extended 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, left accessory, icon button, and/or a counter. However, these elements, including the main header itself, are optional components. 

D. Extended Header

The extended header contains additional elements that provide more information. These elements can be a status info label, rating controls, tags, text, and/or a numeric value in the form of a KPI. Only one component can be placed in one row. The content of a row is limited to one line by default, but it can be configured to wrap. 

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

B. Subtitle

C. Left accessory

D. Icon button

E. Counter

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.

A. Status info label

B. Text

C. Rating control

D. Tags

E. KPIs

Behavior and Interaction

Opening a Menu

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. A common example is the overflow button or a filter option for cards.

Action Button 

If a card only requires one specific action instead of multiple actions, you can choose to directly place the corresponding icon button on the card. This eliminates the need for the overflow menu. 

Resources

Development: Card System

SAP Fiori for iOS: Card Header 

Related Components/Patterns: Cards Overview, Card Body, Card Footer