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

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

render('Checkout::Dynamic::Render', () => <Extension />);

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

```

```js
import {extend, List, ListItem} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root) => {
  const list = root.createComponent(List, undefined, [
    root.createComponent(ListItem, undefined, '100% organic cotton'),
    root.createComponent(ListItem, undefined, 'Made in Canada'),
    root.createComponent(ListItem, undefined, 'Machine washable'),
  ]);

  root.appendChild(list);
});

```


## ListProps

### ListProps

### spacing
Adjust spacing between list items
### marker
Type of marker to display
### accessibilityLabel
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.
### id
A unique identifier for the component.
### MaybeResponsiveConditionalStyle
A type that represents a value that can be a conditional style. The conditions are based on the viewport size.
We highly recommend using the `Style` helper which simplifies the creation of conditional styles.

To learn more check out the [conditional styles](/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.
T | ConditionalStyle<T, ViewportSizeCondition>
### ConditionalStyle

### default
The default value applied when none of the conditional values
specified in `conditionals` are met.
### conditionals
An array of conditional values.
### ConditionalValue

### conditions
The conditions that must be met for the value to be applied. At least one
condition must be specified.
### value
The value that will be applied if the conditions are met.
### ViewportSizeCondition

### viewportInlineSize

### ViewportInlineSize

'small' | 'medium' | 'large'
### Spacing

'none' | 'base' | 'extraTight' | 'tight' | 'loose' | 'extraLoose'
### Marker

'none' | 'bullet' | 'number'
## Related
- [ListItem](listItem)