A. Header

The header indicates what the section contains.

Note that header can be used as a section header or footer.

When the header is used as a section header, a section title is required. When it is used as a section footer, a section title is optional.

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.

Anatomy of a 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 on compact screen

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.

Section header with a text button

Section header with an icon button

A section footer provides additional actions or information at the bottom of a group section. It supports various layouts, including a left-aligned button, right-aligned button, two opposite buttons, and text only, with flexible positioning to adapt to different use cases.

Section footer with left-aligned button (top) and right-aligned button (bottom)

Section footer with left-aligned button and header (top) and right-aligned button and header (bottom)

Section footer with left-aligned and right-aligned buttons