The pane header allows users to quickly understand the purpose of a pane, its relationship to the others and to perform actions.

Users app with Search, Result and Record pane for Rosalyn Roman

Structure

The pane header shall be composed of a title with a down arrow to hide/show the header menu dropdown, a subtitle (optional) and a close icon on the left.

A pane with the menu dropdown open

If needed, one primary action button and more helper app icons could be added on the left. Helper app icons: They shall only be used to add pane controlling actions (see helper app section for more information). Primary action button: It shall only be used to add an action that isn’t related to pane controlling behavior. Only one button shall be placed in the pane header. Any other, secondary, actions should be shown in the pane header menu with an icon and label. If there exists no icon yet for the action in question, you shall use the default icon in Stripes Components.

Pane header with a primary action button and helpers app icons.

Behavior

Header title and subtitle

The header title shall be related to the purpose of the pane and/or its relationship to another pane.

If needed, a subtitle could be added to show more information about the pane.

 

Header menu

By tapping on the down arrow next to the header title, users could hide/show the header menu. This menu shall allow them to perform actions and customize pane settings.

 

Helper app icons When users click on an icon, a pane shall open. If users click on another icon, the previous pane shall be replaced by the new one.

Primary action button When users click on a button, a new layer shall open.