docs(badge): add width and height attrs to images

elements/rh-badge/docs/00-overview.md

@@ -3,7 +3,10 @@
 {{ tagName | getElementDescription }}
 
 <uxdot-example width-adjustment="80px">
-  <img src="./badge-sample-element.svg" alt="Two badges; from left to right, one badge has a dark gray background with a white counter number and the other badge has a purple background with a white counter number.">
+  <img src="./badge-sample-element.svg" 
+      alt="Two badges; from left to right, one badge has a dark gray background with a white counter number and the other badge has a purple background with a white counter number."
+      width="80"
+      height="18">
 </uxdot-example>
 
 {% repoStatusList repoStatus=repoStatus %}

elements/rh-badge/docs/10-style.md

@@ -5,7 +5,10 @@ A badge is number text on a pill background used to reflect the count of somethi
 
 <figure>
   <uxdot-example width-adjustment="102px">
-    <img src="../badge-anatomy.svg" alt="Anatomy of a badge with annotations; number 1 is pointing to the container and number 2 is pointing to the counter number">
+    <img src="../badge-anatomy.svg" 
+        alt="Anatomy of a badge with annotations; number 1 is pointing to the container and number 2 is pointing to the counter number"
+        width="102"
+        height="18">
   </uxdot-example>
   <figcaption>
     <ol>
@@ -22,28 +25,40 @@ A badge is available in light and dark theme.
 ### Light theme
 
 <uxdot-example width-adjustment="272px">
-  <img src="../badge-theme-light.svg" alt="Light theme badges">
+  <img src="../badge-theme-light.svg" 
+      alt="Light theme badges"
+      width="272"
+      height="18">
 </uxdot-example>
 
 ### Dark theme
 
 <uxdot-example width-adjustment="272px" color-palette="darkest">
-  <img src="../badge-theme-dark.svg" alt="Dark theme badges">
+  <img src="../badge-theme-dark.svg" 
+      alt="Dark theme badges"
+      width="272"
+      height="18">
 </uxdot-example>
 
 ## Configuration 
 
 All badges have the same height and border radius.
 
 <uxdot-example width-adjustment="350px">
-  <img src="../badge-configuration.svg" alt="How a badge is constructed showing border radius and height details">
+  <img src="../badge-configuration.svg" 
+      alt="How a badge is constructed showing border radius and height details"
+      width="350"
+      height="35">
 </uxdot-example>
 
 
 ## Space and width 
 
 <uxdot-example width-adjustment="238px">
-  <img src="../badge-space-and-width.svg" alt="Badge spacing and minimum width">
+  <img src="../badge-space-and-width.svg" 
+      alt="Badge spacing and minimum width"
+      width="238"
+      height="49">
 </uxdot-example>
 
 <rh-table>

elements/rh-badge/docs/20-guidelines.md

@@ -70,7 +70,10 @@ than the threshold will display a + at the end. For example, if `999` is the
 threshold, using `1,000` or larger will display `999+`.
 
 <uxdot-example width-adjustment="198px">
-  <img src="../badge-counter-number.svg" alt="Badges with various counter numbers; from left to right, a badge with 1, a badge with 50, a badge with 500, and a badge with 999+">
+  <img src="../badge-counter-number.svg" 
+      alt="Badges with various counter numbers; from left to right, a badge with 1, a badge with 50, a badge with 500, and a badge with 999+"
+      width="198"
+      height="18">
 </uxdot-example>
 
 
@@ -81,7 +84,10 @@ A badge is often found in filter toggles to indicate the number of selections
 that are made in a toolbar filter or select list.
 
 <uxdot-example width-adjustment="336px">
-  <img src="../badge-filtering.png" alt="A badge used in a filter dropdown and counting three selected checkboxes within a menu">
+  <img src="../badge-filtering.png" 
+      alt="A badge used in a filter dropdown and counting three selected checkboxes within a menu"
+      width="336"
+      height="184">
 </uxdot-example>
 
 ## Best practices
@@ -91,7 +97,10 @@ that are made in a toolbar filter or select list.
 Do not allow a badge to display a count over 999.
 
 <uxdot-example danger width-adjustment="74px">
-  <img src="../badge-best-practice-large-number-dont.svg" alt="A badge counting to 1,00,000 which is incorrect usage">
+  <img src="../badge-best-practice-large-number-dont.svg" 
+      alt="A badge counting to 1,00,000 which is incorrect usage"
+      width="74"
+      height="18">
 </uxdot-example>
 
 ### Two badges
@@ -101,6 +110,9 @@ might make it difficult to differentiate unread or actionable items associated
 with the badges.
 
 <uxdot-example danger width-adjustment="85px">
-  <img src="../badge-best-practice-two-badges-dont.svg" alt="Two badges with different background colors and no other unique visual cues which is incorrect usage">
+  <img src="../badge-best-practice-two-badges-dont.svg" 
+      alt="Two badges with different background colors and no other unique visual cues which is incorrect usage"
+      width="85"
+      height="18">
 </uxdot-example>