Examples
Documentation
Overview
Tab content should be used with the tabs component.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
role="tabpanel" | .pf-c-tab-content | Indicates that the element serves as a container for a set of tabs. Required |
aria-labelledby=[ID of tab element] | .pf-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-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-c-tab-content | Indicates that the tab panel is not visible. Required on all but the active tab panel |
tabindex="0" | .pf-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-c-tab-content | <section> | Initiates the tab content component. Required |
.pf-c-tab-content__body | <div> | Initiates the tab content body component. |
.pf-m-padding | .pf-c-tab-content__body | Modifies the tab content body component padding. |
.pf-m-light-300 | .pf-c-tab-content | Modifies the tab content component background color. |
CSS variables
| .pf-c-tab-content | --pf-c-tab-content__body--PaddingTop | 0 | ||
| .pf-c-tab-content | --pf-c-tab-content__body--PaddingRight | 0 | ||
| .pf-c-tab-content | --pf-c-tab-content__body--PaddingBottom | 0 | ||
| .pf-c-tab-content | --pf-c-tab-content__body--PaddingLeft | 0 | ||
| .pf-c-tab-content | --pf-c-tab-content__body--m-padding--PaddingTop | 1rem | ||
| .pf-c-tab-content | --pf-c-tab-content__body--m-padding--PaddingRight | 1rem | ||
| .pf-c-tab-content | --pf-c-tab-content__body--m-padding--PaddingBottom | 1rem | ||
| .pf-c-tab-content | --pf-c-tab-content__body--m-padding--PaddingLeft | 1rem | ||
| .pf-c-tab-content | --pf-c-tab-content__body--m-padding--xl--PaddingTop | 1.5rem | ||
| .pf-c-tab-content | --pf-c-tab-content__body--m-padding--xl--PaddingRight | 1.5rem | ||
| .pf-c-tab-content | --pf-c-tab-content__body--m-padding--xl--PaddingBottom | 1.5rem | ||
| .pf-c-tab-content | --pf-c-tab-content__body--m-padding--xl--PaddingLeft | 1.5rem | ||
| .pf-c-tab-content | --pf-c-tab-content--m-light-300 | #f0f0f0 | ||
| .pf-c-tab-content__body.pf-m-padding | --pf-c-tab-content__body--PaddingTop | 1rem | ||
| .pf-c-tab-content__body.pf-m-padding | --pf-c-tab-content__body--PaddingRight | 1rem | ||
| .pf-c-tab-content__body.pf-m-padding | --pf-c-tab-content__body--PaddingBottom | 1rem | ||
| .pf-c-tab-content__body.pf-m-padding | --pf-c-tab-content__body--PaddingLeft | 1rem | ||
View source on GitHub
