Using this Component
Headers are used to label and define sections of content on a page. They also may contain actions relevant to the section.
Equivalent to an h1 header. For defining major sections of a page.
Equivalent to an h2 header. For defining subsections of a page. Only used within sections defined by a high level header.
Equivalent to an h3 header. For defining sub-subsections of a page. Unlike other styles, the underline is only shown on hover.
Header text is critical for for creating quickly understood interfaces. Text should label the section content as clearly and concisely as possible. Use title case for all headers.
Actions are not required on a header, and each header should have as few actions as possible. Actions placed on a header should be broadly relevant to the contents of the section. If an action is specific to only one part of a section, then that action should be placed inline with the content, or on a sub-section header.
UIHeaders should be used only to label sections of a page. To label entire pages, use UIPageHeader.
1. Header Text
Every header has a single line of title case text. The styling of this text correlates to the level of the header.
Headers may contain one or several actions aligned to the right side of the underline. They most commonly take the form of a UITextButton or icon button.
All headers have an underline that spans the width of the section defined by the header.
Basic headers are not directly interactive elements, and serve only to label and define sections. Headers with actions are interactive, both in the actions themselves, and in how the actions are displayed.
Header Action Visibility
By default, actions are only visible on hover over the section defined by the header. For example, if a section contains a list of items, hovering the cursor over any of those items would cause the header actions to become visible. This can be overridden so that header actions are always visible regardless of cursor position.
When a responsive-width header becomes too narrow to display the full header text, the text is truncated with an ellipsis (“…”). Truncation should be avoided wherever possible.
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.