Skip to content
PatternFly logo

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

Grouped list

Title

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--pf-c-simple-list__item-link--PaddingRight
1rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingBottom
0.25rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingLeft
1rem
.pf-c-simple-list--pf-c-simple-list__item-link--BackgroundColor
#fff
.pf-c-simple-list--pf-c-simple-list__item-link--Color
#151515
.pf-c-simple-list--pf-c-simple-list__item-link--FontSize
0.875rem
.pf-c-simple-list--pf-c-simple-list__item-link--FontWeight
400
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--FontWeight
400
.pf-c-simple-list--pf-c-simple-list__item-link--hover--Color
#151515
.pf-c-simple-list--pf-c-simple-list__item-link--hover--BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--focus--Color
#151515
.pf-c-simple-list--pf-c-simple-list__item-link--focus--BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--focus--FontWeight
400
.pf-c-simple-list--pf-c-simple-list__item-link--active--Color
#151515
.pf-c-simple-list--pf-c-simple-list__item-link--active--BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--active--FontWeight
400
.pf-c-simple-list--pf-c-simple-list__title--PaddingTop
0.5rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingRight
1rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingBottom
0.5rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingLeft
1rem
.pf-c-simple-list--pf-c-simple-list__title--FontSize
0.875rem
.pf-c-simple-list--pf-c-simple-list__title--Color
#6a6e73
.pf-c-simple-list--pf-c-simple-list__title--FontWeight
700
.pf-c-simple-list--pf-c-simple-list__section--section--MarginTop
0.5rem
.pf-c-simple-list__item-link:hover--pf-c-simple-list__item-link--BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:hover--pf-c-simple-list__item-link--Color
#151515
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--FontWeight
400
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--Color
#151515
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--FontWeight
400
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--Color
#151515
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--FontWeight
400
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--Color
#06c

View source on GitHub