React

List

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

ExamplesPropsCSS Variables

Examples

Basic

  • First
  • Second
  • Third

Inline

  • First
  • Second
  • Third

Props

List properties
NameTypeRequiredDefaultDescription
className''null
childrennullnull
variantnullnull
ListItem properties
NameTypeRequiredDefaultDescription
childrennullnull

CSS Variables

--pf-c-list--li--MarginTopc_list_li_MarginTop
0
--pf-c-list--m-inline--li--MarginRightc_list_m_inline_li_MarginRight
1.5rem
--pf-c-list--nested--MarginLeftc_list_nested_MarginLeft
0.5rem
--pf-c-list--nested--MarginTopc_list_nested_MarginTop
0.5rem
--pf-c-list--PaddingLeftc_list_PaddingLeft
0
--pf-c-list--ul--ListStylec_list_ul_ListStyle
disc outside