Skip to Content
Patternfly Logo

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

Ordered

  1. First
  2. Second
  3. Third

Props

List properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered inside of the list
classNamestringNo''Additional classes added to the list
variantListVariant.inlineNonullAdds list variant styles
typeOrderTypeNoOrderType.numberSets the way items are numbered if variant is set to ordered
component'ol' | 'ul'NoListComponent.ul
refNonull
ListItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered inside of list item

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