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
<List type="bullet">
  <List.Item>Yellow shirt</List.Item>
  <List.Item>Red shirt</List.Item>
  <List.Item>Green shirt</List.Item>
</List>
Name
Type
Description
type
enum
Type of list to display
children
React.ReactNode
List item elements

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Merchants are pressed for time and want content to be scannable and easy to read.

Solution

Breaking related chunks of content into a list can make content easier to read and understand.


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