List

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

Examples

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

Props

children
React.ReactNode
List item elements
type
"bullet" | "number"
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