Nav open / close arrow


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

Related Components

Last Updated

August 6, 2020

Coming soon...

Component code details for this component are not currently available, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.

Eng Description

Code Path & Props

Up to date props can be found at the codepath above.

Example Code