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
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.
.pf-m-hover.pf-c-simple-list__item-linkModifies the simple list item link for the hover state.
.pf-m-active.pf-c-simple-list__item-linkModifies the simple list item link for the active state.
.pf-m-focus.pf-c-simple-list__item-linkModifies the simple list item link for the focus state.

CSS Variables

--pf-c-simple-list__item-link--active--BackgroundColorc_simple_list__item_link_active_BackgroundColor
#f5f5f5
--pf-c-simple-list__item-link--active--Colorc_simple_list__item_link_active_Color
#004080
--pf-c-simple-list__item-link--active--FontWeightc_simple_list__item_link_active_FontWeight
700
--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
#f5f5f5
--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
#004080
--pf-c-simple-list__item-link--focus--BackgroundColorc_simple_list__item_link_focus_BackgroundColor
#f5f5f5
--pf-c-simple-list__item-link--focus--Colorc_simple_list__item_link_focus_Color
#004080
--pf-c-simple-list__item-link--focus--FontWeightc_simple_list__item_link_focus_FontWeight
700
--pf-c-simple-list__item-link--FontSizec_simple_list__item_link_FontSize
0.875rem
--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
700
--pf-c-simple-list__item-link--hover--BackgroundColorc_simple_list__item_link_hover_BackgroundColor
#f5f5f5
--pf-c-simple-list__item-link--hover--Colorc_simple_list__item_link_hover_Color
#004080
--pf-c-simple-list__item-link--m-current--BackgroundColorc_simple_list__item_link_m_current_BackgroundColor
#f5f5f5
--pf-c-simple-list__item-link--m-current--Colorc_simple_list__item_link_m_current_Color
#004080
--pf-c-simple-list__item-link--m-current--FontWeightc_simple_list__item_link_m_current_FontWeight
700
--pf-c-simple-list__item-link--PaddingBottomc_simple_list__item_link_PaddingBottom
0.25rem
--pf-c-simple-list__item-link--PaddingLeftc_simple_list__item_link_PaddingLeft
1rem
--pf-c-simple-list__item-link--PaddingRightc_simple_list__item_link_PaddingRight
1rem
--pf-c-simple-list__item-link--PaddingTopc_simple_list__item_link_PaddingTop
0.25rem
--pf-c-simple-list__section--section--MarginTopc_simple_list__section_section_MarginTop
0.5rem
--pf-c-simple-list__title--Colorc_simple_list__title_Color
#737679
--pf-c-simple-list__title--FontSizec_simple_list__title_FontSize
0.875rem
--pf-c-simple-list__title--FontWeightc_simple_list__title_FontWeight
700
--pf-c-simple-list__title--PaddingBottomc_simple_list__title_PaddingBottom
0.5rem
--pf-c-simple-list__title--PaddingLeftc_simple_list__title_PaddingLeft
1rem
--pf-c-simple-list__title--PaddingRightc_simple_list__title_PaddingRight
1rem
--pf-c-simple-list__title--PaddingTopc_simple_list__title_PaddingTop
0.5rem