A header is a section title that represents the content of the section. It is used to group content on a screen into reasonable sections, making it easier for users to consume the information. Headers should be brief and concise so that users can quickly identify what each content section is about.

Anatomy

A. Header

The section title represents the content of the section.

B. Button (Optional)

The button enables user to perform relevant actions to the section. The button can either be a text button or an icon button.

Variations

Section Header

A section header represents the content of a section. It uses a simple and short word or phrase to convey the purpose of the section.

Section Header with Button

A section header can contain an action button associated with the content of the section. The button can either be a text button or icon button, For example, the attachment header contains an “Add” button to allow users to add attachments. To learn more about that workflow, refer to the Attach article.

Resources

Development: SectionedRecyclerViewAdapter

SAP Fiori for iOS: Object Header, Chart Header, Profile Header, KPI Header