diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md
index 03c2471f613..7509da398cd 100644
--- a/packages/react-core/src/components/Page/examples/Page.md
+++ b/packages/react-core/src/components/Page/examples/Page.md
@@ -264,11 +264,10 @@ class FillPage extends React.Component {
return (
A default page section
-
- This section fills the available space.
-
+ This section fills the available space.
- This section is set to not fill the available space, since the last page section is set to fill the available space by default.
+ This section is set to not fill the available space, since the last page section is set to fill the available
+ space by default.
);
@@ -590,7 +589,7 @@ class VerticalPage extends React.Component {
}
```
-### Centered content
+### Centered section
```js
import React from 'react';
@@ -607,7 +606,9 @@ import {
PageToggleButton,
Toolbar,
ToolbarContent,
- ToolbarItem
+ ToolbarItem,
+ Card,
+ CardBody
} from '@patternfly/react-core';
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
@@ -639,7 +640,16 @@ CenterAlignedPageSection = () => {
return (
- Page section width limited, centered.
+
+
+ When a width limited page section is wider than the value of
+ --pf-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main section.
+
+
+ The content in this example is placed in a card to better illustrate how the section behaves when it is
+ centered. A card is not required to center a page section.
+
+
);