Subheaders are used to describe a subsection of content.
Overview
A generic subheader (A) is a label that describes the content below it.
All subheaders are in title case, which means the first letter of each word is capitalized. Please note that this does not apply to languages or scripts (such as Arabic) that do not utilize title or sentence case characters.
Subheaders should be concise and do not require ending punctuation.
Subheaders can also snap to the top of a list (B). This pattern is often used in alphabetical or chronological lists.
See the Interaction — fixed subheader section for more detail.
Subheaders can also be used to trigger a value selector (C).
See the Interaction — value selector subheader section for more detail.
Interaction — fixed subheader
The subheader “H” is fixed to the top of the list while scrolling.
As the user continues to scroll, the next subheader “I” pushes the previous subheader "H" off the view and takes its place.
“I” has now replaced “H”.
Interaction — value selector subheader
The user taps the subheader value selector to change the label.
The user selects an item.
The selected label is now displayed.
Implementation guides
None as yet.