List

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

    Examples

    Down Arrow

    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.


    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


    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.