List

Import

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

Examples

Basic

Hide code
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>
  );
}
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.

Hide code
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>
    </>
  );
}
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

List

List.Item