List

A list component embeds a formatted list (bulleted or numbered list) into page content.

Examples

Basic

First
Second
Third

Inline

First
Second
Third

Ordered

First
Second
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
Name	Type	Default	Description
aria-label	string		Adds an accessible label to the list.
children	React.ReactNode	null	Anything that can be rendered inside of the list
className	string	''	Additional classes added to the list
component	'ol' \| 'ul'	ListComponent.ul	Sets the type of the list component.
iconSize	'default' \| 'large'	'default'	Modifies the size of the icons in the list
isBordered	boolean	false	Modifies the list to add borders between items
isPlain	boolean	false	Modifies the list to include plain styling
ref	No type info	null
type	OrderType	OrderType.number	Sets the way items are numbered if component is set to "ol".
variant	ListVariant.inline	null	Adds list variant styles

ListItem

*required
Name	Type	Default	Description
children	React.ReactNode	null	Anything that can be rendered inside of list item
icon	React.ReactNode \| null	null	Icon for the list item

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-list	--pf-v5-c-list--PaddingLeft	1.5rem
--pf-v5-c-list--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-list	--pf-v5-c-list--nested--MarginTop	0.5rem
--pf-v5-c-list--nested--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-list	--pf-v5-c-list--nested--MarginLeft	0.5rem
--pf-v5-c-list--nested--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-list	--pf-v5-c-list--ul--ListStyle	disc outside
--pf-v5-c-list--ul--ListStyle --pf-v5-global--ListStyle $pf-v5-global--ListStyle disc outside
	.pf-v5-c-list	--pf-v5-c-list--li--MarginTop	0.5rem
--pf-v5-c-list--li--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-list	--pf-v5-c-list--m-inline--li--MarginRight	1.5rem
--pf-v5-c-list--m-inline--li--MarginRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-list	--pf-v5-c-list--m-bordered--li--PaddingBottom	0.5rem
--pf-v5-c-list--m-bordered--li--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-list	--pf-v5-c-list--m-bordered--li--BorderBottomColor	#d2d2d2
--pf-v5-c-list--m-bordered--li--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-list	--pf-v5-c-list--m-bordered--li--BorderBottomWidth	1px
--pf-v5-c-list--m-bordered--li--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-list	--pf-v5-c-list__item-icon--MinWidth	0.75rem
--pf-v5-c-list__item-icon--MinWidth --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem
	.pf-v5-c-list	--pf-v5-c-list__item-icon--MarginTop	0.375rem
	.pf-v5-c-list	--pf-v5-c-list__item-icon--MarginRight	0.5rem
--pf-v5-c-list__item-icon--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-list	--pf-v5-c-list__item-icon--Color	#151515
--pf-v5-c-list__item-icon--Color --pf-v5-global--icon--Color--dark $pf-v5-global--icon--Color--dark $pf-v5-color-black-900 #151515
	.pf-v5-c-list	--pf-v5-c-list__item-icon--FontSize	0.75rem
--pf-v5-c-list__item-icon--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem
	.pf-v5-c-list	--pf-v5-c-list--m-icon-lg__item-icon--MinWidth	1.5rem
--pf-v5-c-list--m-icon-lg__item-icon--MinWidth --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-v5-c-list	--pf-v5-c-list--m-icon-lg__item-icon--MarginRight	1rem
--pf-v5-c-list--m-icon-lg__item-icon--MarginRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-list	--pf-v5-c-list--m-icon-lg__item-icon--FontSize	1.5rem
--pf-v5-c-list--m-icon-lg__item-icon--FontSize --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-v5-c-list.pf-m-icon-lg	--pf-v5-c-list__item-icon--MinWidth	1.5rem
--pf-v5-c-list__item-icon--MinWidth --pf-v5-c-list--m-icon-lg__item-icon--MinWidth --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-v5-c-list.pf-m-icon-lg	--pf-v5-c-list__item-icon--MarginTop	0
	.pf-v5-c-list.pf-m-icon-lg	--pf-v5-c-list__item-icon--MarginRight	1rem
--pf-v5-c-list__item-icon--MarginRight --pf-v5-c-list--m-icon-lg__item-icon--MarginRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-list.pf-m-icon-lg	--pf-v5-c-list__item-icon--FontSize	1.5rem
--pf-v5-c-list__item-icon--FontSize --pf-v5-c-list--m-icon-lg__item-icon--FontSize --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-v5-c-list.pf-m-plain	--pf-v5-c-list--PaddingLeft	0
	.pf-v5-c-list.pf-m-inline	--pf-v5-c-list--PaddingLeft	0
	.pf-v5-c-list.pf-m-inline li	--pf-v5-c-list--li--MarginTop	0
	.pf-v5-c-list.pf-m-bordered > :last-child	--pf-v5-c-list--m-bordered--li--PaddingBottom	0
	.pf-v5-c-list.pf-m-bordered > :last-child	--pf-v5-c-list--m-bordered--li--BorderBottomWidth	0

View source on GitHub