List

List is component that helps with vertical indexing of content. Every list item begins with a bullet or a number.

How to use List

• when displaying vertical data (text and images)
• when displaying hierarchically indexed content

Component variations

The List component can be configured in two different ways: to display bulleted (unordered) list or numbered (ordered) list.

Code example

// 

<List as="ul">
  <List.Item>List Item 1</List.Item>
  <List.Item>List Item 2</List.Item>
  <List.Item>
    List Item with <TextLink>text link</TextLink>
  </List.Item>
  <List.Item>
    <List as="ol">
      <List.Item>Sublist Item 1</List.Item>
      <List.Item>Sublist Item 2</List.Item>
    </List>
  </List.Item>
</List>
// 

<List as="ul">
  <List.Item>List Item 1</List.Item>
  <List.Item>List Item 2</List.Item>
  <List.Item>
    List Item with <TextLink>text link</TextLink>
  </List.Item>
  <List.Item>
    <List as="ol">
      <List.Item>Sublist Item 1</List.Item>
      <List.Item>Sublist Item 2</List.Item>
    </List>
  </List.Item>
</List>
Hide source

Props

List

• Name

  as

  HTML Tag or React Component (e.g. div, span, etc)
• Name

  children

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

List.Item

• Name

  children

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-list-item