Page

The page component is used to create the basic structure of a page with either vertical or horizontal navigation. Related design guidelines: Navigation system

Examples Props CSS Variables

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

Main Section Padding

Section with default padding

Section with no padding

With or without fill

This section is set to the default fill variant

This section fills the available space.

This section does not fill the available space.

Props

Page properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the main section of the page layout (e.g. <PageSection />)
className	string	No	''	Additional classes added to the page layout
header	React.ReactNode	No	null	Header component (e.g. <PageHeader />)
sidebar	React.ReactNode	No	null	Sidebar component for a side nav (e.g. <PageSidebar />)
skipToContent	React.ReactElement	No	null	Skip to content component for the page
role	string	No	undefined	Sets the value for role on the <main> element
mainContainerId	string	No	null	an id to use for the [role="main"] element
isManagedSidebar	boolean	No	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
defaultManagedSidebarIsOpen	boolean	No	true	If true, the managed sidebar is initially open for desktop view
onPageResize	(object: any) => void	No	(): 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 }
breadcrumb	React.ReactNode	No	null	Breadcrumb component for the page
mainAriaLabel	string	No		Accessible label, can be used to name main section

PageHeader properties
Name	Type	Required	Default	Description
className	string	No	''	Additional classes added to the page header
logo	React.ReactNode	No	null	Component to render the logo/brand (e.g. <Brand />)
logoProps	object	No	null	Additional props passed to the logo anchor container
logoComponent	React.ReactNode	No	'a'	Component to use to wrap the passed <logo>
toolbar	React.ReactNode	No	null	Component to render the toolbar (e.g. <Toolbar />)
avatar	React.ReactNode	No	null	Component to render the avatar (e.g. <Avatar />
topNav	React.ReactNode	No	null	Component to render navigation within the header (e.g. <Nav />
showNavToggle	boolean	No	false	True to show the nav toggle button (toggles side nav)
isNavOpen	boolean	No	true	True if the side nav is shown
isManagedSidebar	boolean	No		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
role	string	No	undefined	Sets the value for role on the <main> element
onNavToggle	() => void	No	() => 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
aria-label	string	No	'Global navigation'	Aria Label for the nav toggle button

PageSidebar properties
Name	Type	Required	Default	Description
className	string	No	''	Additional classes added to the page sidebar
nav	React.ReactNode	No		Component to render the side navigation (e.g. <Nav />
isManagedSidebar	boolean	No		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	No	true	Programmatically manage if the side nav is shown, if isManagedSidebar is set to true in the Page component, this prop is managed
theme	'dark' \| 'light'	No	'dark'	Indicates the color scheme of the sidebar

PageSection properties
Name	Type	Required	Default	Description
children	React.ReactNode	No		Content rendered inside the section
className	string	No	''	Additional classes added to the section
variant	'default' \| 'light' \| 'dark' \| 'darker'	No	'default'	Section background color variant
type	'default' \| 'nav'	No	'default'	Section type variant
isFilled	boolean	No		Enables the page section to fill the available vertical space
noPadding	boolean	No	false	Modifies a main page section to have no padding

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__header	--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__header	--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__header	--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__header	--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__header	--pf-global--link--Color	#73bcf7
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-page__header	--pf-global--link--Color--hover	#73bcf7
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-page__header	--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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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__header .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	--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--xl--MarginLeft	calc(0.5rem * -1)
--pf-c-page__header-sidebar-toggle__c-button--xl--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--c-button--m-selected--before--Width	2.25rem
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--before--Height	2.25rem
	.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	30em
--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor	#3c3f42
--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.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--Transform	translate3d(-100%, 0, 0)
	.pf-c-page	--pf-c-page__sidebar--m-expanded--Transform	translate3d(0, 0, 0)
	.pf-c-page	--pf-c-page__sidebar--xl--Transform	translate3d(0, 0, 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__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-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--ZIndex	100
--pf-c-page__main--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.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-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--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-nav__main-nav--c-nav__scroll-button--Color	#151515
--pf-c-nav__main-nav--c-nav__scroll-button--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--hover--Color	#06c
--pf-c-nav__main-nav--c-nav__scroll-button--hover--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--focus--Color	#06c
--pf-c-nav__main-nav--c-nav__scroll-button--focus--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--active--Color	#06c
--pf-c-nav__main-nav--c-nav__scroll-button--active--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--disabled--Color	#d2d2d2
--pf-c-nav__main-nav--c-nav__scroll-button--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--before--BorderColor	#f0f0f0
--pf-c-nav__main-nav--c-nav__scroll-button--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--disabled--before--BorderColor	#f0f0f0
--pf-c-nav__main-nav--c-nav__scroll-button--disabled--before--BorderColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.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--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-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-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__sidebar.pf-m-expanded	--pf-c-page__sidebar--Transform	translate3d(0, 0, 0)
--pf-c-page__sidebar--Transform --pf-c-page__sidebar--m-expanded--Transform translate3d(0, 0, 0)
	.pf-c-page__main-nav .pf-c-nav__scroll-button	--pf-c-nav__scroll-button--Color	#151515
--pf-c-nav__scroll-button--Color --pf-c-nav__main-nav--c-nav__scroll-button--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-page__main-nav .pf-c-nav__scroll-button::before	--pf-c-nav__scroll-button--before--BorderColor	#f0f0f0
--pf-c-nav__scroll-button--before--BorderColor --pf-c-nav__main-nav--c-nav__scroll-button--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-page__main-nav .pf-c-nav__scroll-button:hover	--pf-c-nav__scroll-button--Color	#06c
--pf-c-nav__scroll-button--Color --pf-c-nav__main-nav--c-nav__scroll-button--hover--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page__main-nav .pf-c-nav__scroll-button:focus	--pf-c-nav__scroll-button--Color	#06c
--pf-c-nav__scroll-button--Color --pf-c-nav__main-nav--c-nav__scroll-button--focus--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page__main-nav .pf-c-nav__scroll-button:active	--pf-c-nav__scroll-button--Color	#06c
--pf-c-nav__scroll-button--Color --pf-c-nav__main-nav--c-nav__scroll-button--active--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page__main-nav .pf-c-nav__scroll-button:disabled	--pf-c-nav__scroll-button--Color	#d2d2d2
--pf-c-nav__scroll-button--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-page__main-nav .pf-c-nav__scroll-button:disabled	--pf-c-nav__scroll-button--before--BorderColor	#f0f0f0
--pf-c-nav__scroll-button--before--BorderColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.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-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)