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.
List
Lists display a set of related text-only content. Each list item begins with a bullet or a number.
Accessibility
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.
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.
Numbered list
Use for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated.
Accessibility
See Material Design and development documentation about accessibility for 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.
Numbered list
Use for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated.
Accessibility
See Apple’s Human Interface Guidelines and API documentation about accessibility for 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