From b6a63ef3fc1956f4bff5312f54475cb8327ef486 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Thu, 10 Sep 2026 20:23:07 -0400
Subject: [PATCH 1/2] chore(Page): Header, footer, and plain docs should match
 Core

Assisted-by: Cursor
---
 .../src/components/Page/examples/Page.md      |  36 +-
 .../Page/examples/PageCustomFooter.tsx        |  59 +++
 .../Page/examples/PageCustomHeader.tsx        |  17 +
 .../examples/PageHeaderAndFooterContent.tsx   |  20 -
 .../components/Page/examples/PagePlain.tsx    |  58 +++
 .../react-core/src/demos/CardView/CardView.md |   2 +-
 .../src/demos/CardView/examples/CardView.tsx  |   2 +-
 packages/react-core/src/demos/Page.md         |  27 +-
 .../src/demos/examples/Page/PagePlain.tsx     | 402 ++++++++++++++++++
 .../PageStickySectionGroupUsingPageHeader.tsx |   0
 10 files changed, 587 insertions(+), 36 deletions(-)
 create mode 100644 packages/react-core/src/components/Page/examples/PageCustomFooter.tsx
 create mode 100644 packages/react-core/src/components/Page/examples/PageCustomHeader.tsx
 delete mode 100644 packages/react-core/src/components/Page/examples/PageHeaderAndFooterContent.tsx
 create mode 100644 packages/react-core/src/components/Page/examples/PagePlain.tsx
 create mode 100644 packages/react-core/src/demos/examples/Page/PagePlain.tsx
 delete mode 100644 packages/react-core/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx

diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md
index 280e5ec2e48..44dbce566f4 100644
--- a/packages/react-core/src/components/Page/examples/Page.md
+++ b/packages/react-core/src/components/Page/examples/Page.md
@@ -33,18 +33,6 @@ The `<MastheadMain>` component includes the smaller area that typically contains
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
-### Page header and footer
-
-To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
-
-`<PageFooter>` can be passed to the `footer` property, and should be used to wrap custom footer content.
-
-When using a custom `<PageHeader>` and `<PageFooter>`, the `isPlain` flag should be passed to `<Page>`. This will remove styling on the main container, the height constraints on the page wrapper (so it can grow beyond the viewport), and remove the scroll management from the content section so the window will be what scrolls.
-
-```ts file="./PageHeaderAndFooterContent.tsx"
-
-```
-
 ### 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>`.
@@ -162,3 +150,27 @@ In this example, a scroll event listener on the scroll parent container toggles
 ```ts file="./PageDynamicStickySection.tsx"
 
 ```
+
+### Custom header
+
+To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
+
+```ts isBeta file="./PageCustomHeader.tsx"
+
+```
+
+### Footer
+
+`<PageFooter>` can be passed to the `footer` property, and should be used to wrap custom footer content.
+
+```ts isBeta file="./PageCustomFooter.tsx"
+
+```
+
+### Plain page
+
+When a page should not have the default content area background or overflow scrolling, pass the `isPlain` property to `<Page>`.
+
+```ts isBeta file="./PagePlain.tsx"
+
+```
diff --git a/packages/react-core/src/components/Page/examples/PageCustomFooter.tsx b/packages/react-core/src/components/Page/examples/PageCustomFooter.tsx
new file mode 100644
index 00000000000..fa5cafc6f84
--- /dev/null
+++ b/packages/react-core/src/components/Page/examples/PageCustomFooter.tsx
@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Page,
+  PageFooter,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton
+} from '@patternfly/react-core';
+
+export const PageCustomFooter: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="custom-footer-body-nav-toggle"
+            isHamburgerButton
+          />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>Content</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="custom-footer-vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page footer={<PageFooter>Page footer</PageFooter>} masthead={masthead} sidebar={sidebar}>
+      <PageSection aria-labelledby="custom-footer-section">
+        <h2 id="custom-footer-section">Page content</h2>
+      </PageSection>
+    </Page>
+  );
+};
diff --git a/packages/react-core/src/components/Page/examples/PageCustomHeader.tsx b/packages/react-core/src/components/Page/examples/PageCustomHeader.tsx
new file mode 100644
index 00000000000..b65d56a58b1
--- /dev/null
+++ b/packages/react-core/src/components/Page/examples/PageCustomHeader.tsx
@@ -0,0 +1,17 @@
+import { Page, PageHeader, PageSection, PageSidebar, PageSidebarBody } from '@patternfly/react-core';
+
+export const PageCustomHeader: React.FunctionComponent = () => {
+  const sidebar = (
+    <PageSidebar isSidebarOpen id="custom-header-vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page masthead={<PageHeader>Custom page header</PageHeader>} sidebar={sidebar}>
+      <PageSection aria-labelledby="custom-header-section">
+        <h2 id="custom-header-section">Page content</h2>
+      </PageSection>
+    </Page>
+  );
+};
diff --git a/packages/react-core/src/components/Page/examples/PageHeaderAndFooterContent.tsx b/packages/react-core/src/components/Page/examples/PageHeaderAndFooterContent.tsx
deleted file mode 100644
index 3dd2160b419..00000000000
--- a/packages/react-core/src/components/Page/examples/PageHeaderAndFooterContent.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Page, PageHeader, PageFooter, PageSection } from '@patternfly/react-core';
-
-export const PageHeaderAndFooterContent: React.FunctionComponent = () => {
-  const pageHeader = <PageHeader>Page header</PageHeader>;
-  const pageFooter = <PageFooter>Page footer</PageFooter>;
-
-  return (
-    <Page isPlain masthead={pageHeader} footer={pageFooter}>
-      <PageSection aria-labelledby="header-example-section-1">
-        <h2 id="header-example-section-1">Page header example section 1</h2>
-      </PageSection>
-      <PageSection variant="secondary" aria-labelledby="header-example-section-2">
-        <h2 id="header-example-section-2">Page header example section 2 with secondary variant styling</h2>
-      </PageSection>
-      <PageSection aria-labelledby="header-example-section-3">
-        <h2 id="header-example-section-3">Page header example section 3</h2>
-      </PageSection>
-    </Page>
-  );
-};
diff --git a/packages/react-core/src/components/Page/examples/PagePlain.tsx b/packages/react-core/src/components/Page/examples/PagePlain.tsx
new file mode 100644
index 00000000000..2b51227ce8e
--- /dev/null
+++ b/packages/react-core/src/components/Page/examples/PagePlain.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton
+} from '@patternfly/react-core';
+
+export const PagePlain: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="plain-page-body-nav-toggle"
+            isHamburgerButton
+          />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>Content</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="plain-page-vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page isPlain masthead={masthead} sidebar={sidebar}>
+      <PageSection aria-labelledby="plain-page-section">
+        <p>Page content</p>
+      </PageSection>
+    </Page>
+  );
+};
diff --git a/packages/react-core/src/demos/CardView/CardView.md b/packages/react-core/src/demos/CardView/CardView.md
index 58eeb5eb539..9dfa99173f8 100644
--- a/packages/react-core/src/demos/CardView/CardView.md
+++ b/packages/react-core/src/demos/CardView/CardView.md
@@ -6,7 +6,7 @@ section: patterns
 import { Fragment, useState } from 'react';
 import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import pfIcon from '../assets/pf-logo-small.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 import activeMQIcon from '../assets/activemq-core_200x150.png';
 import avroIcon from '../assets/camel-avro_200x150.png';
 import dropBoxIcon from '../assets/camel-dropbox_200x150.png';
diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx
index 86e499e96c5..92f4508d016 100644
--- a/packages/react-core/src/demos/CardView/examples/CardView.tsx
+++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx
@@ -36,7 +36,7 @@ import {
 } from '@patternfly/react-core';
 import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import pfIcon from './assets/pf-logo-small.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 import activeMQIcon from './assets/activemq-core_200x150.png';
 import avroIcon from './assets/camel-avro_200x150.png';
 import dropBoxIcon from './assets/camel-dropbox_200x150.png';
diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md
index 9e58569df3b..1dabd29153d 100644
--- a/packages/react-core/src/demos/Page.md
+++ b/packages/react-core/src/demos/Page.md
@@ -12,10 +12,27 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import RhUiContainerIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-icon';
 import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
+import RhUiPortIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-port-icon';
+import RhUiAutomationIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-automation-icon';
+import RhUiConnectedIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-connected-icon';
+import RhUiArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
+import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
-import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
+import activeMQIcon from '@patternfly/react-core/src/demos/assets/activemq-core_200x150.png';
+import avroIcon from '@patternfly/react-core/src/demos/assets/camel-avro_200x150.png';
+import dropBoxIcon from '@patternfly/react-core/src/demos/assets/camel-dropbox_200x150.png';
+import infinispanIcon from '@patternfly/react-core/src/demos/assets/camel-infinispan_200x150.png';
+import saxonIcon from '@patternfly/react-core/src/demos/assets/camel-saxon_200x150.png';
+import sparkIcon from '@patternfly/react-core/src/demos/assets/camel-spark_200x150.png';
+import swaggerIcon from '@patternfly/react-core/src/demos/assets/camel-swagger-java_200x150.png';
+import azureIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_REST.png';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
   1. Add an onNavToggle callback to PageHeader
@@ -50,3 +67,9 @@ When adding a context selector/perspective switcher in a `PageSidebar`, you must
 ```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
 
 ```
+
+### Plain
+
+```ts file='./examples/Page/PagePlain.tsx' isFullscreen
+
+```
diff --git a/packages/react-core/src/demos/examples/Page/PagePlain.tsx b/packages/react-core/src/demos/examples/Page/PagePlain.tsx
new file mode 100644
index 00000000000..8c3ff2cfffd
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Page/PagePlain.tsx
@@ -0,0 +1,402 @@
+import { useState } from 'react';
+import {
+  Brand,
+  Bullseye,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  CardExpandableContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Content,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  Flex,
+  FlexItem,
+  Gallery,
+  GalleryItem,
+  Icon,
+  Label,
+  LabelColor,
+  LabelGroup,
+  LabelStatus,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadLogo,
+  MastheadMain,
+  MastheadToggle,
+  MenuToggle,
+  MenuToggleElement,
+  Page,
+  PageBody,
+  PageFooter,
+  PageSection,
+  PageToggleButton,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  SkipToContent,
+  Title,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
+import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
+import RhUiPortIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-port-icon';
+import RhUiContainerIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-icon';
+import RhUiAutomationIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-automation-icon';
+import RhUiConnectedIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-connected-icon';
+import RhUiArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
+import activeMQIcon from '@patternfly/react-core/src/demos/assets/activemq-core_200x150.png';
+import avroIcon from '@patternfly/react-core/src/demos/assets/camel-avro_200x150.png';
+import dropBoxIcon from '@patternfly/react-core/src/demos/assets/camel-dropbox_200x150.png';
+import infinispanIcon from '@patternfly/react-core/src/demos/assets/camel-infinispan_200x150.png';
+import saxonIcon from '@patternfly/react-core/src/demos/assets/camel-saxon_200x150.png';
+import sparkIcon from '@patternfly/react-core/src/demos/assets/camel-spark_200x150.png';
+import swaggerIcon from '@patternfly/react-core/src/demos/assets/camel-swagger-java_200x150.png';
+import azureIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_REST.png';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
+
+export const PagePlain: React.FunctionComponent = () => {
+  const [isToolbarMenuOpen, setIsToolbarMenuOpen] = useState(false);
+  const [isPathwayExpanded, setIsPathwayExpanded] = useState(true);
+  const [isPathwayKebabOpen, setIsPathwayKebabOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const [openCardMenu, setOpenCardMenu] = useState<number | null>(null);
+  const mainContainerId = 'main-content-page-demo-plain';
+
+  const toolbar = (
+    <Toolbar id="page-demo-plain-docked-toolbar" isStatic>
+      <ToolbarContent>
+        <ToolbarGroup
+          variant="action-group-plain"
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
+        >
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
+            <ToolbarItem>
+              <Button
+                aria-label="Application launcher"
+                variant={ButtonVariant.plain}
+                icon={<RhUiThumbnailViewSmallFillIcon />}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label="Settings" isSettings variant={ButtonVariant.plain} />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label="Help" variant={ButtonVariant.plain} icon={<RhUiQuestionMarkCircleFillIcon />} />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+            <MenuToggle
+              variant="plain"
+              aria-label="Actions"
+              isExpanded={isToolbarMenuOpen}
+              onClick={() => setIsToolbarMenuOpen(!isToolbarMenuOpen)}
+              icon={<RhUiEllipsisVerticalFillIcon />}
+            />
+          </ToolbarItem>
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead id="page-demo-plain-docked">
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="#">
+            <Brand src={pfLogo} alt="PatternFly" />
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{toolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const icons = {
+    pfIcon,
+    activeMQIcon,
+    avroIcon,
+    dropBoxIcon,
+    infinispanIcon,
+    saxonIcon,
+    sparkIcon,
+    swaggerIcon,
+    azureIcon,
+    restIcon
+  };
+
+  const cards = data.map((product) => (
+    <GalleryItem key={product.name}>
+      <Card isCompact isGlass isClickable isSelectable isFullHeight id={product.name.replace(/ /g, '-')}>
+        <CardHeader
+          selectableActions={{
+            isChecked: selectedItems.includes(product.id),
+            selectableActionId: `page-demo-plain-selectable-${product.id}`,
+            selectableActionAriaLabelledby: product.name.replace(/ /g, '-'),
+            name: `page-demo-plain-check-${product.id}`,
+            onChange: (_event, checked) => {
+              setSelectedItems((items) =>
+                checked ? [...items, product.id] : items.filter((item) => item !== product.id)
+              );
+            }
+          }}
+          actions={{
+            actions: (
+              <Dropdown
+                isOpen={openCardMenu === product.id}
+                onOpenChange={(isOpen) => setOpenCardMenu(isOpen ? product.id : null)}
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    aria-label={`${product.name} actions`}
+                    variant="plain"
+                    onClick={() => setOpenCardMenu(openCardMenu === product.id ? null : product.id)}
+                    isExpanded={openCardMenu === product.id}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
+                  />
+                )}
+              >
+                <DropdownList>
+                  <DropdownItem onClick={() => setOpenCardMenu(null)}>
+                    <RhUiTrashFillIcon /> Delete
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            )
+          }}
+        >
+          <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ maxWidth: '60px' }} />
+        </CardHeader>
+        <CardTitle id={product.name.replace(/ /g, '-')}>{product.name}</CardTitle>
+        <CardBody>{product.description}</CardBody>
+      </Card>
+    </GalleryItem>
+  ));
+
+  const renderPathwayCard = (
+    category: React.ReactNode,
+    systems: number,
+    description: string,
+    rebootRequired: boolean,
+    hasIncident: boolean
+  ) => (
+    <FlexItem flex={{ default: 'flex_1' }} alignSelf={{ default: 'alignSelfStretch' }}>
+      <Card isPlain isFullHeight>
+        <CardBody>
+          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }} className="pf-v6-u-h-100">
+            <Flex
+              spaceItems={{ default: 'spaceItemsSm' }}
+              direction={{ md: 'column', lg: 'row' }}
+              spacer={{ md: 'spacerMd', lg: 'spacerSm' }}
+            >
+              {category}
+              <Button variant={ButtonVariant.link} isInline component="a" href="#">
+                {systems} systems
+              </Button>
+            </Flex>
+            <FlexItem spacer={{ default: 'spacerMd' }}>
+              <p>{description}</p>
+            </FlexItem>
+            <Flex
+              grow={{ default: 'grow' }}
+              direction={{ default: 'column', lg: 'row' }}
+              justifyContent={{ default: 'justifyContentFlexEnd', lg: 'justifyContentFlexStart' }}
+              alignContent={{ lg: 'alignContentFlexEnd' }}
+              rowGap={{ default: 'rowGapMd' }}
+            >
+              {hasIncident && (
+                <FlexItem style={{ marginBlockEnd: '-.25em' }}>
+                  <Label status={LabelStatus.danger}>Incident</Label>
+                </FlexItem>
+              )}
+              <Flex
+                spaceItems={{ default: 'spaceItemsSm' }}
+                alignItems={{ default: 'alignItemsCenter' }}
+                flexWrap={{ default: 'nowrap' }}
+                rowGap={{ default: 'rowGapMd' }}
+              >
+                <Icon status={rebootRequired ? 'danger' : 'success'}>
+                  <RhUiConnectedIcon />
+                </Icon>
+                <p className="pf-v6-u-color-200">
+                  System reboot <b className="pf-v6-u-color-100">{rebootRequired ? 'is' : 'is not'}</b> required
+                </p>
+              </Flex>
+            </Flex>
+          </Flex>
+        </CardBody>
+        <CardFooter>
+          <Button
+            variant={ButtonVariant.link}
+            isInline
+            component="a"
+            href="#"
+            icon={<RhUiArrowRightIcon />}
+            iconPosition="end"
+          >
+            View pathway
+          </Button>
+        </CardFooter>
+      </Card>
+    </FlexItem>
+  );
+
+  const recommendedPathwaysCard = (
+    <Card isExpanded={isPathwayExpanded} isGlass>
+      <CardHeader
+        onExpand={() => setIsPathwayExpanded(!isPathwayExpanded)}
+        toggleButtonProps={{
+          id: 'page-demo-plain-expandable-status-card-1-toggle',
+          'aria-label': 'Details',
+          'aria-labelledby':
+            'page-demo-plain-expandable-status-card-1-title page-demo-plain-expandable-status-card-1-toggle',
+          'aria-expanded': isPathwayExpanded
+        }}
+        actions={{
+          actions: (
+            <Dropdown
+              isOpen={isPathwayKebabOpen}
+              onOpenChange={(isOpen) => setIsPathwayKebabOpen(isOpen)}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  id="page-demo-plain-expandable-status-card-1-action-kebab"
+                  aria-label="Menu toggle"
+                  variant="plain"
+                  onClick={() => setIsPathwayKebabOpen(!isPathwayKebabOpen)}
+                  isExpanded={isPathwayKebabOpen}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
+                />
+              )}
+            >
+              <DropdownList>
+                <DropdownItem onClick={() => setIsPathwayKebabOpen(false)}>Action</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          )
+        }}
+      >
+        <CardTitle id="page-demo-plain-expandable-status-card-1-title">
+          <Title headingLevel="h2" size="xl">
+            Improve recommended pathways
+          </Title>
+        </CardTitle>
+      </CardHeader>
+      <CardExpandableContent>
+        <Flex direction={{ default: 'column', md: 'row' }} alignItems={{ default: 'alignItemsStretch' }}>
+          {renderPathwayCard(
+            <LabelGroup aria-label="Group of labels">
+              <Label variant="outline" color={LabelColor.blue} icon={<RhUiPortIcon />}>
+                Performance
+              </Label>
+            </LabelGroup>,
+            378,
+            'Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and issues with system performance',
+            true,
+            true
+          )}
+          <Divider orientation={{ md: 'vertical' }} inset={{ default: 'inset3xl' }} />
+          {renderPathwayCard(
+            <LabelGroup numLabels={1} aria-label="Group of labels">
+              <Label variant="outline" color={LabelColor.blue} icon={<RhUiContainerIcon />}>
+                Stability
+              </Label>
+              <Label variant="outline" color={LabelColor.blue}>
+                Availability
+              </Label>
+            </LabelGroup>,
+            211,
+            'Adjust your networking configuration to get ahead of network performance degradations and packet losses',
+            false,
+            false
+          )}
+          <Divider orientation={{ md: 'vertical' }} inset={{ default: 'inset3xl' }} />
+          {renderPathwayCard(
+            <LabelGroup aria-label="Group of labels">
+              <Label variant="outline" color={LabelColor.blue} icon={<RhUiAutomationIcon />}>
+                Availability
+              </Label>
+            </LabelGroup>,
+            166,
+            'Fine tune your Oracle DB configuration to improve database performance and avoid process failure',
+            true,
+            true
+          )}
+        </Flex>
+      </CardExpandableContent>
+    </Card>
+  );
+
+  return (
+    <Page
+      id="page-demo-plain"
+      isPlain
+      masthead={masthead}
+      skipToContent={<SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>}
+      mainContainerId={mainContainerId}
+    >
+      <PageSection isPlain padding={{ default: 'noPadding' }}>
+        <Panel isGlass variant="bordered">
+          <PanelMain>
+            <PanelMainBody>
+              <Content>
+                <h1>Page title</h1>
+                <p>This is a full page demo.</p>
+              </Content>
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </PageSection>
+      <PageSection isPlain padding={{ default: 'noPadding' }}>
+        {recommendedPathwaysCard}
+      </PageSection>
+      <PageSection isPlain padding={{ default: 'noPadding' }} isFilled>
+        <Gallery hasGutter aria-label="Selectable card container">
+          <Card isCompact isGlass isFullHeight>
+            <Bullseye>
+              <EmptyState
+                headingLevel="h2"
+                titleText="Add a new card to your page"
+                icon={RhUiAddCircleFillIcon}
+                variant={EmptyStateVariant.xs}
+              >
+                <EmptyStateFooter>
+                  <EmptyStateActions>
+                    <Button variant={ButtonVariant.link}>Add card</Button>
+                  </EmptyStateActions>
+                </EmptyStateFooter>
+              </EmptyState>
+            </Bullseye>
+          </Card>
+          {cards}
+        </Gallery>
+      </PageSection>
+      <PageFooter>
+        <PageBody>custom footer</PageBody>
+      </PageFooter>
+    </Page>
+  );
+};
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx
deleted file mode 100644
index e69de29bb2d..00000000000

From bb914b53e21821204e7b7edcd960a69524fda8ae Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Thu, 10 Sep 2026 22:05:42 -0400
Subject: [PATCH 2/2] Fix CodeRabbit review issues

---
 .../components/Page/examples/PagePlain.tsx    |  2 +-
 .../src/demos/examples/Page/PagePlain.tsx     | 68 +++++++++++++++----
 2 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/packages/react-core/src/components/Page/examples/PagePlain.tsx b/packages/react-core/src/components/Page/examples/PagePlain.tsx
index 2b51227ce8e..a052d8501e3 100644
--- a/packages/react-core/src/components/Page/examples/PagePlain.tsx
+++ b/packages/react-core/src/components/Page/examples/PagePlain.tsx
@@ -51,7 +51,7 @@ export const PagePlain: React.FunctionComponent = () => {
   return (
     <Page isPlain masthead={masthead} sidebar={sidebar}>
       <PageSection aria-labelledby="plain-page-section">
-        <p>Page content</p>
+        <h2 id="plain-page-section">Page content</h2>
       </PageSection>
     </Page>
   );
diff --git a/packages/react-core/src/demos/examples/Page/PagePlain.tsx b/packages/react-core/src/demos/examples/Page/PagePlain.tsx
index 8c3ff2cfffd..eb1b09ddca3 100644
--- a/packages/react-core/src/demos/examples/Page/PagePlain.tsx
+++ b/packages/react-core/src/demos/examples/Page/PagePlain.tsx
@@ -53,6 +53,7 @@ import {
 } from '@patternfly/react-core';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
@@ -82,6 +83,18 @@ export const PagePlain: React.FunctionComponent = () => {
   const [openCardMenu, setOpenCardMenu] = useState<number | null>(null);
   const mainContainerId = 'main-content-page-demo-plain';
 
+  const onApplicationLauncher = () => {
+    setIsToolbarMenuOpen(false);
+  };
+
+  const onSettings = () => {
+    setIsToolbarMenuOpen(false);
+  };
+
+  const onHelp = () => {
+    setIsToolbarMenuOpen(false);
+  };
+
   const toolbar = (
     <Toolbar id="page-demo-plain-docked-toolbar" isStatic>
       <ToolbarContent>
@@ -96,23 +109,50 @@ export const PagePlain: React.FunctionComponent = () => {
                 aria-label="Application launcher"
                 variant={ButtonVariant.plain}
                 icon={<RhUiThumbnailViewSmallFillIcon />}
+                onClick={onApplicationLauncher}
               />
             </ToolbarItem>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings variant={ButtonVariant.plain} />
+              <Button aria-label="Settings" isSettings variant={ButtonVariant.plain} onClick={onSettings} />
             </ToolbarItem>
             <ToolbarItem>
-              <Button aria-label="Help" variant={ButtonVariant.plain} icon={<RhUiQuestionMarkCircleFillIcon />} />
+              <Button
+                aria-label="Help"
+                variant={ButtonVariant.plain}
+                icon={<RhUiQuestionMarkCircleFillIcon />}
+                onClick={onHelp}
+              />
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <MenuToggle
-              variant="plain"
-              aria-label="Actions"
-              isExpanded={isToolbarMenuOpen}
-              onClick={() => setIsToolbarMenuOpen(!isToolbarMenuOpen)}
-              icon={<RhUiEllipsisVerticalFillIcon />}
-            />
+            <Dropdown
+              isOpen={isToolbarMenuOpen}
+              onSelect={() => setIsToolbarMenuOpen(false)}
+              onOpenChange={(isOpen: boolean) => setIsToolbarMenuOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  variant="plain"
+                  aria-label="Actions"
+                  isExpanded={isToolbarMenuOpen}
+                  onClick={() => setIsToolbarMenuOpen(!isToolbarMenuOpen)}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
+                />
+              )}
+            >
+              <DropdownList>
+                <DropdownItem onClick={onApplicationLauncher} icon={<RhUiThumbnailViewSmallFillIcon />}>
+                  Application launcher
+                </DropdownItem>
+                <DropdownItem onClick={onSettings} icon={<RhUiSettingsFillIcon />}>
+                  Settings
+                </DropdownItem>
+                <DropdownItem onClick={onHelp} icon={<RhUiQuestionMarkCircleFillIcon />}>
+                  Help
+                </DropdownItem>
+              </DropdownList>
+            </Dropdown>
           </ToolbarItem>
         </ToolbarGroup>
       </ToolbarContent>
@@ -350,6 +390,12 @@ export const PagePlain: React.FunctionComponent = () => {
     </Card>
   );
 
+  const footer = (
+    <PageFooter>
+      <PageBody>custom footer</PageBody>
+    </PageFooter>
+  );
+
   return (
     <Page
       id="page-demo-plain"
@@ -357,6 +403,7 @@ export const PagePlain: React.FunctionComponent = () => {
       masthead={masthead}
       skipToContent={<SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>}
       mainContainerId={mainContainerId}
+      footer={footer}
     >
       <PageSection isPlain padding={{ default: 'noPadding' }}>
         <Panel isGlass variant="bordered">
@@ -394,9 +441,6 @@ export const PagePlain: React.FunctionComponent = () => {
           {cards}
         </Gallery>
       </PageSection>
-      <PageFooter>
-        <PageBody>custom footer</PageBody>
-      </PageFooter>
     </Page>
   );
 };