Skip to main content


Lists are made of list items. A list can be used to display content related to a single subject.


All list categories should be consistent in their actions. If you have a list representing a folder, this one should be easily distinguishable from lists representing files, but their actions should be consistent in the context where users are.

Following elements make up a list component:

  • List Container 96x32px or mm
  • Title
  • Tooltip - works on-hover to reveal truncated title information

Touch = UIs placed at 50cm (~20 inch) from users

Example Size (px or mm) Elements
List Thumbnail 96 x 32 - Thumbnail
- Title
- Action Button (optional)
List Text Action 96 x 32 - Title
- Action Button Left (optional)
- Action Button Right (optional)