List headers

Commonly known as Section headers (iOS) and ListView headers (Android), they are used to break up lists of content, creating a sense of hierarchy.

Usage

On mobile they are used to as intented to seperate lists of content while on web they can be used as section headers, dividing up all kinds of content.

  • A subtitle can be used to provide more guidance as to what the section of content below icontains
  • An action can be included on the right eg. ‘edit’ an entire section of read-only content or an arrow taking you to a new screen
  • Web also uses a small list header as part of the filters sidebar on the restaurants list
  • The height of the list header can vary depending if there is a subtitle or not, reference the sticker sheet for correct sizes

Desktop

Mobile