Simple list

A simple list displays selectable items within a page.

Examples

Simple list

Grouped list

Title

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 columnSelectorVariableValue
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--PaddingBlockStart
0.25rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--PaddingBlockEnd
0.25rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--FontSize
0.875rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--m-current--Color
(In light theme) #151515
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--m-current--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--hover--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--BorderRadius
4px
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--m-link--Color
(In light theme) #0066cc
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--m-link--m-current--Color
(In light theme) #004d99
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__item-link--m-link--hover--Color
(In light theme) #004d99
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__title--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__title--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__title--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__title--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__title--FontSize
0.75rem
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__title--Color
(In light theme) #151515
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__title--FontWeight
500
:where(:root, .pf-v6-c-simple-list)--pf-v6-c-simple-list__section--section--MarginBlockStart
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.pf-m-link--pf-v6-c-simple-list__item-link--hover--Color
(In light theme) #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: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:is(:hover, :focus)--pf-v6-c-simple-list__item-link--Color
(In light theme) #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.pf-m-current--pf-v6-c-simple-list__item-link--Color
(In light theme) #151515