Skip to Content
Patternfly Logo

Simple list

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum

Use a Simple list when you need 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.

ExamplesDocumentationCSS Variables

Examples

Simple list

Grouped list

Title

Title

Documentation

Accessibility

AttributeApplied toOutcome
tabindex="0"a.pf-c-simple-list__item-linkInserts the link into the tab order of the page so that it is focusable. Required

Usage

ClassApplied toOutcome
.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-linkModifies the simple list item link for the current state.

CSS Variables

.pf-c-simple-list--pf-c-simple-list__item-link--PaddingTopc_simple_list__item_link_PaddingTop
0.25rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingRightc_simple_list__item_link_PaddingRight
1rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingBottomc_simple_list__item_link_PaddingBottom
0.25rem
.pf-c-simple-list--pf-c-simple-list__item-link--PaddingLeftc_simple_list__item_link_PaddingLeft
1rem
.pf-c-simple-list--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#fff
.pf-c-simple-list--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#151515
.pf-c-simple-list--pf-c-simple-list__item-link--FontSizec_simple_list__item_link_FontSize
0.875rem
.pf-c-simple-list--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
400
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--Colorc_simple_list__item_link_m_current_Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--BackgroundColorc_simple_list__item_link_m_current_BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--m-current--FontWeightc_simple_list__item_link_m_current_FontWeight
700
.pf-c-simple-list--pf-c-simple-list__item-link--hover--Colorc_simple_list__item_link_hover_Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--hover--BackgroundColorc_simple_list__item_link_hover_BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--focus--Colorc_simple_list__item_link_focus_Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--focus--BackgroundColorc_simple_list__item_link_focus_BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--focus--FontWeightc_simple_list__item_link_focus_FontWeight
700
.pf-c-simple-list--pf-c-simple-list__item-link--active--Colorc_simple_list__item_link_active_Color
#06c
.pf-c-simple-list--pf-c-simple-list__item-link--active--BackgroundColorc_simple_list__item_link_active_BackgroundColor
#f0f0f0
.pf-c-simple-list--pf-c-simple-list__item-link--active--FontWeightc_simple_list__item_link_active_FontWeight
700
.pf-c-simple-list--pf-c-simple-list__title--PaddingTopc_simple_list__title_PaddingTop
0.5rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingRightc_simple_list__title_PaddingRight
1rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingBottomc_simple_list__title_PaddingBottom
0.5rem
.pf-c-simple-list--pf-c-simple-list__title--PaddingLeftc_simple_list__title_PaddingLeft
1rem
.pf-c-simple-list--pf-c-simple-list__title--FontSizec_simple_list__title_FontSize
0.875rem
.pf-c-simple-list--pf-c-simple-list__title--Colorc_simple_list__title_Color
#6a6e73
.pf-c-simple-list--pf-c-simple-list__title--FontWeightc_simple_list__title_FontWeight
700
.pf-c-simple-list--pf-c-simple-list__section--section--MarginTopc_simple_list__section_section_MarginTop
0.5rem
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
700
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link.pf-m-current--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#06c
.pf-c-simple-list__item-link:hover--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:hover--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#06c
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
700
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#06c
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
700
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#f0f0f0
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#06c