Content Lists and items menus.

2 Sections


What is a list control?

Lists focuses on improving reading comprehension. List control is used to display a list of objects that are ordered vertically. Lists consist of objects containing icons, header text, and content.


Lists are optimized for reading comprehension. A list consists of a single continuous column of subdivisions called rows that contain items of content.



Five types of lists:

  1. Basic list
  2. Features list
  3. Items list
  4. Icons list
  5. Tags filter list


Basic list

  • Whitespace between text elements 45px.
  • Whitespace between bulletin points and text is 10px.
  • Font size 14px.

Features list

  1. Whitespace between text fields and icon 20px
  2. Whitespace between objects 40px
  3. Whitespace between text fields 20px
  4. Whitespace between first row of objects 45px
  5. Font size 22px, 16px.

Items list

  1. Whitespace between text elements and icons 20px.
  2. Whitespace between each element block 20px.
  3. Font size 18px and 14px.

Icons list

  1. Whitespace between objects 20px.
  2. Whitespace between text fields and icon 20px.
  3. Font size 16px.


Tags filter list

  1. Whitespace between text fields and icon 10px.
  2. Whitespace 22px.
  3. Whitespace between text elements 10px.
  4. Font size 16px.