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 | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--PaddingBlockStart | 0 | ||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--PaddingInlineEnd | 0 | ||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--PaddingBlockEnd | 0 | ||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--PaddingInlineStart | 0 | ||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-tab-content) | --pf-v6-c-tab-content--m-secondary--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-tab-content.pf-m-secondary | --pf-v6-c-tab-content--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-tab-content__body.pf-m-padding | --pf-v6-c-tab-content__body--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-tab-content__body.pf-m-padding | --pf-v6-c-tab-content__body--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-tab-content__body.pf-m-padding | --pf-v6-c-tab-content__body--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-tab-content__body.pf-m-padding | --pf-v6-c-tab-content__body--PaddingInlineStart | 1rem | ||
| ||||
