diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/avatar.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/avatar.md index eb7d04a46e..8597be6b40 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/avatar.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/avatar/avatar.md @@ -3,30 +3,58 @@ id: Avatar section: components --- +import '../components.css'; + +## Elements + +
+![Basic and bordered avatar.](./img/avatar-elements.svg) +
+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 avatar used in components.](./img/avatar-usage-sm-components.svg) +
+ - Also used in the masthead component: -### Small (24 px) -This size variation should be used in components such as accordions, data lists, tables, etc. +
+ ![Small avatar used in a masthead.](./img/avatar-usage-sm-masthead.svg) +
-Image displaying small avatar usage in data list and accordion +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. -Image displaying medium avatar usage in masthead  +
+ ![Large avatar used in a card.](./img/avatar-usage-lg.svg) +
-### Large (72 px) -This size variation should be used in components such as cards. -Image displaying large avatar usage in card  +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. +
+ ![Extra large avatar used in a profile display.](./img/avatar-usage-xl.svg) +
-Image displaying extra large avatar usage in profile display ## 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