Components– Subheaders

Subheaders

Subheaders are list tiles that delineate sections of a list or grid list.

Subheaders may be displayed inline with tiles or associated with content. They are typically related to filtering or sorting criteria.

Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader.

Subheader types

List
Grid
Menu

Font

Roboto Medium 14sp

Material Design subheaders for list or grid sections

List subheaders Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Specs

Tile height: 48dp
Subheader font: Roboto Medium 14sp

Color

Subheader color can either be the secondary grey text value (54% black) or the primary color of the app.

In long lists of complex information, consider using colored subheaders to delineate content. Android settings contain an example of how color can be used on subheaders.

Material Design Grey Subheader

Grey subheader

Padding: 16dp
Subheader tile height: 48dp

Material Design grey subheader in email inbox

Grey subheader in email inbox

Alignment

A subheader should be left-aligned with an avatar/icon in a list, unless there is a promoted action in that space.

If there is a floating action button left-aligned with the avatar/icon in a list, align the subheader with the text content.

Material Design left-aligned FAB with subheader alignment

With a left-aligned floating action button, the subheader is aligned with the text content.

Subheader tile height: 48dp
Floating action button tile width: 72dp

Material Design subheader in app's primary color

The subheader is in the primary color of the app and aligned with the text because of the left-aligned floating action button.

Grid subheaders Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Tile height: 48dp
Subheader font: Roboto Medium 14sp
Subheader is aligned 16dp from the left edge

Material Design grid subheader, 16dp from left, 48dp high

The grid subheader is aligned 16dp from the left edge. The height of the grid subheader tile is 48dp.

Material Design grid subheaders for monthly photo albums

Grid subheaders for the months of the year in a photo album

Menu subheaders Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Tile height: 48dp
Subheader font: Roboto Medium 14sp
Subheader is aligned 16dp from the left edge

Material Design menu subheader specifications
Menu subheader example in Material Design