List

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
className	string		Additional classes added to the list item
icon	React.ReactNode \| null	null	Icon for the list item

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-list	--pf-v6-c-list--PaddingInlineStart	1.5rem
--pf-v6-c-list--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-list	--pf-v6-c-list--ul--ListStyle	disc outside
--pf-v6-c-list--ul--ListStyle --pf-t--global--list-style disc outside
	.pf-v6-c-list	--pf-v6-c-list--Gap	0.5rem
--pf-v6-c-list--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-list	--pf-v6-c-list--nested--PaddingBlockStart	0.5rem
--pf-v6-c-list--nested--PaddingBlockStart --pf-v6-c-list--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-list	--pf-v6-c-list--m-plain--PaddingInlineStart	0
	.pf-v6-c-list	--pf-v6-c-list--m-inline--PaddingInlineStart	0
	.pf-v6-c-list	--pf-v6-c-list--m-inline--ColumnGap	1.5rem
--pf-v6-c-list--m-inline--ColumnGap --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-list	--pf-v6-c-list--m-inline--RowGap	0.25rem
--pf-v6-c-list--m-inline--RowGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-list	--pf-v6-c-list--m-bordered--li--PaddingBlockStart	0.5rem
--pf-v6-c-list--m-bordered--li--PaddingBlockStart --pf-v6-c-list--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-list	--pf-v6-c-list--m-bordered--li--BorderBlockStartColor	(In light theme) #c7c7c7
--pf-v6-c-list--m-bordered--li--BorderBlockStartColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-list	--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth	1px
--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-list	--pf-v6-c-list__item-icon--MinWidth	0.75rem
--pf-v6-c-list__item-icon--MinWidth --pf-t--global--icon--size--sm --pf-t--global--icon--size--100 0.75rem
	.pf-v6-c-list	--pf-v6-c-list__item-icon--MarginBlockStart	0.25rem
--pf-v6-c-list__item-icon--MarginBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-list	--pf-v6-c-list__item-icon--MarginInlineEnd	0.5rem
--pf-v6-c-list__item-icon--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-list	--pf-v6-c-list__item-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-list__item-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-list	--pf-v6-c-list__item-icon--FontSize	0.75rem
--pf-v6-c-list__item-icon--FontSize --pf-t--global--icon--size--sm --pf-t--global--icon--size--100 0.75rem
	.pf-v6-c-list	--pf-v6-c-list--m-icon-lg__item-icon--MinWidth	1rem
--pf-v6-c-list--m-icon-lg__item-icon--MinWidth --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-list	--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd	1rem
--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-list	--pf-v6-c-list--m-icon-lg__item-icon--FontSize	1rem
--pf-v6-c-list--m-icon-lg__item-icon--FontSize --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-list.pf-m-icon-lg	--pf-v6-c-list__item-icon--MinWidth	1rem
--pf-v6-c-list__item-icon--MinWidth --pf-v6-c-list--m-icon-lg__item-icon--MinWidth --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-list.pf-m-icon-lg	--pf-v6-c-list__item-icon--MarginBlockStart	0
	.pf-v6-c-list.pf-m-icon-lg	--pf-v6-c-list__item-icon--MarginInlineEnd	1rem
--pf-v6-c-list__item-icon--MarginInlineEnd --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-list.pf-m-icon-lg	--pf-v6-c-list__item-icon--FontSize	1rem
--pf-v6-c-list__item-icon--FontSize --pf-v6-c-list--m-icon-lg__item-icon--FontSize --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-list.pf-m-plain	--pf-v6-c-list--PaddingInlineStart	0
--pf-v6-c-list--PaddingInlineStart --pf-v6-c-list--m-plain--PaddingInlineStart 0
	.pf-v6-c-list.pf-m-inline	--pf-v6-c-list--PaddingInlineStart	0
--pf-v6-c-list--PaddingInlineStart --pf-v6-c-list--m-inline--PaddingInlineStart 0
	.pf-v6-c-list.pf-m-inline	--pf-v6-c-list--Gap	0.25rem 1.5rem
--pf-v6-c-list--Gap --pf-v6-c-list--m-inline--RowGap --pf-v6-c-list--m-inline--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--lg --pf-t--global--spacer--100 --pf-t--global--spacer--400 0.25rem 1.5rem

Edit this page on GitHub