Skip to content
PatternFly

Tabs

Tabs allow users to navigate between views within the same page or context.

Examples

Default

Default tabs example

Default tabs usage

Class
Applied to
Outcome
.pf-m-disabled
a.pf-v5-c-tabs__link
Modifies a tabs link for disabled styles.
.pf-m-aria-disabled
.pf-v5-c-tabs__link
Modifies a tabs link for disabled styles, but is still hoverable/focusable.

Overflow

Overflow beginning of list example

Overflow beginning of list usage

Class
Applied to
Outcome
.pf-m-scrollable
.pf-v5-c-tabs
Enables the directional scroll buttons.
.pf-v5-c-tabs__scroll-button
<button>
Initiates a tabs component scroll button.

Horizontal overflow example

Horizontal overflow expanded example

Horizontal overflow selected example

Vertical

Vertical tabs example

Vertical expandable example

Vertical expanded example

Vertical expandable responsive example

Vertical expandable example (deprecated)

Containers

Vertical expanded example (deprecated)

Containers

Vertical expandable responsive example (deprecated)

Containers

Box

Box tabs example

Box overflow example

Box vertical example

Box tabs color scheme light 300 example

Tab insets

Default tab insets example

Box tab insets example

Page insets example

Insets usage

Class
Applied to
Outcome
.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}
.pf-v5-c-tabs
Modifies the tabs component padding/inset to visually match padding of other adjacent components.
.pf-m-page-insets
.pf-v5-c-tabs
Modifies the tabs component padding/inset to visually match padding of page elements.

Icons

Icons and text example

Sub tabs

Tabs with sub tabs example

Box tabs with sub tabs example

Filled

Filled tabs example

Filled with icons example

Filled box example

Filled box with icons example

Filled usage

Class
Applied to
Outcome
.pf-m-fill
.pf-v5-c-tabs
Modifies the tabs to fill the available space. Required

Tabs as navigation

Using the nav element example

Sub tabs using the nav element example

Tab item actions

Help button example











Close button example











Help and close button example











Add tab button

Add tab button example





Documentation

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.

Tabs should be used with the tab content component.

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-v5-c-tabs
<nav>, <div>
Initiates the tabs component. Required
.pf-v5-c-tabs__list
<ul>
Initiates a tabs component list. Required
.pf-v5-c-tabs__item
<li>
Initiates a tabs component item. Required
.pf-v5-c-tabs__item-text
<span>
Initiates a tabs component item icon. Required
.pf-v5-c-tabs__item-icon
<span>
Initiates a tabs component item text. Required
.pf-v5-c-tabs__item-close
<span>
Initiates a tabs component item close.
.pf-v5-c-tabs__item-close-icon
<span>
Initiates a tabs component item close icon.
.pf-v5-c-tabs__link
<button>, <a>
Initiates a tabs component link. Required
.pf-v5-c-tabs__scroll-button
<button>
Initiates a tabs component scroll button.
.pf-v5-c-tabs__add
<span>
Initiates a tabs component add button.
.pf-v5-c-tabs__toggle
<div>
Initiates a tabs expandable toggle.
.pf-v5-c-tabs__toggle-button
<button>
Initiates a tabs expandable toggle button.
.pf-v5-c-tabs__toggle-icon
<span>
Initiates a tabs expandable toggle icon.
.pf-v5-c-tabs__toggle-text
<span>
Initiates a tabs expandable toggle text.
.pf-m-secondary
.pf-v5-c-tabs
Applies secondary styling to the tab component.
.pf-m-no-border-bottom
.pf-v5-c-tabs
Removes bottom border from a tab component.
.pf-m-box
.pf-v5-c-tabs
Applies box styling to the tab component.
.pf-m-vertical
.pf-v5-c-tabs
Applies vertical styling to the tab component.
.pf-m-fill
.pf-v5-c-tabs
Modifies the tabs to fill the available space.
.pf-m-current
.pf-v5-c-tabs__item
Indicates that a tab item is currently selected.
.pf-m-action
.pf-v5-c-tabs__item
Indicates that a tab item contains actions other than the tab link.
.pf-m-overflow
.pf-v5-c-tabs__item
Applies overflow menu styling to a tab item.
.pf-m-expanded
.pf-v5-c-tabs__item
Applies expanded styling to the overflow menu tab item.
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}
.pf-v5-c-tabs
Modifies tabs horizontal padding at optional breakpoint.
.pf-m-page-insets
.pf-v5-c-tabs
Modifies the tabs component padding/inset to visually match padding of page elements.
.pf-m-color-scheme--light-300
.pf-v5-c-tabs
Modifies the tabs component tab background colors.
.pf-m-expandable{-on-[breakpoint]}
.pf-v5-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-v5-c-tabs
Modifies the tabs component to be non-expandable at optional breakpoint.
.pf-m-expanded
.pf-v5-c-tabs
Modifies the expandable tabs component for the expanded state.
.pf-m-disabled
a.pf-v5-c-tabs__link
Modifies a tabs link for disabled styles.
.pf-m-aria-disabled
.pf-v5-c-tabs__link
Modifies a tabs link for disabled styles, but is still hoverable/focusable.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-tabs--pf-v5-c-tabs--inset
0
.pf-v5-c-tabs--pf-v5-c-tabs--Width
auto
.pf-v5-c-tabs--pf-v5-c-tabs--before--BorderColor
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs--before--border-width--base
1px
.pf-v5-c-tabs--pf-v5-c-tabs--before--BorderTopWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs--before--BorderRightWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs--before--BorderBottomWidth
1px
.pf-v5-c-tabs--pf-v5-c-tabs--before--BorderLeftWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical--inset
1.5rem
.pf-v5-c-tabs--pf-v5-c-tabs--m-page-insets--inset
1rem
.pf-v5-c-tabs--pf-v5-c-tabs--m-page-insets--xl--inset
1.5rem
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical--Width
100%
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical--MaxWidth
15.625rem
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical--m-box--inset
2rem
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical__list--before--BorderColor
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical__list--before--BorderTopWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical__list--before--BorderBottomWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth
1px
.pf-v5-c-tabs--pf-v5-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth
1px
.pf-v5-c-tabs--pf-v5-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth
1px
.pf-v5-c-tabs--pf-v5-c-tabs--m-color-scheme--light-300__link--BackgroundColor
transparent
.pf-v5-c-tabs--pf-v5-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor
#f0f0f0
.pf-v5-c-tabs--pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor
#f5f5f5
.pf-v5-c-tabs--pf-v5-c-tabs__list--Display
flex
.pf-v5-c-tabs--pf-v5-c-tabs__item--m-action--before--ZIndex
100
.pf-v5-c-tabs--pf-v5-c-tabs__link--Color
#6a6e73
.pf-v5-c-tabs--pf-v5-c-tabs__link--FontSize
1rem
.pf-v5-c-tabs--pf-v5-c-tabs__link--BackgroundColor
transparent
.pf-v5-c-tabs--pf-v5-c-tabs__link--OutlineOffset
calc(-1 * 0.375rem)
.pf-v5-c-tabs--pf-v5-c-tabs__link--PaddingTop
0.5rem
.pf-v5-c-tabs--pf-v5-c-tabs__link--PaddingRight
1rem
.pf-v5-c-tabs--pf-v5-c-tabs__link--PaddingBottom
0.5rem
.pf-v5-c-tabs--pf-v5-c-tabs__link--PaddingLeft
1rem
.pf-v5-c-tabs--pf-v5-c-tabs__link--disabled--Color
#6a6e73
.pf-v5-c-tabs--pf-v5-c-tabs__link--disabled--BackgroundColor
#f5f5f5
.pf-v5-c-tabs--pf-v5-c-tabs__item--m-current__link--Color
#151515
.pf-v5-c-tabs--pf-v5-c-tabs__item--m-current__link--BackgroundColor
#fff
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical__link--PaddingTop
1rem
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical__link--PaddingBottom
1rem
.pf-v5-c-tabs--pf-v5-c-tabs--m-box__link--BackgroundColor
#f0f0f0
.pf-v5-c-tabs--pf-v5-c-tabs--m-box__link--disabled--BackgroundColor
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor
#b8bbbe
.pf-v5-c-tabs--pf-v5-c-tabs--m-secondary__link--FontSize
0.875rem
.pf-v5-c-tabs--pf-v5-c-tabs__item--m-action__link--PaddingRight
0.25rem
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--border-color--base
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--border-width--base
1px
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--BorderTopColor
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--BorderRightColor
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--BorderBottomColor
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--BorderLeftColor
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--BorderTopWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--BorderRightWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--BorderBottomWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--BorderLeftWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--before--Left
calc(1px * -1)
.pf-v5-c-tabs--pf-v5-c-tabs__link--disabled--before--BorderRightWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth
1px
.pf-v5-c-tabs--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--after--Top
auto
.pf-v5-c-tabs--pf-v5-c-tabs__link--after--Right
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--after--Bottom
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--after--BorderColor
#b8bbbe
.pf-v5-c-tabs--pf-v5-c-tabs__link--after--BorderWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--after--BorderTopWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--after--BorderRightWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--after--BorderLeftWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__link--hover--after--BorderWidth
3px
.pf-v5-c-tabs--pf-v5-c-tabs__link--focus--after--BorderWidth
3px
.pf-v5-c-tabs--pf-v5-c-tabs__link--active--after--BorderWidth
3px
.pf-v5-c-tabs--pf-v5-c-tabs__item--m-current__link--after--BorderColor
#06c
.pf-v5-c-tabs--pf-v5-c-tabs__item--m-current__link--after--BorderWidth
3px
.pf-v5-c-tabs--pf-v5-c-tabs__link--child--MarginRight
1rem
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--Color
#151515
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--hover--Color
#06c
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--disabled--Color
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--BackgroundColor
#fff
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--Width
3rem
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--xl--Width
4rem
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--OutlineOffset
calc(-1 * 0.25rem)
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--TransitionDuration--margin
.125s
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--TransitionDuration--transform
.125s
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity
.125s
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--before--BorderColor
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--before--border-width--base
1px
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--before--BorderRightWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--before--BorderBottomWidth
1px
.pf-v5-c-tabs--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth
0
.pf-v5-c-tabs--pf-v5-c-tabs__list--ScrollSnapTypeAxis
x
.pf-v5-c-tabs--pf-v5-c-tabs__list--ScrollSnapTypeStrictness
proximity
.pf-v5-c-tabs--pf-v5-c-tabs__list--ScrollSnapType
x proximity
.pf-v5-c-tabs--pf-v5-c-tabs__item--ScrollSnapAlign
end
.pf-v5-c-tabs--pf-v5-c-tabs--m-vertical__list--ScrollSnapTypeAxis
y
.pf-v5-c-tabs--pf-v5-c-tabs__toggle--Display
flex
.pf-v5-c-tabs--pf-v5-c-tabs__toggle--MarginBottom
0
.pf-v5-c-tabs--pf-v5-c-tabs--m-expanded__toggle--MarginBottom
1rem
.pf-v5-c-tabs--pf-v5-c-tabs__toggle-icon--Color
currentcolor
.pf-v5-c-tabs--pf-v5-c-tabs__toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-v5-c-tabs--pf-v5-c-tabs__toggle-icon--Rotate
0
.pf-v5-c-tabs--pf-v5-c-tabs__toggle-text--MarginLeft
0
.pf-v5-c-tabs--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft
1rem
.pf-v5-c-tabs--pf-v5-c-tabs__toggle-button__toggle-text--Color
#151515
.pf-v5-c-tabs--pf-v5-c-tabs__toggle-button--MarginTop
calc(-1 * 0.375rem)
.pf-v5-c-tabs--pf-v5-c-tabs__toggle-button--MarginBottom
calc(-1 * 0.375rem)
.pf-v5-c-tabs--pf-v5-c-tabs__toggle-button--MarginLeft
calc(-1 * 1rem)
.pf-v5-c-tabs--pf-v5-c-tabs--m-expanded__toggle-icon--Color
#151515
.pf-v5-c-tabs--pf-v5-c-tabs--m-expanded__toggle-icon--Rotate
90deg
.pf-v5-c-tabs--pf-v5-c-tabs__item-action--c-button--FontSize
0.75rem
.pf-v5-c-tabs--pf-v5-c-tabs--m-secondary__item-action--c-button--FontSize
0.75rem
.pf-v5-c-tabs--pf-v5-c-tabs__item-action--c-button--PaddingTop
0.5rem
.pf-v5-c-tabs--pf-v5-c-tabs__item-action--c-button--PaddingRight
0.5rem
.pf-v5-c-tabs--pf-v5-c-tabs__item-action--c-button--PaddingBottom
0.5rem
.pf-v5-c-tabs--pf-v5-c-tabs__item-action--c-button--PaddingLeft
0.5rem
.pf-v5-c-tabs--pf-v5-c-tabs__item-action--last-child--c-button--PaddingRight
1rem
.pf-v5-c-tabs--pf-v5-c-tabs__item-action--c-button--OutlineOffset
-0.1875rem
.pf-v5-c-tabs--pf-v5-c-tabs__item-action-icon--MarginTop
0.125rem
.pf-v5-c-tabs--pf-v5-c-tabs__add--before--BorderColor
#d2d2d2
.pf-v5-c-tabs--pf-v5-c-tabs__add--before--BorderLeftWidth
1px
.pf-v5-c-tabs--pf-v5-c-tabs__add--c-button--FontSize
0.875rem
.pf-v5-c-tabs--pf-v5-c-tabs--m-secondary__add--c-button--FontSize
0.75rem
.pf-v5-c-tabs--pf-v5-c-tabs__add--c-button--PaddingTop
0.5rem
.pf-v5-c-tabs--pf-v5-c-tabs__add--c-button--PaddingBottom
0.5rem
.pf-v5-c-tabs--pf-v5-c-tabs__add--c-button--OutlineOffset
calc(-1 * 0.25rem)
.pf-v5-c-tabs--pf-v5-c-tabs__link-toggle-icon--Color
#6a6e73
.pf-v5-c-tabs--pf-v5-c-tabs__link-toggle-icon--Transition
.2s ease-in 0s
.pf-v5-c-tabs--pf-v5-c-tabs__link-toggle-icon--Rotate
0
.pf-v5-c-tabs--pf-v5-c-tabs__link-toggle-icon--FontSize
0.875rem
.pf-v5-c-tabs--pf-v5-c-tabs__link--m-expanded__toggle-icon--Color
#151515
.pf-v5-c-tabs--pf-v5-c-tabs__link--m-expanded__toggle-icon--Rotate
90deg
.pf-v5-c-tabs--pf-v5-c-tabs__link--hover__toggle-icon--Color
#151515
.pf-v5-c-tabs--pf-v5-c-tabs__link--active__toggle-icon--Color
#151515
.pf-v5-c-tabs--pf-v5-c-tabs__link--focus__toggle-icon--Color
#151515
.pf-v5-c-tabs.pf-m-fill .pf-v5-c-tabs__item:first-child--pf-v5-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth
0
.pf-v5-c-tabs.pf-m-fill .pf-v5-c-tabs__item:last-child--pf-v5-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth
0
.pf-v5-c-tabs.pf-m-no-border-bottom--pf-v5-c-tabs--before--BorderBottomWidth
0
.pf-v5-c-tabs.pf-m-no-border-bottom--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth
0
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__link--pf-v5-c-tabs__link--after--BorderBottomWidth
0
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__link--pf-v5-c-tabs__link--after--BorderTopWidth
0
.pf-v5-c-tabs.pf-m-box--pf-v5-c-tabs__link--BackgroundColor
#f0f0f0
.pf-v5-c-tabs.pf-m-box--pf-v5-c-tabs__link--disabled--BackgroundColor
#d2d2d2
.pf-v5-c-tabs.pf-m-box--pf-v5-c-tabs__link--before--BorderBottomWidth
1px
.pf-v5-c-tabs.pf-m-box--pf-v5-c-tabs__link--before--BorderRightWidth
1px
.pf-v5-c-tabs.pf-m-box--pf-v5-c-tabs__link--disabled--before--BorderRightWidth
1px
.pf-v5-c-tabs.pf-m-box--pf-v5-c-tabs__link--after--Top
0
.pf-v5-c-tabs.pf-m-box--pf-v5-c-tabs__link--after--Bottom
auto
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item:last-child--pf-v5-c-tabs__link--before--BorderRightWidth
0
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current--pf-v5-c-tabs__link--BackgroundColor
#fff
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current--pf-v5-c-tabs__link--before--BorderBottomColor
#fff
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current + .pf-v5-c-tabs__item--pf-v5-c-tabs__link--before--Left
0
.pf-v5-c-tabs.pf-m-box.pf-m-color-scheme--light-300--pf-v5-c-tabs__link--BackgroundColor
transparent
.pf-v5-c-tabs.pf-m-box.pf-m-color-scheme--light-300--pf-v5-c-tabs__item--m-current__link--BackgroundColor
#f0f0f0
.pf-v5-c-tabs.pf-m-box.pf-m-color-scheme--light-300--pf-v5-c-tabs__link--disabled--BackgroundColor
#f5f5f5
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item-action .pf-v5-c-button--pf-v5-c-button--m-plain--disabled--Color
#b8bbbe
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs--Width
100%
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs--inset
1.5rem
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs--before--BorderBottomWidth
0
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs__link--PaddingTop
1rem
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs__link--PaddingBottom
1rem
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs__link--before--Left
0
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth
0
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth
1px
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs__link--after--Top
0
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs__link--after--Bottom
0
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs__link--after--Right
auto
.pf-v5-c-tabs.pf-m-vertical--pf-v5-c-tabs__list--ScrollSnapTypeAxis
y
.pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__link--pf-v5-c-tabs__link--after--BorderTopWidth
0
.pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__link--pf-v5-c-tabs__link--after--BorderLeftWidth
0
.pf-v5-c-tabs.pf-m-vertical.pf-m-expandable--pf-v5-c-tabs__list--Display
none
.pf-v5-c-tabs.pf-m-vertical.pf-m-expandable--pf-v5-c-tabs__toggle--Display
flex
.pf-v5-c-tabs.pf-m-vertical.pf-m-non-expandable--pf-v5-c-tabs__list--Display
flex
.pf-v5-c-tabs.pf-m-vertical.pf-m-non-expandable--pf-v5-c-tabs__toggle--Display
none
.pf-v5-c-tabs.pf-m-vertical.pf-m-expanded--pf-v5-c-tabs__list--Display
flex
.pf-v5-c-tabs.pf-m-vertical.pf-m-expanded--pf-v5-c-tabs__toggle--MarginBottom
1rem
.pf-v5-c-tabs.pf-m-vertical.pf-m-expanded--pf-v5-c-tabs__toggle-icon--Color
#151515
.pf-v5-c-tabs.pf-m-vertical.pf-m-expanded--pf-v5-c-tabs__toggle-icon--Rotate
90deg
.pf-v5-c-tabs.pf-m-box.pf-m-vertical--pf-v5-c-tabs--inset
2rem
.pf-v5-c-tabs.pf-m-box.pf-m-vertical--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth
0
.pf-v5-c-tabs.pf-m-box.pf-m-vertical--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth
1px
.pf-v5-c-tabs.pf-m-box.pf-m-vertical--pf-v5-c-tabs__link--disabled--before--BorderRightWidth
1px
.pf-v5-c-tabs.pf-m-box.pf-m-vertical--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth
1px
.pf-v5-c-tabs.pf-m-box.pf-m-vertical--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth
0
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:last-child--pf-v5-c-tabs__link--before--BorderBottomWidth
0
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:last-child--pf-v5-c-tabs__link--before--BorderRightWidth
1px
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current--pf-v5-c-tabs__link--before--BorderRightColor
#fff
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current--pf-v5-c-tabs__link--before--BorderBottomColor
#d2d2d2
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current--pf-v5-c-tabs__link--before--BorderBottomWidth
1px
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current:first-child--pf-v5-c-tabs__link--before--BorderTopWidth
1px
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:first-child.pf-m-current--pf-v5-c-tabs__link--before--BorderTopWidth
1px
.pf-v5-c-tabs.pf-m-secondary--pf-v5-c-tabs__link--FontSize
0.875rem
.pf-v5-c-tabs.pf-m-secondary--pf-v5-c-tabs__item-action--c-button--FontSize
0.75rem
.pf-v5-c-tabs.pf-m-secondary--pf-v5-c-tabs__add--c-button--FontSize
0.75rem
.pf-v5-c-tabs.pf-m-page-insets--pf-v5-c-tabs--inset
1rem
.pf-v5-c-tabs__toggle-button--pf-v5-c-tabs__toggle-text--MarginLeft
1rem
.pf-v5-c-tabs__toggle-button--pf-v5-c-tabs__toggle-text--Color
#151515
.pf-v5-c-tabs__item.pf-m-current--pf-v5-c-tabs__link--Color
#151515
.pf-v5-c-tabs__item.pf-m-current--pf-v5-c-tabs__link--after--BorderColor
#06c
.pf-v5-c-tabs__item.pf-m-current--pf-v5-c-tabs__link--after--BorderWidth
3px
.pf-v5-c-tabs__item.pf-m-action--pf-v5-c-tabs__link--PaddingRight
0.25rem
.pf-v5-c-tabs__item.pf-m-action--pf-v5-c-tabs__link--after--BorderBottomWidth
0
.pf-v5-c-tabs__item.pf-m-action:hover--pf-v5-c-tabs__link--after--BorderWidth
3px
.pf-v5-c-tabs__item.pf-m-action:focus-within--pf-v5-c-tabs__link--after--BorderWidth
3px
.pf-v5-c-tabs__item.pf-m-action:active--pf-v5-c-tabs__link--after--BorderWidth
3px
.pf-v5-c-tabs__link:hover--pf-v5-c-tabs__link-toggle-icon--Color
#151515
.pf-v5-c-tabs__link:focus--pf-v5-c-tabs__link-toggle-icon--Color
#151515
.pf-v5-c-tabs__link:active--pf-v5-c-tabs__link-toggle-icon--Color
#151515
.pf-v5-c-tabs__item.pf-m-action.pf-m-disabled--pf-v5-c-tabs__link--Color
#6a6e73
.pf-v5-c-tabs__item.pf-m-action.pf-m-disabled--pf-v5-c-tabs__link--BackgroundColor
#f5f5f5
.pf-v5-c-tabs__item.pf-m-action.pf-m-disabled--pf-v5-c-tabs__link--before--BorderRightWidth
0
.pf-v5-c-tabs__item.pf-m-action.pf-m-disabled--pf-v5-c-tabs__link--before--BorderBottomWidth
1px
.pf-v5-c-tabs__item.pf-m-action.pf-m-disabled--pf-v5-c-tabs__link--before--BorderLeftWidth
0
.pf-v5-c-tabs__item.pf-m-action.pf-m-disabled--pf-v5-c-tabs__link--after--BorderWidth
0
.pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon:last-child--pf-v5-c-tabs__link--child--MarginRight
0
.pf-v5-c-tabs__link.pf-m-expanded--pf-v5-c-tabs__link-toggle-icon--Color
#151515
.pf-v5-c-tabs__link.pf-m-expanded--pf-v5-c-tabs__link-toggle-icon--Rotate
90deg
.pf-v5-c-tabs__item-action .pf-v5-c-button--pf-v5-c-button--FontSize
0.75rem
.pf-v5-c-tabs__item-action .pf-v5-c-button--pf-v5-c-button--PaddingTop
0.5rem
.pf-v5-c-tabs__item-action .pf-v5-c-button--pf-v5-c-button--PaddingRight
0.5rem
.pf-v5-c-tabs__item-action .pf-v5-c-button--pf-v5-c-button--PaddingBottom
0.5rem
.pf-v5-c-tabs__item-action .pf-v5-c-button--pf-v5-c-button--PaddingLeft
0.5rem
.pf-v5-c-tabs__item-action:last-child--pf-v5-c-tabs__item-action--c-button--PaddingRight
1rem
.pf-v5-c-tabs__scroll-button:hover--pf-v5-c-tabs__scroll-button--Color
#06c
.pf-v5-c-tabs__scroll-button:nth-of-type(1)--pf-v5-c-tabs__scroll-button--before--BorderRightWidth
1px
.pf-v5-c-tabs__scroll-button:nth-of-type(2)--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth
1px
.pf-v5-c-tabs__scroll-button:disabled--pf-v5-c-tabs__scroll-button--Color
#d2d2d2
.pf-v5-c-tabs__add .pf-v5-c-button--pf-v5-c-button--FontSize
0.875rem
.pf-v5-c-tabs__add .pf-v5-c-button--pf-v5-c-button--PaddingTop
0.5rem
.pf-v5-c-tabs__add .pf-v5-c-button--pf-v5-c-button--PaddingBottom
0.5rem
.pf-v5-c-tabs.pf-m-inset-none--pf-v5-c-tabs--inset
0
.pf-v5-c-tabs.pf-m-inset-none--pf-v5-c-tabs--m-vertical--inset
0
.pf-v5-c-tabs.pf-m-inset-none--pf-v5-c-tabs--m-vertical--m-box--inset
0
.pf-v5-c-tabs.pf-m-inset-sm--pf-v5-c-tabs--inset
0.5rem
.pf-v5-c-tabs.pf-m-inset-sm--pf-v5-c-tabs--m-vertical--inset
0.5rem
.pf-v5-c-tabs.pf-m-inset-sm--pf-v5-c-tabs--m-vertical--m-box--inset
0.5rem
.pf-v5-c-tabs.pf-m-inset-md--pf-v5-c-tabs--inset
1rem
.pf-v5-c-tabs.pf-m-inset-md--pf-v5-c-tabs--m-vertical--inset
1rem
.pf-v5-c-tabs.pf-m-inset-md--pf-v5-c-tabs--m-vertical--m-box--inset
1rem
.pf-v5-c-tabs.pf-m-inset-lg--pf-v5-c-tabs--inset
1.5rem
.pf-v5-c-tabs.pf-m-inset-lg--pf-v5-c-tabs--m-vertical--inset
1.5rem
.pf-v5-c-tabs.pf-m-inset-lg--pf-v5-c-tabs--m-vertical--m-box--inset
1.5rem
.pf-v5-c-tabs.pf-m-inset-xl--pf-v5-c-tabs--inset
2rem
.pf-v5-c-tabs.pf-m-inset-xl--pf-v5-c-tabs--m-vertical--inset
2rem
.pf-v5-c-tabs.pf-m-inset-xl--pf-v5-c-tabs--m-vertical--m-box--inset
2rem
.pf-v5-c-tabs.pf-m-inset-2xl--pf-v5-c-tabs--inset
3rem
.pf-v5-c-tabs.pf-m-inset-2xl--pf-v5-c-tabs--m-vertical--inset
3rem
.pf-v5-c-tabs.pf-m-inset-2xl--pf-v5-c-tabs--m-vertical--m-box--inset
3rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines