List

Use exception lists to help merchants notice important, standout information that adds extra context to a task. Exception lists often consist of a title and description. Each item in the list either has a bullet or icon at the front.

Props

No props found for this component, run `yarn gen:docs` to generate component meta first.

Slots

No slots found for this component, run `yarn gen:docs` to generate component meta first.

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

---

Related components

• To create a list of checkboxes or radio buttons, use the choice list component
• To present a collection of objects of the same type such as customers, products, or orders, use the resource list component
• When text labels for each item are useful for describing the content, use the Description List component

---

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 vertical stack component.