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 VariablesExamples
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 | 500 | ||
| .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 | 500 | ||
| .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 | 500 | ||
| .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 | 500 | ||
| .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 | 500 | ||
| .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 | 500 | ||
| .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 | 500 | ||
| .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 | ||
