From 0425c318b0f2b248a687deddf952dc9ad98b6749 Mon Sep 17 00:00:00 2001
From: IB002 <132930816+IB002@users.noreply.github.com>
Date: Fri, 14 Jul 2023 19:20:56 -0400
Subject: [PATCH] docs(styles): added interactivity to vertical components [ci
 visual] (#4683)

Co-authored-by: droshev <mladen.droshev@sap.com>
---
 .../group-type-vertical.example.html          | 151 ++++++--
 .../individual-type-vertical.example.html     | 327 +++++++++++++++---
 2 files changed, 401 insertions(+), 77 deletions(-)

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 1266f9029d..66c954fc7d 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,30 +1,125 @@
-<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">
-            <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--m fd-avatar-group--vertical">
-                <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Wendy Wallace" title="Wendy Wallace">WW</span>
-
-                <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Simon Doe" title="Simon Doe">
-                    <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
-                </span>
-
-                <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" alt="John Doe" title="John Doe"></span>
-
-                <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Endy Wallace" title="Endy Wallace">EW</span>
-
-                <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Whitney Copper" title="Whitney Copper">
-                    <i class="fd-avatar__icon sap-icon--washing-machine" role="presentation"></i>
-                </span>
-
-                <span class="fd-avatar fd-avatar--m 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--m fd-avatar--circle fd-avatar--border fd-avatar--overflow" role="button" aria-label="John Doe" title="John Doe" tabindex="-1">+8</span>
+<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--m fd-avatar-group--vertical ">
+                    <span 
+                        class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" 
+                        role="img" 
+                        aria-label="Wendy Wallace" 
+                        title="Wendy Wallace">WW
+                    </span>
+                    
+                    <span 
+                        class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" 
+                        role="img" 
+                        aria-label="Simon Doe" 
+                        title="Simon Doe">
+                            <i class="fd-avatar__icon sap-icon--money-bills" role="presentation" aria-hidden="true"></i>
+                    </span>
+                    
+                    <span 
+                        class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+                        role="img" 
+                        alt="John Doe" 
+                        title="John Doe">
+                    </span>
+                    
+                    <span 
+                        class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" 
+                        role="img" 
+                        aria-label="Endy Wallace" 
+                        title="Endy Wallace">EW
+                    </span>
+                    
+                    <span 
+                        class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" 
+                        role="img" 
+                        aria-label="Whitney Copper" 
+                        title="Whitney Copper">
+                            <i class="fd-avatar__icon sap-icon--washing-machine" role="presentation" aria-hidden="true"></i>
+                    </span>
+                    
+                    <span 
+                        class="fd-avatar fd-avatar--m 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--m fd-avatar--circle fd-avatar--overflow" 
+                        role="button" 
+                        tabindex="-1">+8
+                    </span>
+                </div>
             </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--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Wendy Wallace" title="Wendy Wallace">WW</span>
+                        
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Sarah Smith" title="Sarah Smith">
+                            <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
+                        </span>
+                        
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" alt="John Doe" title="John Doe"></span>
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Endy Wallace" title="Endy Wallace">EW</span>
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Whitney Bow" title="Whitney Bow">
+                            <i class="fd-avatar__icon sap-icon--washing-machine" role="presentation"></i>
+                        </span>
+    
+                        <span class="fd-avatar fd-avatar--m 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--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Andy Wallace" title="Andy Wallace">AW</span>
+    
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="John Carter" title="John Carter">
+                            <i class="fd-avatar__icon sap-icon--account" role="presentation"></i>
+                        </span>
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F3.png')" role="img" alt="John Doe" title="John Doe"></span>
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="John Moe" title="John Moe">JM</span>
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Joe Bloggs" title="Joe Bloggs">JB</span>
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Simon Swan" title="Simon Swan">
+                            <i class="fd-avatar__icon sap-icon--visits" role="presentation"></i>
+                        </span>
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F4.png')" role="img" alt="John Doe" title="John Doe"></span>
+    
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Fred Bloggs" title="Fred Bloggs">FB</span>
+    
+    
+                        <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Jan Alleman" title="Jan Alleman">JA</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    </div>
     </div>
-</div>
diff --git a/packages/styles/stories/Components/avatar-group/individual-type-vertical.example.html b/packages/styles/stories/Components/avatar-group/individual-type-vertical.example.html
index 744f1a6f45..3ae2c680f7 100644
--- a/packages/styles/stories/Components/avatar-group/individual-type-vertical.example.html
+++ b/packages/styles/stories/Components/avatar-group/individual-type-vertical.example.html
@@ -1,56 +1,285 @@
-<div style="min-height: 400px;">
-    <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--s fd-avatar-group--vertical">
-        <div class="fd-popover">
-            <div class="fd-popover__control">
-                <span 
-                    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" 
-                    role="button" 
-                    tabindex="0"
-                    aria-label="Wendy Wallace" 
-                    title="Wendy Wallace">WW
-                </span>
+<div class="is-compact">
+    
+    <div dir="ltr">
+        <div style="min-height: 400px; max-width: 3.25rem;">
+        <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--s fd-avatar-group--vertical">
+            <div class="fd-popover">
+                <div class="fd-popover__control">
+                    <span 
+                        class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" 
+                        role="button" 
+                        aria-label="Wendy Wallace" 
+                        title="Wendy Wallace" 
+                        tabindex="0" 
+                        aria-haspopup="true" 
+                        aria-expanded="false" 
+                        onclick="onPopoverClick('popover_avatar_5z28edb-v');">WW
+                    </span>
+                </div>
+                <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_5z28edb-v">
+                    <div class="fd-quick-view">
+                        <div class="fd-bar fd-bar--header">
+                            <div class="fd-bar__middle">
+                                <div class="fd-bar__element">Business Card</div>
+                            </div>
+                        </div>
+    
+                        <div class="fd-quick-view__content">
+                            <div class="fd-bar fd-bar--header-with-subheader">
+                                <div class="fd-bar__left">
+                                    <span 
+                                        class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" 
+                                        role="img" 
+                                        aria-label="Jason Smith" 
+                                        title="Jason Smith">WW
+                                    </span>
+                                    <div class="fd-quick-view__subheader-text">
+                                        <h5 class="fd-title fd-title--h5">Jason Smith</h5>
+                                        <div class="fd-quick-view__subtitle">Marketing Manager</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="fd-form-group" role="group">
+                                <div class="fd-form-group__header" aria-labelledby="contactDetails_5z28edb-v">
+                                    <h1 class="fd-form-group__header-text" id="contactDetails_5z28edb-v">Contact Details</h1>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Mobile</label>
+                                    <a class="fd-link" href="tel:+89181818181"><span class="fd-link__content">+89181818181</span></a>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Phone</label>
+                                    <a class="fd-link" href="tel:+2828282828"><span class="fd-link__content">+2828282828</span></a>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Email</label>
+                                    <a class="fd-link" href="mailto:blabla@blabla"><span class="fd-link__content">blabla@blabla</span></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </div>
-        <div class="fd-popover">
-            <div class="fd-popover__control">
-                <span 
-                    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" 
-                    role="button" 
-                    tabindex="0"
-                    aria-label="Jason Goldwell" 
-                    title="Jason Goldwell">
-                    <i class="fd-avatar__icon sap-icon--money-bills" role="presentation" aria-hidden="true"></i>
-                </span>
+            <div class="fd-popover">
+                <div class="fd-popover__control">
+                    <span 
+                        class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" 
+                        role="button" 
+                        aria-label="Jason Goldwell" 
+                        title="Jason Goldwell" 
+                        tabindex="0" 
+                        aria-haspopup="true" 
+                        aria-expanded="false" 
+                        onclick="onPopoverClick('popover_avatar_spbw4q-v');">
+                            <i class="fd-avatar__icon sap-icon--money-bills" role="presentation" aria-hidden="true"></i>
+                    </span>
+                </div>
+                <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_spbw4q-v">
+                    <div class="fd-quick-view">
+                        <div class="fd-bar fd-bar--header">
+                            <div class="fd-bar__middle">
+                                <div class="fd-bar__element">Business Card</div>
+                            </div>
+                        </div>
+    
+                        <div class="fd-quick-view__content">
+                            <div class="fd-bar fd-bar--header-with-subheader">
+                                <div class="fd-bar__left">
+                                    <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" role="img" aria-label="Wendy Wallace" title="Wendy Wallace">WW</span>
+                                    <div class="fd-quick-view__subheader-text">
+                                        <h5 class="fd-title fd-title--h5">Sarah Parker</h5>
+                                        <div class="fd-quick-view__subtitle">Visual Designer</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="fd-form-group" role="group">
+                                <div class="fd-form-group__header" aria-labelledby="contactDetails_spbw4q-v">
+                                    <h1 class="fd-form-group__header-text" id="contactDetails_spbw4q-v">Contact Details</h1>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Mobile</label>
+                                    <a class="fd-link" href="tel:+89181818181">+89181818181</a>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Phone</label>
+                                    <a class="fd-link" href="tel:+2828282828">+2828282828</a>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Email</label>
+                                    <a class="fd-link" href="mailto:blabla@blabla">blabla@blabla</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </div>
-        <div class="fd-popover">
-            <div class="fd-popover__control">
-                <span 
-                    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
-                    role="button" 
-                    alt="Christian Bow" 
-                    title="Christian Bow"
-                    tabindex="0">
-                </span>
+            <div class="fd-popover">
+                <div class="fd-popover__control">
+                    <span 
+                        class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" 
+                        role="button" 
+                        aria-label="Christian Bow" 
+                        title="Christian Bow" 
+                        tabindex="0" 
+                        aria-haspopup="true" 
+                        aria-expanded="false" 
+                        onclick="onPopoverClick('popover_avatar_4ahzcg-v');">
+                    </span>
+                </div>
+                <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_4ahzcg-v">
+                    <div class="fd-quick-view">
+                        <div class="fd-bar fd-bar--header">
+                            <div class="fd-bar__middle">
+                                <div class="fd-bar__element">Business Card</div>
+                            </div>
+                        </div>
+    
+                        <div class="fd-quick-view__content">
+                            <div class="fd-bar fd-bar--header-with-subheader">
+                                <div class="fd-bar__left">
+                                    <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" alt="Christian Bow" title="Christian Bow"></span>
+                                    <div class="fd-quick-view__subheader-text">
+                                        <h5 class="fd-title fd-title--h5">Christian Bow</h5>
+                                        <div class="fd-quick-view__subtitle">Marketing Manager</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="fd-form-group" role="group">
+                                <div class="fd-form-group__header" aria-labelledby="contactDetails_4ahzcg-v">
+                                    <h1 class="fd-form-group__header-text" id="contactDetails_4ahzcg-v">Contact Details</h1>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Mobile</label>
+                                    <a class="fd-link" href="tel:+89181818181">+89181818181</a>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Phone</label>
+                                    <a class="fd-link" href="tel:+2828282828">+2828282828</a>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Email</label>
+                                    <a class="fd-link" href="mailto:blabla@blabla">blabla@blabla</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </div>
-        <div class="fd-popover">
-            <div class="fd-popover__control">
-                <span 
-                    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" role="button" 
-                    aria-label="Endy Wallace" 
-                    tabindex="0"
-                    title="Endy Wallace">EW</span>
+            <div class="fd-popover">
+                <div class="fd-popover__control">
+                    <span 
+                        class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" 
+                        role="button" 
+                        aria-label="Endy Wallace" 
+                        title="Endy Wallace" 
+                        tabindex="0" 
+                        aria-haspopup="true" 
+                        aria-expanded="false" 
+                        onclick="onPopoverClick('popover_avatar_qc1f1jf-v');">EW
+                    </span>
+                </div>
+                <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_qc1f1jf-v">
+                    <div class="fd-quick-view">
+                        <div class="fd-bar fd-bar--header">
+                            <div class="fd-bar__middle">
+                                <div class="fd-bar__element">Business Card</div>
+                            </div>
+                        </div>
+    
+                        <div class="fd-quick-view__content">
+                            <div class="fd-bar fd-bar--header-with-subheader">
+                                <div class="fd-bar__left">
+                                    <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" role="img" aria-label="Endy Wallace" title="Endy Wallace">EW</span>
+                                    <div class="fd-quick-view__subheader-text">
+                                        <h5 class="fd-title fd-title--h5">Endy Wallace</h5>
+                                        <div class="fd-quick-view__subtitle">Software Developer</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="fd-form-group" role="group">
+                                <div class="fd-form-group__header" aria-labelledby="contactDetails_qc1f1jf-v">
+                                    <h1 class="fd-form-group__header-text" id="contactDetails_qc1f1jf-v">Contact Details</h1>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Mobile</label>
+                                    <a class="fd-link" href="tel:+89181818181">+89181818181</a>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Phone</label>
+                                    <a class="fd-link" href="tel:+2828282828">+2828282828</a>
+                                </div>
+                                <div class="fd-form-item">
+                                    <label class="fd-form-label">Email</label>
+                                    <a class="fd-link" href="mailto:blabla@blabla">blabla@blabla</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </div>
-
-        <div class="fd-popover">
-            <div class="fd-popover__control">
-                <span 
-                    class="fd-avatar fd-avatar--accent-color-2 fd-avatar--s fd-avatar--circle fd-avatar--overflow" tabindex="0" 
-                    role="button">+4
-                </span>
+    
+            <div class="fd-popover">
+                <div class="fd-popover__control">
+                    <span 
+                        class="fd-avatar fd-avatar--accent-color-2  fd-avatar--s fd-avatar--circle fd-avatar--overflow"
+                        tabindex="0" 
+                        role="button"
+                        aria-haspopup="true" 
+                        aria-expanded="false" 
+                        onclick="onPopoverClick('popover_avatar_more_aoiwjth-v');">+4
+                    </span>
+                </div>
+    
+                <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_more_aoiwjth-v" style="width: 245px;">
+                    <div class="fd-popover__wrapper">
+                        <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 (4)</div>
+                                </div>
+                            </div>
+                        </div>
+    
+                        <div class="fd-avatar-group__overflow-body">
+                            <span 
+                                class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" 
+                                role="button" 
+                                aria-label="Gordon Smith" 
+                                title="Gordon Smith"
+                                tabindex="0">
+                                <i class="fd-avatar__icon sap-icon--washing-machine" role="presentation" aria-hidden="true"></i>
+                            </span>
+    
+                            <span 
+                                class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" 
+                                style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" 
+                                role="button" 
+                                alt="John Doe" 
+                                title="John Doe" 
+                                tabindex="0">
+                            </span>
+    
+                            <span 
+                                class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" 
+                                role="button" 
+                                aria-label="John Moe" 
+                                title="John Moe" 
+                                tabindex="0">JM
+                            </span>
+    
+                            <span 
+                                class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" 
+                                role="button" 
+                                aria-label="Joe Bloggs" 
+                                title="Joe Bloggs" 
+                                tabindex="0">JB
+                            </span>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-</div>
+    
+    </div>
+    </div>
\ No newline at end of file