List group offers a simple layout for organizing groups of data in a two-column list.

Example

⌘ Cmd + ⌥ Option + 1

Properties

"ListGroupItem" Component
propertypropTyperequireddefaultdescription
densityoneOf 'tight' | 'loose'-'loose'
childrennodeyes-
testSectionstring--
"ListGroup" Component
propertypropTyperequireddefaultdescription
subtitlestring-''
testSectionstring-''
titlestring-''
childrennode | [node]yes-

Usage

Use list group when displaying related data. Consider the usage on these pages:

  • Audience > Attributes
  • Implementation > Events
  • Account Setting > Plan

Best Practices

Do

Consider using a listgroup when displaying groups of key:value pairs

Don't

Don't use listgroup with only 1 item