@patternfly/react-docs 5.22.3 → 5.22.7

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.22.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.6...@patternfly/react-docs@5.22.7) (2021-10-05)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [5.22.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.5...@patternfly/react-docs@5.22.6) (2021-10-05)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [5.22.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.4...@patternfly/react-docs@5.22.5) (2021-10-04)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [5.22.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.3...@patternfly/react-docs@5.22.4) (2021-10-01)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
 ## [5.22.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.2...@patternfly/react-docs@5.22.3) (2021-10-01)
 
 **Note:** Version bump only for package @patternfly/react-docs

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/react-docs",
   "description": "PatternFly React Docs",
-  "version": "5.22.3",
+  "version": "5.22.7",
   "publishConfig": {
     "access": "public",
     "tag": "prerelease-v4"
@@ -23,18 +23,18 @@
   },
   "dependencies": {
     "@patternfly/patternfly": "4.139.2",
-    "@patternfly/react-catalog-view-extension": "^4.13.3",
+    "@patternfly/react-catalog-view-extension": "^4.13.5",
     "@patternfly/react-charts": "^6.15.26",
-    "@patternfly/react-code-editor": "^4.3.70",
-    "@patternfly/react-core": "^4.158.3",
+    "@patternfly/react-code-editor": "^4.3.72",
+    "@patternfly/react-core": "^4.159.0",
     "@patternfly/react-icons": "^4.12.1",
-    "@patternfly/react-inline-edit-extension": "^4.7.94",
-    "@patternfly/react-log-viewer": "^4.7.5",
+    "@patternfly/react-inline-edit-extension": "^4.7.96",
+    "@patternfly/react-log-viewer": "^4.7.8",
     "@patternfly/react-styles": "^4.12.1",
-    "@patternfly/react-table": "^4.30.13",
+    "@patternfly/react-table": "^4.30.15",
     "@patternfly/react-tokens": "^4.13.1",
-    "@patternfly/react-topology": "^4.9.89",
-    "@patternfly/react-virtualized-extension": "^4.9.59"
+    "@patternfly/react-topology": "^4.9.91",
+    "@patternfly/react-virtualized-extension": "^4.9.61"
   },
   "devDependencies": {
     "@patternfly/patternfly-a11y": "4.2.1",
@@ -44,7 +44,7 @@
     "react-dom": "^17.0.0",
     "rimraf": "^2.6.3",
     "shx": "^0.3.2",
-    "theme-patternfly-org": "0.7.2"
+    "theme-patternfly-org": "0.7.7"
   },
   "keywords": [
     "gatsby"
@@ -53,5 +53,5 @@
     "last 2 versions",
     "not ie <= 11"
   ],
-  "gitHead": "6d6fa748c98951b158dc63684e13020854d03235"
+  "gitHead": "86e7ecb47f3d2197cb664ce7237d3a25e18f8a48"
 }

package/src/generated/components/card/react-demos.js

@@ -5,6 +5,11 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-ic
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons';
 import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
+import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
+import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
+import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
+import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
 import srcImportcardview from './react-demos/card-view.png';
 const pageData = {
   "id": "Card",
@@ -19,6 +24,10 @@ const pageData = {
     "Aggregate status card",
     "Status",
     "Status Tabbed",
+    "Utilization card 1",
+    "Utilization card 2",
+    "Utilization card 3",
+    "Utilization card 4",
     "Log view",
     "Event view"
   ]
@@ -38,7 +47,23 @@ pageData.liveContext = {
   Tr,
   Th,
   Td,
-  ExpandableRowContent
+  ExpandableRowContent,
+  Chart,
+  ChartAxis,
+  ChartGroup,
+  ChartVoronoiContainer,
+  ChartStack,
+  ChartBar,
+  ChartTooltip,
+  ChartDonutThreshold,
+  ChartDonutUtilization,
+  ChartArea,
+  ChartContainer,
+  ChartLabel,
+  chart_color_gold_100,
+  chart_color_gold_300,
+  chart_color_orange_300,
+  chart_color_red_100
 };
 pageData.examples = {
   'Horizontal card grid': props => 
@@ -64,6 +89,22 @@ pageData.examples = {
   'Status Tabbed': props => 
     <Example {...pageData} {...props} {...{"code":"import * as React from 'react';\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  Flex,\n  FlexItem,\n  Grid,\n  GridItem,\n  Spinner,\n  Tab,\n  TabContent,\n  Tabs,\n  TabTitleText,\n  Title\n} from '@patternfly/react-core';\nimport CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\n\nconst descriptionListData = [\n  {\n    status: 'Running',\n    resourceName: 'Resource name that is long and can wrap',\n    detail: '121 Systems',\n    icon: <CheckCircleIcon />\n  },\n  {\n    status: 'Ready',\n    resourceName: 'Resource name that is long and can wrap',\n    detail: '123 Systems',\n    icon: <ExclamationCircleIcon />\n  },\n  {\n    status: 'Running',\n    resourceName: 'Resource name that is long and can wrap',\n    detail: '122 Systems',\n    icon: <CheckCircleIcon />\n  },\n  {\n    status: 'Ready',\n    resourceName: 'Resource name that is long and can wrap',\n    detail: '124 Systems',\n    icon: <ExclamationCircleIcon />\n  }\n];\n\nconst Status: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = React.useState(0);\n  const handleTabClick = (event: React.MouseEvent, tabIndex: number) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const tabContent = (\n    <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }}>\n      {descriptionListData.map(({ status, resourceName, detail, icon }, index) => (\n        <DescriptionListGroup key={index}>\n          <DescriptionListTerm>\n            <Flex>\n              <FlexItem>{icon}</FlexItem>\n              <FlexItem>\n                <Title headingLevel=\"h3\" size=\"md\">\n                  {status}\n                </Title>\n              </FlexItem>\n            </Flex>\n          </DescriptionListTerm>\n          <DescriptionListDescription>\n            <a href=\"#\">{resourceName}</a>\n            <div>{detail}</div>\n          </DescriptionListDescription>\n        </DescriptionListGroup>\n      ))}\n    </DescriptionList>\n  );\n\n  return (\n    <>\n      <Card>\n        <CardHeader>\n          <Title headingLevel=\"h2\" size=\"lg\">\n            Status\n          </Title>\n        </CardHeader>\n        <CardBody>\n          <Tabs isFilled id=\"status-tabs\" activeKey={activeTabKey} onSelect={handleTabClick}>\n            {[1, 2, 3].map((tab, tabIndex) => (\n              <Tab\n                key={tabIndex}\n                eventKey={tabIndex}\n                title={<TabTitleText>{`Object ${tabIndex + 1}`}</TabTitleText>}\n                tabContentId={`tabContent${tabIndex}`}\n              />\n            ))}\n          </Tabs>\n        </CardBody>\n        <CardBody>\n          {[1, 2, 3].map((tab, tabIndex) => (\n            <TabContent\n              key={tabIndex}\n              eventKey={tabIndex}\n              id={`tabContent${tabIndex}`}\n              activeKey={activeTabKey}\n              hidden={tabIndex !== activeTabKey}\n            >\n              {tabContent}\n            </TabContent>\n          ))}\n        </CardBody>\n      </Card>\n    </>\n  );\n};","title":"Status Tabbed","lang":"ts"}}>
       
+    </Example>,
+  'Utilization card 1': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Card,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Title,\n  Gallery,\n  GalleryItem,\n  Flex,\n  FlexItem,\n  Stack,\n  StackItem,\n  Divider\n} from '@patternfly/react-core';\nimport { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts';\n\nconst UtilizationCard1 = () => (\n  <Gallery hasGutter minWidths={{ default: '360px' }}>\n    <GalleryItem>\n      <Card id=\"utilization-card-1\" component=\"div\">\n        <CardTitle>\n          <Title headingLevel=\"h2\" size=\"lg\">\n            Top Utilized Clusters\n          </Title>\n        </CardTitle>\n        <CardBody>\n          <Flex direction={{ default: 'column' }}>\n            <FlexItem>\n              <Stack>\n                <b>Cluster-1204</b>\n                <span>27.3 cores available</span>\n              </Stack>\n            </FlexItem>\n            <FlexItem>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </FlexItem>\n            <FlexItem>\n              <a href=\"#\">View details</a>\n            </FlexItem>\n          </Flex>\n        </CardBody>\n        <CardBody>\n          <Flex direction={{ default: 'column' }}>\n            <FlexItem>\n              <Stack>\n                <b>Abcdef-1204</b>\n                <span>50.6 cores available</span>\n              </Stack>\n            </FlexItem>\n            <FlexItem>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </FlexItem>\n            <FlexItem>\n              <a href=\"#\">View details</a>\n            </FlexItem>\n          </Flex>\n        </CardBody>\n        <Divider />\n        <CardFooter>\n          <a href=\"#\">View all clusters</a>\n        </CardFooter>\n      </Card>\n    </GalleryItem>\n  </Gallery>\n)","title":"Utilization card 1","lang":"ts"}}>
+      
+    </Example>,
+  'Utilization card 2': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Card,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Title,\n  Gallery,\n  GalleryItem,\n  Flex,\n  FlexItem,\n  Stack,\n  StackItem,\n  Divider\n} from '@patternfly/react-core';\nimport { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts';\n\nconst UtilizationCard2 = () => (\n  <Gallery hasGutter minWidths={{ default: '360px' }}>\n    <GalleryItem>\n      <Card id=\"utilization-card-2\" component=\"div\">\n        <CardTitle>\n          <Title headingLevel=\"h2\" size=\"lg\">\n            Top Utilized Clusters\n          </Title>\n        </CardTitle>\n        <CardBody>\n          <Flex direction={{ default: 'column' }}>\n            <FlexItem>\n              <Stack>\n                <a href=\"#\">Cluster-1204</a>\n                <span>27.3 cores available</span>\n              </Stack>\n            </FlexItem>\n            <FlexItem>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </FlexItem>\n          </Flex>\n        </CardBody>\n        <CardBody>\n          <Flex direction={{ default: 'column' }}>\n            <FlexItem>\n              <Stack>\n                <a href=\"#\">Abcdef-1204</a>\n                <span>50.6 cores available</span>\n              </Stack>\n            </FlexItem>\n            <FlexItem>\n              <ChartGroup\n                ariaDesc=\"Mock average cluster utilization\"\n                ariaTitle=\"Mock cluster sparkline chart\"\n                containerComponent={\n                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n                }\n                height={100}\n                maxDomain={{ y: 9 }}\n                padding={0}\n                width={400}\n              >\n                <ChartArea\n                  data={[\n                    { name: 'Cluster', x: '2015', y: 7 },\n                    { name: 'Cluster', x: '2016', y: 6 },\n                    { name: 'Cluster', x: '2017', y: 8 },\n                    { name: 'Cluster', x: '2018', y: 3 },\n                    { name: 'Cluster', x: '2019', y: 4 },\n                    { name: 'Cluster', x: '2020', y: 1 },\n                    { name: 'Cluster', x: '2021', y: 0 }\n                  ]}\n                />\n              </ChartGroup>\n            </FlexItem>\n          </Flex>\n        </CardBody>\n        <Divider />\n        <CardFooter>\n          <a href=\"#\">View all clusters</a>\n        </CardFooter>\n      </Card>\n    </GalleryItem>\n  </Gallery>\n)","title":"Utilization card 2","lang":"ts"}}>
+      
+    </Example>,
+  'Utilization card 3': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Card,\n  CardTitle,\n  CardHeader,\n  CardActions,\n  CardBody,\n  CardFooter,\n  Title,\n  Gallery,\n  GalleryItem,\n  Flex,\n  FlexItem,\n  Stack,\n  StackItem,\n  Divider,\n  Dropdown,\n  DropdownItem,\n  DropdownToggle,\n  DropdownSeparator\n} from '@patternfly/react-core';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\nimport { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';\nimport chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';\nimport chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';\nimport chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';\nimport chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';\n\nconst UtilizationCard3: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const dropdownItems = [\n    <DropdownItem key=\"link\">Link</DropdownItem>,\n    <DropdownItem key=\"action\" component=\"button\">\n      Action\n    </DropdownItem>,\n    <DropdownItem key=\"disabled link\" isDisabled href=\"www.google.com\">\n      Disabled link\n    </DropdownItem>,\n    <DropdownSeparator key=\"separator\" />,\n    <DropdownItem key=\"separated link\">Separated link</DropdownItem>\n  ];\n\n  return (\n    <Gallery hasGutter minWidths={{ default: '360px' }}>\n      <GalleryItem>\n        <Card id=\"utilization-card-1\" component=\"div\">\n          <CardHeader>\n            <CardTitle>\n              <Title headingLevel=\"h2\" size=\"lg\">\n                Recommendations\n              </Title>\n            </CardTitle>\n            <CardActions>\n              <Dropdown\n                onSelect={() => setIsOpen(!isOpen)}\n                toggle={<DropdownToggle onToggle={() => setIsOpen(!isOpen)}>Filter</DropdownToggle>}\n                isOpen={isOpen}\n                dropdownItems={dropdownItems}\n                position=\"right\"\n              />\n            </CardActions>\n          </CardHeader>\n          <CardBody>\n            <Flex direction={{ default: 'column' }}>\n              <FlexItem>\n                <span>System</span>\n              </FlexItem>\n              <Flex>\n                <ExclamationCircleIcon className=\"pf-u-danger-color-100\" aria-hidden />\n                <a href=\"#\">25 incidents detected</a>\n              </Flex>\n              <FlexItem>\n                <Chart\n                  ariaDesc=\"Mock incidents chart\"\n                  ariaTitle=\"Mock stack chart\"\n                  domainPadding={{ x: [30, 25] }}\n                  legendData={[\n                    { name: 'Low', symbol: { fill: chart_color_gold_100.value } },\n                    { name: 'Important', symbol: { fill: chart_color_gold_300.value } },\n                    { name: 'Moderate', symbol: { fill: chart_color_orange_300.value } },\n                    { name: 'Critical', symbol: { fill: chart_color_red_100.value } }\n                  ]}\n                  legendPosition=\"bottom-left\"\n                  height={50}\n                  padding={{\n                    bottom: 40,\n                    left: 0,\n                    right: 0,\n                    top: 0\n                  }}\n                  width={350}\n                  showAxis={false}\n                >\n                  <ChartStack\n                    horizontal\n                    colorScale={[\n                      chart_color_gold_100.value,\n                      chart_color_gold_300.value,\n                      chart_color_orange_300.value,\n                      chart_color_red_100.value\n                    ]}\n                  >\n                    <ChartBar\n                      data={[\n                        {\n                          name: 'Low',\n                          x: 'Cluster A',\n                          y: 6,\n                          label: 'Low: 6'\n                        }\n                      ]}\n                      labelComponent={<ChartTooltip constrainToVisibleArea />}\n                    />\n                    <ChartBar\n                      data={[\n                        {\n                          name: 'Important',\n                          x: 'Cluster A',\n                          y: 2,\n                          label: 'Important: 2'\n                        }\n                      ]}\n                      labelComponent={<ChartTooltip constrainToVisibleArea />}\n                    />\n                    <ChartBar\n                      data={[\n                        {\n                          name: 'Moderate',\n                          x: 'Cluster A',\n                          y: 4,\n                          label: 'Moderate: 4'\n                        }\n                      ]}\n                      labelComponent={<ChartTooltip constrainToVisibleArea />}\n                    />\n                    <ChartBar\n                      data={[\n                        {\n                          name: 'Critical',\n                          x: 'Cluster A',\n                          y: 2,\n                          label: 'Critical: 2'\n                        }\n                      ]}\n                      labelComponent={<ChartTooltip constrainToVisibleArea />}\n                    />\n                  </ChartStack>\n                </Chart>\n              </FlexItem>\n            </Flex>\n          </CardBody>\n          <CardFooter>\n            <a href=\"#\">See details</a>\n          </CardFooter>\n        </Card>\n      </GalleryItem>\n    </Gallery>\n  );\n};","title":"Utilization card 3","lang":"ts"}}>
+      
+    </Example>,
+  'Utilization card 4': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem } from '@patternfly/react-core';\nimport { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';\n\nconst UtilizationCard4 = () => (\n  <Gallery hasGutter minWidths={{ default: '360px' }}>\n    <GalleryItem>\n      <Card id=\"utilization-card-1\" component=\"div\">\n        <CardTitle>\n          <Title headingLevel=\"h2\" size=\"lg\">\n            CPU Usage\n          </Title>\n        </CardTitle>\n        <CardBody>\n          <ChartDonutThreshold\n            ariaDesc=\"Mock storage capacity\"\n            ariaTitle=\"Mock donut utilization chart\"\n            constrainToVisibleArea={true}\n            data={[\n              { x: 'Warning at 60%', y: 60 },\n              { x: 'Danger at 90%', y: 90 }\n            ]}\n            height={200}\n            labels={({ datum }) => (datum.x ? datum.x : null)}\n            padding={{\n              bottom: 0,\n              left: 10,\n              right: 150,\n              top: 0\n            }}\n            width={350}\n          >\n            <ChartDonutUtilization\n              data={{ x: 'Storage capacity', y: 80 }}\n              labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}\n              legendData={[{ name: `Capacity: 80%` }, { name: 'Warning at 60%' }, { name: 'Danger at 90%' }]}\n              legendOrientation=\"vertical\"\n              title=\"80%\"\n              subTitle=\"of 100 GBps\"\n              thresholds={[{ value: 60 }, { value: 90 }]}\n            />\n          </ChartDonutThreshold>{' '}\n        </CardBody>\n        <CardFooter>\n          <a href=\"#\">See details</a>\n        </CardFooter>\n      </Card>\n    </GalleryItem>\n  </Gallery>\n)","title":"Utilization card 4","lang":"ts"}}>
+      
     </Example>,
   'Log view': props => 
     <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardActions,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Gallery,\n  Title,\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Dropdown,\n  DropdownItem,\n  DropdownToggle,\n  Divider\n} from '@patternfly/react-core';\n\nCardLogViewDemo = () => {\n  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n\n  const onActionSelect = event => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onActionToggle = isOpen => {\n    setIsDropdownOpen(isOpen);\n  };\n\n  const dropdownItems = [\n    <DropdownItem key=\"action1\" component=\"a\">\n      Link\n    </DropdownItem>,\n    <DropdownItem key=\"action2\" component=\"button\">\n      Action\n    </DropdownItem>,\n    <DropdownItem key=\"disabled action3\" isDisabled component=\"a\">\n      Disabled link\n    </DropdownItem>,\n    <DropdownItem key=\"action4\" component=\"button\">\n      Disabled action\n    </DropdownItem>,\n    <DropdownItem key=\"action5\" component=\"a\">\n      Separated link\n    </DropdownItem>\n  ];\n\n  return (\n    <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>\n      <Card id=\"card-log-view-example\">\n        <CardHeader>\n          <CardActions>\n            <Dropdown\n              onSelect={onActionSelect}\n              toggle={<DropdownToggle onToggle={onActionToggle}>Most recent</DropdownToggle>}\n              isOpen={isDropdownOpen}\n              dropdownItems={dropdownItems}\n              position=\"right\"\n            />\n          </CardActions>\n          <CardTitle>\n            <Title headingLevel=\"h2\" size=\"xl\">\n              Activity\n            </Title>\n          </CardTitle>\n        </CardHeader>\n        <CardBody>\n          <DescriptionList>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Readiness probe failed</DescriptionListTerm>\n              <DescriptionListDescription>\n                Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect:\n                connection refused\n              </DescriptionListDescription>\n              <DescriptionListDescription>\n                <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 11:02 am</date>\n              </DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Successful assignment</DescriptionListTerm>\n              <DescriptionListDescription>\n                Successfully assigned default/example to ip-10-0-130-149.ec2.internal\n              </DescriptionListDescription>\n              <DescriptionListDescription>\n                <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 11:13 am</date>\n              </DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Pulling image</DescriptionListTerm>\n              <DescriptionListDescription>Pulling image \"openshift/hello-openshift\"</DescriptionListDescription>\n              <DescriptionListDescription>\n                <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 10:59 am</date>\n              </DescriptionListDescription>\n            </DescriptionListGroup>\n            <DescriptionListGroup>\n              <DescriptionListTerm>Created container</DescriptionListTerm>\n              <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>\n              <DescriptionListDescription>\n                <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 10:45 am</date>\n              </DescriptionListDescription>\n            </DescriptionListGroup>\n          </DescriptionList>\n        </CardBody>\n        <Divider />\n        <CardFooter>\n          <a href=\"#\">View all activity</a>\n        </CardFooter>\n      </Card>\n    </Gallery>\n  );\n};","title":"Log view","lang":"js"}}>
@@ -86,6 +127,10 @@ const Component = () => (
     {React.createElement(pageData.examples["Aggregate status card"])}
     {React.createElement(pageData.examples["Status"])}
     {React.createElement(pageData.examples["Status Tabbed"])}
+    {React.createElement(pageData.examples["Utilization card 1"])}
+    {React.createElement(pageData.examples["Utilization card 2"])}
+    {React.createElement(pageData.examples["Utilization card 3"])}
+    {React.createElement(pageData.examples["Utilization card 4"])}
     {React.createElement(pageData.examples["Log view"])}
     {React.createElement(pageData.examples["Event view"])}
   </React.Fragment>

package/src/generated/components/drawer/react.js

@@ -313,7 +313,6 @@ const pageData = {
     "Inline panel on right",
     "Inline panel on left",
     "Stacked content body elements",
-    "Stacked content body elements",
     "Modified content padding",
     "Modified panel padding",
     "Additional section above drawer content",
@@ -441,7 +440,6 @@ const Component = () => (
     {React.createElement(pageData.examples["Inline panel on right"])}
     {React.createElement(pageData.examples["Inline panel on left"])}
     {React.createElement(pageData.examples["Stacked content body elements"])}
-    {React.createElement(pageData.examples["Stacked content body elements"])}
     {React.createElement(pageData.examples["Modified content padding"])}
     {React.createElement(pageData.examples["Modified panel padding"])}
     {React.createElement(pageData.examples["Additional section above drawer content"])}

package/src/generated/components/page/react-demos.js

@@ -4,15 +4,19 @@ import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
+import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import srcImportdefaultnav from './react-demos/default-nav.png';
 import srcImportexpandablenav from './react-demos/expandable-nav.png';
 import srcImportgroupednav from './react-demos/grouped-nav.png';
 import srcImporthorizontalnav from './react-demos/horizontal-nav.png';
 import srcImportlegacylightnav from './react-demos/legacylight-nav.png';
 import srcImportmanualnav from './react-demos/manual-nav.png';
+import srcImportstickysectiongroupalternatesyntaxandusingpageheader from './react-demos/sticky-section-group-alternate-syntax-and-using-pageheader.png';
 import srcImportstickysectiongroupalternatesyntax from './react-demos/sticky-section-group-alternate-syntax.png';
+import srcImportstickysectiongroupusingpageheader from './react-demos/sticky-section-group-using-pageheader.png';
 import srcImportstickysectiongroup from './react-demos/sticky-section-group.png';
 import srcImporttertiarynav from './react-demos/tertiary-nav.png';
 const pageData = {
@@ -23,7 +27,8 @@ const pageData = {
   "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Page/Page.md",
   "fullscreenExamples": [
     "Sticky section group",
-    "Sticky section group (alternate syntax)"
+    "Sticky section group (using PageHeader)",
+    "Sticky section group (alternate syntax and using PageHeader)"
   ]
 };
 pageData.liveContext = {
@@ -32,16 +37,30 @@ pageData.liveContext = {
   CogIcon,
   HelpIcon,
   imgBrand,
-  imgAvatar
+  imgAvatar,
+  BarsIcon,
+  AttentionBellIcon
 };
 pageData.examples = {
   'Sticky section group': props => 
-    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroup} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageHeader,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  SkipToContent,\n  TextContent,\n  Text,\n  PageHeaderTools,\n  PageHeaderToolsGroup,\n  PageHeaderToolsItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGrouped extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;\n\n    const PageNav = (\n      <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n        <NavList>\n          <NavItem itemId={0} isActive={activeItem === 0}>\n            System panel\n          </NavItem>\n          <NavItem itemId={1} isActive={activeItem === 1}>\n            Policy\n          </NavItem>\n          <NavItem itemId={2} isActive={activeItem === 2}>\n            Authentication\n          </NavItem>\n          <NavItem itemId={3} isActive={activeItem === 3}>\n            Network services\n          </NavItem>\n          <NavItem itemId={4} isActive={activeItem === 4}>\n            Server\n          </NavItem>\n        </NavList>\n      </Nav>\n    );\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n    const headerTools = (\n      <PageHeaderTools>\n        <PageHeaderToolsGroup\n          visibility={{\n            default: 'hidden',\n            lg: 'visible'\n          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n        >\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n              <CogIcon />\n            </Button>\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n              <HelpIcon />\n            </Button>\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <PageHeaderToolsGroup>\n          <PageHeaderToolsItem\n            visibility={{\n              lg: 'hidden'\n            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onKebabDropdownSelect}\n              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n              isOpen={isKebabDropdownOpen}\n              dropdownItems={kebabDropdownItems}\n            />\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem\n            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}\n              dropdownItems={userDropdownItems}\n            />\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <Avatar src={imgAvatar} alt=\"Avatar image\" />\n      </PageHeaderTools>\n    );\n\n    const Header = (\n      <PageHeader logo={<Brand src={imgBrand} alt=\"Patternfly Logo\" />} headerTools={headerTools} showNavToggle />\n    );\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    const PageBreadcrumb = (\n      <Breadcrumb>\n        <BreadcrumbItem>Section home</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\" isActive>\n          Section landing\n        </BreadcrumbItem>\n      </Breadcrumb>\n    );\n\n    return (\n      <React.Fragment>\n        <Page\n          header={Header}\n          breadcrumb={PageBreadcrumb}\n          tertiaryNav={PageNav}\n          isManagedSidebar\n          isTertiaryNavWidthLimited\n          isBreadcrumbWidthLimited\n          skipToContent={PageSkipToContent}\n          mainContainerId={pageId}\n          isTertiaryNavGrouped\n          isBreadcrumbGrouped\n          additionalGroupedContent={\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>\n          }\n          groupProps={{\n            sticky: 'top'\n          }}\n        >\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group","lang":"js","isFullscreen":true}}>
+    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroup} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Divider,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Masthead,\n  MastheadBrand,\n  MastheadContent,\n  MastheadMain,\n  MastheadToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  PageToggleButton,\n  SkipToContent,\n  TextContent,\n  Text,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';\nimport BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGrouped extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      isFullKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n\n    this.onFullKebabToggle = isFullKebabDropdownOpen => {\n      this.setState({\n        isFullKebabDropdownOpen\n      });\n    };\n\n    this.onFullKebabSelect = () => {\n      this.setState({\n        isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem, isFullKebabDropdownOpen } = this.state;\n\n    const PageNav = (\n      <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n        <NavList>\n          <NavItem href=\"#\" itemId={0} isActive={activeItem === 0}>\n            System panel\n          </NavItem>\n          <NavItem href=\"#\" itemId={1} isActive={activeItem === 1}>\n            Policy\n          </NavItem>\n          <NavItem href=\"#\" itemId={2} isActive={activeItem === 2}>\n            Authentication\n          </NavItem>\n          <NavItem href=\"#\" itemId={3} isActive={activeItem === 3}>\n            Network services\n          </NavItem>\n          <NavItem href=\"#\" itemId={4} isActive={activeItem === 4}>\n            Server\n          </NavItem>\n        </NavList>\n      </Nav>\n    );\n\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n\n    const fullKebabItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>,\n      <Divider key=\"divider\" />,\n      <DropdownItem key=\"kebab-1\">\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem key=\"kebab-2\">\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n\n    const headerToolbar = (\n      <Toolbar id=\"toolbar\" isFullHeight isStatic>\n        <ToolbarContent>\n          <ToolbarGroup\n            variant=\"icon-button-group\"\n            alignment={{ default: 'alignRight' }}\n            spacer={{ default: 'spacerNone', md: 'spacerMd' }}\n          >\n            <ToolbarItem>\n              <Button aria-label=\"Notifications\" variant={ButtonVariant.plain}>\n                <AttentionBellIcon />\n              </Button>\n            </ToolbarItem>\n            <ToolbarGroup variant=\"icon-button-group\" visibility={{ default: 'hidden', lg: 'visible' }}>\n              <ToolbarItem>\n                <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n                  <CogIcon />\n                </Button>\n              </ToolbarItem>\n              <ToolbarItem>\n                <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n                  <HelpIcon />\n                </Button>\n              </ToolbarItem>\n            </ToolbarGroup>\n            <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n              <Dropdown\n                isPlain\n                position=\"right\"\n                onSelect={this.onKebabDropdownSelect}\n                toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n                isOpen={isKebabDropdownOpen}\n                dropdownItems={kebabDropdownItems}\n              />\n            </ToolbarItem>\n            <ToolbarItem visibility={{ default: 'visible', md: 'hidden', lg: 'hidden', xl: 'hidden', '2xl': 'hidden' }}>\n              <Dropdown\n                isPlain\n                position=\"right\"\n                onSelect={this.onFullKebabSelect}\n                toggle={<KebabToggle onToggle={this.onFullKebabToggle} />}\n                isOpen={isFullKebabDropdownOpen}\n                dropdownItems={fullKebabItems}\n              />\n            </ToolbarItem>\n          </ToolbarGroup>\n          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n            <Dropdown\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={\n                <DropdownToggle icon={<Avatar src={imgAvatar} alt=\"Avatar\" />} onToggle={this.onDropdownToggle}>\n                  John Smith\n                </DropdownToggle>\n              }\n              dropdownItems={userDropdownItems}\n            />\n          </ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    );\n\n    const Header = (\n      <Masthead>\n        <MastheadToggle>\n          <PageToggleButton variant=\"plain\" aria-label=\"Global navigation\">\n            <BarsIcon />\n          </PageToggleButton>\n        </MastheadToggle>\n        <MastheadMain>\n          <MastheadBrand>\n            <Brand src={imgBrand} alt=\"Patternfly Logo\" />\n          </MastheadBrand>\n        </MastheadMain>\n        <MastheadContent>{headerToolbar}</MastheadContent>\n      </Masthead>\n    );\n\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    const PageBreadcrumb = (\n      <Breadcrumb>\n        <BreadcrumbItem>Section home</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\" isActive>\n          Section landing\n        </BreadcrumbItem>\n      </Breadcrumb>\n    );\n\n    return (\n      <React.Fragment>\n        <Page\n          header={Header}\n          breadcrumb={PageBreadcrumb}\n          tertiaryNav={PageNav}\n          isManagedSidebar\n          isTertiaryNavWidthLimited\n          isBreadcrumbWidthLimited\n          skipToContent={PageSkipToContent}\n          mainContainerId={pageId}\n          isTertiaryNavGrouped\n          isBreadcrumbGrouped\n          additionalGroupedContent={\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>\n          }\n          groupProps={{\n            sticky: 'top'\n          }}\n        >\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group","lang":"js","isFullscreen":true}}>
       
     </Example>,
-  'Sticky section group (alternate syntax)': props => 
-    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroupalternatesyntax} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageHeader,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  PageGroup,\n  PageBreadcrumb,\n  PageNavigation,\n  SkipToContent,\n  TextContent,\n  Text,\n  PageHeaderTools,\n  PageHeaderToolsGroup,\n  PageHeaderToolsItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGroupedAlt extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;\n\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n    const headerTools = (\n      <PageHeaderTools>\n        <PageHeaderToolsGroup\n          visibility={{\n            default: 'hidden',\n            lg: 'visible'\n          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n        >\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n              <CogIcon />\n            </Button>\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n              <HelpIcon />\n            </Button>\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <PageHeaderToolsGroup>\n          <PageHeaderToolsItem\n            visibility={{\n              lg: 'hidden'\n            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onKebabDropdownSelect}\n              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n              isOpen={isKebabDropdownOpen}\n              dropdownItems={kebabDropdownItems}\n            />\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem\n            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}\n              dropdownItems={userDropdownItems}\n            />\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <Avatar src={imgAvatar} alt=\"Avatar image\" />\n      </PageHeaderTools>\n    );\n\n    const Header = (\n      <PageHeader logo={<Brand src={imgBrand} alt=\"Patternfly Logo\" />} headerTools={headerTools} showNavToggle />\n    );\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    return (\n      <React.Fragment>\n        <Page header={Header} isManagedSidebar skipToContent={PageSkipToContent} mainContainerId={pageId}>\n          <PageGroup sticky=\"top\">\n            <PageNavigation isWidthLimited>\n              <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n                <NavList>\n                  <NavItem itemId={0} isActive={activeItem === 0}>\n                    System panel\n                  </NavItem>\n                  <NavItem itemId={1} isActive={activeItem === 1}>\n                    Policy\n                  </NavItem>\n                  <NavItem itemId={2} isActive={activeItem === 2}>\n                    Authentication\n                  </NavItem>\n                  <NavItem itemId={3} isActive={activeItem === 3}>\n                    Network services\n                  </NavItem>\n                  <NavItem itemId={4} isActive={activeItem === 4}>\n                    Server\n                  </NavItem>\n                </NavList>\n              </Nav>\n            </PageNavigation>\n            <PageBreadcrumb>\n              <Breadcrumb>\n                <BreadcrumbItem>Section home</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\" isActive>\n                  Section landing\n                </BreadcrumbItem>\n              </Breadcrumb>\n            </PageBreadcrumb>\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>{' '}\n          </PageGroup>\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group (alternate syntax)","lang":"js","isFullscreen":true}}>
+  'Sticky section group (using PageHeader)': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroupusingpageheader} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageHeader,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  SkipToContent,\n  TextContent,\n  Text,\n  PageHeaderTools,\n  PageHeaderToolsGroup,\n  PageHeaderToolsItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGrouped extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;\n\n    const PageNav = (\n      <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n        <NavList>\n          <NavItem href=\"#\" itemId={0} isActive={activeItem === 0}>\n            System panel\n          </NavItem>\n          <NavItem href=\"#\" itemId={1} isActive={activeItem === 1}>\n            Policy\n          </NavItem>\n          <NavItem href=\"#\" itemId={2} isActive={activeItem === 2}>\n            Authentication\n          </NavItem>\n          <NavItem href=\"#\" itemId={3} isActive={activeItem === 3}>\n            Network services\n          </NavItem>\n          <NavItem href=\"#\" itemId={4} isActive={activeItem === 4}>\n            Server\n          </NavItem>\n        </NavList>\n      </Nav>\n    );\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n    const headerTools = (\n      <PageHeaderTools>\n        <PageHeaderToolsGroup\n          visibility={{\n            default: 'hidden',\n            lg: 'visible'\n          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n        >\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n              <CogIcon />\n            </Button>\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n              <HelpIcon />\n            </Button>\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <PageHeaderToolsGroup>\n          <PageHeaderToolsItem\n            visibility={{\n              lg: 'hidden'\n            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onKebabDropdownSelect}\n              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n              isOpen={isKebabDropdownOpen}\n              dropdownItems={kebabDropdownItems}\n            />\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem\n            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}\n              dropdownItems={userDropdownItems}\n            />\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <Avatar src={imgAvatar} alt=\"Avatar image\" />\n      </PageHeaderTools>\n    );\n\n    const Header = (\n      <PageHeader logo={<Brand src={imgBrand} alt=\"Patternfly Logo\" />} headerTools={headerTools} showNavToggle />\n    );\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    const PageBreadcrumb = (\n      <Breadcrumb>\n        <BreadcrumbItem>Section home</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\" isActive>\n          Section landing\n        </BreadcrumbItem>\n      </Breadcrumb>\n    );\n\n    return (\n      <React.Fragment>\n        <Page\n          header={Header}\n          breadcrumb={PageBreadcrumb}\n          tertiaryNav={PageNav}\n          isManagedSidebar\n          isTertiaryNavWidthLimited\n          isBreadcrumbWidthLimited\n          skipToContent={PageSkipToContent}\n          mainContainerId={pageId}\n          isTertiaryNavGrouped\n          isBreadcrumbGrouped\n          additionalGroupedContent={\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>\n          }\n          groupProps={{\n            sticky: 'top'\n          }}\n        >\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group (using PageHeader)","lang":"js","isFullscreen":true}}>
       
+      <p {...{"className":"ws-p"}}>
+        {`This demo 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.`}
+      </p>
+    </Example>,
+  'Sticky section group (alternate syntax and using PageHeader)': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroupalternatesyntaxandusingpageheader} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageHeader,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  PageGroup,\n  PageBreadcrumb,\n  PageNavigation,\n  SkipToContent,\n  TextContent,\n  Text,\n  PageHeaderTools,\n  PageHeaderToolsGroup,\n  PageHeaderToolsItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGroupedAlt extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;\n\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n    const headerTools = (\n      <PageHeaderTools>\n        <PageHeaderToolsGroup\n          visibility={{\n            default: 'hidden',\n            lg: 'visible'\n          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n        >\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n              <CogIcon />\n            </Button>\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n              <HelpIcon />\n            </Button>\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <PageHeaderToolsGroup>\n          <PageHeaderToolsItem\n            visibility={{\n              lg: 'hidden'\n            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onKebabDropdownSelect}\n              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n              isOpen={isKebabDropdownOpen}\n              dropdownItems={kebabDropdownItems}\n            />\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem\n            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}\n              dropdownItems={userDropdownItems}\n            />\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <Avatar src={imgAvatar} alt=\"Avatar image\" />\n      </PageHeaderTools>\n    );\n\n    const Header = (\n      <PageHeader logo={<Brand src={imgBrand} alt=\"Patternfly Logo\" />} headerTools={headerTools} showNavToggle />\n    );\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    return (\n      <React.Fragment>\n        <Page header={Header} isManagedSidebar skipToContent={PageSkipToContent} mainContainerId={pageId}>\n          <PageGroup sticky=\"top\">\n            <PageNavigation isWidthLimited>\n              <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n                <NavList>\n                  <NavItem href=\"#\" itemId={0} isActive={activeItem === 0}>\n                    System panel\n                  </NavItem>\n                  <NavItem href=\"#\" itemId={1} isActive={activeItem === 1}>\n                    Policy\n                  </NavItem>\n                  <NavItem href=\"#\" itemId={2} isActive={activeItem === 2}>\n                    Authentication\n                  </NavItem>\n                  <NavItem href=\"#\" itemId={3} isActive={activeItem === 3}>\n                    Network services\n                  </NavItem>\n                  <NavItem href=\"#\" itemId={4} isActive={activeItem === 4}>\n                    Server\n                  </NavItem>\n                </NavList>\n              </Nav>\n            </PageNavigation>\n            <PageBreadcrumb>\n              <Breadcrumb>\n                <BreadcrumbItem>Section home</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\" isActive>\n                  Section landing\n                </BreadcrumbItem>\n              </Breadcrumb>\n            </PageBreadcrumb>\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>{' '}\n          </PageGroup>\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group (alternate syntax and using PageHeader)","lang":"js","isFullscreen":true}}>
+      
+      <p {...{"className":"ws-p"}}>
+        {`Please see `}
+                <a href="#sticky-section-group-using-pageheader">{`this`}</a>
+        {` note regarding PageHeader.`}
+      </p>
     </Example>
 };
 
@@ -88,7 +107,8 @@ const Component = () => (
       {`This demonstrates a variety of navigation patterns in the context of a full page layout. These can be used as a basis for choosing the most appropriate page template for your application.`}
     </p>
     {React.createElement(pageData.examples["Sticky section group"])}
-    {React.createElement(pageData.examples["Sticky section group (alternate syntax)"])}
+    {React.createElement(pageData.examples["Sticky section group (using PageHeader)"])}
+    {React.createElement(pageData.examples["Sticky section group (alternate syntax and using PageHeader)"])}
   </React.Fragment>
 );
 Component.displayName = 'ComponentsPageReactDemosDocs';