Simple list

ExamplesDocumentationCSS Variables

Examples

Simple list

Grouped list

Title

Title

Documentation

Overview

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
var(--pf-global--BackgroundColor--150)
--pf-c-simple-list__item-link--active--Colorc_simple_list__item_link_active_Color
var(--pf-global--link--Color--dark)
--pf-c-simple-list__item-link--active--FontWeightc_simple_list__item_link_active_FontWeight
var(--pf-global--FontWeight--semi-bold)
--pf-c-simple-list__item-link--BackgroundColorc_simple_list__item_link_BackgroundColor
var(--pf-global--BackgroundColor--150)
--pf-c-simple-list__item-link--Colorc_simple_list__item_link_Color
var(--pf-global--link--Color--dark)
--pf-c-simple-list__item-link--focus--BackgroundColorc_simple_list__item_link_focus_BackgroundColor
var(--pf-global--BackgroundColor--150)
--pf-c-simple-list__item-link--focus--Colorc_simple_list__item_link_focus_Color
var(--pf-global--link--Color--dark)
--pf-c-simple-list__item-link--focus--FontWeightc_simple_list__item_link_focus_FontWeight
var(--pf-global--FontWeight--semi-bold)
--pf-c-simple-list__item-link--FontSizec_simple_list__item_link_FontSize
var(--pf-global--FontSize--sm)
--pf-c-simple-list__item-link--FontWeightc_simple_list__item_link_FontWeight
var(--pf-global--FontWeight--semi-bold)
--pf-c-simple-list__item-link--hover--BackgroundColorc_simple_list__item_link_hover_BackgroundColor
var(--pf-global--BackgroundColor--150)
--pf-c-simple-list__item-link--hover--Colorc_simple_list__item_link_hover_Color
var(--pf-global--link--Color--dark)
--pf-c-simple-list__item-link--m-current--BackgroundColorc_simple_list__item_link_m_current_BackgroundColor
var(--pf-global--BackgroundColor--150)
--pf-c-simple-list__item-link--m-current--Colorc_simple_list__item_link_m_current_Color
var(--pf-global--link--Color--dark)
--pf-c-simple-list__item-link--m-current--FontWeightc_simple_list__item_link_m_current_FontWeight
var(--pf-global--FontWeight--semi-bold)
--pf-c-simple-list__item-link--PaddingBottomc_simple_list__item_link_PaddingBottom
var(--pf-global--spacer--xs)
--pf-c-simple-list__item-link--PaddingLeftc_simple_list__item_link_PaddingLeft
var(--pf-global--spacer--md)
--pf-c-simple-list__item-link--PaddingRightc_simple_list__item_link_PaddingRight
var(--pf-global--spacer--md)
--pf-c-simple-list__item-link--PaddingTopc_simple_list__item_link_PaddingTop
var(--pf-global--spacer--xs)
--pf-c-simple-list__section--section--MarginTopc_simple_list__section_section_MarginTop
var(--pf-global--spacer--sm)
--pf-c-simple-list__title--Colorc_simple_list__title_Color
var(--pf-global--Color--dark-200)
--pf-c-simple-list__title--FontSizec_simple_list__title_FontSize
var(--pf-global--FontSize--sm)
--pf-c-simple-list__title--FontWeightc_simple_list__title_FontWeight
var(--pf-global--FontWeight--semi-bold)
--pf-c-simple-list__title--PaddingBottomc_simple_list__title_PaddingBottom
var(--pf-global--spacer--sm)
--pf-c-simple-list__title--PaddingLeftc_simple_list__title_PaddingLeft
var(--pf-global--spacer--md)
--pf-c-simple-list__title--PaddingRightc_simple_list__title_PaddingRight
var(--pf-global--spacer--md)
--pf-c-simple-list__title--PaddingTopc_simple_list__title_PaddingTop
var(--pf-global--spacer--sm)