Skip to content
Patternfly Logo

Page

Examples

Vertical nav

header-tools
Navigation
Section with darker background
Section with dark background
Section with light background

Horizontal nav

Navigation
header-tools
Section with darker background
Section with dark background
Section with light background

Tertiary nav

header-tools
Navigation
Section with darker background
Section with dark background
Section with light background

With or without fill

header-tools
Navigation
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

header-tools
Navigation
Section with default padding
Section with no padding
Section with padding only on medium/large
Section with no padding on medium

Uncontrolled nav

header-tools
Navigation
Section with darker background
Section with dark background
Section with light background

Group section

Vertical nav using PageHeader component

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

header-tools
Navigation
Section with darker background
Section with dark background
Section with light background

Centered section

header-tools
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
NameTypeDefaultDescription
additionalGroupedContentReact.ReactNodeAdditional content of the group
breadcrumbReact.ReactNodeBreadcrumb component for the page
childrenReact.ReactNodeContent rendered inside the main section of the page layout (e.g. <PageSection />)
classNamestringAdditional classes added to the page layout
defaultManagedSidebarIsOpenbooleantrueIf true, the managed sidebar is initially open for desktop view
getBreakpoint(width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'getBreakpointThe 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
groupPropsPageGroupPropsAdditional props of the group
headerReact.ReactNodeHeader component (e.g. <PageHeader />)
isBreadcrumbGroupedbooleanFlag indicating if the breadcrumb should be in a group
isBreadcrumbWidthLimitedbooleanfalseFlag indicating if breadcrumb width should be limited
isManagedSidebarbooleanfalseIf 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
isNotificationDrawerExpandedbooleanfalseFlag indicating Notification drawer in expanded
isTertiaryNavGroupedbooleanFlag indicating if the tertiaryNav should be in a group
isTertiaryNavWidthLimitedbooleanFlag indicating if tertiary nav width should be limited
mainAriaLabelstringAccessible label, can be used to name main section
mainContainerIdstringan id to use for the [role="main"] element
mainTabIndexnumber | null-1tabIndex to use for the [role="main"] element, null to unset it
notificationDrawerReact.ReactNodeNotification drawer component for an optional notification drawer (e.g. <NotificationDrawer />)
onNotificationDrawerExpand() => void() => nullCallback when notification drawer panel is finished expanding.
onPageResize(object: any) => void(): void => nullCan 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 }
rolestringSets the value for role on the <main> element
sidebarReact.ReactNodeSidebar component for a side nav (e.g. <PageSidebar />)
skipToContentReact.ReactElementSkip to content component for the page
tertiaryNavReact.ReactNodeTertiary nav component for the page
*required
NameTypeDefaultDescription
aria-controlsNo type infonull
aria-labelstring'Global navigation'Aria Label for the nav toggle button
classNamestring''Additional classes added to the page header
headerToolsReact.ReactNodenullComponent to render the header tools, use <PageHeaderTools />
isManagedSidebarbooleanundefinedThis prop is no longer managed through PageHeader but in the Page component.
isNavOpenbooleantrueTrue if the side nav is shown
logoReact.ReactNodenullComponent to render the logo/brand, use <Brand />
logoComponentReact.ReactNode'a'Component to use to wrap the passed <logo>
logoPropsobjectnullAdditional props passed to the logo anchor container
onNavToggle() => void() => undefined as anyCallback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true
rolestringundefinedSets the value for role on the <main> element
showNavTogglebooleanfalseTrue to show the nav toggle button (toggles side nav)
topNavReact.ReactNodenullComponent to render navigation within the header, use <Nav />

PageHeaderTools

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered in page header tools
classNamestringAdditional classes added to the page header tools.

PageHeaderToolsGroup

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered in the page header tools group
classNamestringAdditional 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
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered in page header tools item.
classNamestringAdditional classes added to the page header tools item.
idstringHTML id of the PageHeaderToolsItem
isSelectedbooleanTrue 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
NameTypeDefaultDescription
classNamestring''Additional classes added to the page sidebar
isManagedSidebarbooleanIf 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
isNavOpenbooleantrueProgrammatically manage if the side nav is shown, if isManagedSidebar is set to true in the Page component, this prop is managed
navReact.ReactNodeComponent to render the side navigation (e.g. <Nav />
theme'dark' | 'light''dark'Indicates the color scheme of the sidebar

PageSection

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the section
classNamestring''Additional classes added to the section
hasOverflowScrollbooleanfalseFlag indicating if the PageSection has a scrolling overflow
hasShadowBottombooleanfalseModifier indicating if PageSection should have a shadow at the bottom
hasShadowTopbooleanfalseModifier indicating if PageSection should have a shadow at the top
isCenterAlignedbooleanfalseFlag indicating if the section content is center aligned. isWidthLimited must be set for this to work
isFilledbooleanEnables the page section to fill the available vertical space
isWidthLimitedbooleanfalseLimits the width of the section
padding{ default?: 'padding' | 'noPadding'; sm?: 'padding' | 'noPadding'; md?: 'padding' | 'noPadding'; lg?: 'padding' | 'noPadding'; xl?: 'padding' | 'noPadding'; '2xl'?: 'padding' | 'noPadding'; }Padding at various breakpoints.
sticky'top' | 'bottom'Modifier indicating if PageSection is sticky to the top or bottom
type'default' | 'nav' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard''default'Section type variant
variant'default' | 'light' | 'dark' | 'darker''default'Section background color variant

PageGroup

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside of the PageGroup
classNamestring''Additional classes to apply to the PageGroup
hasOverflowScrollbooleanfalseFlag indicating if the PageGroup has a scrolling overflow
hasShadowBottombooleanfalseModifier indicating if PageGroup should have a shadow at the bottom
hasShadowTopbooleanfalseModifier indicating if PageGroup should have a shadow at the top
sticky'top' | 'bottom'Modifier indicating if PageGroup is sticky to the top or bottom
*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside of the PageBreadcrumb
classNamestring''Additional classes to apply to the PageBreadcrumb
hasOverflowScrollbooleanfalseFlag indicating if the PageBreadcrumb has a scrolling overflow
hasShadowBottombooleanfalseFlag indicating if PageBreadcrumb should have a shadow at the bottom
hasShadowTopbooleanfalseFlag indicating if PageBreadcrumb should have a shadow at the top
isWidthLimitedbooleanLimits the width of the breadcrumb
sticky'top' | 'bottom'Modifier indicating if the PageBreadcrumb is sticky to the top or bottom
*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside of the PageNavigation
classNamestring''Additional classes to apply to the PageNavigation
hasOverflowScrollbooleanfalseFlag indicating if the PageNavigation has a scrolling overflow
hasShadowBottombooleanfalseFlag indicating if PageNavigation should have a shadow at the bottom
hasShadowTopbooleanfalseFlag indicating if PageNavigation should have a shadow at the top
isWidthLimitedbooleanLimits the width of the PageNavigation
sticky'top' | 'bottom'Modifier indicating if the PageNavigation is sticky to the top or bottom

PageToggleButton

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent of the page toggle button
isNavOpenbooleantrueTrue if the side nav is shown
onNavToggle() => void() => undefined as anyCallback 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-c-page__sidebar.pf-m-light--pf-global--Color--200
#6a6e73
.pf-c-page__sidebar.pf-m-light--pf-global--BorderColor--100
#d2d2d2
.pf-c-page__sidebar.pf-m-light--pf-global--primary-color--100
#06c
.pf-c-page__sidebar.pf-m-light--pf-global--link--Color
#06c
.pf-c-page__sidebar.pf-m-light--pf-global--link--Color--hover
#004080
.pf-c-page__sidebar.pf-m-light--pf-global--BackgroundColor--100
#fff
.pf-c-page__sidebar.pf-m-light--pf-c-page__sidebar--BackgroundColor
#fff
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--Color--100
#fff
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--Color--200
#f0f0f0
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--BorderColor--100
#b8bbbe
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--primary-color--100
#73bcf7
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--link--Color
#2b9af3
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--link--Color--hover
#2b9af3
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--BackgroundColor--100
#151515
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#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-c-page__header-tools-item--pf-hidden-visible--Visibility
visible
.pf-c-page__header-tools-item--pf-hidden-visible--visible--Display
block
.pf-m-hidden.pf-c-page__header-tools-item--pf-hidden-visible--Display
none
.pf-m-hidden.pf-c-page__header-tools-item--pf-hidden-visible--Visibility
hidden
.pf-c-page--pf-c-page--BackgroundColor
#f0f0f0
.pf-c-page--pf-c-page__header--BackgroundColor
#151515
.pf-c-page--pf-c-page__header--ZIndex
300
.pf-c-page--pf-c-page__header--MinHeight
4.75rem
.pf-c-page--pf-c-page__header-brand--PaddingLeft
1rem
.pf-c-page--pf-c-page__header-brand--xl--PaddingRight
2rem
.pf-c-page--pf-c-page__header-brand--xl--PaddingLeft
1.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingTop
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingRight
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--MarginRight
1rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--MarginLeft
calc(0.5rem * -1)
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--FontSize
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--pf-c-page__header-nav--xl--BackgroundColor
transparent
.pf-c-page--pf-c-page__header-nav--xl--PaddingRight
2rem
.pf-c-page--pf-c-page__header-nav--xl--PaddingLeft
2rem
.pf-c-page--pf-c-page__header-tools--MarginRight
1rem
.pf-c-page--pf-c-page__header-tools--xl--MarginRight
1.5rem
.pf-c-page--pf-c-page__header-tools--c-avatar--MarginLeft
1rem
.pf-c-page--pf-c-page__header-tools-group--MarginLeft
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--pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor
#004080
.pf-c-page--pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor
#a30000
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor
#004080
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor
#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--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius
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--pf-c-page__sidebar--Width
18.125rem
.pf-c-page--pf-c-page__sidebar--BackgroundColor
#212427
.pf-c-page--pf-c-page__sidebar--m-light--BackgroundColor
#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--pf-c-page__sidebar--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--pf-c-page__sidebar-body--PaddingBottom
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--pf-c-page__sidebar-body--m-menu--BorderTopWidth
1px
.pf-c-page--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor
#3c3f42
.pf-c-page--pf-c-page__main--ZIndex
100
.pf-c-page--pf-c-page__main-section--PaddingTop
1rem
.pf-c-page--pf-c-page__main-section--PaddingRight
1rem
.pf-c-page--pf-c-page__main-section--PaddingBottom
1rem
.pf-c-page--pf-c-page__main-section--PaddingLeft
1rem
.pf-c-page--pf-c-page__main-section--xl--PaddingTop
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingRight
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingBottom
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingLeft
1.5rem
.pf-c-page--pf-c-page__main-breadcrumb--main-section--PaddingTop
1rem
.pf-c-page--pf-c-page__main-section--BackgroundColor
#f0f0f0
.pf-c-page--pf-c-page__main-section--m-light--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-section--m-light-100--BackgroundColor
#fafafa
.pf-c-page--pf-c-page__main-section--m-dark-100--BackgroundColor
rgba(#030303, .62)
.pf-c-page--pf-c-page__main-section--m-dark-200--BackgroundColor
rgba(#030303, .32)
.pf-c-page--pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop
1rem
.pf-c-page--pf-c-page__main-nav--page__main-tabs--PaddingTop
1rem
.pf-c-page--pf-c-page--section--m-limit-width--MaxWidth
calc(125rem - 18.125rem)
.pf-c-page--pf-c-page--section--m-sticky-top--ZIndex
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--pf-c-page--section--m-sticky-bottom--ZIndex
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--pf-c-page--section--m-shadow-bottom--BoxShadow
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--pf-c-page--section--m-shadow-top--BoxShadow
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--pf-c-page__main-nav--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-nav--PaddingTop
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--pf-c-page__main-nav--xl--PaddingRight
0.5rem
.pf-c-page--pf-c-page__main-nav--xl--PaddingLeft
0.5rem
.pf-c-page--pf-c-page__main-subnav--BackgroundColor
#212427
.pf-c-page--pf-c-page__main-subnav--BorderTopWidth
1px
.pf-c-page--pf-c-page__main-subnav--BorderTopColor
#3c3f42
.pf-c-page--pf-c-page__main-subnav--BorderLeftWidth
0
.pf-c-page--pf-c-page__main-subnav--BorderLeftColor
#3c3f42
.pf-c-page--pf-c-page__sidebar--main__main-subnav--BorderLeftWidth
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--pf-c-page__main-breadcrumb--PaddingTop
1rem
.pf-c-page--pf-c-page__main-breadcrumb--PaddingRight
1rem
.pf-c-page--pf-c-page__main-breadcrumb--PaddingBottom
0
.pf-c-page--pf-c-page__main-breadcrumb--PaddingLeft
1rem
.pf-c-page--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom
1rem
.pf-c-page--pf-c-page__main-breadcrumb--xl--PaddingRight
1.5rem
.pf-c-page--pf-c-page__main-breadcrumb--xl--PaddingLeft
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--pf-c-page__main-wizard--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-wizard--BorderTopColor
#d2d2d2
.pf-c-page--pf-c-page__main-wizard--BorderTopWidth
1px
.pf-c-page--pf-c-page__main-wizard--m-light-200--BackgroundColor
#f0f0f0
.pf-c-page__header-tools-group--pf-hidden-visible--visible--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-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-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-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-unread--pf-c-notification-badge--after--BackgroundColor
#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-page__sidebar.pf-m-expanded--pf-c-page__sidebar--TranslateX
0
.pf-c-page__sidebar-body.pf-m-menu--pf-c-page__sidebar-body--PaddingTop
0
.pf-c-page__sidebar-body.pf-m-menu--pf-c-page__sidebar-body--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-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-breadcrumb + .pf-c-page__main-section--pf-c-page__main-section--PaddingTop
1rem
.pf-c-page__main-breadcrumb.pf-m-sticky-top--pf-c-page__main-breadcrumb--PaddingBottom
1rem
.pf-c-page__main-nav + .pf-c-page__main-tabs--pf-c-page__main-tabs--PaddingTop
1rem
.pf-c-page__main-breadcrumb + .pf-c-page__main-tabs--pf-c-page__main-tabs--PaddingTop
1rem
.pf-c-page__main-section.pf-m-light--pf-c-page__main-section--BackgroundColor
#fff
.pf-c-page__main-section.pf-m-light-100--pf-c-page__main-section--BackgroundColor
#fafafa
.pf-c-page__main-section.pf-m-dark-100--pf-c-page__main-section--BackgroundColor
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-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

View source on GitHub