React

List

Use a list component to embed a formatted list (bulleted or numbered list) into page content.

ExamplesPropsCSS Variables

Examples

Simple list

Copied to clipboard

Inline list

Copied to clipboard

Props

List Props

The List component accepts the following props.

NameTypeRequiredDefaultDescription
className''
childrennull
variantnull

ListItem Props

The ListItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrennull

CSS Variables

--pf-c-list--PaddingLeftc_list_PaddingLeft0
--pf-c-list--li--MarginTopc_list_li_MarginTop0
--pf-c-list--m-inline--li--MarginRightc_list_m_inline_li_MarginRight1.5rem
--pf-c-list--nested--MarginLeftc_list_nested_MarginLeft0.5rem
--pf-c-list--nested--MarginTopc_list_nested_MarginTop0.5rem
--pf-c-list--ul--ListStylec_list_ul_ListStyledisc outside