Masthead should contain the following components to maintain proper layout and formatting: MastheadToggle, MastheadMain, and MastheadContent.
MastheadMain represents the smaller area taken up by a logo, and will typically contain a MastheadBrand. MastheadContent represents the main portion of the masthead area and will typically contain a Toolbar or other menu-like content such as Dropdown.
Examples
Props
Masthead
| Name | Type | Default | Description |
|---|---|---|---|
| backgroundColor | 'dark' | 'light' | 'light200' | 'dark' | Background theme color of the masthead |
| children | React.ReactNode | Content rendered inside of the masthead | |
| className | string | Additional classes added to the masthead | |
| display | { default?: 'inline' | 'stack'; sm?: 'inline' | 'stack'; md?: 'inline' | 'stack'; lg?: 'inline' | 'stack'; xl?: 'inline' | 'stack'; '2xl'?: 'inline' | 'stack'; } | { md: 'inline' } | Display type at various breakpoints |
| inset | { default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; } | Insets at various breakpoints |
MastheadToggle
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead toggle. | |
| className | string | Additional classes added to the masthead toggle. |
MastheadMain
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead main block. | |
| className | string | Additional classes added to the masthead main. |
MastheadBrand
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead brand. | |
| className | string | Additional classes added to the masthead brand. | |
| component | React.ElementType<any> | React.ComponentType<any> | Component type of the masthead brand. |
MastheadContent
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead content block. | |
| className | string | Additional classes added to the masthead content. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-masthead.pf-m-light-200 | --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-masthead.pf-m-light-200 | --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-masthead.pf-m-light-200 | --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-masthead.pf-m-light-200 | --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-masthead.pf-m-light-200 | --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-masthead.pf-m-light-200 | --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-masthead.pf-m-light-200 | --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-masthead.pf-m-light-200 | --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-masthead.pf-m-light-200 | --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-masthead.pf-m-light-200 | --pf-v5-c-masthead--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-masthead--BackgroundColor --pf-v5-c-masthead--m-light-200--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-masthead.pf-m-light-200 | --pf-v5-c-masthead__main--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-masthead__main--BorderBottomColor --pf-v5-c-masthead--m-light-200__main--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain | --pf-v5-global--Color--100 | #fff | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain | --pf-v5-global--Color--200 | #f0f0f0 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--light-200 $pf-v5-global--Color--light-200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain | --pf-v5-global--BorderColor--100 | #b8bbbe | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--light-100 $pf-v5-global--BorderColor--light-100 $pf-v5-color-black-400 #b8bbbe | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain | --pf-v5-global--primary-color--100 | #73bcf7 | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--light-100 $pf-v5-global--primary-color--light-100 $pf-v5-color-blue-200 #73bcf7 | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain | --pf-v5-global--link--Color | #2b9af3 | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--light $pf-v5-global--link--Color--light $pf-v5-global--active-color--300 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain | --pf-v5-global--link--Color--hover | #2b9af3 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--light $pf-v5-global--link--Color--light $pf-v5-global--active-color--300 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain | --pf-v5-global--BackgroundColor--100 | #151515 | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain | --pf-v5-global--icon--Color--light | #f0f0f0 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--light $pf-v5-global--icon--Color--light--light $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain | --pf-v5-global--icon--Color--dark | #fff | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--light $pf-v5-global--icon--Color--dark--light $pf-v5-color-white #fff | ||||
| .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button | --pf-v5-c-button--m-primary--BackgroundColor | #06c | ||
--pf-v5-c-button--m-primary--BackgroundColor --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--PaddingLeft | 1rem | ||
--pf-v5-c-masthead--PaddingLeft --pf-v5-c-masthead--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--PaddingRight | 1rem | ||
--pf-v5-c-masthead--PaddingRight --pf-v5-c-masthead--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--BackgroundColor | #151515 | ||
--pf-v5-c-masthead--BackgroundColor --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--inset | 1rem | ||
--pf-v5-c-masthead--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--xl--inset | 1.5rem | ||
--pf-v5-c-masthead--xl--inset --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack--GridTemplateColumns | max-content 1fr | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__main--GridColumn | -1 / 1 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__main--MinHeight | 4.375rem | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__main--Order | -1 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__main--FlexBasis | 100% | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__main--PaddingTop | 0.5rem | ||
--pf-v5-c-masthead--m-display-stack__main--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__main--PaddingBottom | 0.5rem | ||
--pf-v5-c-masthead--m-display-stack__main--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__main--MarginRight | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__main--before--BorderBottom | 1px solid #6a6e73 | ||
--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom --pf-v5-c-masthead__main--before--BorderBottomWidth solid --pf-v5-c-masthead__main--before--BorderBottomColor --pf-v5-global--BorderWidth--sm solid --pf-v5-global--palette--black-600 $pf-v5-global--BorderWidth--sm solid $pf-v5-color-black-600 1px solid #6a6e73 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__toggle--GridColumn | 1 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__content--GridColumn | 2 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__content--MinHeight | auto | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__content--Order | 1 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__content--PaddingTop | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__content--PaddingBottom | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__content--MarginLeft | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight | calc(1rem * -1) | ||
--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight calc(--pf-v5-c-masthead--inset * -1) calc(--pf-v5-global--spacer--md * -1) calc($pf-v5-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1) | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft | calc(1rem * -1) | ||
--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft calc(--pf-v5-c-masthead--inset * -1) calc(--pf-v5-global--spacer--md * -1) calc($pf-v5-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1) | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline--GridTemplateColumns | max-content max-content 1fr | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__main--GridColumn | 2 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__main--MinHeight | 4.375rem | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__main--Order | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__main--FlexBasis | auto | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__main--PaddingTop | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__main--PaddingBottom | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__main--MarginRight | calc(1.5rem / 2) | ||
--pf-v5-c-masthead--m-display-inline__main--MarginRight calc(--pf-v5-global--spacer--lg / 2) calc($pf-v5-global--spacer--lg / 2) calc(pf-size-prem(24px) / 2) calc(1.5rem / 2) | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__main--BorderBottom | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__toggle--GridColumn | 1 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__content--GridColumn | 3 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__content--MinHeight | 4.375rem | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__content--Order | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__content--PaddingTop | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__content--PaddingBottom | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__content--MarginLeft | calc(1.5rem / 2) | ||
--pf-v5-c-masthead--m-display-inline__content--MarginLeft calc(--pf-v5-global--spacer--lg / 2) calc($pf-v5-global--spacer--lg / 2) calc(pf-size-prem(24px) / 2) calc(1.5rem / 2) | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--before--Right | calc(1rem * -1) | ||
--pf-v5-c-masthead__main--before--Right calc(--pf-v5-c-masthead--inset * -1) calc(--pf-v5-global--spacer--md * -1) calc($pf-v5-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1) | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--before--Left | calc(1rem * -1) | ||
--pf-v5-c-masthead__main--before--Left calc(--pf-v5-c-masthead--inset * -1) calc(--pf-v5-global--spacer--md * -1) calc($pf-v5-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1) | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--before--BorderBottomWidth | 1px | ||
--pf-v5-c-masthead__main--before--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--before--BorderBottomColor | #6a6e73 | ||
--pf-v5-c-masthead__main--before--BorderBottomColor --pf-v5-global--palette--black-600 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__toggle--MarginRight | 0.5rem | ||
--pf-v5-c-masthead__toggle--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__toggle--MarginLeft | calc(1rem * -1) | ||
--pf-v5-c-masthead__toggle--MarginLeft calc(--pf-v5-global--spacer--md * -1) calc($pf-v5-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1) | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__toggle--c-button--FontSize | 1.5rem | ||
--pf-v5-c-masthead__toggle--c-button--FontSize --pf-v5-global--FontSize--2xl $pf-v5-global--FontSize--2xl pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-light--BackgroundColor | #fff | ||
--pf-v5-c-masthead--m-light--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-light__main--BorderBottomColor | #f0f0f0 | ||
--pf-v5-c-masthead--m-light__main--BorderBottomColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-light-200--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-masthead--m-light-200--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--m-light-200__main--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-masthead--m-light-200__main--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar__item--Display | flex | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--item-border-color--base | #3c3f42 | ||
--pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-context-selector--Width | auto | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor | #3c3f42 | ||
--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor | #3c3f42 | ||
--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor | #3c3f42 | ||
--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor | transparent | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor | transparent | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor | #3c3f42 | ||
--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor | #3c3f42 | ||
--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor | #3c3f42 | ||
--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor | transparent | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor | transparent | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor | #3c3f42 | ||
--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor | #3c3f42 | ||
--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor | #3c3f42 | ||
--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar--BackgroundColor | #151515 | ||
--pf-v5-c-masthead--c-toolbar--BackgroundColor --pf-v5-c-masthead--BackgroundColor --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar--AlignItems--base | center | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar__content--PaddingRight | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar__content--PaddingLeft | 0 | ||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop | 1rem | ||
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight | 1rem | ||
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight --pf-v5-c-masthead--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom | 1rem | ||
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft | 1rem | ||
--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft --pf-v5-c-masthead--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth | 1px | ||
--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor | #3c3f42 | ||
--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead--GridTemplateColumns | max-content 1fr | ||
--pf-v5-c-masthead--GridTemplateColumns --pf-v5-c-masthead--m-display-stack--GridTemplateColumns max-content 1fr | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--GridColumn | -1 / 1 | ||
--pf-v5-c-masthead__main--GridColumn --pf-v5-c-masthead--m-display-stack__main--GridColumn -1 / 1 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--MinHeight | 4.375rem | ||
--pf-v5-c-masthead__main--MinHeight --pf-v5-c-masthead--m-display-stack__main--MinHeight 4.375rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--Order | -1 | ||
--pf-v5-c-masthead__main--Order --pf-v5-c-masthead--m-display-stack__main--Order -1 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--FlexBasis | 100% | ||
--pf-v5-c-masthead__main--FlexBasis --pf-v5-c-masthead--m-display-stack__main--FlexBasis 100% | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--PaddingTop | 0.5rem | ||
--pf-v5-c-masthead__main--PaddingTop --pf-v5-c-masthead--m-display-stack__main--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--PaddingBottom | 0.5rem | ||
--pf-v5-c-masthead__main--PaddingBottom --pf-v5-c-masthead--m-display-stack__main--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--MarginRight | 0 | ||
--pf-v5-c-masthead__main--MarginRight --pf-v5-c-masthead--m-display-stack__main--MarginRight 0 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__main--before--BorderBottom | 1px solid #6a6e73 | ||
--pf-v5-c-masthead__main--before--BorderBottom --pf-v5-c-masthead--m-display-stack__main--before--BorderBottom --pf-v5-c-masthead__main--before--BorderBottomWidth solid --pf-v5-c-masthead__main--before--BorderBottomColor --pf-v5-global--BorderWidth--sm solid --pf-v5-global--palette--black-600 $pf-v5-global--BorderWidth--sm solid $pf-v5-color-black-600 1px solid #6a6e73 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__content--GridColumn | 2 | ||
--pf-v5-c-masthead__content--GridColumn --pf-v5-c-masthead--m-display-stack__content--GridColumn 2 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__content--MinHeight | auto | ||
--pf-v5-c-masthead__content--MinHeight --pf-v5-c-masthead--m-display-stack__content--MinHeight auto | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__content--Order | 1 | ||
--pf-v5-c-masthead__content--Order --pf-v5-c-masthead--m-display-stack__content--Order 1 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__content--PaddingTop | 0 | ||
--pf-v5-c-masthead__content--PaddingTop --pf-v5-c-masthead--m-display-stack__content--PaddingTop 0 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__content--PaddingBottom | 0 | ||
--pf-v5-c-masthead__content--PaddingBottom --pf-v5-c-masthead--m-display-stack__content--PaddingBottom 0 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__content--MarginLeft | 0 | ||
--pf-v5-c-masthead__content--MarginLeft --pf-v5-c-masthead--m-display-stack__content--MarginLeft 0 | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight | calc(1rem * -1) | ||
--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight calc(--pf-v5-c-masthead--inset * -1) calc(--pf-v5-global--spacer--md * -1) calc($pf-v5-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1) | ||||
| .pf-v5-c-masthead | --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft | calc(1rem * -1) | ||
--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft calc(--pf-v5-c-masthead--inset * -1) calc(--pf-v5-global--spacer--md * -1) calc($pf-v5-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1) | ||||
| .pf-v5-c-masthead.pf-m-light | --pf-v5-c-masthead--BackgroundColor | #fff | ||
--pf-v5-c-masthead--BackgroundColor --pf-v5-c-masthead--m-light--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-masthead.pf-m-light | --pf-v5-c-masthead__main--BorderBottomColor | #f0f0f0 | ||
--pf-v5-c-masthead__main--BorderBottomColor --pf-v5-c-masthead--m-light__main--BorderBottomColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-masthead .pf-v5-c-toolbar | --pf-v5-c-toolbar--BackgroundColor | #151515 | ||
--pf-v5-c-toolbar--BackgroundColor --pf-v5-c-masthead--c-toolbar--BackgroundColor --pf-v5-c-masthead--BackgroundColor --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-masthead .pf-v5-c-toolbar | --pf-v5-c-toolbar--AlignItems--base | center | ||
--pf-v5-c-toolbar--AlignItems--base --pf-v5-c-masthead--c-toolbar--AlignItems--base center | ||||
| .pf-v5-c-masthead .pf-v5-c-toolbar | --pf-v5-c-toolbar__content--PaddingRight | 0 | ||
--pf-v5-c-toolbar__content--PaddingRight --pf-v5-c-masthead--c-toolbar__content--PaddingRight 0 | ||||
| .pf-v5-c-masthead .pf-v5-c-toolbar | --pf-v5-c-toolbar__content--PaddingLeft | 0 | ||
--pf-v5-c-toolbar__content--PaddingLeft --pf-v5-c-masthead--c-toolbar__content--PaddingLeft 0 | ||||
| .pf-v5-c-masthead .pf-v5-c-toolbar | --pf-v5-c-toolbar__expandable-content--PaddingTop | 1rem | ||
--pf-v5-c-toolbar__expandable-content--PaddingTop --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead .pf-v5-c-toolbar | --pf-v5-c-toolbar__expandable-content--PaddingRight | 1rem | ||
--pf-v5-c-toolbar__expandable-content--PaddingRight --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight --pf-v5-c-masthead--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead .pf-v5-c-toolbar | --pf-v5-c-toolbar__expandable-content--PaddingBottom | 1rem | ||
--pf-v5-c-toolbar__expandable-content--PaddingBottom --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead .pf-v5-c-toolbar | --pf-v5-c-toolbar__expandable-content--PaddingLeft | 1rem | ||
--pf-v5-c-toolbar__expandable-content--PaddingLeft --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft --pf-v5-c-masthead--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead .pf-v5-c-menu-toggle | --pf-v5-c-menu-toggle--before--BorderTopColor | #3c3f42 | ||
--pf-v5-c-menu-toggle--before--BorderTopColor --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead .pf-v5-c-menu-toggle | --pf-v5-c-menu-toggle--before--BorderRightColor | #3c3f42 | ||
--pf-v5-c-menu-toggle--before--BorderRightColor --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead .pf-v5-c-menu-toggle | --pf-v5-c-menu-toggle--before--BorderLeftColor | #3c3f42 | ||
--pf-v5-c-menu-toggle--before--BorderLeftColor --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead .pf-v5-c-menu-toggle | --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth | 0 | ||
| .pf-v5-c-masthead .pf-v5-c-context-selector | --pf-v5-c-context-selector--Width | auto | ||
--pf-v5-c-context-selector--Width --pf-v5-c-masthead--c-context-selector--Width auto | ||||
| .pf-v5-c-masthead .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--BorderTopColor | #3c3f42 | ||
--pf-v5-c-context-selector__toggle--BorderTopColor --pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--BorderRightColor | #3c3f42 | ||
--pf-v5-c-context-selector__toggle--BorderRightColor --pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead .pf-v5-c-context-selector | --pf-v5-c-context-selector__toggle--BorderLeftColor | #3c3f42 | ||
--pf-v5-c-context-selector__toggle--BorderLeftColor --pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead .pf-v5-c-context-selector.pf-m-full-height | --pf-v5-c-context-selector__toggle--BorderTopColor | transparent | ||
--pf-v5-c-context-selector__toggle--BorderTopColor --pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor transparent | ||||
| .pf-v5-c-masthead .pf-v5-c-context-selector.pf-m-full-height | --pf-v5-c-context-selector__toggle--BorderBottomColor | transparent | ||
--pf-v5-c-context-selector__toggle--BorderBottomColor --pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor transparent | ||||
| .pf-v5-c-masthead .pf-v5-c-dropdown | --pf-v5-c-dropdown__toggle--before--BorderTopColor | #3c3f42 | ||
--pf-v5-c-dropdown__toggle--before--BorderTopColor --pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead .pf-v5-c-dropdown | --pf-v5-c-dropdown__toggle--before--BorderRightColor | #3c3f42 | ||
--pf-v5-c-dropdown__toggle--before--BorderRightColor --pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead .pf-v5-c-dropdown | --pf-v5-c-dropdown__toggle--before--BorderLeftColor | #3c3f42 | ||
--pf-v5-c-dropdown__toggle--before--BorderLeftColor --pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor --pf-v5-c-masthead--item-border-color--base --pf-v5-global--palette--black-800 $pf-v5-color-black-800 #3c3f42 | ||||
| .pf-v5-c-masthead .pf-v5-c-dropdown.pf-m-full-height | --pf-v5-c-dropdown__toggle--before--BorderTopColor | transparent | ||
--pf-v5-c-dropdown__toggle--before--BorderTopColor --pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor transparent | ||||
| .pf-v5-c-masthead .pf-v5-c-dropdown.pf-m-full-height | --pf-v5-c-dropdown__toggle--before--BorderBottomColor | transparent | ||
--pf-v5-c-dropdown__toggle--before--BorderBottomColor --pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor transparent | ||||
| .pf-v5-c-masthead__main:last-child | --pf-v5-c-masthead__main--MarginRight | 0 | ||
| .pf-v5-c-masthead__content:only-child | --pf-v5-c-masthead__content--MarginLeft | 0 | ||
| .pf-v5-c-masthead__toggle ~ .pf-v5-c-masthead__content | --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft | calc(0 * -1) | ||
--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft calc(--pf-v5-c-masthead__content--MarginLeft * -1) calc(--pf-v5-c-masthead--m-display-stack__content--MarginLeft * -1) calc(0 * -1) | ||||
| .pf-v5-c-masthead__toggle .pf-v5-c-button | --pf-v5-c-button--FontSize | 1.5rem | ||
--pf-v5-c-button--FontSize --pf-v5-c-masthead__toggle--c-button--FontSize --pf-v5-global--FontSize--2xl $pf-v5-global--FontSize--2xl pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead--GridTemplateColumns | max-content 1fr | ||
--pf-v5-c-masthead--GridTemplateColumns --pf-v5-c-masthead--m-display-stack--GridTemplateColumns max-content 1fr | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__main--GridColumn | -1 / 1 | ||
--pf-v5-c-masthead__main--GridColumn --pf-v5-c-masthead--m-display-stack__main--GridColumn -1 / 1 | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__main--MinHeight | 4.375rem | ||
--pf-v5-c-masthead__main--MinHeight --pf-v5-c-masthead--m-display-stack__main--MinHeight 4.375rem | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__main--Order | -1 | ||
--pf-v5-c-masthead__main--Order --pf-v5-c-masthead--m-display-stack__main--Order -1 | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__main--FlexBasis | 100% | ||
--pf-v5-c-masthead__main--FlexBasis --pf-v5-c-masthead--m-display-stack__main--FlexBasis 100% | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__main--PaddingTop | 0.5rem | ||
--pf-v5-c-masthead__main--PaddingTop --pf-v5-c-masthead--m-display-stack__main--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__main--PaddingBottom | 0.5rem | ||
--pf-v5-c-masthead__main--PaddingBottom --pf-v5-c-masthead--m-display-stack__main--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__main--MarginRight | 0 | ||
--pf-v5-c-masthead__main--MarginRight --pf-v5-c-masthead--m-display-stack__main--MarginRight 0 | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__main--before--BorderBottom | 1px solid #6a6e73 | ||
--pf-v5-c-masthead__main--before--BorderBottom --pf-v5-c-masthead--m-display-stack__main--before--BorderBottom --pf-v5-c-masthead__main--before--BorderBottomWidth solid --pf-v5-c-masthead__main--before--BorderBottomColor --pf-v5-global--BorderWidth--sm solid --pf-v5-global--palette--black-600 $pf-v5-global--BorderWidth--sm solid $pf-v5-color-black-600 1px solid #6a6e73 | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__content--GridColumn | 2 | ||
--pf-v5-c-masthead__content--GridColumn --pf-v5-c-masthead--m-display-stack__content--GridColumn 2 | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__content--MinHeight | auto | ||
--pf-v5-c-masthead__content--MinHeight --pf-v5-c-masthead--m-display-stack__content--MinHeight auto | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__content--Order | 1 | ||
--pf-v5-c-masthead__content--Order --pf-v5-c-masthead--m-display-stack__content--Order 1 | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__content--PaddingTop | 0 | ||
--pf-v5-c-masthead__content--PaddingTop --pf-v5-c-masthead--m-display-stack__content--PaddingTop 0 | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__content--PaddingBottom | 0 | ||
--pf-v5-c-masthead__content--PaddingBottom --pf-v5-c-masthead--m-display-stack__content--PaddingBottom 0 | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__content--MarginLeft | 0 | ||
--pf-v5-c-masthead__content--MarginLeft --pf-v5-c-masthead--m-display-stack__content--MarginLeft 0 | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight | calc(1rem * -1) | ||
--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight calc(--pf-v5-c-masthead--inset * -1) calc(--pf-v5-global--spacer--md * -1) calc($pf-v5-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1) | ||||
| .pf-v5-c-masthead.pf-m-display-stack | --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft | calc(1rem * -1) | ||
--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft calc(--pf-v5-c-masthead--inset * -1) calc(--pf-v5-global--spacer--md * -1) calc($pf-v5-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1) | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead--GridTemplateColumns | max-content max-content 1fr | ||
--pf-v5-c-masthead--GridTemplateColumns --pf-v5-c-masthead--m-display-inline--GridTemplateColumns max-content max-content 1fr | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__main--GridColumn | 2 | ||
--pf-v5-c-masthead__main--GridColumn --pf-v5-c-masthead--m-display-inline__main--GridColumn 2 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__main--MinHeight | 4.375rem | ||
--pf-v5-c-masthead__main--MinHeight --pf-v5-c-masthead--m-display-inline__main--MinHeight 4.375rem | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__main--Order | 0 | ||
--pf-v5-c-masthead__main--Order --pf-v5-c-masthead--m-display-inline__main--Order 0 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__main--FlexBasis | auto | ||
--pf-v5-c-masthead__main--FlexBasis --pf-v5-c-masthead--m-display-inline__main--FlexBasis auto | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__main--PaddingTop | 0 | ||
--pf-v5-c-masthead__main--PaddingTop --pf-v5-c-masthead--m-display-inline__main--PaddingTop 0 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__main--PaddingBottom | 0 | ||
--pf-v5-c-masthead__main--PaddingBottom --pf-v5-c-masthead--m-display-inline__main--PaddingBottom 0 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__main--MarginRight | calc(1.5rem / 2) | ||
--pf-v5-c-masthead__main--MarginRight --pf-v5-c-masthead--m-display-inline__main--MarginRight calc(--pf-v5-global--spacer--lg / 2) calc($pf-v5-global--spacer--lg / 2) calc(pf-size-prem(24px) / 2) calc(1.5rem / 2) | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__main--before--BorderBottom | 0 | ||
--pf-v5-c-masthead__main--before--BorderBottom --pf-v5-c-masthead--m-display-inline__main--BorderBottom 0 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__content--GridColumn | 3 | ||
--pf-v5-c-masthead__content--GridColumn --pf-v5-c-masthead--m-display-inline__content--GridColumn 3 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__content--MinHeight | 4.375rem | ||
--pf-v5-c-masthead__content--MinHeight --pf-v5-c-masthead--m-display-inline__content--MinHeight 4.375rem | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__content--Order | 0 | ||
--pf-v5-c-masthead__content--Order --pf-v5-c-masthead--m-display-inline__content--Order 0 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__content--PaddingTop | 0 | ||
--pf-v5-c-masthead__content--PaddingTop --pf-v5-c-masthead--m-display-inline__content--PaddingTop 0 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__content--PaddingBottom | 0 | ||
--pf-v5-c-masthead__content--PaddingBottom --pf-v5-c-masthead--m-display-inline__content--PaddingBottom 0 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__content--MarginLeft | calc(1.5rem / 2) | ||
--pf-v5-c-masthead__content--MarginLeft --pf-v5-c-masthead--m-display-inline__content--MarginLeft calc(--pf-v5-global--spacer--lg / 2) calc($pf-v5-global--spacer--lg / 2) calc(pf-size-prem(24px) / 2) calc(1.5rem / 2) | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight | 0 | ||
--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight 0 | ||||
| .pf-v5-c-masthead.pf-m-display-inline | --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft | 0 | ||
--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft 0 | ||||
| .pf-v5-c-masthead.pf-m-inset-none | --pf-v5-c-masthead--inset | 0 | ||
| .pf-v5-c-masthead.pf-m-inset-sm | --pf-v5-c-masthead--inset | 0.5rem | ||
--pf-v5-c-masthead--inset --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-masthead.pf-m-inset-md | --pf-v5-c-masthead--inset | 1rem | ||
--pf-v5-c-masthead--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-masthead.pf-m-inset-lg | --pf-v5-c-masthead--inset | 1.5rem | ||
--pf-v5-c-masthead--inset --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-masthead.pf-m-inset-xl | --pf-v5-c-masthead--inset | 2rem | ||
--pf-v5-c-masthead--inset --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-masthead.pf-m-inset-2xl | --pf-v5-c-masthead--inset | 3rem | ||
--pf-v5-c-masthead--inset --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
View source on GitHub
