Page

The page component is used to define the basic layout of a page with either vertical or horizontal navigation.

Examples

Basic page components

A page will typically contain the following components:

A <Page> with a header that often contains a masthead
- Mastheads contain the <PageToggleButton>, a <MastheadMain> that contains a <MastheadBrand>, and the page's header toolbar within <MastheadContent>.
A <PageSidebar> for vertical navigation
1 or more <PageSection> components

To add a vertical sidebar to a <Page>, pass a <PageSidebar> component into the sidebar property. To render navigation in the sidebar, use the nav property of the <PageSidebar>.

The isNavOpen property helps facilitate the opening and closing of the sidebar and should be 'true' when the navigation sidebar is visible.

This example shows the legacy implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than <PageHeader> and <PageHeaderTools> as shown in the following example.

To add horizontal navigation to the top of a <Page>, add the navigation inside of a <ToolbarItem> in the <Toolbar> that is passed to the <MastheadContent> of the <Masthead>.

Horizontal sub-navigation is now recommended instead of tertiary-level navigation.

Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the tertiaryNav property. The following example passes tertiaryNav="Navigation" into a <Page> component.

When the isManagedSidebar property is true, it manages the sidebar open/close state, removing the need to pass both isNavOpen into the <PageSidebar> and onNavToggle into the <PageHeader>.

Filled page sections

By default, the last page section is "filled", meaning it fills the available vertical space of a page.

To change the default behavior, use the isFilled property. To make other page sections "filled", set isFilled equal to "true". To disable the last page section from being "filled", set isFilled equal to "false".

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

To adjust the padding of a <PageSection>, you can pass in different values to the padding property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’.

As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'.

To remove padding entirely, pass 'noPadding' to the default breakpoint. For example, the second section in this example passes in padding={{ default: 'noPadding' }}. Since no specific breakpoints are mentioned, every breakpoint will have 'noPadding'.

To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in padding={{ default: 'noPadding', md: 'padding' }}. At 'md', 'lg', 'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.

To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in padding={{ md: 'noPadding' }}, which means that 'md', 'lg' 'xl', and '2xl' breakpoints will have noPadding.

Navigation

Section with default padding

Section with no padding

Section with padding on medium

Section with no padding on medium

Group section

To group page content sections, add 1 or more <PageGroup> components to a <Page>.

The following example adds a group containing <PageNavigation>, <PageBreadcrumb>, and <PageSection> components.

To add additional components and information to a group, you may use the following properties:

To indicate that a breadcrumb should be in a group, use isBreadcrumbGrouped.
To indicate that tertiary navigation should be in a group, use isTertiaryNavGrouped.
To specify additional group content, use additionalGroupedContent.

Grouped section

Section 1

Section 2

Centered section

By default, a page section spans the width of the page. To reduce the width of a section, use the isWidthLimited property. To center align width-limited page sections, use the isCenterAligned property. When the main content area of a page is wider than the value of a centered, width-limited page section's --pf-c-page--section--m-limit-width--MaxWidth custom property, the section will automatically be centered.

The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.

When a width limited page section is wider than the value of --pf-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main section.

The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.

Props

Page

*required
Name	Type	Default	Description
additionalGroupedContent	React.ReactNode		Additional content of the group
breadcrumb	React.ReactNode		Breadcrumb component for the page
breadcrumbProps	PageBreadcrumbProps		Additional props of the breadcrumb
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
getVerticalBreakpoint	(height: number \| null) => 'default' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	getVerticalBreakpoint	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 getVerticalBreakpoint function to return breakpoints at different sizes than the default You can view the default getVerticalBreakpoint 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) \| null	(): 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
navToggleId	string	'nav-toggle'	Id for the nav toggle button
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
id	string	'page-sidebar'	Sidebar id
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
aria-label	string		Adds an accessible name to the page section. Required when the hasOverflowScroll prop is set to true. This prop should also be passed in if a heading is not being used to describe the content of the page section.
children	React.ReactNode		Content rendered inside the section
className	string	''	Additional classes added to the section
component	unknown	'section'	Sets the base component to render. Defaults to 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.
Deprecated: sticky	'top' \| 'bottom'		Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom
stickyOnBreakpoint	{ default?: 'top' \| 'bottom'; sm?: 'top' \| 'bottom'; md?: 'top' \| 'bottom'; lg?: 'top' \| 'bottom'; xl?: 'top' \| 'bottom'; '2xl'?: 'top' \| 'bottom'; }		Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints
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
aria-label	string		Adds an accessible name to the page group. Required when the hasOverflowScroll prop is set to true.
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
Deprecated: sticky	'top' \| 'bottom'		Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom
stickyOnBreakpoint	{ default?: 'top' \| 'bottom'; sm?: 'top' \| 'bottom'; md?: 'top' \| 'bottom'; lg?: 'top' \| 'bottom'; xl?: 'top' \| 'bottom'; '2xl'?: 'top' \| 'bottom'; }		Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints

PageBreadcrumb

*required
Name	Type	Default	Description
aria-label	string		Adds an accessible name to the breadcrumb section. Required when the hasOverflowScroll prop is set to true.
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
Deprecated: sticky	'top' \| 'bottom'		Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom
stickyOnBreakpoint	{ default?: 'top' \| 'bottom'; sm?: 'top' \| 'bottom'; md?: 'top' \| 'bottom'; lg?: 'top' \| 'bottom'; xl?: 'top' \| 'bottom'; '2xl'?: 'top' \| 'bottom'; }		Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints

PageNavigation

*required
Name	Type	Default	Description
aria-label	string		Adds an accessible name to the page navigation. Required when the hasOverflowScroll prop is set to true.
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
Deprecated: sticky	'top' \| 'bottom'		Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom
stickyOnBreakpoint	{ default?: 'top' \| 'bottom'; sm?: 'top' \| 'bottom'; md?: 'top' \| 'bottom'; lg?: 'top' \| 'bottom'; xl?: 'top' \| 'bottom'; '2xl'?: 'top' \| 'bottom'; }		Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints

PageToggleButton

*required
Name	Type	Default	Description
children	React.ReactNode		Content of the page toggle button
id	string	'nav-toggle'	Button id
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--m-light--BorderRightWidth	1px
--pf-c-page__sidebar--m-light--BorderRightWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-page	--pf-c-page__sidebar--m-light--BorderRightColor	#d2d2d2
--pf-c-page__sidebar--m-light--BorderRightColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.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-light-100--BackgroundColor	#fafafa
--pf-c-page__main-section--m-light-100--BackgroundColor --pf-global--BackgroundColor--150 $pf-global--BackgroundColor--150 $pf-color-black-100 #fafafa
	.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-light-100	--pf-c-page__main-section--BackgroundColor	#fafafa
--pf-c-page__main-section--BackgroundColor --pf-c-page__main-section--m-light-100--BackgroundColor --pf-global--BackgroundColor--150 $pf-global--BackgroundColor--150 $pf-color-black-100 #fafafa
	.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

Page

Examples

Basic page components

Vertical navigation

Legacy page header

Horizontal navigation

Legacy tertiary navigation

Uncontrolled navigation

Filled page sections

Main section padding

Group section

Centered section

Props

Page

PageHeader

PageHeaderTools

PageHeaderToolsGroup

PageHeaderToolsItem

PageSidebar

PageSection

PageGroup

PageBreadcrumb

PageNavigation

PageToggleButton

CSS variables