docs: fix images sizes on logo wall pattern (#2025)

* docs: fix images sizes on logo wall pattern * docs: correct image sizes logo wall pattern
RedHat-UX · Nov 6, 2024 · c805933 · c805933
1 parent d798b85
commit c805933
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 25 deletions.
diff --git a/docs/patterns/logo-wall/guidelines.md b/docs/patterns/logo-wall/guidelines.md
@@ -29,20 +29,20 @@ logos.
 
 ### Bordered
 
-<uxdot-example>
+<uxdot-example width-adjustment="1010px">
   <img src="../guidelines-variants-bordered.png"
       alt="An example of a bordered logo wall with 6 logos each inside of a bordered container."
-      width="560"
-      height="55">
+      width="1120"
+      height="110">
 </uxdot-example>
 
 ### Borderless
 
-<uxdot-example>
+<uxdot-example width-adjustment="1010px">
   <img src="../guidelines-variants-borderless.png"
       alt="An example of a borderless logo wall with 6 logos."
-      width="556"
-      height="55">
+      width="1113"
+      height="110">
 </uxdot-example>
 
 ## Layout
@@ -79,7 +79,7 @@ identity by ensuring that their logos meet accessibility standards.
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-contrast-do.svg"
       alt="Examples of two Red Hat logos in dark and light themes against background colors that ensure enough color contrast."
       width="556"
@@ -89,7 +89,7 @@ identity by ensuring that their logos meet accessibility standards.
   </uxdot-best-practice>
 
   <uxdot-best-practice variant="dont">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-contrast-dont.svg"
       alt="Examples of two Red Hat logos in dark and light themes against background colors that do not provide enough contrast."
       width="556"
@@ -107,7 +107,7 @@ wall.
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-contrast-do.svg"
       alt="Examples of two Red Hat logos in dark and light themes against background colors that ensure enough color contrast."
       width="556"
@@ -117,7 +117,7 @@ wall.
   </uxdot-best-practice>
 
   <uxdot-best-practice variant="dont">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-contrast-dont.svg"
       alt="Examples of two Red Hat logos in dark and light themes against background colors that do not provide enough contrast."
       width="556"
@@ -136,7 +136,7 @@ with this case</rh-alert>
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-sizing-do.png"
       alt="Example of a borderless logo wall with similarly sized logos that represent each partner evenly."
       width="556"
@@ -146,7 +146,7 @@ with this case</rh-alert>
   </uxdot-best-practice>
 
   <uxdot-best-practice variant="dont">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-sizing-dont.png"
       alt="Example of a borderless logo wall in which the sizes of logos varies and disproportionately represents each partner."
       width="559"
@@ -160,7 +160,7 @@ with this case</rh-alert>
 
 <div class="grid sm-two-columns">
   <uxdot-best-practice variant="do">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-align-do.png"
       alt="Example of a borderless logo wall in which each logo is horizontally and vertically aligned in its container."
       width="556"
@@ -170,7 +170,7 @@ with this case</rh-alert>
   </uxdot-best-practice>
 
   <uxdot-best-practice variant="dont">
-    <uxdot-example slot="image" alignment="left">
+    <uxdot-example slot="image" alignment="left" width-adjustment="556px">
       <img src="../guidelines-bestpractices-align-dont.png"
       alt="Example of a borderless logo wall in which each logo is aligned to the bottom of the container."
       width="556"

diff --git a/docs/patterns/logo-wall/index.md b/docs/patterns/logo-wall/index.md
@@ -25,20 +25,20 @@ A logo wall is a visual arrangement of logos representing various brands, compan
 <div class="grid">
   <div>
     <h3>Bordered</h3>
-    <uxdot-example>
+    <uxdot-example width-adjustment="1010px">
       <img src="./overview-sample-bordered.png"
       alt="An example of a bordered logo wall with 6 logos each inside of a bordered container."
-      width="1010"
+      width="1020"
       height="99">
     </uxdot-example>
   </div>
   <div>
     <h3>Borderless</h3>
-    <uxdot-example>
+    <uxdot-example width-adjustment="1010px">
       <img src="./overview-sample-borderless.png"
       alt="An example of a borderless logo wall with 6 logos."
-      width="1010"
-      height="100">
+      width="1113"
+      height="110">
     </uxdot-example>
   </div>
 </div>

diff --git a/docs/patterns/logo-wall/style.md b/docs/patterns/logo-wall/style.md
@@ -61,23 +61,23 @@ Logo walls define layout rules for spacing logos, and their styles.
  - Logos are evenly spaced.
  - Logos are in a container with 16px of padding on all sides and a corner radius of 3px.
 
-<uxdot-example width-adjustment="560px">
+<uxdot-example width-adjustment="1010px">
   <img src="../style-space-group-bordered.png"
       alt="Example of a bordered logo wall with spacing values."
-      width="560"
-      height="55">
+      width="1120"
+      height="110">
 </uxdot-example>
 
 ### Borderless
  - Logos are evenly spaced.
  - Logos are in a container with 16px of top and bottom padding and 8px of left and right padding.
  - All containers using the borderless style have the same height but will likely have different widths depending on the dimensions of the logo.
 
-<uxdot-example width-adjustment="556px">
+<uxdot-example width-adjustment="1113px">
   <img src="../style-space-group-borderless.png"
       alt="Example of a borderless logo wall with spacing values."
-      width="556"
-      height="55">
+      width="1113"
+      height="110">
 </uxdot-example>
 
 ## Interaction states