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

Main Section Padding

Section with default padding

Section with no padding

Section with padding only on medium/large

Section with no padding on medium

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.

Uncontrolled nav

Section with darker background

Section with dark background

Section with light background

Group section

Grouped section

Section 1

Section 2

Props

Page

Name	Type	Required	Default	Description
additionalGroupedContent	React.ReactNode	No		Additional content of the group
breadcrumb	React.ReactNode	No		Breadcrumb component for the page
children	React.ReactNode	No		Content rendered inside the main section of the page layout (e.g. <PageSection />)
className	string	No		Additional classes added to the page layout
defaultManagedSidebarIsOpen	boolean	No	true	If true, the managed sidebar is initially open for desktop view
groupProps	PageGroupProps	No		Additional props of the group
header	React.ReactNode	No		Header component (e.g. <PageHeader />)
isBreadcrumbGrouped	boolean	No		Flag indicating if the breadcrumb should be in a group
isBreadcrumbWidthLimited	boolean	No	false	Flag indicating if breadcrumb width should be limited
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
isNotificationDrawerExpanded	boolean	No	false	Flag indicating Notification drawer in expanded
isTertiaryNavGrouped	boolean	No		Flag indicating if the tertiaryNav should be in a group
isTertiaryNavWidthLimited	boolean	No		Flag indicating if tertiary nav width should be limited
mainAriaLabel	string	No		Accessible label, can be used to name main section
mainContainerId	string	No		an id to use for the [role="main"] element
mainTabIndex	number \| null	No	-1	tabIndex to use for the [role="main"] element, null to unset it
notificationDrawer	React.ReactNode	No		Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />)
onNotificationDrawerExpand	() => void	No	() => null	Callback when notification drawer panel is finished expanding.
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 }
role	string	No		Sets the value for role on the <main> element
sidebar	React.ReactNode	No		Sidebar component for a side nav (e.g. <PageSidebar />)
skipToContent	React.ReactElement	No		Skip to content component for the page
tertiaryNav	React.ReactNode	No		Tertiary nav component for the page

PageHeader

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

PageHeaderTools

Name	Type	Required	Default	Description
children	React.ReactNode	Yes		Content rendered in page header tools
className	string	No		Additional classes added to the page header tools.

PageHeaderToolsGroup

Name	Type	Required	Description
children	React.ReactNode	Yes	Content rendered in the page header tools group
className	string	No	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'; }	No	Visibility at various breakpoints.

PageHeaderToolsItem

Name	Type	Required	Description
children	React.ReactNode	Yes	Content rendered in page header tools item.
className	string	No	Additional classes added to the page header tools item.
id	string	No	HTML id of the PageHeaderToolsItem
isSelected	boolean	No	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'; }	No	Visibility at various breakpoints.

PageSidebar

Name	Type	Required	Default	Description
className	string	No	''	Additional classes added to the page sidebar
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
nav	React.ReactNode	No		Component to render the side navigation (e.g. <Nav />
theme	'dark' \| 'light'	No	'dark'	Indicates the color scheme of the sidebar

PageSection

Name	Type	Required	Default	Description
children	React.ReactNode	No		Content rendered inside the section
className	string	No	''	Additional classes added to the section
hasOverflowScroll	boolean	No	false	Flag indicating if the PageSection has a scrolling overflow
hasShadowBottom	boolean	No	false	Modifier indicating if PageSection should have a shadow at the bottom
hasShadowTop	boolean	No	false	Modifier indicating if PageSection should have a shadow at the top
isFilled	boolean	No		Enables the page section to fill the available vertical space
isWidthLimited	boolean	No	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'; }	No		Padding at various breakpoints.
sticky	'top' \| 'bottom'	No		Modifier indicating if PageSection is sticky to the top or bottom
type	'default' \| 'nav' \| 'wizard'	No	'default'	Section type variant
variant	'default' \| 'light' \| 'dark' \| 'darker'	No	'default'	Section background color variant

PageGroup

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

PageBreadcrumb

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

PageNavigation

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

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	#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__header	--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__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__header-tools-group	--pf-hidden-visible--visible--Visibility	visible
	.pf-c-page__header-tools-group	--pf-hidden-visible--hidden--Display	none
	.pf-c-page__header-tools-group	--pf-hidden-visible--hidden--Visibility	hidden
	.pf-c-page__header-tools-group	--pf-hidden-visible--Display	flex
--pf-hidden-visible--Display --pf-hidden-visible--visible--Display --pf-c-page__header-tools-group--Display flex
	.pf-c-page__header-tools-group	--pf-hidden-visible--Visibility	visible
--pf-hidden-visible--Visibility --pf-hidden-visible--visible--Visibility visible
	.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-m-hidden.pf-c-page__header-tools-group	--pf-hidden-visible--Display	none
--pf-hidden-visible--Display --pf-hidden-visible--hidden--Display none
	.pf-m-hidden.pf-c-page__header-tools-group	--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__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--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	100
--pf-c-page--section--m-sticky-top--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.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	100
--pf-c-page--section--m-sticky-bottom--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.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-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-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__header-tools-item	--pf-hidden-visible--visible--Display	block
--pf-hidden-visible--visible--Display --pf-c-page__header-tools-item--Display block
	.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__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-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

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines