React

List

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

ExamplesPropsCSS Variables

Examples

Simple list

  • First
  • Second
  • Third
Copied to clipboard

Inline list

  • First
  • Second
  • Third
Copied to clipboard

Grid list

  • First
  • Second
  • Third
  • Fourth
  • Fifth
  • Sixth
Copied to clipboard

Props

List Props

The List component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered inside of the list
classNamestring''Additional classes added to the list.
variantenumnullAdds list variant styles
anyAdditional props are spread to the container <ul>

ListItem Props

The ListItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered inside of list item
anyAdditional props are spread to the container <li>

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