Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
components
tests
List.scss
List.tsx
README.md
index.ts

README.md

name category platforms keywords
List
Lists and tables
android
ios
web
bulleted lists
numbered lists
icon lists
list items
text lists
text-only lists
ios
android

List

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


Best practices

Lists should:

  • Break up chunks of related content to make the information easier for merchants to scan
  • Be phrased consistently (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

Do

  • Red
  • Yellow
  • Blue

Don’t

  • Red;
  • Yellow;
  • Blue.
  • Be written in sentence case

Do

  • Item one
  • Item two
  • Item three

Don’t

  • Item One
  • Item Two
  • Item Three

Examples

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.

<List type="bullet">
  <List.Item>Yellow shirt</List.Item>
  <List.Item>Red shirt</List.Item>
  <List.Item>Green shirt</List.Item>
</List>

Bulleted list on Android

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.

<List type="number">
  <List.Item>First item</List.Item>
  <List.Item>Second item</List.Item>
  <List.Item>Third Item</List.Item>
</List>

Numbered list on Android

Numbered list on iOS


Related components


Accessibility

See Material Design and development documentation about accessibility for Android:

See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

The list component outputs list items (<li>) inside a list wrapper (<ul> for bullet lists or <ol> for numbered lists). By default, list items are conveyed as a group of related elements to assistive technology users.

To group items for layout only, consider using the stack component.

You can’t perform that action at this time.