diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drawer/drawer.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drawer/drawer.md index e6b8303ac3..59fd683266 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drawer/drawer.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drawer/drawer.md @@ -3,6 +3,8 @@ id: Drawer section: components --- +import '../components.css'; + ## Usage Drawers can be used to store and show more information than immediately presented on a page. A drawer with more information is usually prompted by a user click. Upon the click, the drawer comes out and shows more information, which is usually relevant to a whole page. @@ -18,4 +20,6 @@ A **splitter** allows you to create a layout with resizable panes. The orientati ### When to use a splitter Add a splitter to a drawer if you need to resize the width or height of a panel to give content more space. If data shown in a drawer has enough space, then you don’t need to use a splitter. -Drawer with a splitter +
+![Example of a drawer with a splitter.](./img/drawer-splitter.svg) +
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drawer/img/drawer-splitter.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drawer/img/drawer-splitter.svg new file mode 100644 index 0000000000..26efd25a1d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/drawer/img/drawer-splitter.svg @@ -0,0 +1,242 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +