Examples
Basic page components
A page will typically contain the following components:
- A
<Page>
with amasthead
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.
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 insetsisFilled={true}
will cause the component to grow to fill the available vertical spaceisFilled={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.
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>
.
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>
.
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.
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
.
Main section variations
This example shows all types of page sections.
type="nav"
for tertiary navigation type="tabs"
for tabs type
prop or type="default"
for main sections 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.
--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
Name | Type | Default | Description |
---|---|---|---|
additionalGroupedContent | React.ReactNode | Additional content of the group | |
banner | React.ReactNode | Banner component for the page. This will be rendered above a breadcrumb if one is also passed. | |
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 |
drawerDefaultSize | string | Sets default drawer size | |
drawerMaxSize | string | Sets the maximum drawer size | |
drawerMinSize | string | Sets the minimum drawer size | |
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 | |
horizontalSubnav | React.ReactNode | Horizontal sub navigation component for the page | |
isBreadcrumbGrouped | boolean | Flag indicating if the breadcrumb should be in a group | |
isBreadcrumbWidthLimited | boolean | false | Flag indicating if breadcrumb width should be limited |
isContentFilled | boolean | Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property. | |
isHorizontalSubnavGrouped | boolean | Flag indicating if the horizontal sub navigation should be in a group | |
isHorizontalSubnavWidthLimited | boolean | Flag indicating if horizontal sub navigation width should be limited | |
isManagedSidebar | boolean | false | If 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 |
isNotificationDrawerExpanded | boolean | false | Flag indicating Notification drawer in expanded |
mainAriaLabel | string | Accessible 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. |
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 |
masthead | React.ReactNode | Masthead component (e.g. <Masthead />) | |
notificationDrawer | React.ReactNode | Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) | |
onNotificationDrawerExpand | (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void | () => null | Callback when notification drawer panel is finished expanding. |
onPageResize | ((event: MouseEvent | TouchEvent | React.KeyboardEvent, object: any) => void) | null | Can 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 } | |
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 |
PageSidebar
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the page sidebar (e.g. <PageSidebarBody /> | |
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 isSidebarOpen boolean into the sidebar component or add a callback onSidebarToggle function into the Masthead component | |
isSidebarOpen | boolean | true | Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed |
PageSidebarBody
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the page sidebar body | |
className | string | Additional classes added to the page sidebar body | |
isContextSelector | boolean | Flag indicating that the page sidebar body is for a context selector/perspective switcher | |
isFilled | boolean | Flag indicating that the page sidebar body should fill the available vertical space. | |
usePageInsets | boolean | Flag indicating that the page sidebar body should use page insets. |
PageSection
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 |
hasBodyWrapper Beta | boolean | true | Flag 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. |
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 if true, or disable filling if false. | |
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. | |
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
Name | Type | Default | Description |
---|---|---|---|
aria-label | string | Adds an accessible name to the page group 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 |
isFilled | boolean | Enables 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 |
PageBreadcrumb
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 |
hasBodyWrapper Beta | boolean | true | Flag 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. |
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 | |
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
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content of the page toggle button | |
id | string | 'nav-toggle' | Button id |
isSidebarOpen | boolean | true | True if the sidebar is shown |
onSidebarToggle | () => void | () => undefined as any | Callback 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 column | Selector | Variable | Value | |
---|---|---|---|---|
.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 |