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.
<List type="bullet"> <List.Item>Yellow shirt</List.Item> <List.Item>Red shirt</List.Item> <List.Item>Green shirt</List.Item> </List>
Put the merchant first by identifying the problem they face and the component that helps them solve it.
Merchants are pressed for time and want content to be scannable and easy to read.
Breaking related chunks of content into a list can make content easier to read and understand.
- 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
Every item in a list should:
- Start with a capital letter
- Not use commas or semicolons at the end of each line
- Be written in sentence case
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