Subheader

  • Subheaders are list tiles used to identify content sections, remaining pinned to the top of the screen until pushed off by another subheader.

  • They consist of a background and a text label, with layout specifications defined by E, M, KL, P, or Flex.

  • Subheaders adhere to typography, color, and sizing guidelines, utilizing Roboto Medium 24dp font, contrasting background/text colors, and a height of 76dp.

  • They can be implemented in both grid and list views, serving as visual separators for improved content organization.

Subheaders are list tiles that identify sections of content in a list or grid view. They are typically used for subsections of content produced by a filter or sort.

When content below a subheader is scrolled, the subheader remains pinned to the top of the screen until it is pushed off the screen by the next subheader.


Anatomy

1. Subheader background
2. Text label

Specs

Subheader in grid

Subheader in list


Styles

Typography

Type style Typeface Weight Size (dp)
Body 3 M Roboto Medium 24

Color

Element Color(day mode) Color (night mode)
Primary type White White @ 88%
Subheader background Black Black

Sizing

Element Size (dp)
Subheader height 76

Examples

Subheader in grid
Subheader in list
Subheader in grid
Subheader in list