Tab content

A tab content component should be used with the tabs component.

Examples

Basic

Panel 1

Padding

Panel 1

Secondary

Panel 1

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 columnSelectorVariableValue
: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
16px
:where(:root, .pf-v6-c-tab-content)--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd
16px
:where(:root, .pf-v6-c-tab-content)--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd
16px
:where(:root, .pf-v6-c-tab-content)--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart
16px
:where(:root, .pf-v6-c-tab-content)--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart
24px
:where(:root, .pf-v6-c-tab-content)--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd
24px
:where(:root, .pf-v6-c-tab-content)--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd
24px
:where(:root, .pf-v6-c-tab-content)--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart
24px
:where(:root, .pf-v6-c-tab-content)--pf-v6-c-tab-content--m-secondary--BackgroundColor
#f2f2f2
.pf-v6-c-tab-content.pf-m-secondary--pf-v6-c-tab-content--BackgroundColor
#f2f2f2
.pf-v6-c-tab-content__body.pf-m-padding--pf-v6-c-tab-content__body--PaddingBlockStart
16px
.pf-v6-c-tab-content__body.pf-m-padding--pf-v6-c-tab-content__body--PaddingInlineEnd
16px
.pf-v6-c-tab-content__body.pf-m-padding--pf-v6-c-tab-content__body--PaddingBlockEnd
16px
.pf-v6-c-tab-content__body.pf-m-padding--pf-v6-c-tab-content__body--PaddingInlineStart
16px

View source on GitHub