Examples
Documentation
Overview
There are two variations to build the accordion component:
One way uses <div> and <h1 - h6> tags to build the component.
In these examples .pf-v5-c-accordion uses <div>, .pf-v5-c-accordion__toggle uses <h3><button>, and .pf-v5-c-accordion__expandable-content uses <div>. The heading level that you use should fit within the rest of the headings outlined on your page.
Another variation is using the definition list:
In these examples .pf-v5-c-accordion uses <dl>, .pf-v5-c-accordion__toggle uses <dt><button>, and .pf-v5-c-accordion__expandable-content uses <dd>.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-accordion | <div>, <dl> | Initiates an accordion component. Required |
.pf-v5-c-accordion__toggle | <h1-h6><button>, <dt><button> | Initiates a toggle in the accordion. Required |
.pf-v5-c-accordion__toggle-text | <span> | Initiates the text inside the toggle. Required |
.pf-v5-c-accordion__toggle-icon | <span> | Initiates the toggle icon wrapper. Required |
.pf-v5-c-accordion__expandable-content | <div>, <dd> | Initiates expandable content. Must be paired with a button |
.pf-v5-c-accordion__expandable-content-body | <div> | Initiates expandable content body. Required |
.pf-m-bordered | .pf-v5-c-accordion | Modifies the accordion to add borders between items. |
.pf-m-display-lg | .pf-v5-c-accordion | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
.pf-m-toggle-start | .pf-v5-c-accordion | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |
.pf-m-expanded | .pf-v5-c-accordion__toggle, .pf-v5-c-accordion__expandable-content | Modifies the accordion button and expandable content for the expanded state. |
.pf-m-fixed | .pf-v5-c-accordion__expandable-content | Modifies the expandable content for the fixed state. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-accordion | --pf-v5-global--Color--100 | #151515 | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion | --pf-v5-global--Color--200 | #6a6e73 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-accordion | --pf-v5-global--BorderColor--100 | #d2d2d2 | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-accordion | --pf-v5-global--primary-color--100 | #06c | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion | --pf-v5-global--link--Color | #06c | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--dark $pf-v5-global--link--Color--dark $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion | --pf-v5-global--link--Color--hover | #004080 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--dark--hover $pf-v5-global--link--Color--dark--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-accordion | --pf-v5-global--BackgroundColor--100 | #fff | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-accordion | --pf-v5-global--icon--Color--light | #6a6e73 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--dark $pf-v5-global--icon--Color--light--dark $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-accordion | --pf-v5-global--icon--Color--dark | #151515 | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--dark $pf-v5-global--icon--Color--dark--dark $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--BackgroundColor | #fff | ||
--pf-v5-c-accordion--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--PaddingTop | 0.5rem | ||
--pf-v5-c-accordion__toggle--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--PaddingRight | 1rem | ||
--pf-v5-c-accordion__toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--PaddingBottom | 0.5rem | ||
--pf-v5-c-accordion__toggle--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--PaddingLeft | 1rem | ||
--pf-v5-c-accordion__toggle--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--before--Top | 0 | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--after--Top | 0 | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--after--BackgroundColor | transparent | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-accordion__toggle--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--focus--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-accordion__toggle--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--active--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-accordion__toggle--active--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--before--Width | 3px | ||
--pf-v5-c-accordion__toggle--before--Width --pf-v5-global--BorderWidth--lg $pf-v5-global--BorderWidth--lg 3px | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--after--Width | 3px | ||
--pf-v5-c-accordion__toggle--after--Width --pf-v5-global--BorderWidth--lg $pf-v5-global--BorderWidth--lg 3px | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor | #06c | ||
--pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--BackgroundColor | transparent | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--JustifyContent | space-between | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--ColumnGap | 0 | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent | start | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap | 1rem | ||
--pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle-text--MaxWidth | calc(100% - 1.5rem) | ||
--pf-v5-c-accordion__toggle-text--MaxWidth calc(100% - --pf-v5-global--spacer--lg) calc(100% - $pf-v5-global--spacer--lg) calc(100% - pf-size-prem(24px)) calc(100% - 1.5rem) | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--hover__toggle-text--Color | #06c | ||
--pf-v5-c-accordion__toggle--hover__toggle-text--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--active__toggle-text--Color | #06c | ||
--pf-v5-c-accordion__toggle--active__toggle-text--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--active__toggle-text--FontWeight | 700 | ||
--pf-v5-c-accordion__toggle--active__toggle-text--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--focus__toggle-text--Color | #06c | ||
--pf-v5-c-accordion__toggle--focus__toggle-text--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight | 700 | ||
--pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color | #06c | ||
--pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight | 700 | ||
--pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle-icon--Transition | .2s ease-in 0s | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__toggle--m-expanded__toggle-icon--Rotate | 90deg | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content--Color | #6a6e73 | ||
--pf-v5-c-accordion__expandable-content--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content--FontSize | 0.875rem | ||
--pf-v5-c-accordion__expandable-content--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor | #06c | ||
--pf-v5-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content--m-fixed--MaxHeight | 9.375rem | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content-body--PaddingTop | 0.5rem | ||
--pf-v5-c-accordion__expandable-content-body--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content-body--PaddingRight | 1rem | ||
--pf-v5-c-accordion__expandable-content-body--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content-body--PaddingBottom | 0.5rem | ||
--pf-v5-c-accordion__expandable-content-body--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content-body--PaddingLeft | 1rem | ||
--pf-v5-c-accordion__expandable-content-body--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content-body--expandable-content-body--PaddingTop | 0 | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content-body--after--BackgroundColor | transparent | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content-body--after--Width | 3px | ||
--pf-v5-c-accordion__expandable-content-body--after--Width --pf-v5-global--BorderWidth--lg $pf-v5-global--BorderWidth--lg 3px | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion__expandable-content-body--before--Top | 0 | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--PaddingTop | 1rem | ||
--pf-v5-c-accordion--m-display-lg__toggle--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--PaddingRight | 1rem | ||
--pf-v5-c-accordion--m-display-lg__toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom | 1rem | ||
--pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft | 1.5rem | ||
--pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--FontFamily | '"RedHatDisplay", helvetica, arial, sans-serif' | ||
--pf-v5-c-accordion--m-display-lg__toggle--FontFamily --pf-v5-global--FontFamily--heading $pf-v5-global--FontFamily--heading '"RedHatDisplay", helvetica, arial, sans-serif' | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--FontSize | 1.25rem | ||
--pf-v5-c-accordion--m-display-lg__toggle--FontSize --pf-v5-global--FontSize--xl $pf-v5-global--FontSize--xl pf-font-prem(20px) 1.25rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--hover__toggle-text--Color | #151515 | ||
--pf-v5-c-accordion--m-display-lg__toggle--hover__toggle-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--Color | #151515 | ||
--pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight | 400 | ||
--pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--Color | #151515 | ||
--pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight | 400 | ||
--pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color | #151515 | ||
--pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight | 400 | ||
--pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__expandable-content--FontSize | 1rem | ||
--pf-v5-c-accordion--m-display-lg__expandable-content--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__expandable-content--Color | #151515 | ||
--pf-v5-c-accordion--m-display-lg__expandable-content--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingTop | 0 | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingRight | 1rem | ||
--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingBottom | 1rem | ||
--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom | 1.5rem | ||
--pf-v5-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingLeft | 1.5rem | ||
--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-bordered--BorderTopWidth | 1px | ||
--pf-v5-c-accordion--m-bordered--BorderTopWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-bordered--BorderTopColor | #d2d2d2 | ||
--pf-v5-c-accordion--m-bordered--BorderTopColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-bordered__toggle--after--Top | calc(-1 * 1px) | ||
--pf-v5-c-accordion--m-bordered__toggle--after--Top calc(-1 * --pf-v5-global--BorderWidth--sm) calc(-1 * $pf-v5-global--BorderWidth--sm) calc(-1 * 1px) | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-bordered__toggle--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth | 0 | ||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth | 1px | ||
--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth | 1px | ||
--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-accordion | --pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-accordion.pf-m-toggle-start | --pf-v5-c-accordion__toggle--JustifyContent | start | ||
--pf-v5-c-accordion__toggle--JustifyContent --pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent start | ||||
| .pf-v5-c-accordion.pf-m-toggle-start | --pf-v5-c-accordion__toggle--ColumnGap | 1rem | ||
--pf-v5-c-accordion__toggle--ColumnGap --pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--PaddingTop | 1rem | ||
--pf-v5-c-accordion__toggle--PaddingTop --pf-v5-c-accordion--m-display-lg__toggle--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--PaddingRight | 1rem | ||
--pf-v5-c-accordion__toggle--PaddingRight --pf-v5-c-accordion--m-display-lg__toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--PaddingBottom | 1rem | ||
--pf-v5-c-accordion__toggle--PaddingBottom --pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--PaddingLeft | 1.5rem | ||
--pf-v5-c-accordion__toggle--PaddingLeft --pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--FontFamily | '"RedHatDisplay", helvetica, arial, sans-serif' | ||
--pf-v5-c-accordion__toggle--FontFamily --pf-v5-c-accordion--m-display-lg__toggle--FontFamily --pf-v5-global--FontFamily--heading $pf-v5-global--FontFamily--heading '"RedHatDisplay", helvetica, arial, sans-serif' | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--FontSize | 1.25rem | ||
--pf-v5-c-accordion__toggle--FontSize --pf-v5-c-accordion--m-display-lg__toggle--FontSize --pf-v5-global--FontSize--xl $pf-v5-global--FontSize--xl pf-font-prem(20px) 1.25rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--hover__toggle-text--Color | #151515 | ||
--pf-v5-c-accordion__toggle--hover__toggle-text--Color --pf-v5-c-accordion--m-display-lg__toggle--hover__toggle-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--active__toggle-text--Color | #151515 | ||
--pf-v5-c-accordion__toggle--active__toggle-text--Color --pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--active__toggle-text--FontWeight | 400 | ||
--pf-v5-c-accordion__toggle--active__toggle-text--FontWeight --pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--focus__toggle-text--Color | #151515 | ||
--pf-v5-c-accordion__toggle--focus__toggle-text--Color --pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight | 400 | ||
--pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight --pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color | #151515 | ||
--pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color --pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight | 400 | ||
--pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight --pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__expandable-content-body--PaddingTop | 0 | ||
--pf-v5-c-accordion__expandable-content-body--PaddingTop --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingTop 0 | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__expandable-content-body--PaddingRight | 1rem | ||
--pf-v5-c-accordion__expandable-content-body--PaddingRight --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__expandable-content-body--PaddingBottom | 1rem | ||
--pf-v5-c-accordion__expandable-content-body--PaddingBottom --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__expandable-content-body--PaddingLeft | 1.5rem | ||
--pf-v5-c-accordion__expandable-content-body--PaddingLeft --pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__expandable-content--FontSize | 1rem | ||
--pf-v5-c-accordion__expandable-content--FontSize --pf-v5-c-accordion--m-display-lg__expandable-content--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-accordion.pf-m-display-lg | --pf-v5-c-accordion__expandable-content--Color | #151515 | ||
--pf-v5-c-accordion__expandable-content--Color --pf-v5-c-accordion--m-display-lg__expandable-content--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-accordion.pf-m-display-lg .pf-v5-c-accordion__expandable-content-body:last-child | --pf-v5-c-accordion__expandable-content-body--PaddingBottom | 1.5rem | ||
--pf-v5-c-accordion__expandable-content-body--PaddingBottom --pf-v5-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-accordion.pf-m-bordered | --pf-v5-c-accordion__toggle--after--Top | calc(-1 * 1px) | ||
--pf-v5-c-accordion__toggle--after--Top --pf-v5-c-accordion--m-bordered__toggle--after--Top calc(-1 * --pf-v5-global--BorderWidth--sm) calc(-1 * $pf-v5-global--BorderWidth--sm) calc(-1 * 1px) | ||||
| .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle.pf-m-expanded | --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth | 0 | ||
| .pf-v5-c-accordion__toggle.pf-m-expanded | --pf-v5-c-accordion__toggle--after--BackgroundColor | #06c | ||
--pf-v5-c-accordion__toggle--after--BackgroundColor --pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion__expandable-content.pf-m-expanded | --pf-v5-c-accordion__expandable-content-body--after--BackgroundColor | #06c | ||
--pf-v5-c-accordion__expandable-content-body--after--BackgroundColor --pf-v5-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-accordion__expandable-content-body + .pf-v5-c-accordion__expandable-content-body | --pf-v5-c-accordion__expandable-content-body--PaddingTop | 0 | ||
--pf-v5-c-accordion__expandable-content-body--PaddingTop --pf-v5-c-accordion__expandable-content-body--expandable-content-body--PaddingTop 0 | ||||
View source on GitHub
