+
+
+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:
+
+
+ 
+
+ - Also used in the masthead component:
-### Small (24 px)
-This size variation should be used in components such as accordions, data lists, tables, etc.
+
+ 
+
-
+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.
-
+
+ 
+
-### Large (72 px)
-This size variation should be used in components such as cards.
-
+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.
+
+ 
+
-
## Accessibility
For information regarding accessibility, visit the [avatar accessibility](/components/avatar/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-elements.svg
new file mode 100644
index 0000000000..46864c0e76
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-elements.svg
@@ -0,0 +1,44 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-lg.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-lg.svg
new file mode 100644
index 0000000000..af19641e77
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-lg.svg
@@ -0,0 +1,22 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-sm-components.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-sm-components.svg
new file mode 100644
index 0000000000..6052844707
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-sm-components.svg
@@ -0,0 +1,260 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-sm-masthead.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-sm-masthead.svg
new file mode 100644
index 0000000000..70a3564acd
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-sm-masthead.svg
@@ -0,0 +1,67 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-xl.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-xl.svg
new file mode 100644
index 0000000000..bc4c92c328
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-usage-xl.svg
@@ -0,0 +1,58 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-variations.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-variations.svg
new file mode 100644
index 0000000000..3b5beb6cb3
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/avatar-variations.svg
@@ -0,0 +1,44 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/extra-large-avatar-profile display.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/extra-large-avatar-profile display.png
deleted file mode 100644
index 7f5f9f4bd2..0000000000
Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/extra-large-avatar-profile display.png and /dev/null differ
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/large-avatar-card.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/large-avatar-card.png
deleted file mode 100644
index a6adc4e169..0000000000
Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/large-avatar-card.png and /dev/null differ
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/medium-avatar-masthead.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/medium-avatar-masthead.png
deleted file mode 100644
index 084a587f0b..0000000000
Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/medium-avatar-masthead.png and /dev/null differ
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/small-avatar-data list & accordion.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/small-avatar-data list & accordion.png
deleted file mode 100644
index d8cd08d4b6..0000000000
Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/small-avatar-data list & accordion.png and /dev/null differ
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/small-avatar-example-accordion.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/small-avatar-example-accordion.png
deleted file mode 100644
index f9612653ec..0000000000
Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/small-avatar-example-accordion.png and /dev/null differ
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/small-avatar-example-data list.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/small-avatar-example-data list.png
deleted file mode 100644
index 363569eca6..0000000000
Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/img/small-avatar-example-data list.png and /dev/null differ