Nav open / close arrow

Styles

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.

Levels

1. High

Equivalent to an h1 header. For defining major sections of a page.

2. Medium

Equivalent to an h2 header. For defining subsections of a page. Only used within sections defined by a high level header.

3. Low

Equivalent to an h3 header. For defining sub-subsections of a page. Unlike other styles, the underline is only shown on hover.


Header Text

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

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.


Alternatives

UIHeaders should be used only to label sections of a page. To label entire pages, use UIPageHeader.

Structure

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.

2. Actions

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.

3. Underline

All headers have an underline that spans the width of the section defined by the header.

Behavior

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.


Truncation

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.

Related Components

Last Updated

October 9, 2019

Coming soon...

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.