List

Lists display a set of related text-only content. Each list item begins with a bullet or a number.

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

Bulleted list

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.

Bulleted list on Android

Numbered list

Use for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated.

Numbered list on Android

Bulleted list

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.

Bulleted list on iOS

Numbered list

Use for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated.

Numbered list on iOS

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 where the entire item represents an action

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