@patternfly/patternfly/docs/components/TabContent/examples/TabContent.md

Assets, source, tooling, and content for PatternFly 4

---
id: Tab content
section: components
cssPrefix: pf-v5-c-tab-content
---## Examples

### Basic

```html
<section
  class="pf-v5-c-tab-content"
  id="basic-tab1-panel"
  role="tabpanel"
  tabindex="0"
>
  <div class="pf-v5-c-tab-content__body">Panel 1</div>
</section>
<section
  class="pf-v5-c-tab-content"
  id="basic-tab2-panel"
  role="tabpanel"
  tabindex="0"
  hidden
>
  <div class="pf-v5-c-tab-content__body">Panel 2</div>
</section>
<section
  class="pf-v5-c-tab-content"
  id="basic-tab3-panel"
  role="tabpanel"
  tabindex="0"
  hidden
>
  <div class="pf-v5-c-tab-content__body">Panel 3</div>
</section>
<section
  class="pf-v5-c-tab-content"
  id="basic-tab4-panel"
  role="tabpanel"
  tabindex="0"
  hidden
>
  <div class="pf-v5-c-tab-content__body">Panel 4</div>
</section>

```

### Padding

```html
<section
  class="pf-v5-c-tab-content"
  id="tab1-panel-with-padding"
  role="tabpanel"
  tabindex="0"
>
  <div class="pf-v5-c-tab-content__body pf-m-padding">Panel 1</div>
</section>
<section
  class="pf-v5-c-tab-content"
  id="tab2-panel-with-padding"
  role="tabpanel"
  tabindex="0"
  hidden
>
  <div class="pf-v5-c-tab-content__body pf-m-padding">Panel 2</div>
</section>
<section
  class="pf-v5-c-tab-content"
  id="tab3-panel-with-padding"
  role="tabpanel"
  tabindex="0"
  hidden
>
  <div class="pf-v5-c-tab-content__body pf-m-padding">Panel 3</div>
</section>
<section
  class="pf-v5-c-tab-content"
  id="tab4-panel-with-padding"
  role="tabpanel"
  tabindex="0"
  hidden
>
  <div class="pf-v5-c-tab-content__body pf-m-padding">Panel 4</div>
</section>

```

### Light 300 background

```html
<section
  class="pf-v5-c-tab-content pf-m-light-300"
  id="light-300-tab1-panel"
  role="tabpanel"
  tabindex="0"
>
  <div class="pf-v5-c-tab-content__body">Panel 1</div>
</section>
<section
  class="pf-v5-c-tab-content pf-m-light-300"
  id="light-300-tab2-panel"
  role="tabpanel"
  tabindex="0"
  hidden
>
  <div class="pf-v5-c-tab-content__body">Panel 2</div>
</section>
<section
  class="pf-v5-c-tab-content pf-m-light-300"
  id="light-300-tab3-panel"
  role="tabpanel"
  tabindex="0"
  hidden
>
  <div class="pf-v5-c-tab-content__body">Panel 3</div>
</section>
<section
  class="pf-v5-c-tab-content pf-m-light-300"
  id="light-300-tab4-panel"
  role="tabpanel"
  tabindex="0"
  hidden
>
  <div class="pf-v5-c-tab-content__body">Panel 4</div>
</section>

```

## Documentation

### Overview

Tab content should be used with the [tabs component](/components/tabs).

### 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. |