Simple list

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