List Group

A list group is a single-column of individual list items.

List Group Intro
List Group Anatomy
  1. List item
  2. Leading icon
  3. Separator
  4. Primary text
  5. Secondary text
  6. Trailing icon

List group can have items that are with or without a description. Additional variations include with leading icon, with trailing icon and with secondary text.

List Group Variations

There are three states available – enabled, hover, and active.

List Group States

List groups can be displayed in large, medium, and small sizes.

List Group Sizes
  • Use sentence case and begin lists with a capital letter.
  • Use punctuation appropriate to the text. Do not leave sentences without periods.
  • Maintain consistency across your grouped list items to improve the scannability of your list.