Skip to main content

List

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

Anchor to listpropsListProps

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose or contents of the list. When set, it will be announced to buyers using assistive technologies and will provide them with more context.

Anchor to id
id
string

A unique identifier for the component.

Anchor to marker
marker
Default: 'bullet'

Type of marker to display

Anchor to spacing
spacing
<>
Default: 'base'

Adjust spacing between list items

Was this section helpful?

Basic List

import {
reactExtension,
List,
ListItem,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<List>
<ListItem>100% organic cotton</ListItem>
<ListItem>Made in Canada</ListItem>
<ListItem>Machine washable</ListItem>
</List>
);
}

Preview

Anchor to best-practicesBest Practices

  • Use lists to break up chunks of related content to make the information easier for customers to scan.

  • Phrase list items consistently. Try to start each item with a noun or a verb and be consistent with each item.

  • Use bullets for a text-only list of related items that don’t need to be in a specific order.

  • Use numbers for a text-only list of related items when you need to communicate order, priority, or sequence.

  • Don’t use a marker when only the semantic value of a list matters, such as with a list of links.

Was this section helpful?

Anchor to relatedRelated

ComponentListItem