From f412f1131c538c0a14498953450fd4b040bd487f Mon Sep 17 00:00:00 2001
From: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com>
Date: Wed, 28 Aug 2024 13:13:01 -0400
Subject: [PATCH] fix(styles): update the spacing for XS Avatar Group [ci
 visual] (#5601)

---
 packages/styles/src/_avatar-variables.scss    |   4 +-
 .../group-type-vertical.example.html          | 474 ++++++++---
 .../avatar-group/group-type.example.html      | 275 +++++++
 .../tests/__snapshots__/styles.test.ts.snap   | 751 +++++++++++++++---
 4 files changed, 1288 insertions(+), 216 deletions(-)

diff --git a/packages/styles/src/_avatar-variables.scss b/packages/styles/src/_avatar-variables.scss
index ada8f74e82..7d417058d4 100644
--- a/packages/styles/src/_avatar-variables.scss
+++ b/packages/styles/src/_avatar-variables.scss
@@ -168,7 +168,7 @@ $fd-avatar-group-item-spacing: (
     "xl": ("margin-right": 0.25rem)
   ),
   "group": (
-    "xs": ("margin-right": -0.75rem),
+    "xs": ("margin-right": -0.5rem),
     "s": ("margin-right": -1.25rem),
     "m": ("margin-right": -1.625rem),
     "l": ("margin-right": -2rem),
@@ -176,7 +176,7 @@ $fd-avatar-group-item-spacing: (
   )
 );
 $fd-avatar-group-item-spacing-group: (
-  "xs": -0.75rem,
+  "xs": -0.5rem,
   "s": -1.25rem,
   "sm": -1.25rem,
   "m": -1.625rem,
diff --git a/packages/styles/stories/Components/avatar-group/group-type-vertical.example.html b/packages/styles/stories/Components/avatar-group/group-type-vertical.example.html
index d7af0402db..402fd1103c 100644
--- a/packages/styles/stories/Components/avatar-group/group-type-vertical.example.html
+++ b/packages/styles/stories/Components/avatar-group/group-type-vertical.example.html
@@ -1,121 +1,383 @@
-<div class="is-cozy"> 
-    
-    <div dir="ltr">
-        <div style="min-height: 400px;">
-        <div class="fd-popover">
-            <div class="fd-popover__control fd-avatar-group__popover-control"
-                role="button"
-                tabindex="0"
-                aria-label="Has popup type dialog Conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list"
-                aria-haspopup="true"
-                aria-expanded="false"
-                onclick="onPopoverClick('popover_avatar-group_tztuj-v');">
-                <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg fd-avatar-group--vertical ">
-                    <span 
-                        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
-                        role="img" 
-                        aria-label="Wendy Wallace" 
-                        title="Wendy Wallace">WW
-                    </span>
-                    
-                    <span 
-                        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
-                        role="img" 
-                        aria-label="Simon Dane" 
-                        title="Simon Dane">
-                            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
-                    </span>
-                    
-                    <span 
-                        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
-                        role="img" 
-                        alt="Michael Smith" 
-                        title="Michael Smith">
-                    </span>
+<div style="min-height: 400px;">
+    <div class="fd-popover">
+        <div class="fd-popover__control fd-avatar-group__popover-control"
+            role="button"
+            tabindex="0"
+            aria-label="Has popup type dialog Conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list"
+            aria-haspopup="true"
+            aria-expanded="false"
+            onclick="onPopoverClick('popover_avatar-group_tztuj-v');">
+            <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg fd-avatar-group--vertical ">
+                <span 
+                    class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+                    role="img" 
+                    aria-label="Wendy Wallace" 
+                    title="Wendy Wallace">WW
+                </span>
+                
+                <span 
+                    class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+                    role="img" 
+                    aria-label="Simon Dane" 
+                    title="Simon Dane">
+                        <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+                </span>
+                
+                <span 
+                    class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+                    role="img" 
+                    alt="Michael Smith" 
+                    title="Michael Smith">
+                </span>
+                
+                <span 
+                    class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+                    role="img" 
+                    aria-label="Endy Wallace" 
+                    title="Endy Wallace">EW
+                </span>
+                
+                <span 
+                    class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+                    role="img" 
+                    aria-label="Whitney Copper" 
+                    title="Whitney Copper">
+                        <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+                </span>
+                
+                <span 
+                    class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+                    style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+                    role="img" 
+                    alt="James Johnson" 
+                    title="James Johnson">
+                </span>
+
+                <span 
+                    class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow" 
+                    role="button" 
+                    tabindex="-1">+8
+                </span>
+            </div>
+        </div>
+
+        <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar-group_tztuj-v" style="width: 332px;">
+            <div class="fd-popover__wrapper" style="max-height: 200px; overflow-x: hidden">
+                <div class="fd-popover__body-header">
+                    <div class="fd-bar fd-bar--header">
+                        <div class="fd-bar__middle">
+                            <div class="fd-bar__element">Team Members (14)</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="fd-avatar-group__overflow-body">
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Wendy Wallace" title="Wendy Wallace">WW</span>
                     
-                    <span 
-                        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
-                        role="img" 
-                        aria-label="Endy Wallace" 
-                        title="Endy Wallace">EW
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Sarah Smith" title="Sarah Smith">
+                        <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
                     </span>
                     
-                    <span 
-                        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
-                        role="img" 
-                        aria-label="Whitney Copper" 
-                        title="Whitney Copper">
-                            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" alt="William Smith" title="William Smith"></span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Endy Wallace" title="Endy Wallace">EW</span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Whitney Bow" title="Whitney Bow">
+                        <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
                     </span>
-                    
-                    <span 
-                        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
-                        style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
-                        role="img" 
-                        alt="James Johnson" 
-                        title="James Johnson">
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" role="img" alt="Mitch Walters" title="Mitch Walters"></span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Andy Wallace" title="Andy Wallace">AW</span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="John Carter" title="John Carter">
+                        <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
                     </span>
-    
-                    <span 
-                        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow" 
-                        role="button" 
-                        tabindex="-1">+8
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F3.png')" role="img" alt="Melanie Burke" title="Melanie Burke"></span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="John Moe" title="John Moe">JM</span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Ben Bloggs" title="Ben Bloggs">BB</span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Simon Swan" title="Simon Swan">
+                        <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
                     </span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F4.png')" role="img" alt="Maria Caffrey" title="Maria Caffrey"></span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Fred Bloggs" title="Fred Bloggs">FB</span>
+
+                    <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Jan Alleman" title="Jan Alleman">JA</span>
                 </div>
             </div>
+        </div>
+    </div>
+</div>
+
+<div style="display: flex; gap: 3rem;">
+    <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xs fd-avatar-group--vertical">
+        <span 
+            class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Wendy Wallace" 
+            title="Wendy Wallace">WW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Simon Dane" 
+            title="Simon Dane">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+            role="img" 
+            alt="Michael Smith" 
+            title="Michael Smith">
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Endy Wallace" 
+            title="Endy Wallace">EW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Whitney Copper" 
+            title="Whitney Copper">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+            style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+            role="img" 
+            alt="James Johnson" 
+            title="James Johnson">
+        </span>
     
-            <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar-group_tztuj-v" style="width: 332px;">
-                <div class="fd-popover__wrapper" style="max-height: 200px; overflow-x: hidden">
-                    <div class="fd-popover__body-header">
-                        <div class="fd-bar fd-bar--header">
-                            <div class="fd-bar__middle">
-                                <div class="fd-bar__element">Team Members (14)</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="fd-avatar-group__overflow-body">
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Wendy Wallace" title="Wendy Wallace">WW</span>
-                        
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Sarah Smith" title="Sarah Smith">
-                            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
-                        </span>
-                        
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" alt="William Smith" title="William Smith"></span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Endy Wallace" title="Endy Wallace">EW</span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Whitney Bow" title="Whitney Bow">
-                            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
-                        </span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" role="img" alt="Mitch Walters" title="Mitch Walters"></span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Andy Wallace" title="Andy Wallace">AW</span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="John Carter" title="John Carter">
-                            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
-                        </span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F3.png')" role="img" alt="Melanie Burke" title="Melanie Burke"></span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="John Moe" title="John Moe">JM</span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Ben Bloggs" title="Ben Bloggs">BB</span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Simon Swan" title="Simon Swan">
-                            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
-                        </span>
-    
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F4.png')" role="img" alt="Maria Caffrey" title="Maria Caffrey"></span>
+        <span 
+            class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--overflow" 
+            role="button" 
+            tabindex="-1">+8
+        </span>
+    </div>
+
+    <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--sm fd-avatar-group--vertical">
+        <span 
+            class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Wendy Wallace" 
+            title="Wendy Wallace">WW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Simon Dane" 
+            title="Simon Dane">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+            role="img" 
+            alt="Michael Smith" 
+            title="Michael Smith">
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Endy Wallace" 
+            title="Endy Wallace">EW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Whitney Copper" 
+            title="Whitney Copper">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+            style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+            role="img" 
+            alt="James Johnson" 
+            title="James Johnson">
+        </span>
     
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Fred Bloggs" title="Fred Bloggs">FB</span>
+        <span 
+            class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow" 
+            role="button" 
+            tabindex="-1">+8
+        </span>
+    </div>
+
+    <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md fd-avatar-group--vertical">
+        <span 
+            class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Wendy Wallace" 
+            title="Wendy Wallace">WW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Simon Dane" 
+            title="Simon Dane">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+            role="img" 
+            alt="Michael Smith" 
+            title="Michael Smith">
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Endy Wallace" 
+            title="Endy Wallace">EW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Whitney Copper" 
+            title="Whitney Copper">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+            style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+            role="img" 
+            alt="James Johnson" 
+            title="James Johnson">
+        </span>
     
-                        <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Jan Alleman" title="Jan Alleman">JA</span>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <span 
+            class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow" 
+            role="button" 
+            tabindex="-1">+8
+        </span>
     </div>
+
+    <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg fd-avatar-group--vertical">
+        <span 
+            class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Wendy Wallace" 
+            title="Wendy Wallace">WW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Simon Dane" 
+            title="Simon Dane">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+            role="img" 
+            alt="Michael Smith" 
+            title="Michael Smith">
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Endy Wallace" 
+            title="Endy Wallace">EW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Whitney Copper" 
+            title="Whitney Copper">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+            style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+            role="img" 
+            alt="James Johnson" 
+            title="James Johnson">
+        </span>
     
+        <span 
+            class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow" 
+            role="button" 
+            tabindex="-1">+8
+        </span>
     </div>
+
+
+    <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xl fd-avatar-group--vertical">
+        <span 
+            class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Wendy Wallace" 
+            title="Wendy Wallace">WW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Simon Dane" 
+            title="Simon Dane">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+            role="img" 
+            alt="Michael Smith" 
+            title="Michael Smith">
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Endy Wallace" 
+            title="Endy Wallace">EW
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border" 
+            role="img" 
+            aria-label="Whitney Copper" 
+            title="Whitney Copper">
+                <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </span>
+        
+        <span 
+            class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+            style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+            role="img" 
+            alt="James Johnson" 
+            title="James Johnson">
+        </span>
+    
+        <span 
+            class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--overflow" 
+            role="button" 
+            tabindex="-1">+8
+        </span>
     </div>
+</div>
\ No newline at end of file
diff --git a/packages/styles/stories/Components/avatar-group/group-type.example.html b/packages/styles/stories/Components/avatar-group/group-type.example.html
index 21183e15d6..e2e2777a85 100644
--- a/packages/styles/stories/Components/avatar-group/group-type.example.html
+++ b/packages/styles/stories/Components/avatar-group/group-type.example.html
@@ -113,3 +113,278 @@
         </div>
     </div>
 </div>
+
+<h4>XS size</h4>
+<div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xs">
+    <span 
+        class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Wendy Wallace" 
+        title="Wendy Wallace">WW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Simon Drew" 
+        title="Simon Drew">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+        role="img" 
+        alt="Brad Coehn" 
+        title="Brad Coehn">
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Endy Wallace" 
+        title="Endy Wallace">EW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Whitney Copper" 
+        title="Whitney Copper">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+        style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+        role="img" 
+        alt="John Doe" 
+        title="John Doe">
+    </span>
+
+    <span 
+        class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--overflow" 
+        role="button" 
+        tabindex="-1">+8
+    </span>
+</div>
+
+<br>
+<h4>SM size</h4>
+<div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--sm">
+    <span 
+        class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Wendy Wallace" 
+        title="Wendy Wallace">WW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Simon Drew" 
+        title="Simon Drew">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+        role="img" 
+        alt="Brad Coehn" 
+        title="Brad Coehn">
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Endy Wallace" 
+        title="Endy Wallace">EW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Whitney Copper" 
+        title="Whitney Copper">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+        style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+        role="img" 
+        alt="John Doe" 
+        title="John Doe">
+    </span>
+
+    <span 
+        class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow" 
+        role="button" 
+        tabindex="-1">+8
+    </span>
+</div>
+
+<br>
+<h4>MD size</h4>
+<div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md">
+    <span 
+        class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Wendy Wallace" 
+        title="Wendy Wallace">WW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Simon Drew" 
+        title="Simon Drew">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+        role="img" 
+        alt="Brad Coehn" 
+        title="Brad Coehn">
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Endy Wallace" 
+        title="Endy Wallace">EW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Whitney Copper" 
+        title="Whitney Copper">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+        style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+        role="img" 
+        alt="John Doe" 
+        title="John Doe">
+    </span>
+
+    <span 
+        class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow" 
+        role="button" 
+        tabindex="-1">+8
+    </span>
+</div>
+
+<br>
+<h4>LG size</h4>
+<div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg">
+    <span 
+        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Wendy Wallace" 
+        title="Wendy Wallace">WW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Simon Drew" 
+        title="Simon Drew">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+        role="img" 
+        alt="Brad Coehn" 
+        title="Brad Coehn">
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Endy Wallace" 
+        title="Endy Wallace">EW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Whitney Copper" 
+        title="Whitney Copper">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+        style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+        role="img" 
+        alt="John Doe" 
+        title="John Doe">
+    </span>
+
+    <span 
+        class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow" 
+        role="button" 
+        tabindex="-1">+8
+    </span>
+</div>
+
+
+<br>
+<h4>XL size</h4>
+<div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xl">
+    <span 
+        class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Wendy Wallace" 
+        title="Wendy Wallace">WW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Simon Drew" 
+        title="Simon Drew">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+        role="img" 
+        alt="Brad Coehn" 
+        title="Brad Coehn">
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Endy Wallace" 
+        title="Endy Wallace">EW
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border" 
+        role="img" 
+        aria-label="Whitney Copper" 
+        title="Whitney Copper">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+    </span>
+    
+    <span 
+        class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+        style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+        role="img" 
+        alt="John Doe" 
+        title="John Doe">
+    </span>
+
+    <span 
+        class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--overflow" 
+        role="button" 
+        tabindex="-1">+8
+    </span>
+</div>
\ No newline at end of file
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index 22dbb74a51..b855ea0895 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -9324,7 +9324,281 @@ exports[`Check stories > Components/Avatar Group > Story GroupType > Should matc
         </div>
     </div>
 </div>
-"
+
+<h4>XS size</h4>
+<div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xs\\">
+    <span 
+        class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Wendy Wallace\\" 
+        title=\\"Wendy Wallace\\">WW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Simon Drew\\" 
+        title=\\"Simon Drew\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+        role=\\"img\\" 
+        alt=\\"Brad Coehn\\" 
+        title=\\"Brad Coehn\\">
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Endy Wallace\\" 
+        title=\\"Endy Wallace\\">EW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Whitney Copper\\" 
+        title=\\"Whitney Copper\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+        style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+        role=\\"img\\" 
+        alt=\\"John Doe\\" 
+        title=\\"John Doe\\">
+    </span>
+
+    <span 
+        class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--overflow\\" 
+        role=\\"button\\" 
+        tabindex=\\"-1\\">+8
+    </span>
+</div>
+
+<br>
+<h4>SM size</h4>
+<div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--sm\\">
+    <span 
+        class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Wendy Wallace\\" 
+        title=\\"Wendy Wallace\\">WW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Simon Drew\\" 
+        title=\\"Simon Drew\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+        role=\\"img\\" 
+        alt=\\"Brad Coehn\\" 
+        title=\\"Brad Coehn\\">
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Endy Wallace\\" 
+        title=\\"Endy Wallace\\">EW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Whitney Copper\\" 
+        title=\\"Whitney Copper\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+        style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+        role=\\"img\\" 
+        alt=\\"John Doe\\" 
+        title=\\"John Doe\\">
+    </span>
+
+    <span 
+        class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow\\" 
+        role=\\"button\\" 
+        tabindex=\\"-1\\">+8
+    </span>
+</div>
+
+<br>
+<h4>MD size</h4>
+<div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md\\">
+    <span 
+        class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Wendy Wallace\\" 
+        title=\\"Wendy Wallace\\">WW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Simon Drew\\" 
+        title=\\"Simon Drew\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+        role=\\"img\\" 
+        alt=\\"Brad Coehn\\" 
+        title=\\"Brad Coehn\\">
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Endy Wallace\\" 
+        title=\\"Endy Wallace\\">EW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Whitney Copper\\" 
+        title=\\"Whitney Copper\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+        style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+        role=\\"img\\" 
+        alt=\\"John Doe\\" 
+        title=\\"John Doe\\">
+    </span>
+
+    <span 
+        class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow\\" 
+        role=\\"button\\" 
+        tabindex=\\"-1\\">+8
+    </span>
+</div>
+
+<br>
+<h4>LG size</h4>
+<div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg\\">
+    <span 
+        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Wendy Wallace\\" 
+        title=\\"Wendy Wallace\\">WW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Simon Drew\\" 
+        title=\\"Simon Drew\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+        role=\\"img\\" 
+        alt=\\"Brad Coehn\\" 
+        title=\\"Brad Coehn\\">
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Endy Wallace\\" 
+        title=\\"Endy Wallace\\">EW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Whitney Copper\\" 
+        title=\\"Whitney Copper\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+        style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+        role=\\"img\\" 
+        alt=\\"John Doe\\" 
+        title=\\"John Doe\\">
+    </span>
+
+    <span 
+        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow\\" 
+        role=\\"button\\" 
+        tabindex=\\"-1\\">+8
+    </span>
+</div>
+
+
+<br>
+<h4>XL size</h4>
+<div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xl\\">
+    <span 
+        class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Wendy Wallace\\" 
+        title=\\"Wendy Wallace\\">WW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Simon Drew\\" 
+        title=\\"Simon Drew\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+        role=\\"img\\" 
+        alt=\\"Brad Coehn\\" 
+        title=\\"Brad Coehn\\">
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Endy Wallace\\" 
+        title=\\"Endy Wallace\\">EW
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border\\" 
+        role=\\"img\\" 
+        aria-label=\\"Whitney Copper\\" 
+        title=\\"Whitney Copper\\">
+            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+    </span>
+    
+    <span 
+        class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+        style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+        role=\\"img\\" 
+        alt=\\"John Doe\\" 
+        title=\\"John Doe\\">
+    </span>
+
+    <span 
+        class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--overflow\\" 
+        role=\\"button\\" 
+        tabindex=\\"-1\\">+8
+    </span>
+</div>"
 `;
 
 exports[`Check stories > Components/Avatar Group > Story GroupTypeInteractionStates > Should match snapshot 1`] = `
@@ -9638,128 +9912,389 @@ exports[`Check stories > Components/Avatar Group > Story GroupTypeInteractionSta
 `;
 
 exports[`Check stories > Components/Avatar Group > Story GroupTypeVertical > Should match snapshot 1`] = `
-"<div class=\\"is-cozy\\"> 
-    
-    <div dir=\\"ltr\\">
-        <div style=\\"min-height: 400px;\\">
-        <div class=\\"fd-popover\\">
-            <div class=\\"fd-popover__control fd-avatar-group__popover-control\\"
-                role=\\"button\\"
-                tabindex=\\"0\\"
-                aria-label=\\"Has popup type dialog Conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list\\"
-                aria-haspopup=\\"true\\"
-                aria-expanded=\\"false\\"
-                onclick=\\"onPopoverClick('popover_avatar-group_tztuj-v');\\">
-                <div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg fd-avatar-group--vertical \\">
-                    <span 
-                        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
-                        role=\\"img\\" 
-                        aria-label=\\"Wendy Wallace\\" 
-                        title=\\"Wendy Wallace\\">WW
-                    </span>
-                    
-                    <span 
-                        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
-                        role=\\"img\\" 
-                        aria-label=\\"Simon Dane\\" 
-                        title=\\"Simon Dane\\">
-                            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
-                    </span>
-                    
-                    <span 
-                        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
-                        role=\\"img\\" 
-                        alt=\\"Michael Smith\\" 
-                        title=\\"Michael Smith\\">
-                    </span>
+"<div style=\\"min-height: 400px;\\">
+    <div class=\\"fd-popover\\">
+        <div class=\\"fd-popover__control fd-avatar-group__popover-control\\"
+            role=\\"button\\"
+            tabindex=\\"0\\"
+            aria-label=\\"Has popup type dialog Conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list\\"
+            aria-haspopup=\\"true\\"
+            aria-expanded=\\"false\\"
+            onclick=\\"onPopoverClick('popover_avatar-group_tztuj-v');\\">
+            <div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg fd-avatar-group--vertical \\">
+                <span 
+                    class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+                    role=\\"img\\" 
+                    aria-label=\\"Wendy Wallace\\" 
+                    title=\\"Wendy Wallace\\">WW
+                </span>
+                
+                <span 
+                    class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+                    role=\\"img\\" 
+                    aria-label=\\"Simon Dane\\" 
+                    title=\\"Simon Dane\\">
+                        <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+                </span>
+                
+                <span 
+                    class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+                    role=\\"img\\" 
+                    alt=\\"Michael Smith\\" 
+                    title=\\"Michael Smith\\">
+                </span>
+                
+                <span 
+                    class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+                    role=\\"img\\" 
+                    aria-label=\\"Endy Wallace\\" 
+                    title=\\"Endy Wallace\\">EW
+                </span>
+                
+                <span 
+                    class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+                    role=\\"img\\" 
+                    aria-label=\\"Whitney Copper\\" 
+                    title=\\"Whitney Copper\\">
+                        <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+                </span>
+                
+                <span 
+                    class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+                    style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+                    role=\\"img\\" 
+                    alt=\\"James Johnson\\" 
+                    title=\\"James Johnson\\">
+                </span>
+
+                <span 
+                    class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow\\" 
+                    role=\\"button\\" 
+                    tabindex=\\"-1\\">+8
+                </span>
+            </div>
+        </div>
+
+        <div class=\\"fd-popover__body fd-popover__body--after fd-popover__body--arrow-left\\" aria-hidden=\\"true\\" id=\\"popover_avatar-group_tztuj-v\\" style=\\"width: 332px;\\">
+            <div class=\\"fd-popover__wrapper\\" style=\\"max-height: 200px; overflow-x: hidden\\">
+                <div class=\\"fd-popover__body-header\\">
+                    <div class=\\"fd-bar fd-bar--header\\">
+                        <div class=\\"fd-bar__middle\\">
+                            <div class=\\"fd-bar__element\\">Team Members (14)</div>
+                        </div>
+                    </div>
+                </div>
+                <div class=\\"fd-avatar-group__overflow-body\\">
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Wendy Wallace\\" title=\\"Wendy Wallace\\">WW</span>
                     
-                    <span 
-                        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
-                        role=\\"img\\" 
-                        aria-label=\\"Endy Wallace\\" 
-                        title=\\"Endy Wallace\\">EW
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Sarah Smith\\" title=\\"Sarah Smith\\">
+                        <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\"></i>
                     </span>
                     
-                    <span 
-                        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
-                        role=\\"img\\" 
-                        aria-label=\\"Whitney Copper\\" 
-                        title=\\"Whitney Copper\\">
-                            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" role=\\"img\\" alt=\\"William Smith\\" title=\\"William Smith\\"></span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Endy Wallace\\" title=\\"Endy Wallace\\">EW</span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Whitney Bow\\" title=\\"Whitney Bow\\">
+                        <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\"></i>
                     </span>
-                    
-                    <span 
-                        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
-                        style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
-                        role=\\"img\\" 
-                        alt=\\"James Johnson\\" 
-                        title=\\"James Johnson\\">
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" role=\\"img\\" alt=\\"Mitch Walters\\" title=\\"Mitch Walters\\"></span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Andy Wallace\\" title=\\"Andy Wallace\\">AW</span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"John Carter\\" title=\\"John Carter\\">
+                        <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\"></i>
                     </span>
-    
-                    <span 
-                        class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow\\" 
-                        role=\\"button\\" 
-                        tabindex=\\"-1\\">+8
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_F3.png')\\" role=\\"img\\" alt=\\"Melanie Burke\\" title=\\"Melanie Burke\\"></span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"John Moe\\" title=\\"John Moe\\">JM</span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Ben Bloggs\\" title=\\"Ben Bloggs\\">BB</span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Simon Swan\\" title=\\"Simon Swan\\">
+                        <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\"></i>
                     </span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_F4.png')\\" role=\\"img\\" alt=\\"Maria Caffrey\\" title=\\"Maria Caffrey\\"></span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Fred Bloggs\\" title=\\"Fred Bloggs\\">FB</span>
+
+                    <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Jan Alleman\\" title=\\"Jan Alleman\\">JA</span>
                 </div>
             </div>
+        </div>
+    </div>
+</div>
+
+<div style=\\"display: flex; gap: 3rem;\\">
+    <div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xs fd-avatar-group--vertical\\">
+        <span 
+            class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Wendy Wallace\\" 
+            title=\\"Wendy Wallace\\">WW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Simon Dane\\" 
+            title=\\"Simon Dane\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+            role=\\"img\\" 
+            alt=\\"Michael Smith\\" 
+            title=\\"Michael Smith\\">
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Endy Wallace\\" 
+            title=\\"Endy Wallace\\">EW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Whitney Copper\\" 
+            title=\\"Whitney Copper\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+            style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+            role=\\"img\\" 
+            alt=\\"James Johnson\\" 
+            title=\\"James Johnson\\">
+        </span>
     
-            <div class=\\"fd-popover__body fd-popover__body--after fd-popover__body--arrow-left\\" aria-hidden=\\"true\\" id=\\"popover_avatar-group_tztuj-v\\" style=\\"width: 332px;\\">
-                <div class=\\"fd-popover__wrapper\\" style=\\"max-height: 200px; overflow-x: hidden\\">
-                    <div class=\\"fd-popover__body-header\\">
-                        <div class=\\"fd-bar fd-bar--header\\">
-                            <div class=\\"fd-bar__middle\\">
-                                <div class=\\"fd-bar__element\\">Team Members (14)</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class=\\"fd-avatar-group__overflow-body\\">
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Wendy Wallace\\" title=\\"Wendy Wallace\\">WW</span>
-                        
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Sarah Smith\\" title=\\"Sarah Smith\\">
-                            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\"></i>
-                        </span>
-                        
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" role=\\"img\\" alt=\\"William Smith\\" title=\\"William Smith\\"></span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Endy Wallace\\" title=\\"Endy Wallace\\">EW</span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Whitney Bow\\" title=\\"Whitney Bow\\">
-                            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\"></i>
-                        </span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" role=\\"img\\" alt=\\"Mitch Walters\\" title=\\"Mitch Walters\\"></span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Andy Wallace\\" title=\\"Andy Wallace\\">AW</span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"John Carter\\" title=\\"John Carter\\">
-                            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\"></i>
-                        </span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_F3.png')\\" role=\\"img\\" alt=\\"Melanie Burke\\" title=\\"Melanie Burke\\"></span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"John Moe\\" title=\\"John Moe\\">JM</span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Ben Bloggs\\" title=\\"Ben Bloggs\\">BB</span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Simon Swan\\" title=\\"Simon Swan\\">
-                            <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\"></i>
-                        </span>
-    
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_F4.png')\\" role=\\"img\\" alt=\\"Maria Caffrey\\" title=\\"Maria Caffrey\\"></span>
+        <span 
+            class=\\"fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--overflow\\" 
+            role=\\"button\\" 
+            tabindex=\\"-1\\">+8
+        </span>
+    </div>
+
+    <div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--sm fd-avatar-group--vertical\\">
+        <span 
+            class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Wendy Wallace\\" 
+            title=\\"Wendy Wallace\\">WW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Simon Dane\\" 
+            title=\\"Simon Dane\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+            role=\\"img\\" 
+            alt=\\"Michael Smith\\" 
+            title=\\"Michael Smith\\">
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Endy Wallace\\" 
+            title=\\"Endy Wallace\\">EW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Whitney Copper\\" 
+            title=\\"Whitney Copper\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+            style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+            role=\\"img\\" 
+            alt=\\"James Johnson\\" 
+            title=\\"James Johnson\\">
+        </span>
     
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Fred Bloggs\\" title=\\"Fred Bloggs\\">FB</span>
+        <span 
+            class=\\"fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow\\" 
+            role=\\"button\\" 
+            tabindex=\\"-1\\">+8
+        </span>
+    </div>
+
+    <div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md fd-avatar-group--vertical\\">
+        <span 
+            class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Wendy Wallace\\" 
+            title=\\"Wendy Wallace\\">WW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Simon Dane\\" 
+            title=\\"Simon Dane\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+            role=\\"img\\" 
+            alt=\\"Michael Smith\\" 
+            title=\\"Michael Smith\\">
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Endy Wallace\\" 
+            title=\\"Endy Wallace\\">EW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Whitney Copper\\" 
+            title=\\"Whitney Copper\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+            style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+            role=\\"img\\" 
+            alt=\\"James Johnson\\" 
+            title=\\"James Johnson\\">
+        </span>
     
-                        <span class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" role=\\"img\\" aria-label=\\"Jan Alleman\\" title=\\"Jan Alleman\\">JA</span>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <span 
+            class=\\"fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow\\" 
+            role=\\"button\\" 
+            tabindex=\\"-1\\">+8
+        </span>
     </div>
+
+    <div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg fd-avatar-group--vertical\\">
+        <span 
+            class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Wendy Wallace\\" 
+            title=\\"Wendy Wallace\\">WW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Simon Dane\\" 
+            title=\\"Simon Dane\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+            role=\\"img\\" 
+            alt=\\"Michael Smith\\" 
+            title=\\"Michael Smith\\">
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Endy Wallace\\" 
+            title=\\"Endy Wallace\\">EW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Whitney Copper\\" 
+            title=\\"Whitney Copper\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+            style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+            role=\\"img\\" 
+            alt=\\"James Johnson\\" 
+            title=\\"James Johnson\\">
+        </span>
     
+        <span 
+            class=\\"fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow\\" 
+            role=\\"button\\" 
+            tabindex=\\"-1\\">+8
+        </span>
     </div>
+
+
+    <div class=\\"fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xl fd-avatar-group--vertical\\">
+        <span 
+            class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Wendy Wallace\\" 
+            title=\\"Wendy Wallace\\">WW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Simon Dane\\" 
+            title=\\"Simon Dane\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" style=\\"background-image: url('/assets/images/portraits/L_80x80_M1.png')\\" 
+            role=\\"img\\" 
+            alt=\\"Michael Smith\\" 
+            title=\\"Michael Smith\\">
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Endy Wallace\\" 
+            title=\\"Endy Wallace\\">EW
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border\\" 
+            role=\\"img\\" 
+            aria-label=\\"Whitney Copper\\" 
+            title=\\"Whitney Copper\\">
+                <i class=\\"fd-avatar__icon sap-icon--person-placeholder\\" role=\\"presentation\\" aria-hidden=\\"true\\"></i>
+        </span>
+        
+        <span 
+            class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail\\" 
+            style=\\"background-image: url('/assets/images/portraits/L_80x80_M2.png')\\" 
+            role=\\"img\\" 
+            alt=\\"James Johnson\\" 
+            title=\\"James Johnson\\">
+        </span>
+    
+        <span 
+            class=\\"fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--overflow\\" 
+            role=\\"button\\" 
+            tabindex=\\"-1\\">+8
+        </span>
     </div>
-"
+</div>"
 `;
 
 exports[`Check stories > Components/Avatar Group > Story IndividualType > Should match snapshot 1`] = `