List

List is component that helps with vertical indexing of content. Every list item begins with a bullet or a number. Use List component to display vertical data (text and images) or hierarchically indexed content.

Import

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

Examples

Basic

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.

Props (API reference)

Open in Storybook

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

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

testId
string

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

cf-ui-list-item