Page headers are used to label and define entire pages. They may also be used to label distinct containers linked with a page.

‍

Types

1. Human

For most page headers. Used anywhere that is not displaying a data object name.

2. Physical

For displaying underlying data object names (physical metadata). Displayed in monospace font.

‍

Applications

In addition to labeling pages, they should also be used to label distinct containers, e.g. modals, drawers, or content panes.

Placement

Page headers are placed at the top of the page/area they are labeling. Only UIBreadcrumbs or UIAlertBox can be placed above a page header. See Page Structure guidelines for more details on layout.

Editing

Page headers may either be static or editable. They should be made editable only when being used as a representation of the title of a user-created content page.

Alternatives

To label sections within a page or distinct containers, use UIHeader.

1. Header Text

Every page header has a single line of text. The styling of this text correlates to the type of the header.

2. Actions

Page headers may contain one or several icon actions aligned to the right side of the header text. This includes an edit action.

Page headers are only interactive when they are editable or have other actions.

Action Visibility

Actions are only visible on hover over the page header.

Truncation

When a page header is too narrow to display the full header text due to browser window size, the text is truncated with an ellipsis (“…”).  

‍