Simple list

A simple list displays selectable items within a page.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--PaddingBlockStart	0.25rem
--pf-v6-c-simple-list__item-link--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--PaddingInlineEnd	1rem
--pf-v6-c-simple-list__item-link--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--PaddingBlockEnd	0.25rem
--pf-v6-c-simple-list__item-link--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--PaddingInlineStart	1rem
--pf-v6-c-simple-list__item-link--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--BackgroundColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-simple-list__item-link--BackgroundColor --pf-t--global--background--color--action--plain--default rgb(255, 255, 255, 0.0000)
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--Color	(In light theme) #4d4d4d
--pf-v6-c-simple-list__item-link--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--FontSize	0.875rem
--pf-v6-c-simple-list__item-link--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--m-current--Color	(In light theme) #151515
--pf-v6-c-simple-list__item-link--m-current--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--m-current--BackgroundColor	(In light theme) rgb(199, 199, 199, 0.2500)
--pf-v6-c-simple-list__item-link--m-current--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgb(199, 199, 199, 0.2500)
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--hover--Color	(In light theme) #4d4d4d
--pf-v6-c-simple-list__item-link--hover--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--hover--BackgroundColor	(In light theme) rgb(199, 199, 199, 0.2500)
--pf-v6-c-simple-list__item-link--hover--BackgroundColor --pf-t--global--background--color--action--plain--hover --pf-t--global--background--color--600 rgb(199, 199, 199, 0.2500)
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--BorderRadius	4px
--pf-v6-c-simple-list__item-link--BorderRadius --pf-t--global--border--radius--tiny --pf-t--global--border--radius--100 4px
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--BorderWidth	0px
--pf-v6-c-simple-list__item-link--BorderWidth --pf-t--global--border--width--action--plain--default 0px
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--BorderColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-simple-list__item-link--BorderColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--hover--BorderWidth	0px
--pf-v6-c-simple-list__item-link--hover--BorderWidth --pf-t--global--border--width--action--plain--hover 0px
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--m-current--BorderWidth	0px
--pf-v6-c-simple-list__item-link--m-current--BorderWidth --pf-t--global--border--width--action--plain--clicked 0px
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--m-link--Color	(In light theme) #0066cc
--pf-v6-c-simple-list__item-link--m-link--Color --pf-t--global--text--color--link--default --pf-t--global--text--color--link--100 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--m-link--m-current--Color	(In light theme) #004d99
--pf-v6-c-simple-list__item-link--m-link--m-current--Color --pf-t--global--text--color--link--hover --pf-t--global--text--color--link--200 --pf-t--color--blue--60 #004d99
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__item-link--m-link--hover--Color	(In light theme) #004d99
--pf-v6-c-simple-list__item-link--m-link--hover--Color --pf-t--global--text--color--link--hover --pf-t--global--text--color--link--200 --pf-t--color--blue--60 #004d99
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__title--PaddingBlockStart	0.5rem
--pf-v6-c-simple-list__title--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__title--PaddingInlineEnd	1rem
--pf-v6-c-simple-list__title--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__title--PaddingBlockEnd	0.5rem
--pf-v6-c-simple-list__title--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__title--PaddingInlineStart	1rem
--pf-v6-c-simple-list__title--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__title--FontSize	0.75rem
--pf-v6-c-simple-list__title--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__title--Color	(In light theme) #151515
--pf-v6-c-simple-list__title--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__title--FontWeight	600
--pf-v6-c-simple-list__title--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-simple-list	--pf-v6-c-simple-list__section--section--MarginBlockStart	0.5rem
--pf-v6-c-simple-list__section--section--MarginBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-simple-list__item-link.pf-m-link	--pf-v6-c-simple-list__item-link--Color	(In light theme) #0066cc
--pf-v6-c-simple-list__item-link--Color --pf-v6-c-simple-list__item-link--m-link--Color --pf-t--global--text--color--link--default --pf-t--global--text--color--link--100 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-simple-list__item-link.pf-m-link	--pf-v6-c-simple-list__item-link--hover--Color	(In light theme) #004d99
--pf-v6-c-simple-list__item-link--hover--Color --pf-v6-c-simple-list__item-link--m-link--m-current--Color --pf-t--global--text--color--link--hover --pf-t--global--text--color--link--200 --pf-t--color--blue--60 #004d99
	.pf-v6-c-simple-list__item-link.pf-m-link	--pf-v6-c-simple-list__item-link--m-current--Color	(In light theme) #004d99
--pf-v6-c-simple-list__item-link--m-current--Color --pf-v6-c-simple-list__item-link--m-link--hover--Color --pf-t--global--text--color--link--hover --pf-t--global--text--color--link--200 --pf-t--color--blue--60 #004d99
	.pf-v6-c-simple-list__item-link:is(:hover, :focus)	--pf-v6-c-simple-list__item-link--BackgroundColor	(In light theme) rgb(199, 199, 199, 0.2500)
--pf-v6-c-simple-list__item-link--BackgroundColor --pf-v6-c-simple-list__item-link--hover--BackgroundColor --pf-t--global--background--color--action--plain--hover --pf-t--global--background--color--600 rgb(199, 199, 199, 0.2500)
	.pf-v6-c-simple-list__item-link:is(:hover, :focus)	--pf-v6-c-simple-list__item-link--Color	(In light theme) #4d4d4d
--pf-v6-c-simple-list__item-link--Color --pf-v6-c-simple-list__item-link--hover--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-simple-list__item-link:is(:hover, :focus)	--pf-v6-c-simple-list__item-link--BorderWidth	0px
--pf-v6-c-simple-list__item-link--BorderWidth --pf-v6-c-simple-list__item-link--hover--BorderWidth --pf-t--global--border--width--action--plain--hover 0px
	.pf-v6-c-simple-list__item-link.pf-m-current	--pf-v6-c-simple-list__item-link--BackgroundColor	(In light theme) rgb(199, 199, 199, 0.2500)
--pf-v6-c-simple-list__item-link--BackgroundColor --pf-v6-c-simple-list__item-link--m-current--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgb(199, 199, 199, 0.2500)
	.pf-v6-c-simple-list__item-link.pf-m-current	--pf-v6-c-simple-list__item-link--Color	(In light theme) #151515
--pf-v6-c-simple-list__item-link--Color --pf-v6-c-simple-list__item-link--m-current--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-simple-list__item-link.pf-m-current	--pf-v6-c-simple-list__item-link--BorderWidth	0px
--pf-v6-c-simple-list__item-link--BorderWidth --pf-v6-c-simple-list__item-link--m-current--BorderWidth --pf-t--global--border--width--action--plain--clicked 0px