Using this Component

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


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.


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


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.


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.


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.


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 (“…”).  

Approved Engineering Documentation

No documentation has been submitted yet. Want to change that?

Playground Coming Soon!