Lists display a series of related content. Each list item begins with a bullet, a number, or less commonly, with an icon.


Use for a text-only list of related items that don’t need to be in a specific order and don’t require an icon or other indicator.

Drag to resize example
<List type="bullet">
  <List.Item>Yellow shirt</List.Item>
  <List.Item>Red shirt</List.Item>
  <List.Item>Green shirt</List.Item>
List item elements
Type of list to display

Best practices

Lists should:

  • Break up chunks of related content to make the information easier for merchants to scan
  • Be phrased consistently (e.g. try to start each item with a noun or a verb and be consistent with each item)
  • Not be used for lists of actionable choices that the merchants needs to choose between

Content guidelines

List items

Every item in a list should:

  • Start with a capital letter
  • Not use commas or semicolons at the end of each line
  • Red

  • Yellow

  • Blue

  • Red;

  • Yellow;

  • Blue.

  • Be written in sentence case
  • Item one

  • Item two

  • Item three

  • Item One

  • Item Two

  • Item Three

Icon list text

When a line of text is placed next to an icon, it should:

  • Follow all the rules for list items
  • Elaborate on the meaning conveyed by the icon