Examples
Default
Default tabs usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-disabled | a.pf-v6-c-tabs__link | Modifies a tabs link for disabled styles. |
.pf-m-aria-disabled | .pf-v6-c-tabs__link | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
Overflow
Overflow beginning of list usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-scrollable | .pf-v6-c-tabs | Enables the directional scroll buttons. |
.pf-v6-c-tabs__scroll-button | <div> | Initiates a tabs component scroll button container. |
Vertical
Box
Tab insets
Insets usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]} | .pf-v6-c-tabs | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
.pf-m-page-insets | .pf-v6-c-tabs | Modifies the tabs component padding/inset to visually match padding of page elements. |
Icons
Sub tabs
Filled
Filled usage
Class | Applied to | Outcome |
---|---|---|
.pf-m-fill | .pf-v6-c-tabs | Modifies the tabs to fill the available space. Required |
Tabs as navigation
Tab item actions
Add tab button
Animate current tab accent
To animate the current tab accent, you must set the following variables on the .pf-v6-c-tabs
wrapper. As tabs are added, removed, and resized, these values may need to be updated dynamically. The following examples use static values for these variables and are not updated dynamically, so there may be styling issues. For more functional examples, see the react tabs component examples.
--pf-v6-c-tabs--link-accent--start
- the left offset of the current tab--pf-v6-c-tabs--link-accent--length
- the width of the current tab
Tab content
Documentation
Tabs overview
The tabs component should only be used to change content views within a page. The similar-looking but semantically different horizontal nav component is available for general navigation use cases.
Whenever a list of tabs is unique on the current page, it can be used in a <nav>
element. Cases where the same set of tabs are duplicated in multiple regions on a page (e.g. cards on a dashboard) are less likely to benefit from using the <nav>
element.
Usage
Class | Applied to | Outcome |
---|---|---|
.pf-v6-c-tabs | <nav> , <div> | Initiates the tabs component. Required |
.pf-v6-c-tabs__list | <ul> | Initiates a tabs component list. Required |
.pf-v6-c-tabs__item | <li> | Initiates a tabs component item. Required |
.pf-v6-c-tabs__item-text | <span> | Initiates a tabs component item icon. Required |
.pf-v6-c-tabs__item-icon | <span> | Initiates a tabs component item text. Required |
.pf-v6-c-tabs__item-close | <span> | Initiates a tabs component item close. |
.pf-v6-c-tabs__item-close-icon | <span> | Initiates a tabs component item close icon. |
.pf-v6-c-tabs__link | <button> , <a> | Initiates a tabs component link. Required |
.pf-v6-c-tabs__scroll-button | <div> | Initiates a tabs component scroll button container. |
.pf-v6-c-tabs__add | <span> | Initiates a tabs component add button. |
.pf-v6-c-tabs__toggle | <div> | Initiates a tabs expandable toggle. |
.pf-v6-c-tabs__toggle-button | <button> | Initiates a tabs expandable toggle button. |
.pf-v6-c-tabs__toggle-icon | <span> | Initiates a tabs expandable toggle icon. |
.pf-v6-c-tabs__toggle-text | <span> | Initiates a tabs expandable toggle text. |
.pf-m-subtab | .pf-v6-c-tabs | Applies subtab styling to the tab component. |
.pf-m-no-border-bottom | .pf-v6-c-tabs | Removes bottom border from a tab component. |
.pf-m-box | .pf-v6-c-tabs | Applies box styling to the tab component. |
.pf-m-vertical | .pf-v6-c-tabs | Applies vertical styling to the tab component. |
.pf-m-fill | .pf-v6-c-tabs | Modifies the tabs to fill the available space. |
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]} | .pf-v6-c-tabs | Modifies tabs horizontal padding at optional breakpoint. |
.pf-m-page-insets | .pf-v6-c-tabs | Modifies the tabs component padding/inset to visually match padding of page elements. |
.pf-m-secondary | .pf-v6-c-tabs.pf-m-box | Modifies the tabs component tab background colors for the box variant. |
.pf-m-expandable{-on-[breakpoint]} | .pf-v6-c-tabs | Modifies the tabs component to be expandable via a toggle at optional breakpoint. Note: works with vertical tabs only. |
.pf-m-non-expandable{-on-[breakpoint]} | .pf-v6-c-tabs | Modifies the tabs component to be non-expandable at optional breakpoint. |
.pf-m-expanded | .pf-v6-c-tabs | Modifies the expandable tabs component for the expanded state. |
.pf-m-animate-current | .pf-v6-c-tabs | Modifies tabs to animate movement of the current tab accent line. |
.pf-m-initializing-accent | .pf-v6-c-tabs.pf-m-animate-current | Modifies tabs styles while initializing the "current" tab's accent styles. |
--pf-v6-c-tabs--link-accent--start | .pf-v6-c-tabs.pf-m-animate-current | Sets the value for the "start" inset of the current tab's accent. |
--pf-v6-c-tabs--link-accent--length | .pf-v6-c-tabs.pf-m-animate-current | Sets the value for the length of the current tab's accent. |
.pf-m-current | .pf-v6-c-tabs__item | Indicates that a tab item is currently selected. |
.pf-m-action | .pf-v6-c-tabs__item | Indicates that a tab item contains actions other than the tab link. |
.pf-m-overflow | .pf-v6-c-tabs__item | Applies overflow menu styling to a tab item. |
.pf-m-expanded | .pf-v6-c-tabs__item | Applies expanded styling to the overflow menu tab item. |
.pf-m-disabled | a.pf-v6-c-tabs__link | Modifies a tabs link for disabled styles. |
.pf-m-aria-disabled | .pf-v6-c-tabs__link | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
Tab content 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 |
Tab content 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 | |
---|---|---|---|---|
.pf-v6-c-tabs | --pf-v6-c-tabs--inset | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--Width | auto | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--before--border-width--base | 1px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--before--BorderBlockStartWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--before--BorderInlineEndWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--before--BorderBlockEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--before--BorderInlineStartWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical--inset | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-page-insets--inset | 1rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical--Width | 100% | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical--MaxWidth | 15.625rem | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical--m-box--inset | 1rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__list--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__list--before--BorderBlockStartWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth | 1px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__list--Display | flex | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--BackgroundColor | transparent | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--ColumnGap | 0.25rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__item--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--m-current--BackgroundColor | transparent | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box__item--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--m-action--before--ZIndex | 200 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--BorderRadius | 6px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--PaddingBlockStart | 0.25rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--PaddingBlockEnd | 0.25rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--ColumnGap | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--m-current__link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--m-current__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__link--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box__link--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box__link--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-subtab__link--FontSize | 0.75rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--border-color--base | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--border-width--base | 1px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--BorderBlockStartColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--BorderInlineEndColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--BorderInlineStartColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--BorderBlockStartWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--BorderInlineEndWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--BorderBlockEndWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--BorderInlineStartWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--before--InsetInlineStart | calc(1px * -1) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--after--InsetBlockStart | auto | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--after--InsetInlineEnd | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--after--InsetBlockEnd | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--after--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--after--BorderWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--after--BorderBlockStartWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--after--BorderInlineEndWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--after--BorderInlineStartWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--m-current__link--after--BorderColor | (In light theme) #0066cc | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--m-current__link--after--BorderWidth | 3px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--Width | 3rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--TransitionDuration--margin | .125s | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--TransitionDuration--transform | .125s | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--TransitionDuration--opacity | .125s | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--before--border-width--base | 1px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--before--BorderBlockEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__list--ScrollSnapTypeAxis | x | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__list--ScrollSnapTypeStrictness | proximity | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__list--ScrollSnapType | x proximity | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item--ScrollSnapAlign | end | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis | y | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__toggle--Display | flex | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__toggle-icon--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__toggle-icon--TransitionDuration | 100ms | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__toggle-icon--Transition | transform 100ms cubic-bezier(.4, 0, .2, 1) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__toggle-icon--Rotate | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate | 90deg | ||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-expandable--RowGap | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-expandable--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-expandable--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-expandable--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-expandable--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item-action--c-button--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize | 0.75rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__item-action-icon--MarginBlockStart | 0.125rem | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__add--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__add--before--BorderInlineStartWidth | 1px | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__add--c-button--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs--m-subtab__add--c-button--FontSize | 0.75rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__add--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__add--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__add--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__add--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link-toggle-icon--Color | (In light theme) #1f1f1f | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link-toggle-icon--TransitionDuration | 100ms | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link-toggle-icon--Transition | transform 100ms cubic-bezier(.4, 0, .2, 1) | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link-toggle-icon--Rotate | 0 | ||
.pf-v6-c-tabs | --pf-v6-c-tabs__link-toggle-icon--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-tabs | --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate | 90deg | ||
.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item:first-child | --pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth | 0 | ||
.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item:last-child | --pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth | 0 | ||
.pf-v6-c-tabs.pf-m-no-border-bottom | --pf-v6-c-tabs--before--BorderBlockEndWidth | 0 | ||
.pf-v6-c-tabs.pf-m-no-border-bottom | --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth | 0 | ||
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link | --pf-v6-c-tabs__link--after--BorderBlockEndWidth | 0 | ||
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link | --pf-v6-c-tabs__link--after--BorderBlockStartWidth | 0 | ||
| ||||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__item--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__item--m-current--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__link--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__link--disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__link--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__item--m-current__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__link--before--BorderBlockEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__link--after--InsetBlockStart | 0 | ||
.pf-v6-c-tabs.pf-m-box | --pf-v6-c-tabs__link--after--InsetBlockEnd | auto | ||
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item:last-child | --pf-v6-c-tabs__link--before--BorderInlineEndWidth | 0 | ||
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current | --pf-v6-c-tabs__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current | --pf-v6-c-tabs__link--before--BorderBlockEndColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current + .pf-v6-c-tabs__item | --pf-v6-c-tabs__link--before--InsetInlineStart | 0 | ||
.pf-v6-c-tabs.pf-m-box.pf-m-secondary | --pf-v6-c-tabs__item--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-secondary | --pf-v6-c-tabs__item--m-current--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-secondary | --pf-v6-c-tabs__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-secondary | --pf-v6-c-tabs__link--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-secondary | --pf-v6-c-tabs__link--disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-secondary | --pf-v6-c-tabs__link--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-secondary | --pf-v6-c-tabs__item--m-current__link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs--Width | 100% | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs--inset | 0.5rem | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs--before--BorderBlockEndWidth | 0 | ||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__item--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__item--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__link--PaddingInlineStart | 0.5rem | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__link--PaddingInlineEnd | 0.5rem | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__link--before--InsetInlineStart | 0 | ||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth | 0 | ||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth | 1px | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__link--after--InsetBlockStart | 0 | ||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__link--after--InsetBlockEnd | 0 | ||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__link--after--InsetInlineEnd | auto | ||
.pf-v6-c-tabs.pf-m-vertical | --pf-v6-c-tabs__list--ScrollSnapTypeAxis | y | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__link | --pf-v6-c-tabs__link--after--BorderBlockStartWidth | 0 | ||
.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__link | --pf-v6-c-tabs__link--after--BorderInlineStartWidth | 0 | ||
| ||||
.pf-v6-c-tabs.pf-m-vertical.pf-m-expandable | --pf-v6-c-tabs__list--Display | none | ||
.pf-v6-c-tabs.pf-m-vertical.pf-m-expandable | --pf-v6-c-tabs__toggle--Display | flex | ||
.pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-v6-c-tabs__list--Display | flex | ||
.pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-v6-c-tabs__toggle--Display | none | ||
.pf-v6-c-tabs.pf-m-vertical.pf-m-expanded | --pf-v6-c-tabs__list--Display | flex | ||
.pf-v6-c-tabs.pf-m-vertical.pf-m-expanded | --pf-v6-c-tabs__toggle-icon--Rotate | 90deg | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical | --pf-v6-c-tabs--inset | 1rem | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical | --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth | 0 | ||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical | --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical | --pf-v6-c-tabs__link--before--BorderInlineEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical | --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical | --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical | --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth | 0 | ||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:last-child | --pf-v6-c-tabs__link--before--BorderInlineEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child | --pf-v6-c-tabs__link--before--BorderBlockStartWidth | 1px | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current | --pf-v6-c-tabs__link--before--BorderInlineEndColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current | --pf-v6-c-tabs__link--before--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current | --pf-v6-c-tabs__link--before--BorderBlockStartWidth | 1px | ||
| ||||
.pf-v6-c-tabs.pf-m-subtab | --pf-v6-c-tabs__link--FontSize | 0.75rem | ||
| ||||
.pf-v6-c-tabs.pf-m-subtab | --pf-v6-c-tabs__item-action--c-button--FontSize | 0.75rem | ||
| ||||
.pf-v6-c-tabs.pf-m-subtab | --pf-v6-c-tabs__add--c-button--FontSize | 0.75rem | ||
| ||||
.pf-v6-c-tabs.pf-m-page-insets | --pf-v6-c-tabs--inset | 1rem | ||
| ||||
.pf-v6-c-tabs__item.pf-m-current | --pf-v6-c-tabs__link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-tabs__item.pf-m-current | --pf-v6-c-tabs__link--after--BorderColor | (In light theme) #0066cc | ||
| ||||
.pf-v6-c-tabs__item.pf-m-current | --pf-v6-c-tabs__link--after--BorderWidth | 3px | ||
| ||||
.pf-v6-c-tabs__item.pf-m-current | --pf-v6-c-tabs__item--BackgroundColor | transparent | ||
| ||||
.pf-v6-c-tabs__item.pf-m-action | --pf-v6-c-tabs__link--after--BorderBlockEndWidth | 0 | ||
| ||||
.pf-v6-c-tabs__link:where(:hover, :focus) | --pf-v6-c-tabs__link--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled | --pf-v6-c-tabs__link--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled | --pf-v6-c-tabs__link--before--BorderInlineEndWidth | 0 | ||
| ||||
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled | --pf-v6-c-tabs__link--before--BorderBlockEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled | --pf-v6-c-tabs__link--before--BorderInlineStartWidth | 0 | ||
| ||||
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled | --pf-v6-c-tabs__link--after--BorderWidth | 0 | ||
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled | --pf-v6-c-tabs__link--BackgroundColor | transparent | ||
.pf-v6-c-tabs__link:is(:disabled, .pf-m-disabled, .pf-m-aria-disabled) | --pf-v6-c-tabs__link--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-tabs__link.pf-m-expanded | --pf-v6-c-tabs__link-toggle-icon--Rotate | 90deg | ||
| ||||
.pf-v6-c-tabs__item-action .pf-v6-c-button | --pf-v6-c-button--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-tabs__scroll-button:nth-of-type(1) | --pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth | 1px | ||
| ||||
.pf-v6-c-tabs__scroll-button:nth-of-type(2) | --pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth | 1px | ||
| ||||
.pf-v6-c-tabs__add .pf-v6-c-button | --pf-v6-c-button--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-none | --pf-v6-c-tabs--inset | 0 | ||
.pf-v6-c-tabs.pf-m-inset-none | --pf-v6-c-tabs--m-vertical--inset | 0 | ||
.pf-v6-c-tabs.pf-m-inset-none | --pf-v6-c-tabs--m-vertical--m-box--inset | 0 | ||
.pf-v6-c-tabs.pf-m-inset-sm | --pf-v6-c-tabs--inset | 0.5rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-sm | --pf-v6-c-tabs--m-vertical--inset | 0.5rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-sm | --pf-v6-c-tabs--m-vertical--m-box--inset | 0.5rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-md | --pf-v6-c-tabs--inset | 1rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-md | --pf-v6-c-tabs--m-vertical--inset | 1rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-md | --pf-v6-c-tabs--m-vertical--m-box--inset | 1rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-lg | --pf-v6-c-tabs--inset | 1.5rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-lg | --pf-v6-c-tabs--m-vertical--inset | 1.5rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-lg | --pf-v6-c-tabs--m-vertical--m-box--inset | 1.5rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-xl | --pf-v6-c-tabs--inset | 2rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-xl | --pf-v6-c-tabs--m-vertical--inset | 2rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-xl | --pf-v6-c-tabs--m-vertical--m-box--inset | 2rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-2xl | --pf-v6-c-tabs--inset | 3rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-2xl | --pf-v6-c-tabs--m-vertical--inset | 3rem | ||
| ||||
.pf-v6-c-tabs.pf-m-inset-2xl | --pf-v6-c-tabs--m-vertical--m-box--inset | 3rem | ||
|