Simple list

A simple list displays selectable items within a page.

Examples

Simple list

Simple list with links

Grouped list

Title

Documentation

Accessibility

Attribute	Applied to	Outcome
`tabindex="0"`	`a.pf-v6-c-simple-list__item-link`	Inserts the link into the tab order of the page so that it is focusable. Required

Usage

Class	Applied to	Outcome
`.pf-v6-c-simple-list`	`<div>`	Initiates a simple list.
`.pf-v6-c-simple-list__section`	`<section>`	Initiates a simple list section.
`.pf-v6-c-simple-list__title`	`<h2>`	Initiates a simple list title.
`.pf-v6-c-simple-list__list`	`<ul>`	Initiates a simple list unordered list.
`.pf-v6-c-simple-list__item`	`<li>`	Initiates a simple list item.
`.pf-v6-c-simple-list__item-link`	`<button>`, `<a>`	Initiates a simple list item link. It can be a button or a link depending on the context.
`.pf-m-current`	`.pf-v6-c-simple-list__item-link`	Modifies the simple list item link for the current state.

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) rgba(255, 255, 255, 0.0000)
--pf-v6-c-simple-list__item-link--BackgroundColor --pf-t--global--background--color--action--plain--default rgba(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) rgba(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 rgba(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) rgba(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 rgba(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--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	500
--pf-v6-c-simple-list__title--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.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) rgba(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 rgba(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.pf-m-current	--pf-v6-c-simple-list__item-link--BackgroundColor	(In light theme) rgba(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 rgba(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

View source on GitHub