Examples
Documentation
Overview
Tab content should be used with the tabs component.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
role="tabpanel" | .pf-v6-c-tab-content | Indicates that the element serves as a container for a set of tabs. Required |
aria-labelledby=[ID of tab element] | .pf-v6-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-v6-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-v6-c-tab-content | Indicates that the tab panel is not visible. Required on all but the active tab panel |
tabindex="0" | .pf-v6-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-v6-c-tab-content | <section> | Initiates the tab content component. Required |
.pf-v6-c-tab-content__body | <div> | Initiates the tab content body component. |
.pf-m-padding | .pf-v6-c-tab-content__body | Modifies the tab content body component padding. |
.pf-m-secondary | .pf-v6-c-tab-content | Modifies the tab content component for secondary styles. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :root | --pf-v6-c-tab-content__body--PaddingTop | 0 | ||
| :root | --pf-v6-c-tab-content__body--PaddingRight | 0 | ||
| :root | --pf-v6-c-tab-content__body--PaddingBottom | 0 | ||
| :root | --pf-v6-c-tab-content__body--PaddingLeft | 0 | ||
| :root | --pf-v6-c-tab-content--BackgroundColor | transparent | ||
| :root | --pf-v6-c-tab-content__body--m-padding--PaddingTop | 16px | ||
--pf-v6-c-tab-content__body--m-padding--PaddingTop --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-tab-content__body--m-padding--PaddingRight | 16px | ||
--pf-v6-c-tab-content__body--m-padding--PaddingRight --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-tab-content__body--m-padding--PaddingBottom | 16px | ||
--pf-v6-c-tab-content__body--m-padding--PaddingBottom --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-tab-content__body--m-padding--PaddingLeft | 16px | ||
--pf-v6-c-tab-content__body--m-padding--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-tab-content__body--m-padding--xl--PaddingTop | 24px | ||
--pf-v6-c-tab-content__body--m-padding--xl--PaddingTop --pf-t--global--spacer--lg --pf-t--global--spacer--400 24px | ||||
| :root | --pf-v6-c-tab-content__body--m-padding--xl--PaddingRight | 24px | ||
--pf-v6-c-tab-content__body--m-padding--xl--PaddingRight --pf-t--global--spacer--lg --pf-t--global--spacer--400 24px | ||||
| :root | --pf-v6-c-tab-content__body--m-padding--xl--PaddingBottom | 24px | ||
--pf-v6-c-tab-content__body--m-padding--xl--PaddingBottom --pf-t--global--spacer--lg --pf-t--global--spacer--400 24px | ||||
| :root | --pf-v6-c-tab-content__body--m-padding--xl--PaddingLeft | 24px | ||
--pf-v6-c-tab-content__body--m-padding--xl--PaddingLeft --pf-t--global--spacer--lg --pf-t--global--spacer--400 24px | ||||
| :root | --pf-v6-c-tab-content--m-secondary--BackgroundColor | #f2f2f2 | ||
--pf-v6-c-tab-content--m-secondary--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2 | ||||
| .pf-v6-c-tab-content.pf-m-secondary | --pf-v6-c-tab-content--BackgroundColor | #f2f2f2 | ||
--pf-v6-c-tab-content--BackgroundColor --pf-v6-c-tab-content--m-secondary--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2 | ||||
| .pf-v6-c-tab-content__body.pf-m-padding | --pf-v6-c-tab-content__body--PaddingTop | 16px | ||
--pf-v6-c-tab-content__body--PaddingTop --pf-v6-c-tab-content__body--m-padding--PaddingTop --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| .pf-v6-c-tab-content__body.pf-m-padding | --pf-v6-c-tab-content__body--PaddingRight | 16px | ||
--pf-v6-c-tab-content__body--PaddingRight --pf-v6-c-tab-content__body--m-padding--PaddingRight --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| .pf-v6-c-tab-content__body.pf-m-padding | --pf-v6-c-tab-content__body--PaddingBottom | 16px | ||
--pf-v6-c-tab-content__body--PaddingBottom --pf-v6-c-tab-content__body--m-padding--PaddingBottom --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| .pf-v6-c-tab-content__body.pf-m-padding | --pf-v6-c-tab-content__body--PaddingLeft | 16px | ||
--pf-v6-c-tab-content__body--PaddingLeft --pf-v6-c-tab-content__body--m-padding--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
View source on GitHub
