Examples
Documentation
Overview
Tab content should be used with the tabs component.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
role="tabpanel" | .pf-v5-c-tab-content | Indicates that the element serves as a container for a set of tabs. Required |
aria-labelledby=[ID of tab element] | .pf-v5-c-tab-content | Provides an accessible name for the tab panel by referring to the tab element that controls it. Required |
id=[ID of tab panel] | .pf-v5-c-tab-content | Provides an ID for the tab panel, and should be used as the value of aria-controls on the tab element that controls the panel. Required |
hidden | .pf-v5-c-tab-content | Indicates that the tab panel is not visible. Required on all but the active tab panel |
tabindex="0" | .pf-v5-c-tab-content | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-tab-content | <section> | Initiates the tab content component. Required |
.pf-v5-c-tab-content__body | <div> | Initiates the tab content body component. |
.pf-m-padding | .pf-v5-c-tab-content__body | Modifies the tab content body component padding. |
.pf-m-light-300 | .pf-v5-c-tab-content | Modifies the tab content component background color. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--PaddingTop | 0 | ||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--PaddingRight | 0 | ||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--PaddingBottom | 0 | ||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--PaddingLeft | 0 | ||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--m-padding--PaddingTop | 1rem | ||
--pf-v5-c-tab-content__body--m-padding--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--m-padding--PaddingRight | 1rem | ||
--pf-v5-c-tab-content__body--m-padding--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--m-padding--PaddingBottom | 1rem | ||
--pf-v5-c-tab-content__body--m-padding--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--m-padding--PaddingLeft | 1rem | ||
--pf-v5-c-tab-content__body--m-padding--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop | 1.5rem | ||
--pf-v5-c-tab-content__body--m-padding--xl--PaddingTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight | 1.5rem | ||
--pf-v5-c-tab-content__body--m-padding--xl--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom | 1.5rem | ||
--pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft | 1.5rem | ||
--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-tab-content | --pf-v5-c-tab-content--m-light-300 | #f0f0f0 | ||
--pf-v5-c-tab-content--m-light-300 --pf-v5-global--BackgroundColor--light-300 $pf-v5-global--BackgroundColor--light-300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-tab-content__body.pf-m-padding | --pf-v5-c-tab-content__body--PaddingTop | 1rem | ||
--pf-v5-c-tab-content__body--PaddingTop --pf-v5-c-tab-content__body--m-padding--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-tab-content__body.pf-m-padding | --pf-v5-c-tab-content__body--PaddingRight | 1rem | ||
--pf-v5-c-tab-content__body--PaddingRight --pf-v5-c-tab-content__body--m-padding--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-tab-content__body.pf-m-padding | --pf-v5-c-tab-content__body--PaddingBottom | 1rem | ||
--pf-v5-c-tab-content__body--PaddingBottom --pf-v5-c-tab-content__body--m-padding--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-tab-content__body.pf-m-padding | --pf-v5-c-tab-content__body--PaddingLeft | 1rem | ||
--pf-v5-c-tab-content__body--PaddingLeft --pf-v5-c-tab-content__body--m-padding--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
View source on GitHub
