docs(avatar): Updates design guidelines for accuracy.

Author: edonehoo

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

@@ -3,30 +3,48 @@ 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:
 
-### Small (24 px)
-This size variation should be used in components such as accordions, data lists, tables, etc.
+    <img src="./img/small-avatar-data list & accordion.png" alt="Image displaying small avatar usage in data list and accordion" width="802"/>
 
-<img src="./img/small-avatar-data list & accordion.png" alt="Image displaying small avatar usage in data list and accordion" width="802"/>
+    - Also used in the masthead component:
 
-### Medium (36 px)
-This size variation is the default avatar size and should be used in the masthead component.
+    <img src="./img/medium-avatar-masthead.png" alt="Image displaying medium avatar usage in masthead" width="1024"/> 
 
-<img src="./img/medium-avatar-masthead.png" alt="Image displaying medium avatar usage in masthead" width="1024"/> 
+1. Medium (md), 36px
 
-### Large (72 px)
-This size variation should be used in components such as cards.
+1. Large (lg), 72px 
+    
+    - Used in cards.
 
-<img src="./img/large-avatar-card.png" alt="Image displaying large avatar usage in card" width="353"/> 
+    <img src="./img/large-avatar-card.png" alt="Image displaying large avatar usage in card" width="353"/> 
 
-### Extra Large (128 px)
-This size variation should be used in components such as profile displays.
+1. Extra large (xl), 128px
+    
+    - Used in profile displays.
 
-<img src="./img/extra-large-avatar-profile display.png" alt="Image displaying extra large avatar usage in profile display" width="1024"/>
+    <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.