Skip to content
Patternfly Logo

Info alert:Beta feature

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

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
700
.pf-c-simple-list--pf-c-simple-list__item-link--hover--Color
#06c
.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
#06c
.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
700
.pf-c-simple-list--pf-c-simple-list__item-link--active--Color
#06c
.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
700
.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.pf-m-current--pf-c-simple-list__item-link--FontWeight
700
.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
.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
#06c
.pf-c-simple-list__item-link:focus--pf-c-simple-list__item-link--FontWeight
700
.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
#06c
.pf-c-simple-list__item-link:active--pf-c-simple-list__item-link--FontWeight
700
.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
#06c

View source on GitHub