Examples
Documentation
Accessibility
Attribute | Applied to | Outcome |
---|---|---|
tabindex="0" | a.pf-v5-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-v5-c-simple-list | <div> | Initiates a simple list. |
.pf-v5-c-simple-list__section | <section> | Initiates a simple list section. |
.pf-v5-c-simple-list__title | <h2> | Initiates a simple list title. |
.pf-v5-c-simple-list__list | <ul> | Initiates a simple list unordered list. |
.pf-v5-c-simple-list__item | <li> | Initiates a simple list item. |
.pf-v5-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-v5-c-simple-list__item-link | Modifies the simple list item link for the current state. |
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--PaddingTop | 0.25rem | ||
--pf-v5-c-simple-list__item-link--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--PaddingRight | 1rem | ||
--pf-v5-c-simple-list__item-link--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--PaddingBottom | 0.25rem | ||
--pf-v5-c-simple-list__item-link--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--PaddingLeft | 1rem | ||
--pf-v5-c-simple-list__item-link--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--BackgroundColor | #fff | ||
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--Color | #151515 | ||
--pf-v5-c-simple-list__item-link--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--FontSize | 0.875rem | ||
--pf-v5-c-simple-list__item-link--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--FontWeight | 400 | ||
--pf-v5-c-simple-list__item-link--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--m-current--Color | #06c | ||
--pf-v5-c-simple-list__item-link--m-current--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--m-current--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-simple-list__item-link--m-current--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--m-current--FontWeight | 400 | ||
--pf-v5-c-simple-list__item-link--m-current--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--hover--Color | #151515 | ||
--pf-v5-c-simple-list__item-link--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-simple-list__item-link--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--focus--Color | #151515 | ||
--pf-v5-c-simple-list__item-link--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--focus--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-simple-list__item-link--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--focus--FontWeight | 400 | ||
--pf-v5-c-simple-list__item-link--focus--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--active--Color | #151515 | ||
--pf-v5-c-simple-list__item-link--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--active--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-simple-list__item-link--active--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__item-link--active--FontWeight | 400 | ||
--pf-v5-c-simple-list__item-link--active--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__title--PaddingTop | 0.5rem | ||
--pf-v5-c-simple-list__title--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__title--PaddingRight | 1rem | ||
--pf-v5-c-simple-list__title--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__title--PaddingBottom | 0.5rem | ||
--pf-v5-c-simple-list__title--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__title--PaddingLeft | 1rem | ||
--pf-v5-c-simple-list__title--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__title--FontSize | 0.875rem | ||
--pf-v5-c-simple-list__title--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__title--Color | #6a6e73 | ||
--pf-v5-c-simple-list__title--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__title--FontWeight | 700 | ||
--pf-v5-c-simple-list__title--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
.pf-v5-c-simple-list | --pf-v5-c-simple-list__section--section--MarginTop | 0.5rem | ||
--pf-v5-c-simple-list__section--section--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-simple-list__item-link:hover | --pf-v5-c-simple-list__item-link--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-c-simple-list__item-link--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-simple-list__item-link:hover | --pf-v5-c-simple-list__item-link--Color | #151515 | ||
--pf-v5-c-simple-list__item-link--Color --pf-v5-c-simple-list__item-link--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-simple-list__item-link:focus | --pf-v5-c-simple-list__item-link--FontWeight | 400 | ||
--pf-v5-c-simple-list__item-link--FontWeight --pf-v5-c-simple-list__item-link--focus--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
.pf-v5-c-simple-list__item-link:focus | --pf-v5-c-simple-list__item-link--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-c-simple-list__item-link--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-simple-list__item-link:focus | --pf-v5-c-simple-list__item-link--Color | #151515 | ||
--pf-v5-c-simple-list__item-link--Color --pf-v5-c-simple-list__item-link--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-simple-list__item-link:active | --pf-v5-c-simple-list__item-link--FontWeight | 400 | ||
--pf-v5-c-simple-list__item-link--FontWeight --pf-v5-c-simple-list__item-link--active--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
.pf-v5-c-simple-list__item-link:active | --pf-v5-c-simple-list__item-link--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-c-simple-list__item-link--active--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-simple-list__item-link:active | --pf-v5-c-simple-list__item-link--Color | #151515 | ||
--pf-v5-c-simple-list__item-link--Color --pf-v5-c-simple-list__item-link--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-simple-list__item-link.pf-m-current | --pf-v5-c-simple-list__item-link--FontWeight | 400 | ||
--pf-v5-c-simple-list__item-link--FontWeight --pf-v5-c-simple-list__item-link--m-current--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
.pf-v5-c-simple-list__item-link.pf-m-current | --pf-v5-c-simple-list__item-link--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-simple-list__item-link--BackgroundColor --pf-v5-c-simple-list__item-link--m-current--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-simple-list__item-link.pf-m-current | --pf-v5-c-simple-list__item-link--Color | #06c | ||
--pf-v5-c-simple-list__item-link--Color --pf-v5-c-simple-list__item-link--m-current--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c |
View source on GitHub