Skip to content

Simple list

A simple list displays selectable items within a page.

Examples

Simple list

Simple list with links

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
.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

Edit this page on GitHub
Red Hat
Copyright © 2014-2025 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines