Page

Examples

Vertical nav

Section with darker background

Section with dark background

Section with light background

Horizontal nav

Section with darker background

Section with dark background

Section with light background

Tertiary nav

Navigation

Section with darker background

Section with dark background

Section with light background

With or without fill

A default page section

This section fills the available space.

This section is set to not fill the available space, since the last page section is set to fill the available space by default.

Main section padding

Section with default padding

Section with no padding

Section with padding only on medium/large

Section with no padding on medium

Uncontrolled nav

Section with darker background

Section with dark background

Section with light background

Group section

Grouped section

Section 1

Section 2

Vertical nav using PageHeader component

This example is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.

Section with darker background

Section with dark background

Section with light background

Centered content

Page section width limited, centered.

Props

Page

*required
Name	Type	Default	Description
additionalGroupedContent	React.ReactNode		Additional content of the group
breadcrumb	React.ReactNode		Breadcrumb component for the page
children	React.ReactNode		Content rendered inside the main section of the page layout (e.g. <PageSection />)
className	string		Additional classes added to the page layout
defaultManagedSidebarIsOpen	boolean	true	If true, the managed sidebar is initially open for desktop view
getBreakpoint	(width: number \| null) => 'default' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	getBreakpoint	The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default\|sm\|md\|lg\|xl\|2xl] class You can override the default getBreakpoint function to return breakpoints at different sizes than the default You can view the default getBreakpoint function here: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
groupProps	PageGroupProps		Additional props of the group
header	React.ReactNode		Header component (e.g. <PageHeader />)
isBreadcrumbGrouped	boolean		Flag indicating if the breadcrumb should be in a group
isBreadcrumbWidthLimited	boolean	false	Flag indicating if breadcrumb width should be limited
isManagedSidebar	boolean	false	If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into the sidebar component or add a callback onNavToggle function into the PageHeader component
isNotificationDrawerExpanded	boolean	false	Flag indicating Notification drawer in expanded
isTertiaryNavGrouped	boolean		Flag indicating if the tertiaryNav should be in a group
isTertiaryNavWidthLimited	boolean		Flag indicating if tertiary nav width should be limited
mainAriaLabel	string		Accessible label, can be used to name main section
mainContainerId	string		an id to use for the [role="main"] element
mainTabIndex	number \| null	-1	tabIndex to use for the [role="main"] element, null to unset it
notificationDrawer	React.ReactNode		Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />)
onNotificationDrawerExpand	() => void	() => null	Callback when notification drawer panel is finished expanding.
onPageResize	(object: any) => void	(): void => null	Can add callback to be notified when resize occurs, for example to set the sidebar isNav prop to false for a width < 768px Returns object { mobileView: boolean, windowSize: number }
role	string		Sets the value for role on the <main> element
sidebar	React.ReactNode		Sidebar component for a side nav (e.g. <PageSidebar />)
skipToContent	React.ReactElement		Skip to content component for the page
tertiaryNav	React.ReactNode		Tertiary nav component for the page

PageHeader

*required
Name	Type	Default	Description
aria-controls	No type info	null
aria-label	string	'Global navigation'	Aria Label for the nav toggle button
className	string	''	Additional classes added to the page header
headerTools	React.ReactNode	null	Component to render the header tools, use <PageHeaderTools />
isManagedSidebar	boolean	undefined	This prop is no longer managed through PageHeader but in the Page component.
isNavOpen	boolean	true	True if the side nav is shown
logo	React.ReactNode	null	Component to render the logo/brand, use <Brand />
logoComponent	React.ReactNode	'a'	Component to use to wrap the passed <logo>
logoProps	object	null	Additional props passed to the logo anchor container
onNavToggle	() => void	() => undefined as any	Callback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true
role	string	undefined	Sets the value for role on the <main> element
showNavToggle	boolean	false	True to show the nav toggle button (toggles side nav)
topNav	React.ReactNode	null	Component to render navigation within the header, use <Nav />

PageHeaderTools

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Content rendered in page header tools
className	string		Additional classes added to the page header tools.

PageHeaderToolsGroup

*required
Name	Type	Description
childrenrequired	React.ReactNode	Content rendered in the page header tools group
className	string	Additional classes added to the page header tools group.
visibility	{ default?: 'hidden' \| 'visible'; sm?: 'hidden' \| 'visible'; md?: 'hidden' \| 'visible'; lg?: 'hidden' \| 'visible'; xl?: 'hidden' \| 'visible'; '2xl'?: 'hidden' \| 'visible'; }	Visibility at various breakpoints.

PageHeaderToolsItem

*required
Name	Type	Description
childrenrequired	React.ReactNode	Content rendered in page header tools item.
className	string	Additional classes added to the page header tools item.
id	string	HTML id of the PageHeaderToolsItem
isSelected	boolean	True to make an icon button appear selected
visibility	{ default?: 'hidden' \| 'visible'; sm?: 'hidden' \| 'visible'; md?: 'hidden' \| 'visible'; lg?: 'hidden' \| 'visible'; xl?: 'hidden' \| 'visible'; '2xl'?: 'hidden' \| 'visible'; }	Visibility at various breakpoints.

PageSidebar

*required
Name	Type	Default	Description
className	string	''	Additional classes added to the page sidebar
isManagedSidebar	boolean		If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into the sidebar component or add a callback onNavToggle function into the PageHeader component
isNavOpen	boolean	true	Programmatically manage if the side nav is shown, if isManagedSidebar is set to true in the Page component, this prop is managed
nav	React.ReactNode		Component to render the side navigation (e.g. <Nav />
theme	'dark' \| 'light'	'dark'	Indicates the color scheme of the sidebar

PageSection

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the section
className	string	''	Additional classes added to the section
hasOverflowScroll	boolean	false	Flag indicating if the PageSection has a scrolling overflow
hasShadowBottom	boolean	false	Modifier indicating if PageSection should have a shadow at the bottom
hasShadowTop	boolean	false	Modifier indicating if PageSection should have a shadow at the top
isCenterAligned	boolean	false	Flag indicating if the section content is center aligned. isWidthLimited must be set for this to work
isFilled	boolean		Enables the page section to fill the available vertical space
isWidthLimited	boolean	false	Limits the width of the section
padding	{ default?: 'padding' \| 'noPadding'; sm?: 'padding' \| 'noPadding'; md?: 'padding' \| 'noPadding'; lg?: 'padding' \| 'noPadding'; xl?: 'padding' \| 'noPadding'; '2xl'?: 'padding' \| 'noPadding'; }		Padding at various breakpoints.
sticky	'top' \| 'bottom'		Modifier indicating if PageSection is sticky to the top or bottom
type	'default' \| 'nav' \| 'subnav' \| 'breadcrumb' \| 'tabs' \| 'wizard'	'default'	Section type variant
variant	'default' \| 'light' \| 'dark' \| 'darker'	'default'	Section background color variant

PageGroup

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside of the PageGroup
className	string	''	Additional classes to apply to the PageGroup
hasOverflowScroll	boolean	false	Flag indicating if the PageGroup has a scrolling overflow
hasShadowBottom	boolean	false	Modifier indicating if PageGroup should have a shadow at the bottom
hasShadowTop	boolean	false	Modifier indicating if PageGroup should have a shadow at the top
sticky	'top' \| 'bottom'		Modifier indicating if PageGroup is sticky to the top or bottom

PageBreadcrumb

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside of the PageBreadcrumb
className	string	''	Additional classes to apply to the PageBreadcrumb
hasOverflowScroll	boolean	false	Flag indicating if the PageBreadcrumb has a scrolling overflow
hasShadowBottom	boolean	false	Flag indicating if PageBreadcrumb should have a shadow at the bottom
hasShadowTop	boolean	false	Flag indicating if PageBreadcrumb should have a shadow at the top
isWidthLimited	boolean		Limits the width of the breadcrumb
sticky	'top' \| 'bottom'		Modifier indicating if the PageBreadcrumb is sticky to the top or bottom

PageNavigation

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside of the PageNavigation
className	string	''	Additional classes to apply to the PageNavigation
hasOverflowScroll	boolean	false	Flag indicating if the PageNavigation has a scrolling overflow
hasShadowBottom	boolean	false	Flag indicating if PageNavigation should have a shadow at the bottom
hasShadowTop	boolean	false	Flag indicating if PageNavigation should have a shadow at the top
isWidthLimited	boolean		Limits the width of the PageNavigation
sticky	'top' \| 'bottom'		Modifier indicating if the PageNavigation is sticky to the top or bottom

PageToggleButton

*required
Name	Type	Default	Description
children	React.ReactNode		Content of the page toggle button
isNavOpen	boolean	true	True if the side nav is shown
onNavToggle	() => void	() => undefined as any	Callback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true

CSS variables


	.pf-c-page__sidebar.pf-m-light	--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-page__sidebar.pf-m-light	--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-page__sidebar.pf-m-light	--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-page__sidebar.pf-m-light	--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-page__sidebar.pf-m-light	--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-page__sidebar.pf-m-light	--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-page__sidebar.pf-m-light	--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-page__sidebar.pf-m-light	--pf-c-page__sidebar--BackgroundColor	#fff
--pf-c-page__sidebar--BackgroundColor --pf-c-page__sidebar--m-light--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page__main-section[class*=pf-m-dark-]	--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-page__main-section[class*=pf-m-dark-]	--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-page__main-section[class*=pf-m-dark-]	--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-page__main-section[class*=pf-m-dark-]	--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-page__main-section[class*=pf-m-dark-]	--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-page__main-section[class*=pf-m-dark-]	--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-page__main-section[class*=pf-m-dark-]	--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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__main-section[class*=pf-m-dark-] .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-page__header-tools-item	--pf-hidden-visible--visible--Visibility	visible
	.pf-c-page__header-tools-item	--pf-hidden-visible--hidden--Display	none
	.pf-c-page__header-tools-item	--pf-hidden-visible--hidden--Visibility	hidden
	.pf-c-page__header-tools-item	--pf-hidden-visible--Display	block
--pf-hidden-visible--Display --pf-hidden-visible--visible--Display --pf-c-page__header-tools-item--Display block
	.pf-c-page__header-tools-item	--pf-hidden-visible--Visibility	visible
--pf-hidden-visible--Visibility --pf-hidden-visible--visible--Visibility visible
	.pf-c-page__header-tools-item	--pf-hidden-visible--visible--Display	block
--pf-hidden-visible--visible--Display --pf-c-page__header-tools-item--Display block
	.pf-m-hidden.pf-c-page__header-tools-item	--pf-hidden-visible--Display	none
--pf-hidden-visible--Display --pf-hidden-visible--hidden--Display none
	.pf-m-hidden.pf-c-page__header-tools-item	--pf-hidden-visible--Visibility	hidden
--pf-hidden-visible--Visibility --pf-hidden-visible--hidden--Visibility hidden
	.pf-c-page	--pf-c-page--BackgroundColor	#f0f0f0
--pf-c-page--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-page	--pf-c-page__header--BackgroundColor	#151515
--pf-c-page__header--BackgroundColor --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-page	--pf-c-page__header--ZIndex	300
--pf-c-page__header--ZIndex --pf-global--ZIndex--md $pf-global--ZIndex--md 300
	.pf-c-page	--pf-c-page__header--MinHeight	4.75rem
	.pf-c-page	--pf-c-page__header-brand--PaddingLeft	1rem
--pf-c-page__header-brand--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__header-brand--xl--PaddingRight	2rem
--pf-c-page__header-brand--xl--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-page	--pf-c-page__header-brand--xl--PaddingLeft	1.5rem
--pf-c-page__header-brand--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--PaddingTop	0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--PaddingRight	0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom	0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft	0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--MarginRight	1rem
--pf-c-page__header-sidebar-toggle__c-button--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--MarginLeft	calc(0.5rem * -1)
--pf-c-page__header-sidebar-toggle__c-button--MarginLeft calc(--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--FontSize	1.5rem
--pf-c-page__header-sidebar-toggle__c-button--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__header-brand-link--c-brand--MaxHeight	3.75rem
	.pf-c-page	--pf-c-page__header-nav--BackgroundColor	#212427
--pf-c-page__header-nav--BackgroundColor --pf-global--BackgroundColor--dark-300 $pf-global--BackgroundColor--dark-300 $pf-color-black-850 #212427
	.pf-c-page	--pf-c-page__header-nav--xl--BackgroundColor	transparent
	.pf-c-page	--pf-c-page__header-nav--xl--PaddingRight	2rem
--pf-c-page__header-nav--xl--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-page	--pf-c-page__header-nav--xl--PaddingLeft	2rem
--pf-c-page__header-nav--xl--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-page	--pf-c-page__header-tools--MarginRight	1rem
--pf-c-page__header-tools--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__header-tools--xl--MarginRight	1.5rem
--pf-c-page__header-tools--xl--MarginRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__header-tools--c-avatar--MarginLeft	1rem
--pf-c-page__header-tools--c-avatar--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__header-tools-group--MarginLeft	2rem
--pf-c-page__header-tools-group--MarginLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-page	--pf-c-page__header-tools-group--Display	flex
	.pf-c-page	--pf-c-page__header-tools-item--Display	block
	.pf-c-page	--pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor	#3c3f42
--pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-page	--pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor	#004080
--pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-page	--pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor	#a30000
--pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor	#004080
--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor	#a30000
--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--before--Width	auto
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--before--Height	auto
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor	#3c3f42
--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius	3px
--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor	transparent
	.pf-c-page	--pf-c-page__sidebar--ZIndex	200
--pf-c-page__sidebar--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-page	--pf-c-page__sidebar--Width	18.125rem
	.pf-c-page	--pf-c-page__sidebar--BackgroundColor	#212427
--pf-c-page__sidebar--BackgroundColor --pf-global--BackgroundColor--dark-300 $pf-global--BackgroundColor--dark-300 $pf-color-black-850 #212427
	.pf-c-page	--pf-c-page__sidebar--m-light--BackgroundColor	#fff
--pf-c-page__sidebar--m-light--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page__sidebar--BoxShadow	0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-c-page__sidebar--BoxShadow --pf-global--BoxShadow--lg-right $pf-global--BoxShadow--lg-right pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba(#030303, .18) 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
	.pf-c-page	--pf-c-page__sidebar--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-page__sidebar--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-page	--pf-c-page__sidebar--TranslateX	-100%
	.pf-c-page	--pf-c-page__sidebar--TranslateZ	0
	.pf-c-page	--pf-c-page__sidebar--m-expanded--TranslateX	0
	.pf-c-page	--pf-c-page__sidebar--xl--TranslateX	0
	.pf-c-page	--pf-c-page__sidebar-body--PaddingTop	0.5rem
--pf-c-page__sidebar-body--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__sidebar-body--PaddingBottom	1rem
--pf-c-page__sidebar-body--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__sidebar-body--m-menu--PaddingTop	0
	.pf-c-page	--pf-c-page__sidebar-body--m-menu--PaddingBottom	0
	.pf-c-page	--pf-c-page__sidebar-body--m-menu--BorderTopColor	#3c3f42
--pf-c-page__sidebar-body--m-menu--BorderTopColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-page	--pf-c-page__sidebar-body--m-menu--BorderTopWidth	1px
--pf-c-page__sidebar-body--m-menu--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-page	--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor	#3c3f42
--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-page	--pf-c-page__main--ZIndex	100
--pf-c-page__main--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-page	--pf-c-page__main-section--PaddingTop	1rem
--pf-c-page__main-section--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--PaddingRight	1rem
--pf-c-page__main-section--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--PaddingBottom	1rem
--pf-c-page__main-section--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--PaddingLeft	1rem
--pf-c-page__main-section--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--xl--PaddingTop	1.5rem
--pf-c-page__main-section--xl--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-section--xl--PaddingRight	1.5rem
--pf-c-page__main-section--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-section--xl--PaddingBottom	1.5rem
--pf-c-page__main-section--xl--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-section--xl--PaddingLeft	1.5rem
--pf-c-page__main-section--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-breadcrumb--main-section--PaddingTop	1rem
--pf-c-page__main-breadcrumb--main-section--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--BackgroundColor	#f0f0f0
--pf-c-page__main-section--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-page	--pf-c-page__main-section--m-light--BackgroundColor	#fff
--pf-c-page__main-section--m-light--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page__main-section--m-dark-100--BackgroundColor	rgba(#030303, .62)
--pf-c-page__main-section--m-dark-100--BackgroundColor --pf-global--BackgroundColor--dark-transparent-100 $pf-global--BackgroundColor--dark-transparent-100 rgba($pf-color-black-1000, .62) rgba(#030303, .62)
	.pf-c-page	--pf-c-page__main-section--m-dark-200--BackgroundColor	rgba(#030303, .32)
--pf-c-page__main-section--m-dark-200--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-page	--pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop	1rem
--pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-nav--page__main-tabs--PaddingTop	1rem
--pf-c-page__main-nav--page__main-tabs--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page--section--m-limit-width--MaxWidth	calc(125rem - 18.125rem)
--pf-c-page--section--m-limit-width--MaxWidth calc(125rem - --pf-c-page__sidebar--Width) calc(125rem - 18.125rem)
	.pf-c-page	--pf-c-page--section--m-sticky-top--ZIndex	300
--pf-c-page--section--m-sticky-top--ZIndex --pf-global--ZIndex--md $pf-global--ZIndex--md 300
	.pf-c-page	--pf-c-page--section--m-sticky-top--BoxShadow	0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-page--section--m-sticky-top--BoxShadow --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-page	--pf-c-page--section--m-sticky-bottom--ZIndex	300
--pf-c-page--section--m-sticky-bottom--ZIndex --pf-global--ZIndex--md $pf-global--ZIndex--md 300
	.pf-c-page	--pf-c-page--section--m-sticky-bottom--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-page--section--m-sticky-bottom--BoxShadow --pf-global--BoxShadow--sm-top $pf-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-page	--pf-c-page--section--m-shadow-bottom--BoxShadow	0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-page--section--m-shadow-bottom--BoxShadow --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-page	--pf-c-page--section--m-shadow-bottom--ZIndex	100
--pf-c-page--section--m-shadow-bottom--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-page	--pf-c-page--section--m-shadow-top--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-page--section--m-shadow-top--BoxShadow --pf-global--BoxShadow--sm-top $pf-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-page	--pf-c-page--section--m-shadow-top--ZIndex	100
--pf-c-page--section--m-shadow-top--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-page	--pf-c-page__main-nav--BackgroundColor	#fff
--pf-c-page__main-nav--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page__main-nav--PaddingTop	1rem
--pf-c-page__main-nav--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-nav--PaddingRight	0
	.pf-c-page	--pf-c-page__main-nav--PaddingLeft	0
	.pf-c-page	--pf-c-page__main-nav--m-sticky-top--PaddingBottom	1rem
--pf-c-page__main-nav--m-sticky-top--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-nav--xl--PaddingRight	0.5rem
--pf-c-page__main-nav--xl--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__main-nav--xl--PaddingLeft	0.5rem
--pf-c-page__main-nav--xl--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__main-subnav--BackgroundColor	#212427
--pf-c-page__main-subnav--BackgroundColor --pf-global--BackgroundColor--dark-300 $pf-global--BackgroundColor--dark-300 $pf-color-black-850 #212427
	.pf-c-page	--pf-c-page__main-subnav--BorderTopWidth	1px
--pf-c-page__main-subnav--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-page	--pf-c-page__main-subnav--BorderTopColor	#3c3f42
--pf-c-page__main-subnav--BorderTopColor --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-page	--pf-c-page__main-subnav--BorderLeftWidth	0
	.pf-c-page	--pf-c-page__main-subnav--BorderLeftColor	#3c3f42
--pf-c-page__main-subnav--BorderLeftColor --pf-global--palette--black-800 $pf-color-black-800 #3c3f42
	.pf-c-page	--pf-c-page__sidebar--main__main-subnav--BorderLeftWidth	1px
--pf-c-page__sidebar--main__main-subnav--BorderLeftWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-page	--pf-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth	0
	.pf-c-page	--pf-c-page__main-breadcrumb--BackgroundColor	#fff
--pf-c-page__main-breadcrumb--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page__main-breadcrumb--PaddingTop	1rem
--pf-c-page__main-breadcrumb--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-breadcrumb--PaddingRight	1rem
--pf-c-page__main-breadcrumb--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-breadcrumb--PaddingBottom	0
	.pf-c-page	--pf-c-page__main-breadcrumb--PaddingLeft	1rem
--pf-c-page__main-breadcrumb--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom	1rem
--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-breadcrumb--xl--PaddingRight	1.5rem
--pf-c-page__main-breadcrumb--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-breadcrumb--xl--PaddingLeft	1.5rem
--pf-c-page__main-breadcrumb--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-tabs--PaddingTop	0
	.pf-c-page	--pf-c-page__main-tabs--PaddingRight	0
	.pf-c-page	--pf-c-page__main-tabs--PaddingBottom	0
	.pf-c-page	--pf-c-page__main-tabs--PaddingLeft	0
	.pf-c-page	--pf-c-page__main-tabs--BackgroundColor	#fff
--pf-c-page__main-tabs--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page__main-wizard--BackgroundColor	#fff
--pf-c-page__main-wizard--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page__main-wizard--BorderTopColor	#d2d2d2
--pf-c-page__main-wizard--BorderTopColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-page	--pf-c-page__main-wizard--BorderTopWidth	1px
--pf-c-page__main-wizard--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-page	--pf-c-page__main-wizard--m-light-200--BackgroundColor	#f0f0f0
--pf-c-page__main-wizard--m-light-200--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-page__header-tools-group	--pf-hidden-visible--visible--Display	flex
--pf-hidden-visible--visible--Display --pf-c-page__header-tools-group--Display flex
	.pf-c-page__header-tools-item .pf-c-notification-badge.pf-m-read:hover	--pf-c-notification-badge--after--BackgroundColor	#3c3f42
--pf-c-notification-badge--after--BackgroundColor --pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread	--pf-c-notification-badge--after--BackgroundColor	#004080
--pf-c-notification-badge--after--BackgroundColor --pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-attention	--pf-c-notification-badge--after--BackgroundColor	#a30000
--pf-c-notification-badge--after--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-unread	--pf-c-notification-badge--after--BackgroundColor	#004080
--pf-c-notification-badge--after--BackgroundColor --pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-attention	--pf-c-notification-badge--after--BackgroundColor	#a30000
--pf-c-notification-badge--after--BackgroundColor --pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-page__sidebar.pf-m-expanded	--pf-c-page__sidebar--TranslateX	0
--pf-c-page__sidebar--TranslateX --pf-c-page__sidebar--m-expanded--TranslateX 0
	.pf-c-page__sidebar-body.pf-m-menu	--pf-c-page__sidebar-body--PaddingTop	0
--pf-c-page__sidebar-body--PaddingTop --pf-c-page__sidebar-body--m-menu--PaddingTop 0
	.pf-c-page__sidebar-body.pf-m-menu	--pf-c-page__sidebar-body--PaddingBottom	0
--pf-c-page__sidebar-body--PaddingBottom --pf-c-page__sidebar-body--m-menu--PaddingBottom 0
	.pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu	--pf-c-page__sidebar-body--m-menu--BorderTopWidth	0
	.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector	--pf-c-context-selector__toggle--BorderTopColor	transparent
	.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector	--pf-c-context-selector__toggle--BorderRightColor	transparent
	.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector	--pf-c-context-selector__toggle--BorderBottomColor	#3c3f42
--pf-c-context-selector__toggle--BorderBottomColor --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector	--pf-c-context-selector__toggle--BorderLeftColor	transparent
	.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector	--pf-c-context-selector__menu--Top	100%
	.pf-c-page__sidebar.pf-m-collapsed ~ .pf-c-page__main	--pf-c-page__main-subnav--BorderLeftWidth	0
--pf-c-page__main-subnav--BorderLeftWidth --pf-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth 0
	.pf-c-page__main-breadcrumb + .pf-c-page__main-section	--pf-c-page__main-section--PaddingTop	1rem
--pf-c-page__main-section--PaddingTop --pf-c-page__main-breadcrumb--main-section--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page__main-breadcrumb.pf-m-sticky-top	--pf-c-page__main-breadcrumb--PaddingBottom	1rem
--pf-c-page__main-breadcrumb--PaddingBottom --pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page__main-nav + .pf-c-page__main-tabs	--pf-c-page__main-tabs--PaddingTop	1rem
--pf-c-page__main-tabs--PaddingTop --pf-c-page__main-nav--page__main-tabs--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page__main-breadcrumb + .pf-c-page__main-tabs	--pf-c-page__main-tabs--PaddingTop	1rem
--pf-c-page__main-tabs--PaddingTop --pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page__main-section.pf-m-light	--pf-c-page__main-section--BackgroundColor	#fff
--pf-c-page__main-section--BackgroundColor --pf-c-page__main-section--m-light--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page__main-section.pf-m-dark-100	--pf-c-page__main-section--BackgroundColor	rgba(#030303, .62)
--pf-c-page__main-section--BackgroundColor --pf-c-page__main-section--m-dark-100--BackgroundColor --pf-global--BackgroundColor--dark-transparent-100 $pf-global--BackgroundColor--dark-transparent-100 rgba($pf-color-black-1000, .62) rgba(#030303, .62)
	.pf-c-page__main-section.pf-m-dark-200	--pf-c-page__main-section--BackgroundColor	rgba(#030303, .32)
--pf-c-page__main-section--BackgroundColor --pf-c-page__main-section--m-dark-200--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-page__main-wizard:first-child	--pf-c-page__main-wizard--BorderTopWidth	0
	.pf-c-page__main-wizard.pf-m-light-200	--pf-c-page__main-wizard--BackgroundColor	#f0f0f0
--pf-c-page__main-wizard--BackgroundColor --pf-c-page__main-wizard--m-light-200--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines