Header

---

Anatomy

1. Leading area: (Optional) Usually contains an Icon button as navigation or contextual action.
2. Content: Main content container that can have text or custom content like other components.
1. Title: Indicates the name of the page.
2. Subtitle: (Optional) Provides additional information about the page content.
3. Trailing area: (Optional) Optional actions or info positioned at the end of the header.

---

Usage Guidelines

When to use this component

Use the Header component when the screen requires:

• Screen identification, provide contextual screen title to locate users.
• Navigation context, for providing basic screen actions and back or close navigation interactions.
• Page hierarchy, when the screen needs a strong visual introduction.
• Persistent top-level actions
• Entry-point orientation

The Header establishes structure and orientation for the user at the top of a screen or content section. It should generally appear as the primary top container in mobile layouts.

When not to use this component

Avoid using the Header component when another UI pattern already provides the appropriate structure, hierarchy, or interaction model.

The Header is intended for screen-level context and orientation, not for grouping content, handling dense actions, or replacing navigation systems.

• Do not use Header when the primary purpose is to expose multiple actions, tools, or controls. Use the toolbar instad.
• Do not use Header to separate content groups within a screen.
• Do not use Header as a primary navigation mechanism. Use Nav bar instead.
• Do not use Header when the goal is visual storytelling, promotion, or high-emphasis branding. Headers are functional and content-oriented.
  

---

Best Practices

---

General Component Behaviors

Placement

Headers should always be placed at the top of the page and must adhere to the safe area of each operating system.

Width

The header is adjusted to fill the entire width of the screen, making it full-width.

Slots

Leading and trailing areas maintain fixed positioning and remain vertically aligned with content. Trailing area supports single, multiple actions, text and custom layouts.

Content

The content area occupies the available space between the leading and trailing slots.

• Content should truncate correctly when space is limited.
• The trailing slot maintains visual priority over content.

---

Variants

Compact

Optimized for dense layouts, reduced spaces and standard navigation bars. Use Compact headers for standard screens, detail pages or flows requiring persistent navigation.

Large

Provides stronger visual hierarchy with increased spacing and typography emphasis, prioritizing readability and content hierarchy.

Use Large headers for landing screens, entry points, high-emphasis sections and pages requiring stronger hierarchy.

Custom

Allows full control over the content area. It can be used when the title area requires complex layouts, additional controls are needed, embedded components are required or the screen uses highly customized interactions.

---

Alignment

Left

Content is aligned to the leading edge. It is recommended for navigation-heavy flows, reading-focused experiences and standard apps layouts.

Center

Content is horizontally centered. More recommended for focused tasks, symmetrical layouts and branded experiences.

---

Content Guidelines

Titles

Titles have a recommended length of 1 line of content and should:

• Be concise
• Clearly describe the current screen or context
• Avoid truncation when possible

Subtitles

Subtitles have a recommended length of 1 line of content and should:

• Provide supporting context
• Clarify status or metadata
• Remain secondary in hierarchy

Actions

Use trailing actions for:

• Contextual actions
• Secondary navigation
• Utility controls

Avoid overcrowding the header with excessive actions.

For further information, see the Content Styleguide.

---

Known Gaps