Examples
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 | 400 | ||
.pf-c-simple-list | --pf-c-simple-list__item-link--hover--Color | #151515 | ||
.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 | #151515 | ||
.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 | 400 | ||
.pf-c-simple-list | --pf-c-simple-list__item-link--active--Color | #151515 | ||
.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 | 400 | ||
.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:hover | --pf-c-simple-list__item-link--BackgroundColor | #f0f0f0 | ||
.pf-c-simple-list__item-link:hover | --pf-c-simple-list__item-link--Color | #151515 | ||
.pf-c-simple-list__item-link:focus | --pf-c-simple-list__item-link--FontWeight | 400 | ||
.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 | #151515 | ||
.pf-c-simple-list__item-link:active | --pf-c-simple-list__item-link--FontWeight | 400 | ||
.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 | #151515 | ||
.pf-c-simple-list__item-link.pf-m-current | --pf-c-simple-list__item-link--FontWeight | 400 | ||
.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 | ||
View source on GitHub