Examples
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
tabindex="0" | a.pf-v6-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-v6-c-simple-list | <div> | Initiates a simple list. |
.pf-v6-c-simple-list__section | <section> | Initiates a simple list section. |
.pf-v6-c-simple-list__title | <h2> | Initiates a simple list title. |
.pf-v6-c-simple-list__list | <ul> | Initiates a simple list unordered list. |
.pf-v6-c-simple-list__item | <li> | Initiates a simple list item. |
.pf-v6-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-v6-c-simple-list__item-link | Modifies the simple list item link for the current state. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--PaddingBlockStart | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--PaddingBlockEnd | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--m-current--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--m-current--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--hover--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--BorderRadius | 4px | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--m-link--Color | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--m-link--m-current--Color | (In light theme) #004d99 | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__item-link--m-link--hover--Color | (In light theme) #004d99 | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__title--PaddingBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__title--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__title--PaddingBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__title--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__title--FontSize | 0.75rem | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__title--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__title--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-simple-list) | --pf-v6-c-simple-list__section--section--MarginBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-simple-list__item-link.pf-m-link | --pf-v6-c-simple-list__item-link--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-simple-list__item-link.pf-m-link | --pf-v6-c-simple-list__item-link--hover--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-simple-list__item-link.pf-m-link | --pf-v6-c-simple-list__item-link--m-current--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-simple-list__item-link:is(:hover, :focus) | --pf-v6-c-simple-list__item-link--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-simple-list__item-link:is(:hover, :focus) | --pf-v6-c-simple-list__item-link--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-simple-list__item-link.pf-m-current | --pf-v6-c-simple-list__item-link--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-simple-list__item-link.pf-m-current | --pf-v6-c-simple-list__item-link--Color | (In light theme) #151515 | ||
| ||||
