Masthead

A masthead contains global properties such as logotype, navigation and settings in an organized fashion and it is accessible from all parts of the application. All pages should share a common masthead.

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

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

Basic

Basic with mixed content

Display inline

Display stack

Display stack, display inline responsive

Light variant

Light 200 variant

Inset

With icon router link

Props

*required
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

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside of the masthead toggle.
className	string		Additional classes added to the masthead toggle.

MastheadMain

*required
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

*required
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>	'a'	Component type of the masthead brand.

MastheadContent

*required
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


	.pf-c-masthead.pf-m-light-200	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-masthead.pf-m-light-200	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-masthead.pf-m-light-200	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-masthead.pf-m-light-200	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-masthead.pf-m-light-200	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-masthead.pf-m-light-200	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-masthead.pf-m-light-200	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-masthead.pf-m-light-200	--pf-c-masthead--BackgroundColor	#f0f0f0
--pf-c-masthead--BackgroundColor --pf-c-masthead--m-light-200--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-masthead.pf-m-light-200	--pf-c-masthead__main--BorderBottomColor	#d2d2d2
--pf-c-masthead__main--BorderBottomColor --pf-c-masthead--m-light-200__main--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-masthead .pf-c-button.pf-m-plain	--pf-global--Color--100	#fff
--pf-global--Color--100 --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-masthead .pf-c-button.pf-m-plain	--pf-global--Color--200	#f0f0f0
--pf-global--Color--200 --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-masthead .pf-c-button.pf-m-plain	--pf-global--BorderColor--100	#b8bbbe
--pf-global--BorderColor--100 --pf-global--BorderColor--light-100 $pf-global--BorderColor--light-100 $pf-color-black-400 #b8bbbe
	.pf-c-masthead .pf-c-button.pf-m-plain	--pf-global--primary-color--100	#73bcf7
--pf-global--primary-color--100 --pf-global--primary-color--light-100 $pf-global--primary-color--light-100 $pf-color-blue-200 #73bcf7
	.pf-c-masthead .pf-c-button.pf-m-plain	--pf-global--link--Color	#2b9af3
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-masthead .pf-c-button.pf-m-plain	--pf-global--link--Color--hover	#2b9af3
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-masthead .pf-c-button.pf-m-plain	--pf-global--BackgroundColor--100	#151515
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card	--pf-c-card--BackgroundColor	rgba(#030303, .32)
--pf-c-card--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-primary--Color	#06c
--pf-c-button--m-primary--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-primary--hover--Color	#06c
--pf-c-button--m-primary--hover--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-primary--focus--Color	#06c
--pf-c-button--m-primary--focus--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-primary--active--Color	#06c
--pf-c-button--m-primary--active--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-primary--BackgroundColor	#fff
--pf-c-button--m-primary--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-primary--hover--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-primary--focus--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-primary--active--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--active--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-secondary--Color	#fff
--pf-c-button--m-secondary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-secondary--hover--Color	#fff
--pf-c-button--m-secondary--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-secondary--focus--Color	#fff
--pf-c-button--m-secondary--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-secondary--active--Color	#fff
--pf-c-button--m-secondary--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-secondary--BorderColor	#fff
--pf-c-button--m-secondary--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-secondary--hover--BorderColor	#fff
--pf-c-button--m-secondary--hover--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-secondary--focus--BorderColor	#fff
--pf-c-button--m-secondary--focus--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button	--pf-c-button--m-secondary--active--BorderColor	#fff
--pf-c-button--m-secondary--active--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-masthead	--pf-c-masthead--PaddingLeft	1rem
--pf-c-masthead--PaddingLeft --pf-c-masthead--inset --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead	--pf-c-masthead--PaddingRight	1rem
--pf-c-masthead--PaddingRight --pf-c-masthead--inset --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead	--pf-c-masthead--BackgroundColor	#151515
--pf-c-masthead--BackgroundColor --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-masthead	--pf-c-masthead--inset	1rem
--pf-c-masthead--inset --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead	--pf-c-masthead--xl--inset	1.5rem
--pf-c-masthead--xl--inset --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-masthead	--pf-c-masthead--m-display-stack--GridTemplateColumns	max-content 1fr
	.pf-c-masthead	--pf-c-masthead--m-display-stack__main--GridColumn	-1 / 1
	.pf-c-masthead	--pf-c-masthead--m-display-stack__main--MinHeight	4.375rem
	.pf-c-masthead	--pf-c-masthead--m-display-stack__main--Order	-1
	.pf-c-masthead	--pf-c-masthead--m-display-stack__main--FlexBasis	100%
	.pf-c-masthead	--pf-c-masthead--m-display-stack__main--PaddingTop	0.5rem
--pf-c-masthead--m-display-stack__main--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-masthead	--pf-c-masthead--m-display-stack__main--PaddingBottom	0.5rem
--pf-c-masthead--m-display-stack__main--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-masthead	--pf-c-masthead--m-display-stack__main--MarginRight	0
	.pf-c-masthead	--pf-c-masthead--m-display-stack__main--before--BorderBottom	1px solid #6a6e73
--pf-c-masthead--m-display-stack__main--before--BorderBottom --pf-c-masthead__main--before--BorderBottomWidth solid --pf-c-masthead__main--before--BorderBottomColor --pf-global--BorderWidth--sm solid --pf-global--palette--black-600 $pf-global--BorderWidth--sm solid $pf-color-black-600 1px solid #6a6e73
	.pf-c-masthead	--pf-c-masthead--m-display-stack__toggle--GridColumn	1
	.pf-c-masthead	--pf-c-masthead--m-display-stack__content--GridColumn	2
	.pf-c-masthead	--pf-c-masthead--m-display-stack__content--MinHeight	auto
	.pf-c-masthead	--pf-c-masthead--m-display-stack__content--Order	1
	.pf-c-masthead	--pf-c-masthead--m-display-stack__content--PaddingTop	0
	.pf-c-masthead	--pf-c-masthead--m-display-stack__content--PaddingBottom	0
	.pf-c-masthead	--pf-c-masthead--m-display-stack__content--MarginLeft	0
	.pf-c-masthead	--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight	calc(1rem * -1)
--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight calc(--pf-c-masthead--inset * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-masthead	--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft	calc(1rem * -1)
--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft calc(--pf-c-masthead--inset * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-masthead	--pf-c-masthead--m-display-inline--GridTemplateColumns	max-content max-content 1fr
	.pf-c-masthead	--pf-c-masthead--m-display-inline__main--GridColumn	2
	.pf-c-masthead	--pf-c-masthead--m-display-inline__main--MinHeight	4.375rem
	.pf-c-masthead	--pf-c-masthead--m-display-inline__main--Order	0
	.pf-c-masthead	--pf-c-masthead--m-display-inline__main--FlexBasis	auto
	.pf-c-masthead	--pf-c-masthead--m-display-inline__main--PaddingTop	0
	.pf-c-masthead	--pf-c-masthead--m-display-inline__main--PaddingBottom	0
	.pf-c-masthead	--pf-c-masthead--m-display-inline__main--MarginRight	calc(1.5rem / 2)
--pf-c-masthead--m-display-inline__main--MarginRight calc(--pf-global--spacer--lg / 2) calc($pf-global--spacer--lg / 2) calc(pf-size-prem(24px) / 2) calc(1.5rem / 2)
	.pf-c-masthead	--pf-c-masthead--m-display-inline__main--BorderBottom	0
	.pf-c-masthead	--pf-c-masthead--m-display-inline__toggle--GridColumn	1
	.pf-c-masthead	--pf-c-masthead--m-display-inline__content--GridColumn	3
	.pf-c-masthead	--pf-c-masthead--m-display-inline__content--MinHeight	4.375rem
	.pf-c-masthead	--pf-c-masthead--m-display-inline__content--Order	0
	.pf-c-masthead	--pf-c-masthead--m-display-inline__content--PaddingTop	0
	.pf-c-masthead	--pf-c-masthead--m-display-inline__content--PaddingBottom	0
	.pf-c-masthead	--pf-c-masthead--m-display-inline__content--MarginLeft	calc(1.5rem / 2)
--pf-c-masthead--m-display-inline__content--MarginLeft calc(--pf-global--spacer--lg / 2) calc($pf-global--spacer--lg / 2) calc(pf-size-prem(24px) / 2) calc(1.5rem / 2)
	.pf-c-masthead	--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight	0
	.pf-c-masthead	--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft	0
	.pf-c-masthead	--pf-c-masthead__main--before--Right	calc(1rem * -1)
--pf-c-masthead__main--before--Right calc(--pf-c-masthead--inset * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-masthead	--pf-c-masthead__main--before--Left	calc(1rem * -1)
--pf-c-masthead__main--before--Left calc(--pf-c-masthead--inset * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-masthead	--pf-c-masthead__main--before--BorderBottomWidth	1px
--pf-c-masthead__main--before--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-masthead	--pf-c-masthead__main--before--BorderBottomColor	#6a6e73
--pf-c-masthead__main--before--BorderBottomColor --pf-global--palette--black-600 $pf-color-black-600 #6a6e73
	.pf-c-masthead	--pf-c-masthead__toggle--MarginRight	0.5rem
--pf-c-masthead__toggle--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-masthead	--pf-c-masthead__toggle--MarginLeft	calc(1rem * -1)
--pf-c-masthead__toggle--MarginLeft calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-masthead	--pf-c-masthead__toggle--c-button--FontSize	1.5rem
--pf-c-masthead__toggle--c-button--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.pf-c-masthead	--pf-c-masthead--m-light--BackgroundColor	#fff
--pf-c-masthead--m-light--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-masthead	--pf-c-masthead--m-light__main--BorderBottomColor	#f0f0f0
--pf-c-masthead--m-light__main--BorderBottomColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-masthead	--pf-c-masthead--m-light-200--BackgroundColor	#f0f0f0
--pf-c-masthead--m-light-200--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-masthead	--pf-c-masthead--m-light-200__main--BorderBottomColor	#d2d2d2
--pf-c-masthead--m-light-200__main--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-masthead	--pf-c-masthead--c-toolbar__item--Display	flex
	.pf-c-masthead	--pf-c-masthead--item-border-color--base	#3c3f42
--pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-context-selector--Width	auto
	.pf-c-masthead	--pf-c-masthead--c-context-selector__toggle--BorderTopColor	#3c3f42
--pf-c-masthead--c-context-selector__toggle--BorderTopColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-context-selector__toggle--BorderRightColor	#3c3f42
--pf-c-masthead--c-context-selector__toggle--BorderRightColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-context-selector__toggle--BorderLeftColor	#3c3f42
--pf-c-masthead--c-context-selector__toggle--BorderLeftColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor	transparent
	.pf-c-masthead	--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor	transparent
	.pf-c-masthead	--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor	#3c3f42
--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor	#3c3f42
--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor	#3c3f42
--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor	transparent
	.pf-c-masthead	--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor	transparent
	.pf-c-masthead	--pf-c-masthead--c-menu-toggle--before--BorderTopColor	#3c3f42
--pf-c-masthead--c-menu-toggle--before--BorderTopColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-menu-toggle--before--BorderRightColor	#3c3f42
--pf-c-masthead--c-menu-toggle--before--BorderRightColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-menu-toggle--before--BorderLeftColor	#3c3f42
--pf-c-masthead--c-menu-toggle--before--BorderLeftColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor	transparent
	.pf-c-masthead	--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor	transparent
	.pf-c-masthead	--pf-c-masthead--c-toolbar__content--PaddingRight	0
	.pf-c-masthead	--pf-c-masthead--c-toolbar__content--PaddingLeft	0
	.pf-c-masthead	--pf-c-masthead--c-toolbar__expandable-content--PaddingTop	1rem
--pf-c-masthead--c-toolbar__expandable-content--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead	--pf-c-masthead--c-toolbar__expandable-content--PaddingRight	1rem
--pf-c-masthead--c-toolbar__expandable-content--PaddingRight --pf-c-masthead--inset --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead	--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom	1rem
--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead	--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft	1rem
--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft --pf-c-masthead--inset --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead	--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth	1px
--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-masthead	--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor	#3c3f42
--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead	--pf-c-masthead--GridTemplateColumns	max-content 1fr
--pf-c-masthead--GridTemplateColumns --pf-c-masthead--m-display-stack--GridTemplateColumns max-content 1fr
	.pf-c-masthead	--pf-c-masthead__main--GridColumn	-1 / 1
--pf-c-masthead__main--GridColumn --pf-c-masthead--m-display-stack__main--GridColumn -1 / 1
	.pf-c-masthead	--pf-c-masthead__main--MinHeight	4.375rem
--pf-c-masthead__main--MinHeight --pf-c-masthead--m-display-stack__main--MinHeight 4.375rem
	.pf-c-masthead	--pf-c-masthead__main--Order	-1
--pf-c-masthead__main--Order --pf-c-masthead--m-display-stack__main--Order -1
	.pf-c-masthead	--pf-c-masthead__main--FlexBasis	100%
--pf-c-masthead__main--FlexBasis --pf-c-masthead--m-display-stack__main--FlexBasis 100%
	.pf-c-masthead	--pf-c-masthead__main--PaddingTop	0.5rem
--pf-c-masthead__main--PaddingTop --pf-c-masthead--m-display-stack__main--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-masthead	--pf-c-masthead__main--PaddingBottom	0.5rem
--pf-c-masthead__main--PaddingBottom --pf-c-masthead--m-display-stack__main--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-masthead	--pf-c-masthead__main--MarginRight	0
--pf-c-masthead__main--MarginRight --pf-c-masthead--m-display-stack__main--MarginRight 0
	.pf-c-masthead	--pf-c-masthead__main--before--BorderBottom	1px solid #6a6e73
--pf-c-masthead__main--before--BorderBottom --pf-c-masthead--m-display-stack__main--before--BorderBottom --pf-c-masthead__main--before--BorderBottomWidth solid --pf-c-masthead__main--before--BorderBottomColor --pf-global--BorderWidth--sm solid --pf-global--palette--black-600 $pf-global--BorderWidth--sm solid $pf-color-black-600 1px solid #6a6e73
	.pf-c-masthead	--pf-c-masthead__content--GridColumn	2
--pf-c-masthead__content--GridColumn --pf-c-masthead--m-display-stack__content--GridColumn 2
	.pf-c-masthead	--pf-c-masthead__content--MinHeight	auto
--pf-c-masthead__content--MinHeight --pf-c-masthead--m-display-stack__content--MinHeight auto
	.pf-c-masthead	--pf-c-masthead__content--Order	1
--pf-c-masthead__content--Order --pf-c-masthead--m-display-stack__content--Order 1
	.pf-c-masthead	--pf-c-masthead__content--PaddingTop	0
--pf-c-masthead__content--PaddingTop --pf-c-masthead--m-display-stack__content--PaddingTop 0
	.pf-c-masthead	--pf-c-masthead__content--PaddingBottom	0
--pf-c-masthead__content--PaddingBottom --pf-c-masthead--m-display-stack__content--PaddingBottom 0
	.pf-c-masthead	--pf-c-masthead__content--MarginLeft	0
--pf-c-masthead__content--MarginLeft --pf-c-masthead--m-display-stack__content--MarginLeft 0
	.pf-c-masthead	--pf-c-masthead__content--c-nav--m-horizontal--MarginRight	calc(1rem * -1)
--pf-c-masthead__content--c-nav--m-horizontal--MarginRight --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight calc(--pf-c-masthead--inset * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-masthead	--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft	calc(1rem * -1)
--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft calc(--pf-c-masthead--inset * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-masthead.pf-m-light	--pf-c-masthead--BackgroundColor	#fff
--pf-c-masthead--BackgroundColor --pf-c-masthead--m-light--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-masthead.pf-m-light	--pf-c-masthead__main--BorderBottomColor	#f0f0f0
--pf-c-masthead__main--BorderBottomColor --pf-c-masthead--m-light__main--BorderBottomColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-masthead .pf-c-toolbar	--pf-c-toolbar__content--PaddingRight	0
--pf-c-toolbar__content--PaddingRight --pf-c-masthead--c-toolbar__content--PaddingRight 0
	.pf-c-masthead .pf-c-toolbar	--pf-c-toolbar__content--PaddingLeft	0
--pf-c-toolbar__content--PaddingLeft --pf-c-masthead--c-toolbar__content--PaddingLeft 0
	.pf-c-masthead .pf-c-toolbar	--pf-c-toolbar__expandable-content--PaddingTop	1rem
--pf-c-toolbar__expandable-content--PaddingTop --pf-c-masthead--c-toolbar__expandable-content--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead .pf-c-toolbar	--pf-c-toolbar__expandable-content--PaddingRight	1rem
--pf-c-toolbar__expandable-content--PaddingRight --pf-c-masthead--c-toolbar__expandable-content--PaddingRight --pf-c-masthead--inset --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead .pf-c-toolbar	--pf-c-toolbar__expandable-content--PaddingBottom	1rem
--pf-c-toolbar__expandable-content--PaddingBottom --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead .pf-c-toolbar	--pf-c-toolbar__expandable-content--PaddingLeft	1rem
--pf-c-toolbar__expandable-content--PaddingLeft --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft --pf-c-masthead--inset --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead .pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderTopColor	#3c3f42
--pf-c-menu-toggle--before--BorderTopColor --pf-c-masthead--c-menu-toggle--before--BorderTopColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead .pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderRightColor	#3c3f42
--pf-c-menu-toggle--before--BorderRightColor --pf-c-masthead--c-menu-toggle--before--BorderRightColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead .pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderLeftColor	#3c3f42
--pf-c-menu-toggle--before--BorderLeftColor --pf-c-masthead--c-menu-toggle--before--BorderLeftColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead .pf-c-menu-toggle.pf-m-full-height	--pf-c-menu-toggle--before--BorderTopColor	transparent
--pf-c-menu-toggle--before--BorderTopColor --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor transparent
	.pf-c-masthead .pf-c-menu-toggle.pf-m-full-height	--pf-c-menu-toggle--before--BorderBottomColor	transparent
--pf-c-menu-toggle--before--BorderBottomColor --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor transparent
	.pf-c-masthead .pf-c-context-selector	--pf-c-context-selector--Width	auto
--pf-c-context-selector--Width --pf-c-masthead--c-context-selector--Width auto
	.pf-c-masthead .pf-c-context-selector	--pf-c-context-selector__toggle--BorderTopColor	#3c3f42
--pf-c-context-selector__toggle--BorderTopColor --pf-c-masthead--c-context-selector__toggle--BorderTopColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead .pf-c-context-selector	--pf-c-context-selector__toggle--BorderRightColor	#3c3f42
--pf-c-context-selector__toggle--BorderRightColor --pf-c-masthead--c-context-selector__toggle--BorderRightColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead .pf-c-context-selector	--pf-c-context-selector__toggle--BorderLeftColor	#3c3f42
--pf-c-context-selector__toggle--BorderLeftColor --pf-c-masthead--c-context-selector__toggle--BorderLeftColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead .pf-c-context-selector.pf-m-full-height	--pf-c-context-selector__toggle--BorderTopColor	transparent
--pf-c-context-selector__toggle--BorderTopColor --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor transparent
	.pf-c-masthead .pf-c-context-selector.pf-m-full-height	--pf-c-context-selector__toggle--BorderBottomColor	transparent
--pf-c-context-selector__toggle--BorderBottomColor --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor transparent
	.pf-c-masthead .pf-c-dropdown	--pf-c-dropdown__toggle--before--BorderTopColor	#3c3f42
--pf-c-dropdown__toggle--before--BorderTopColor --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead .pf-c-dropdown	--pf-c-dropdown__toggle--before--BorderRightColor	#3c3f42
--pf-c-dropdown__toggle--before--BorderRightColor --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead .pf-c-dropdown	--pf-c-dropdown__toggle--before--BorderLeftColor	#3c3f42
--pf-c-dropdown__toggle--before--BorderLeftColor --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor --pf-c-masthead--item-border-color--base --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-masthead .pf-c-dropdown.pf-m-full-height	--pf-c-dropdown__toggle--before--BorderTopColor	transparent
--pf-c-dropdown__toggle--before--BorderTopColor --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor transparent
	.pf-c-masthead .pf-c-dropdown.pf-m-full-height	--pf-c-dropdown__toggle--before--BorderBottomColor	transparent
--pf-c-dropdown__toggle--before--BorderBottomColor --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor transparent
	.pf-c-masthead__main:last-child	--pf-c-masthead__main--MarginRight	0
	.pf-c-masthead__content:only-child	--pf-c-masthead__content--MarginLeft	0
	.pf-c-masthead__toggle ~ .pf-c-masthead__content	--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft	calc(0 * -1)
--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft calc(--pf-c-masthead__content--MarginLeft * -1) calc(--pf-c-masthead--m-display-stack__content--MarginLeft * -1) calc(0 * -1)
	.pf-c-masthead__toggle .pf-c-button	--pf-c-button--FontSize	1.5rem
--pf-c-button--FontSize --pf-c-masthead__toggle--c-button--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead--GridTemplateColumns	max-content 1fr
--pf-c-masthead--GridTemplateColumns --pf-c-masthead--m-display-stack--GridTemplateColumns max-content 1fr
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__main--GridColumn	-1 / 1
--pf-c-masthead__main--GridColumn --pf-c-masthead--m-display-stack__main--GridColumn -1 / 1
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__main--MinHeight	4.375rem
--pf-c-masthead__main--MinHeight --pf-c-masthead--m-display-stack__main--MinHeight 4.375rem
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__main--Order	-1
--pf-c-masthead__main--Order --pf-c-masthead--m-display-stack__main--Order -1
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__main--FlexBasis	100%
--pf-c-masthead__main--FlexBasis --pf-c-masthead--m-display-stack__main--FlexBasis 100%
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__main--PaddingTop	0.5rem
--pf-c-masthead__main--PaddingTop --pf-c-masthead--m-display-stack__main--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__main--PaddingBottom	0.5rem
--pf-c-masthead__main--PaddingBottom --pf-c-masthead--m-display-stack__main--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__main--MarginRight	0
--pf-c-masthead__main--MarginRight --pf-c-masthead--m-display-stack__main--MarginRight 0
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__main--before--BorderBottom	1px solid #6a6e73
--pf-c-masthead__main--before--BorderBottom --pf-c-masthead--m-display-stack__main--before--BorderBottom --pf-c-masthead__main--before--BorderBottomWidth solid --pf-c-masthead__main--before--BorderBottomColor --pf-global--BorderWidth--sm solid --pf-global--palette--black-600 $pf-global--BorderWidth--sm solid $pf-color-black-600 1px solid #6a6e73
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__content--GridColumn	2
--pf-c-masthead__content--GridColumn --pf-c-masthead--m-display-stack__content--GridColumn 2
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__content--MinHeight	auto
--pf-c-masthead__content--MinHeight --pf-c-masthead--m-display-stack__content--MinHeight auto
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__content--Order	1
--pf-c-masthead__content--Order --pf-c-masthead--m-display-stack__content--Order 1
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__content--PaddingTop	0
--pf-c-masthead__content--PaddingTop --pf-c-masthead--m-display-stack__content--PaddingTop 0
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__content--PaddingBottom	0
--pf-c-masthead__content--PaddingBottom --pf-c-masthead--m-display-stack__content--PaddingBottom 0
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__content--MarginLeft	0
--pf-c-masthead__content--MarginLeft --pf-c-masthead--m-display-stack__content--MarginLeft 0
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__content--c-nav--m-horizontal--MarginRight	calc(1rem * -1)
--pf-c-masthead__content--c-nav--m-horizontal--MarginRight --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight calc(--pf-c-masthead--inset * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-masthead.pf-m-display-stack	--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft	calc(1rem * -1)
--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft calc(--pf-c-masthead--inset * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead--GridTemplateColumns	max-content max-content 1fr
--pf-c-masthead--GridTemplateColumns --pf-c-masthead--m-display-inline--GridTemplateColumns max-content max-content 1fr
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__main--GridColumn	2
--pf-c-masthead__main--GridColumn --pf-c-masthead--m-display-inline__main--GridColumn 2
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__main--MinHeight	4.375rem
--pf-c-masthead__main--MinHeight --pf-c-masthead--m-display-inline__main--MinHeight 4.375rem
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__main--Order	0
--pf-c-masthead__main--Order --pf-c-masthead--m-display-inline__main--Order 0
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__main--FlexBasis	auto
--pf-c-masthead__main--FlexBasis --pf-c-masthead--m-display-inline__main--FlexBasis auto
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__main--PaddingTop	0
--pf-c-masthead__main--PaddingTop --pf-c-masthead--m-display-inline__main--PaddingTop 0
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__main--PaddingBottom	0
--pf-c-masthead__main--PaddingBottom --pf-c-masthead--m-display-inline__main--PaddingBottom 0
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__main--MarginRight	calc(1.5rem / 2)
--pf-c-masthead__main--MarginRight --pf-c-masthead--m-display-inline__main--MarginRight calc(--pf-global--spacer--lg / 2) calc($pf-global--spacer--lg / 2) calc(pf-size-prem(24px) / 2) calc(1.5rem / 2)
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__main--before--BorderBottom	0
--pf-c-masthead__main--before--BorderBottom --pf-c-masthead--m-display-inline__main--BorderBottom 0
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__content--GridColumn	3
--pf-c-masthead__content--GridColumn --pf-c-masthead--m-display-inline__content--GridColumn 3
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__content--MinHeight	4.375rem
--pf-c-masthead__content--MinHeight --pf-c-masthead--m-display-inline__content--MinHeight 4.375rem
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__content--Order	0
--pf-c-masthead__content--Order --pf-c-masthead--m-display-inline__content--Order 0
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__content--PaddingTop	0
--pf-c-masthead__content--PaddingTop --pf-c-masthead--m-display-inline__content--PaddingTop 0
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__content--PaddingBottom	0
--pf-c-masthead__content--PaddingBottom --pf-c-masthead--m-display-inline__content--PaddingBottom 0
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__content--MarginLeft	calc(1.5rem / 2)
--pf-c-masthead__content--MarginLeft --pf-c-masthead--m-display-inline__content--MarginLeft calc(--pf-global--spacer--lg / 2) calc($pf-global--spacer--lg / 2) calc(pf-size-prem(24px) / 2) calc(1.5rem / 2)
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__content--c-nav--m-horizontal--MarginRight	0
--pf-c-masthead__content--c-nav--m-horizontal--MarginRight --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight 0
	.pf-c-masthead.pf-m-display-inline	--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft	0
--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft 0
	.pf-c-masthead.pf-m-inset-none	--pf-c-masthead--inset	0
	.pf-c-masthead.pf-m-inset-sm	--pf-c-masthead--inset	0.5rem
--pf-c-masthead--inset --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-masthead.pf-m-inset-md	--pf-c-masthead--inset	1rem
--pf-c-masthead--inset --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-masthead.pf-m-inset-lg	--pf-c-masthead--inset	1.5rem
--pf-c-masthead--inset --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-masthead.pf-m-inset-xl	--pf-c-masthead--inset	2rem
--pf-c-masthead--inset --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-masthead.pf-m-inset-2xl	--pf-c-masthead--inset	3rem
--pf-c-masthead--inset --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines