Simple list

A simple list provides a list of selectable items that can be shown within a page. Each item is described by a text label. The list may be divided into logical sections by introducing group headers.

Examples

Simple list

Simple list with links

Grouped list

Title

Documentation

Accessibility

Attribute	Applied to	Outcome
`tabindex="0"`	`a.pf-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-c-simple-list`	`<div>`	Initiates a simple list.
`.pf-c-simple-list__section`	`<section>`	Initiates a simple list section.
`.pf-c-simple-list__title`	`<h2>`	Initiates a simple list title.
`.pf-c-simple-list__list`	`<ul>`	Initiates a simple list unordered list.
`.pf-c-simple-list__item`	`<li>`	Initiates a simple list item.
`.pf-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-c-simple-list__item-link`	Modifies the simple list item link for the current state.

CSS variables


	.pf-c-simple-list	--pf-c-simple-list__item-link--PaddingTop	0.25rem
--pf-c-simple-list__item-link--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-simple-list	--pf-c-simple-list__item-link--PaddingRight	1rem
--pf-c-simple-list__item-link--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-simple-list	--pf-c-simple-list__item-link--PaddingBottom	0.25rem
--pf-c-simple-list__item-link--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-simple-list	--pf-c-simple-list__item-link--PaddingLeft	1rem
--pf-c-simple-list__item-link--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-simple-list	--pf-c-simple-list__item-link--BackgroundColor	#fff
--pf-c-simple-list__item-link--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-simple-list	--pf-c-simple-list__item-link--Color	#151515
--pf-c-simple-list__item-link--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-simple-list	--pf-c-simple-list__item-link--FontSize	0.875rem
--pf-c-simple-list__item-link--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-simple-list	--pf-c-simple-list__item-link--FontWeight	400
--pf-c-simple-list__item-link--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-simple-list	--pf-c-simple-list__item-link--m-current--Color	#06c
--pf-c-simple-list__item-link--m-current--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-simple-list	--pf-c-simple-list__item-link--m-current--BackgroundColor	#f0f0f0
--pf-c-simple-list__item-link--m-current--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-simple-list	--pf-c-simple-list__item-link--m-current--FontWeight	400
--pf-c-simple-list__item-link--m-current--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-simple-list	--pf-c-simple-list__item-link--hover--Color	#151515
--pf-c-simple-list__item-link--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-simple-list	--pf-c-simple-list__item-link--hover--BackgroundColor	#f0f0f0
--pf-c-simple-list__item-link--hover--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-simple-list	--pf-c-simple-list__item-link--focus--Color	#151515
--pf-c-simple-list__item-link--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-simple-list	--pf-c-simple-list__item-link--focus--BackgroundColor	#f0f0f0
--pf-c-simple-list__item-link--focus--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-simple-list	--pf-c-simple-list__item-link--focus--FontWeight	400
--pf-c-simple-list__item-link--focus--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-simple-list	--pf-c-simple-list__item-link--active--Color	#151515
--pf-c-simple-list__item-link--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-simple-list	--pf-c-simple-list__item-link--active--BackgroundColor	#f0f0f0
--pf-c-simple-list__item-link--active--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-simple-list	--pf-c-simple-list__item-link--active--FontWeight	400
--pf-c-simple-list__item-link--active--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-simple-list	--pf-c-simple-list__title--PaddingTop	0.5rem
--pf-c-simple-list__title--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-simple-list	--pf-c-simple-list__title--PaddingRight	1rem
--pf-c-simple-list__title--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-simple-list	--pf-c-simple-list__title--PaddingBottom	0.5rem
--pf-c-simple-list__title--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-simple-list	--pf-c-simple-list__title--PaddingLeft	1rem
--pf-c-simple-list__title--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-simple-list	--pf-c-simple-list__title--FontSize	0.875rem
--pf-c-simple-list__title--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-simple-list	--pf-c-simple-list__title--Color	#6a6e73
--pf-c-simple-list__title--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-simple-list	--pf-c-simple-list__title--FontWeight	700
--pf-c-simple-list__title--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold 700
	.pf-c-simple-list	--pf-c-simple-list__section--section--MarginTop	0.5rem
--pf-c-simple-list__section--section--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-simple-list__item-link:hover	--pf-c-simple-list__item-link--BackgroundColor	#f0f0f0
--pf-c-simple-list__item-link--BackgroundColor --pf-c-simple-list__item-link--hover--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-simple-list__item-link:hover	--pf-c-simple-list__item-link--Color	#151515
--pf-c-simple-list__item-link--Color --pf-c-simple-list__item-link--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-simple-list__item-link:focus	--pf-c-simple-list__item-link--FontWeight	400
--pf-c-simple-list__item-link--FontWeight --pf-c-simple-list__item-link--focus--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-simple-list__item-link:focus	--pf-c-simple-list__item-link--BackgroundColor	#f0f0f0
--pf-c-simple-list__item-link--BackgroundColor --pf-c-simple-list__item-link--focus--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-simple-list__item-link:focus	--pf-c-simple-list__item-link--Color	#151515
--pf-c-simple-list__item-link--Color --pf-c-simple-list__item-link--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-simple-list__item-link:active	--pf-c-simple-list__item-link--FontWeight	400
--pf-c-simple-list__item-link--FontWeight --pf-c-simple-list__item-link--active--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-simple-list__item-link:active	--pf-c-simple-list__item-link--BackgroundColor	#f0f0f0
--pf-c-simple-list__item-link--BackgroundColor --pf-c-simple-list__item-link--active--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-simple-list__item-link:active	--pf-c-simple-list__item-link--Color	#151515
--pf-c-simple-list__item-link--Color --pf-c-simple-list__item-link--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-simple-list__item-link.pf-m-current	--pf-c-simple-list__item-link--FontWeight	400
--pf-c-simple-list__item-link--FontWeight --pf-c-simple-list__item-link--m-current--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-simple-list__item-link.pf-m-current	--pf-c-simple-list__item-link--BackgroundColor	#f0f0f0
--pf-c-simple-list__item-link--BackgroundColor --pf-c-simple-list__item-link--m-current--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-simple-list__item-link.pf-m-current	--pf-c-simple-list__item-link--Color	#06c
--pf-c-simple-list__item-link--Color --pf-c-simple-list__item-link--m-current--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines