Simple list

A simple list provides a list of selectable items that can be shown within a page. Each item is described by a text label. The list may be divided into logical sections by introducing group headers.


a simple list diagram depicting the locations of the section title, item, default state, and selected state
  1. Section title (optional): Section titles should be a few words. They are more commonly used in grouped lists.
  2. Item: Items are typically single words or short phrases.
  3. Default state: The state of a simple list before any actions or selections are made by the user.
  4. Selected state: A selected state communicates which list item the user has chosen.


A simple list is used when the information presented does not follow a specific pattern, or does not require bullets to differentiate one list item from another.

View source on GitHub