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

Props (API reference)

List

Name

Type

Default

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

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