Skip to content
Patternfly Logo

List

Examples

Basic

  • First
  • Second
  • Third

Inline

  • First
  • Second
  • Third

Ordered

  1. First
  2. Second
  3. Third

Plain

  • First
  • Second
  • Third

With horizontal rules

  • First
  • Second
  • Third

With icons

  • First
  • Second
  • Third

With large icons

  • First
  • Second
  • Third

Props

List

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered inside of the list
classNamestring''Additional classes added to the list
component'ol' | 'ul'ListComponent.ul
iconSize'default' | 'large''default'Modifies the size of the icons in the list
isBorderedbooleanfalseModifies the list to add borders between items
isPlainbooleanfalseModifies the list to include plain styling
refNo type infonull
typeOrderTypeOrderType.numberSets the way items are numbered if variant is set to ordered
variantListVariant.inlinenullAdds list variant styles

ListItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered inside of list item
iconReact.ReactNode | nullnullIcon for the 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-c-list--m-bordered--li--PaddingBottom
0.5rem
.pf-c-list--pf-c-list--m-bordered--li--BorderBottomColor
#d2d2d2
.pf-c-list--pf-c-list--m-bordered--li--BorderBottomWidth
1px
.pf-c-list--pf-c-list__item-icon--MinWidth
0.625rem
.pf-c-list--pf-c-list__item-icon--MarginTop
0.375rem
.pf-c-list--pf-c-list__item-icon--MarginRight
0.5rem
.pf-c-list--pf-c-list__item-icon--Color
#6a6e73
.pf-c-list--pf-c-list__item-icon--FontSize
0.625rem
.pf-c-list--pf-c-list--m-icon-lg__item-icon--MinWidth
1.5rem
.pf-c-list--pf-c-list--m-icon-lg__item-icon--MarginRight
1rem
.pf-c-list--pf-c-list--m-icon-lg__item-icon--FontSize
1.5rem
.pf-c-list.pf-m-icon-lg--pf-c-list__item-icon--MinWidth
1.5rem
.pf-c-list.pf-m-icon-lg--pf-c-list__item-icon--MarginTop
0
.pf-c-list.pf-m-icon-lg--pf-c-list__item-icon--MarginRight
1rem
.pf-c-list.pf-m-icon-lg--pf-c-list__item-icon--FontSize
1.5rem
.pf-c-list.pf-m-plain--pf-c-list--PaddingLeft
0
.pf-c-list.pf-m-inline--pf-c-list--PaddingLeft
0
.pf-c-list.pf-m-inline li--pf-c-list--li--MarginTop
0
.pf-c-list.pf-m-bordered > :last-child--pf-c-list--m-bordered--li--PaddingBottom
0
.pf-c-list.pf-m-bordered > :last-child--pf-c-list--m-bordered--li--BorderBottomWidth
0

View source on GitHub