CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--MinWidth | 1em | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--TransitionDuration | 100ms | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--Transition | transform 100ms cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--Rotate | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate | -180deg | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate | 180deg | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide | 0s | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade | 100ms | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide | 0s | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade | 200ms | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--TransitionDuration--slide | 0s | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--TransitionDuration--fade | 100ms | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--TransitionDelay--hide | 100ms | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--Opacity | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--TranslateY | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--PaddingInlineStart | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--MaxHeight | 0px | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--Visibility | hidden | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-expand-top__content--TranslateY | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-expanded__content--Opacity | 1 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-expanded__content--TranslateY | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--MaxWidth | auto | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth | 46.875rem | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--BorderColor | (In light theme) #e0e0e0 | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--BorderRadius | 16px | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--TransitionDelay | 100ms | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart | calc(0.5rem + 0.5rem + 1em) | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-truncate__content--LineClamp | 3 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-truncate--Gap | 0.25rem | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__toggle-icon--Rotate | -180deg | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate | 180deg | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__content--TransitionDuration--slide | 0s | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__content--TransitionDuration--fade | 200ms | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__content--Opacity | 1 | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__content--TranslateY | 0 | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__content--Visibility | auto | ||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__content--Overflow | visible | ||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__content--MaxHeight | 99999px | ||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__content--TransitionDelay--hide | 0s | ||
| .pf-v6-c-expandable-section.pf-m-expand-top | --pf-v6-c-expandable-section__toggle-icon--Rotate | 0 | ||
| ||||
| .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) | --pf-v6-c-expandable-section__content--TranslateY | 0 | ||
| .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) | --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade | 0s | ||
| .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) | --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade | 0s | ||
| .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) | --pf-v6-c-expandable-section__content--TranslateY | 0 | ||
| ||||
| .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) | --pf-v6-c-expandable-section__content--TranslateY | 0 | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-limit-width | --pf-v6-c-expandable-section__content--MaxWidth | 46.875rem | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-indented | --pf-v6-c-expandable-section__content--PaddingInlineStart | calc(0.5rem + 0.5rem + 1em) | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-truncate | --pf-v6-c-expandable-section--Gap | 0.25rem | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-truncate | --pf-v6-c-expandable-section__content--TransitionDelay--hide | 0s | ||
| .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top | --pf-v6-c-expandable-section__toggle-icon--Rotate | 0 | ||
| ||||
