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. +
+
);