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
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
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 variant is set to ordered
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


	.pf-c-list	--pf-c-list--PaddingLeft	1.5rem
--pf-c-list--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-list	--pf-c-list--nested--MarginTop	0.5rem
--pf-c-list--nested--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list--nested--MarginLeft	0.5rem
--pf-c-list--nested--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list--ul--ListStyle	disc outside
--pf-c-list--ul--ListStyle --pf-global--ListStyle $pf-global--ListStyle disc outside
	.pf-c-list	--pf-c-list--li--MarginTop	0.5rem
--pf-c-list--li--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list--m-inline--li--MarginRight	1.5rem
--pf-c-list--m-inline--li--MarginRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-list	--pf-c-list--m-bordered--li--PaddingBottom	0.5rem
--pf-c-list--m-bordered--li--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list--m-bordered--li--BorderBottomColor	#d2d2d2
--pf-c-list--m-bordered--li--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-list	--pf-c-list--m-bordered--li--BorderBottomWidth	1px
--pf-c-list--m-bordered--li--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-list	--pf-c-list__item-icon--MinWidth	0.625rem
--pf-c-list__item-icon--MinWidth --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 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__item-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list__item-icon--Color	#6a6e73
--pf-c-list__item-icon--Color --pf-global--icon--Color--light $pf-global--icon--Color--light $pf-color-black-600 #6a6e73
	.pf-c-list	--pf-c-list__item-icon--FontSize	0.625rem
--pf-c-list__item-icon--FontSize --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 0.625rem
	.pf-c-list	--pf-c-list--m-icon-lg__item-icon--MinWidth	1.5rem
--pf-c-list--m-icon-lg__item-icon--MinWidth --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-list	--pf-c-list--m-icon-lg__item-icon--MarginRight	1rem
--pf-c-list--m-icon-lg__item-icon--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-list	--pf-c-list--m-icon-lg__item-icon--FontSize	1.5rem
--pf-c-list--m-icon-lg__item-icon--FontSize --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-list.pf-m-icon-lg	--pf-c-list__item-icon--MinWidth	1.5rem
--pf-c-list__item-icon--MinWidth --pf-c-list--m-icon-lg__item-icon--MinWidth --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 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__item-icon--MarginRight --pf-c-list--m-icon-lg__item-icon--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-list.pf-m-icon-lg	--pf-c-list__item-icon--FontSize	1.5rem
--pf-c-list__item-icon--FontSize --pf-c-list--m-icon-lg__item-icon--FontSize --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines