chore(many): design guidelines assets

packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/action-list.md

@@ -2,6 +2,9 @@
 id: Action list
 section: components
 ---
+
+import '../components.css';
+
 ## Usage
 Use an action list to determine which spacing guidelines to use for a group of actions in [toolbars](/components/toolbar), [modals](/components/modal), [forms](/components/forms/form), [data lists](/components/data-list), [wizards](/components/wizard), and more. Using an action list allows you to know what spacing to use for a group of actions, depending on your use case. 
 
@@ -14,17 +17,23 @@ Action lists are also designed to stack buttons correctly within the space they
 #### Action list for actions in a modal
 In this example, an action list is used for action buttons inside a modal. The action list allows for 16px spacing to be maintained between the action buttons.
 
-<img src="./img/action-modal.png" alt="Action list used inside of a modal" width="446" />
+<div class="ws-docs-content-img">
+![Action list used inside of a modal](./img/action-modal.svg)
+</div>
 
 #### Action list for actions in a wizard
 In this example, an action list is used for the actions within a wizard. The action list allows for 16px spacing to be maintained between the main action buttons, and 48px of spacing to be maintained between them and the cancel button.
 
-<img src="./img/action-wizard.png" alt="Action list used inside of a wizard" />
+<div class="ws-docs-content-img">
+![Action list used inside of a wizard](./img/action-wizard.svg)
+</div>
 
 #### Action list for actions in a toolbar
 In this example, an action list is used for the actions within a toolbar. The action list allows for 16px spacing to be maintained between action buttons.
 
-<img src="./img/action-toolbar.png" alt="Action list used inside of a toolbar"/>
+<div class="ws-docs-content-img">
+![Action list used inside of a toolbar](./img/action-toolbar.svg)
+</div>
 
 ## Accessibility
 For information regarding accessibility, visit the [action list accessibility tab](/components/action-list/accessibility). 

packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md

@@ -3,12 +3,16 @@ id: Page
 section: components
 ---
 
+import '../components.css';
+
 ## Elements
 The basic layout of a page differs depending on whether your application uses vertical or horizontal primary navigation as illustrated below.
 
 ### Page with vertical navigation
 
-<img src="./img/page-vertical-nav.png" alt="page with vertical navigation" width="832"/>
+<div class="ws-docs-content-img">
+![page with vertical navigation](./img/page-vertical-nav.svg)
+</div>
 
 **1. Masthead:** The masthead provides a consistent header for every page in your application. See the [masthead design guidelines](/components/masthead/design-guidelines) for more details.
 
@@ -24,7 +28,9 @@ The basic layout of a page differs depending on whether your application uses ve
 
 ### Page with horizontal navigation
 
-<img src="./img/page-horizontal-nav.png" alt="page with horizontal navigation" width="832"/>
+<div class="ws-docs-content-img">
+    ![page with horizontal navigation](./img/page-horizontal-nav.svg)
+</div>
 
 When using a horizontal primary navigation, the left-hand sidebar is removed and the navigation is placed inline with other masthead elements. All other page elements remain the same.