docs(avatar): Updates design guidelines for accuracy.

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

@@ -3,30 +3,58 @@ id: Avatar
 section: components
 ---
 
+import '../components.css';
+
+## Elements 
+
+<div class="ws-docs-content-img">
+![Basic and bordered avatar.](./img/avatar-elements.svg)
+</div>
+1. **Image/graphic:** Visual representation of the user. If there is no custom image for a user, the default graphic will be shown.
+1. **Border (optional):** Outline, to improve the visual prominence of an avatar in a UI element.
+
 ## Usage
 
-There are four size variations available to use for different scenarios. The typical usage for an avatar is to represent the current user in the masthead. However, based on your product's use cases and needs, there is room for customization.
+An avatar is typically used to represent the current user in the masthead. However, based on your product's use cases and needs, there is room for customization, as outlined in the following [avatar variations](#variations) section.
+
+## Variations 
+
+There are 4 size variations available to use for different scenarios: 
+
+1. Small (sm), 24px
+
+    - Default size.
+    - Used in accordions, data lists, and tables:
+
+    <div class="ws-docs-content-img">
+    ![Small avatar used in components.](./img/avatar-usage-sm-components.svg)
+    </div>
 
+    - Also used in the masthead component:
 
-### Small (24 px)
-This size variation should be used in components such as accordions, data lists, tables, etc.
+    <div class="ws-docs-content-img">
+    ![Small avatar used in a masthead.](./img/avatar-usage-sm-masthead.svg)
+    </div>
 
-<img src="./img/small-avatar-data list & accordion.png" alt="Image displaying small avatar usage in data list and accordion" width="802"/>
+1. Medium (md), 36px
 
-### Medium (36 px)
-This size variation is the default avatar size and should be used in the masthead component.
+1. Large (lg), 72px 
+
+    - Used in cards.
 
-<img src="./img/medium-avatar-masthead.png" alt="Image displaying medium avatar usage in masthead" width="1024"/> 
+    <div class="ws-docs-content-img">
+    ![Large avatar used in a card.](./img/avatar-usage-lg.svg)
+    </div>
 
-### Large (72 px)
-This size variation should be used in components such as cards.
 
-<img src="./img/large-avatar-card.png" alt="Image displaying large avatar usage in card" width="353"/> 
+1. Extra large (xl), 128px
+
+    - Used in profile displays.
 
-### Extra Large (128 px)
-This size variation should be used in components such as profile displays.
+    <div class="ws-docs-content-img">
+    ![Extra large avatar used in a profile display.](./img/avatar-usage-xl.svg)
+    </div>
 
-<img src="./img/extra-large-avatar-profile display.png" alt="Image displaying extra large avatar usage in profile display" width="1024"/>
 
 ## Accessibility
 For information regarding accessibility, visit the [avatar accessibility](/components/avatar/accessibility) tab.