Page

Examples

Basic page components

A page will typically contain the following components:

  • A <Page> with a masthead prop that often contains a masthead component

The <MastheadMain> component includes the smaller area that typically contains the <MastheadToggle> and a <MastheadLogo>. <MastheadContent> represents the main portion of the masthead, and will typically contain a <Toolbar> or other menu-like components, like a <Dropdown>.

  • Mastheads contain a <MastheadMain> component, which includes the <MastheadToggle>, a <MastheadLogo>, and the page's toolbar (via <MastheadContent>.) The <MastheadToggle> component contains a <PageToggleButton>, and the <MastheadLogo> component contains a <MastheadBrand>.
  • 1 or more <PageSidebarBody> components inside <PageSidebar> for vertical navigation or other sidebar content
  • 1 or more <PageSection> components

Vertical navigation

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

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

header-tools
Navigation
Section 1
Section 2 with secondary variant styling
Section 3

Multiple sidebar body

You can have multiple <PageSidebarBody> components inside the <PageSidebar> for more customization. You can modify the <PageSidebarBody> further by passing the following properties:

  • usePageInsets will modify the component's insets to match page insets
  • isFilled={true} will cause the component to grow to fill the available vertical space
  • isFilled={false} will cause the component to not grow to fill the available vertical space

By default, the last <PageSidebarBody> will grow to fill the available vertical space. This can be changed by passing isFilled={false} as demonstrated in the following example.

header-tools
First sidebar body (for a context selector/perspective switcher)
Second sidebar body (with insets)
Third sidebar body (with fill)
Fourth sidebar body (with insets and no fill)
Section 1
Section 2
Section 3

Horizontal navigation

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>.

Navigation
header-tools
Section 1
Section 2 with secondary variant styling
Section 3

Uncontrolled navigation

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

header-tools
Navigation
Section 1
Section 2
Section 3

Filled page sections

By default, page sections will not expand to fill in the available vertical space in a page.

To change this default behavior, pass isContentFilled to the <Page> component and isFilled={true} to any child <PageSection> or <PageGroup> component that you want to fill the space. If multiple components are set to fill, then the available space will be split equally between them.

header-tools
Navigation
A default page section
This section fills the available space.
A default page section

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.

header-tools
Navigation
Section with default padding
Section with no padding
Section with padding on medium
Section with no padding on medium

Main section variations

This example shows all types of page sections.

Navigation
Section with type="subnav" for horizontal subnav navigation
Section with type="nav" for tertiary navigation
Section with type="tabs" for tabs
Section with type="breadcrumb" for breadcrumbs
Section without type prop or type="default" for main sections
Section with type="wizard" for wizards

Group section

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

The following example adds a group containing <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 horizontal sub navigation should be in a group, use isHorizontalSubnavGrouped.
  • To specify additional group content, use additionalGroupedContent.

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-v6-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.

header-tools
Navigation
When a width limited page section is wider than the value of --pf-v6-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
bannerReact.ReactNodeBanner component for the page. This will be rendered above a breadcrumb if one is also passed.
breadcrumbReact.ReactNodeBreadcrumb component for the page
breadcrumbPropsPageBreadcrumbPropsAdditional props of the breadcrumb
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
drawerDefaultSizestringSets default drawer size
drawerMaxSizestringSets the maximum drawer size
drawerMinSizestringSets the minimum drawer size
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
getVerticalBreakpoint(height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'getVerticalBreakpointThe 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
groupPropsPageGroupPropsAdditional props of the group
horizontalSubnavReact.ReactNodeHorizontal sub navigation component for the page
isBreadcrumbGroupedbooleanFlag indicating if the breadcrumb should be in a group
isBreadcrumbWidthLimitedbooleanfalseFlag indicating if breadcrumb width should be limited
isContentFilledbooleanEnables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property.
isHorizontalSubnavGroupedbooleanFlag indicating if the horizontal sub navigation should be in a group
isHorizontalSubnavWidthLimitedbooleanFlag indicating if horizontal sub navigation width should be limited
isManagedSidebarbooleanfalseIf true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into the sidebar component or add a callback onSidebarToggle function into the Masthead component
isNotificationDrawerExpandedbooleanfalseFlag indicating Notification drawer in expanded
mainAriaLabelstringAccessible label, can be used to name main section
mainComponent'main' | 'div''main'HTML component used as main component of the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists.
mainContainerIdstringan id to use for the [role="main"] element
mainTabIndexnumber | null-1tabIndex to use for the [role="main"] element, null to unset it
mastheadReact.ReactNodeMasthead component (e.g. <Masthead />)
notificationDrawerReact.ReactNodeNotification drawer component for an optional notification drawer (e.g. <NotificationDrawer />)
onNotificationDrawerExpand(event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void() => nullCallback when notification drawer panel is finished expanding.
onPageResize((event: MouseEvent | TouchEvent | React.KeyboardEvent, object: any) => void) | nullCan add callback to be notified when resize occurs, for example to set the sidebar isSidebarOpen 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

PageSidebar

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the page sidebar (e.g. <PageSidebarBody />
classNamestring''Additional classes added to the page sidebar
idstring'page-sidebar'Sidebar id
isManagedSidebarbooleanIf true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into the sidebar component or add a callback onSidebarToggle function into the Masthead component
isSidebarOpenbooleantrueProgrammatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed

PageSidebarBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the page sidebar body
classNamestringAdditional classes added to the page sidebar body
isContextSelectorbooleanFlag indicating that the page sidebar body is for a context selector/perspective switcher
isFilledbooleanFlag indicating that the page sidebar body should fill the available vertical space.
usePageInsetsbooleanFlag indicating that the page sidebar body should use page insets.

PageSection

*required
NameTypeDefaultDescription
aria-labelstringAdds 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.
childrenReact.ReactNodeContent rendered inside the section
classNamestring''Additional classes added to the section
componentunknown'section'Sets the base component to render. Defaults to section
hasBodyWrapper BetabooleantrueFlag indicating whether children passed to the component should be wrapped by a PageBody. Set this to false in order to pass multiple, custom PageBody's as children.
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 if true, or disable filling if false.
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.
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' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard''default'Section type variant
variant'default' | 'secondary''default'Section background color variant. This will only apply when the type prop has the "default" value.

PageGroup

*required
NameTypeDefaultDescription
aria-labelstringAdds an accessible name to the page group when the hasOverflowScroll prop is set to true.
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
isFilledbooleanEnables the page group to fill the available vertical space if true, or disable filling if false.
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
*required
NameTypeDefaultDescription
aria-labelstringAdds an accessible name to the breadcrumb section. Required when the hasOverflowScroll prop is set to true.
childrenReact.ReactNodeContent rendered inside of the PageBreadcrumb
classNamestring''Additional classes to apply to the PageBreadcrumb
hasBodyWrapper BetabooleantrueFlag indicating whether children passed to the component should be wrapped by a PageBody. Set this to false in order to pass multiple, custom PageBody's as children.
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
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
NameTypeDefaultDescription
childrenReact.ReactNodeContent of the page toggle button
idstring'nav-toggle'Button id
isSidebarOpenbooleantrueTrue if the sidebar is shown
onSidebarToggle() => void() => undefined as anyCallback function to handle the sidebar toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-page--pf-v6-c-page--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-page--pf-v6-c-page--inset
1.5rem
.pf-v6-c-page--pf-v6-c-page--c-masthead--ZIndex
300
.pf-v6-c-page--pf-v6-c-page__sidebar--ZIndex
200
.pf-v6-c-page--pf-v6-c-page__sidebar--Width
18.125rem
.pf-v6-c-page--pf-v6-c-page__sidebar--xl--Width
18.125rem
.pf-v6-c-page--pf-v6-c-page__sidebar--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-page--pf-v6-c-page__sidebar--BoxShadow
none
.pf-v6-c-page--pf-v6-c-page__sidebar--TransitionDuration
400ms
.pf-v6-c-page--pf-v6-c-page__sidebar--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-page--pf-v6-c-page__sidebar--TranslateX
-100%
.pf-v6-c-page--pf-v6-c-page__sidebar--TranslateZ
0
.pf-v6-c-page--pf-v6-c-page__sidebar--m-expanded--TranslateX
0
.pf-v6-c-page--pf-v6-c-page__sidebar--xl--TranslateX
0
.pf-v6-c-page--pf-v6-c-page__sidebar--MarginInlineEnd
calc(1.5rem / 2)
.pf-v6-c-page--pf-v6-c-page__sidebar--PaddingBlockEnd
1.5rem
.pf-v6-c-page--pf-v6-c-page__sidebar--PaddingInlineStart
0
.pf-v6-c-page--pf-v6-c-page__sidebar--PaddingInlineEnd
0
.pf-v6-c-page--pf-v6-c-page__sidebar-header--BorderBlockEndWidth
1px
.pf-v6-c-page--pf-v6-c-page__sidebar-header--BorderBlockEndColor
(In light theme) #c7c7c7
.pf-v6-c-page--pf-v6-c-page__sidebar-header--PaddingBlockStart
0.5rem
.pf-v6-c-page--pf-v6-c-page__sidebar-header--PaddingBlockEnd
1rem
.pf-v6-c-page--pf-v6-c-page__sidebar-title--PaddingInlineStart
1.5rem
.pf-v6-c-page--pf-v6-c-page__sidebar-title--FontSize
1rem
.pf-v6-c-page--pf-v6-c-page__sidebar-title--LineHeight
1.3
.pf-v6-c-page--pf-v6-c-page__sidebar-title--FontFamily
"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
.pf-v6-c-page--pf-v6-c-page__sidebar-title--FontWeight
500
.pf-v6-c-page--pf-v6-c-page__sidebar-body--PaddingInlineEnd
calc(1.5rem / 2)
.pf-v6-c-page--pf-v6-c-page__sidebar-body--PaddingInlineStart
1.5rem
.pf-v6-c-page--pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd
1.5rem
.pf-v6-c-page--pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart
1.5rem
.pf-v6-c-page--pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd
1rem
.pf-v6-c-page--pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart
1rem
.pf-v6-c-page--pf-v6-c-page__main-container--ZIndex
100
.pf-v6-c-page--pf-v6-c-page__main-container--GridArea
main
.pf-v6-c-page--pf-v6-c-page--masthead--main-container--GridArea
sidebar / sidebar / main / main
.pf-v6-c-page--pf-v6-c-page__main-container--MaxHeight
calc(100% - 1.5rem)
.pf-v6-c-page--pf-v6-c-page__main-container--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-page--pf-v6-c-page__main-container--MarginInlineStart
1.5rem
.pf-v6-c-page--pf-v6-c-page__main-container--MarginInlineEnd
1.5rem
.pf-v6-c-page--pf-v6-c-page__main-container--BorderRadius
16px
.pf-v6-c-page--pf-v6-c-page__main-container--BorderWidth
0.25rem
.pf-v6-c-page--pf-v6-c-page__main-container--BorderColor
(In light theme) #ffffff
.pf-v6-c-page--pf-v6-c-page__main-section--PaddingBlockStart
1rem
.pf-v6-c-page--pf-v6-c-page__main-section--PaddingInlineEnd
1.5rem
.pf-v6-c-page--pf-v6-c-page__main-section--PaddingBlockEnd
1rem
.pf-v6-c-page--pf-v6-c-page__main-section--PaddingInlineStart
1.5rem
.pf-v6-c-page--pf-v6-c-page__main-section--RowGap
1.5rem
.pf-v6-c-page--pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart
1rem
.pf-v6-c-page--pf-v6-c-page__main-section--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-page--pf-v6-c-page__main-section--m-secondary--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-page--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart
1rem
.pf-v6-c-page--pf-v6-c-page--section--m-limit-width--MaxWidth
calc(125rem - 18.125rem)
.pf-v6-c-page--pf-v6-c-page--section--m-sticky-top--ZIndex
300
.pf-v6-c-page--pf-v6-c-page--section--m-sticky-top--BoxShadow
0px 4px 4px -4px rgba(41, 41, 41, 0.2000)
.pf-v6-c-page--pf-v6-c-page--section--m-sticky-bottom--ZIndex
300
.pf-v6-c-page--pf-v6-c-page--section--m-sticky-bottom--BoxShadow
0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
.pf-v6-c-page--pf-v6-c-page--section--m-shadow-bottom--BoxShadow
0px 4px 4px -4px rgba(41, 41, 41, 0.2000)
.pf-v6-c-page--pf-v6-c-page--section--m-shadow-bottom--ZIndex
100
.pf-v6-c-page--pf-v6-c-page--section--m-shadow-top--BoxShadow
0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
.pf-v6-c-page--pf-v6-c-page--section--m-shadow-top--ZIndex
100
.pf-v6-c-page--pf-v6-c-page__main-subnav--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-page--pf-v6-c-page__main-subnav--PaddingBlockStart
1rem
.pf-v6-c-page--pf-v6-c-page__main-subnav--PaddingBlockEnd
0
.pf-v6-c-page--pf-v6-c-page__main-subnav--PaddingInlineStart
calc(1.5rem - 0.25rem)
.pf-v6-c-page--pf-v6-c-page__main-subnav--PaddingInlineEnd
calc(1.5rem - 0.25rem)
.pf-v6-c-page--pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd
1rem
.pf-v6-c-page--pf-v6-c-page__main-breadcrumb--PaddingBlockStart
1rem
.pf-v6-c-page--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd
calc(1.5rem - 0.25rem)
.pf-v6-c-page--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd
0
.pf-v6-c-page--pf-v6-c-page__main-breadcrumb--PaddingInlineStart
calc(1.5rem - 0.25rem)
.pf-v6-c-page--pf-v6-c-page__main-breadcrumb--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-page--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd
1rem
.pf-v6-c-page--pf-v6-c-page__main-tabs--PaddingBlockStart
0
.pf-v6-c-page--pf-v6-c-page__main-tabs--PaddingInlineEnd
0
.pf-v6-c-page--pf-v6-c-page__main-tabs--PaddingBlockEnd
0
.pf-v6-c-page--pf-v6-c-page__main-tabs--PaddingInlineStart
0
.pf-v6-c-page--pf-v6-c-page__main-tabs--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-page--pf-v6-c-page__main-wizard--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-page--pf-v6-c-page__main-wizard--BorderBlockStartColor
(In light theme) #c7c7c7
.pf-v6-c-page--pf-v6-c-page__main-wizard--BorderBlockStartWidth
1px
.pf-v6-c-page__sidebar.pf-m-expanded--pf-v6-c-page__sidebar--TranslateX
0
.pf-v6-c-page__sidebar-body.pf-m-page-insets--pf-v6-c-page__sidebar-body--PaddingInlineEnd
1.5rem
.pf-v6-c-page__sidebar-body.pf-m-page-insets--pf-v6-c-page__sidebar-body--PaddingInlineStart
1.5rem
.pf-v6-c-page__sidebar-body.pf-m-context-selector--pf-v6-c-page__sidebar-body--PaddingInlineEnd
1rem
.pf-v6-c-page__sidebar-body.pf-m-context-selector--pf-v6-c-page__sidebar-body--PaddingInlineStart
1rem
.pf-v6-c-page__sidebar-body.pf-m-inset-none--pf-v6-c-page__sidebar-body--PaddingInlineEnd
0
.pf-v6-c-page__sidebar-body.pf-m-inset-none--pf-v6-c-page__sidebar-body--PaddingInlineStart
0
.pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-section--pf-v6-c-page__main-section--PaddingBlockStart
1rem
.pf-v6-c-page__main-breadcrumb.pf-m-sticky-top--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd
1rem
.pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-tabs--pf-v6-c-page__main-tabs--PaddingBlockStart
1rem
.pf-v6-c-page__main-section.pf-m-secondary--pf-v6-c-page__main-section--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-page__main-wizard:first-child--pf-v6-c-page__main-wizard--BorderBlockStartWidth
0