Patternfly Logo

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
component'ol' | 'ul'NoListComponent.ul
refNo type infoNonull
typeOrderTypeNoOrderType.numberSets the way items are numbered if variant is set to ordered
variantListVariant.inlineNonullAdds list variant styles
ListItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered inside of list item

CSS variables

.pf-c-list--pf-c-list--PaddingLeft
1.5rem
.pf-c-list--pf-c-list--nested--MarginTop
0.5rem
.pf-c-list--pf-c-list--nested--MarginLeft
0.5rem
.pf-c-list--pf-c-list--ul--ListStyle
disc outside
.pf-c-list--pf-c-list--li--MarginTop
0.5rem
.pf-c-list--pf-c-list--m-inline--li--MarginRight
1.5rem
.pf-c-list.pf-m-inline--pf-c-list--PaddingLeft
0
.pf-c-list.pf-m-inline li--pf-c-list--li--MarginTop
0

View source on GitHub