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.
For most page headers. Used anywhere that is not displaying a data object name.
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 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.
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.
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 (“…”).
Component code details are not currently available on this site, but we're working on it!
Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.