Import

import { List } from '@contentful/f36-components';
// or
import { List } from '@contentful/f36-list';

Examples

Basic

function ListBasicExample() {
  return (
    <List>
      <List.Item>List Item 1</List.Item>
      <List.Item>
        List Item with <TextLink>text link</TextLink>
      </List.Item>
      <List.Item>List Item 3</List.Item>
      <List.Item>
        <List>
          <List.Item>Sublist Item 1</List.Item>
          <List.Item>Sublist Item 2</List.Item>
        </List>
      </List.Item>
    </List>
  );
}

Open in Playground

`as` property

By default List has an ul tag and displays as a bulleted (unordered) list. But you can change it by providing as prop with two possible values: ul and ol.

function ListWithAsExample() {
  return (
    <>
      <List as="ul">
        <List.Item>List Item 1</List.Item>
        <List.Item>List Item 2</List.Item>
        <List.Item>List Item 3</List.Item>
      </List>

      <List as="ol">
        <List.Item>List Item 1</List.Item>
        <List.Item>List Item 2</List.Item>
        <List.Item>List Item 3</List.Item>
      </List>
    </>
  );
}

Open in Playground

Props (API reference)

Open in Storybook

List

Name	Type	Default
as	"ol" "ul"
children	ReactNode
className	string CSS class to be appended to the root element
testId	string A [data-test-id] attribute used for testing purposes

List.Item

Name	Type	Default
children	ReactNode
className	string CSS class to be appended to the root element
testId	string A [data-test-id] attribute used for testing purposes	cf-ui-list-item

Import

Examples

Basic

as property

Props (API reference)

List

Name

Type

Default

List.Item

Name

Type

Default

Help improve this page

`as` property