Section header

hero

Overview

Section headers define the titles, actions, and visual indicators for individual content groups within the sectioned item template. Because headers are fully interactive, they support inline navigation shortcuts, settings triggers, and custom brand icons. Making the header directly tappable allows drivers to navigate to deeper content, trigger sorting options, or consolidate long lists without excessive scrolling.

Composition

A section header supports the following components:

  • Leading image or icon
  • Title: Primary header text and secondary overline text should be restricted to 1 line.
  • Trailing action button (optional)
hero

1. Leading image or icon

2. Title and overline text

3. Trailing action button