@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +53 -3
  3. package/data/component-catalog.json +62 -209
  4. package/data/components/README.md +281 -0
  5. package/data/components/action-bar.md +443 -0
  6. package/data/components/ai-busy-indicator.md +79 -0
  7. package/data/components/ai-loading-bar.md +66 -0
  8. package/data/components/avatar-btp.md +198 -0
  9. package/data/components/avatar-group.md +2660 -0
  10. package/data/components/avatar-product-switch.md +476 -0
  11. package/data/components/avatar.md +993 -0
  12. package/data/components/bar.md +574 -0
  13. package/data/components/border-radius.md +148 -0
  14. package/data/components/border.md +412 -0
  15. package/data/components/breadcrumb.md +546 -0
  16. package/data/components/button-2.md +440 -0
  17. package/data/components/button-action-sheet.md +292 -0
  18. package/data/components/button-ai.md +730 -0
  19. package/data/components/button-btp.md +223 -0
  20. package/data/components/button-button.md +233 -0
  21. package/data/components/button-counter.md +176 -0
  22. package/data/components/button-patterns.md +731 -0
  23. package/data/components/button-split.md +459 -0
  24. package/data/components/button.md +469 -0
  25. package/data/components/calendar.md +5784 -0
  26. package/data/components/card-card-media.md +707 -0
  27. package/data/components/card-card.md +2426 -0
  28. package/data/components/card-layouts.md +1201 -0
  29. package/data/components/card.md +2404 -0
  30. package/data/components/carousel.md +1506 -0
  31. package/data/components/code.md +139 -0
  32. package/data/components/component-reset.md +272 -0
  33. package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
  34. package/data/components/components-icons-sap-icons.md +147 -0
  35. package/data/components/components-icons-tnt-icons.md +85 -0
  36. package/data/components/container-queries.md +221 -0
  37. package/data/components/container.md +227 -0
  38. package/data/components/dialog-docs-static-busy-indicator.md +165 -0
  39. package/data/components/dialog-docs-static-dialog.md +949 -0
  40. package/data/components/dialog-docs-static-patterns.md +147 -0
  41. package/data/components/dialog-docs-static-settings.md +528 -0
  42. package/data/components/dialog-docs-static.md +982 -0
  43. package/data/components/dialog.md +606 -0
  44. package/data/components/dynamic-page-dynamic-page.md +1914 -0
  45. package/data/components/dynamic-page.md +973 -0
  46. package/data/components/dynamic-side.md +197 -0
  47. package/data/components/elevation.md +110 -0
  48. package/data/components/feed-input.md +346 -0
  49. package/data/components/feed-list.md +580 -0
  50. package/data/components/fieldset-2.md +292 -0
  51. package/data/components/fieldset-forms.md +169 -0
  52. package/data/components/fieldset.md +381 -0
  53. package/data/components/flexible-column-layout.md +205 -0
  54. package/data/components/form-group.md +287 -0
  55. package/data/components/form-header.md +71 -0
  56. package/data/components/form-item-2.md +98 -0
  57. package/data/components/form-item-3.md +134 -0
  58. package/data/components/form-item-4.md +556 -0
  59. package/data/components/form-item-5.md +182 -0
  60. package/data/components/form-item-6.md +539 -0
  61. package/data/components/form-item-7.md +239 -0
  62. package/data/components/form-item-ai.md +158 -0
  63. package/data/components/form-item-file-uploader.md +445 -0
  64. package/data/components/form-item-forms.md +234 -0
  65. package/data/components/form-item-patterns.md +426 -0
  66. package/data/components/form-item.md +464 -0
  67. package/data/components/form-label-ai.md +126 -0
  68. package/data/components/form-label-layouts.md +306 -0
  69. package/data/components/form-label-patterns.md +1175 -0
  70. package/data/components/form-label-status-indicator.md +1083 -0
  71. package/data/components/form-label-step-input.md +620 -0
  72. package/data/components/form-label.md +2876 -0
  73. package/data/components/generic-tag.md +747 -0
  74. package/data/components/grid-list-grid-list.md +1185 -0
  75. package/data/components/grid-list.md +1449 -0
  76. package/data/components/heading.md +66 -0
  77. package/data/components/horizontal-navigation.md +568 -0
  78. package/data/components/icon-tab-bar-dev.md +190 -0
  79. package/data/components/icon-tab-bar.md +2620 -0
  80. package/data/components/icon.md +171 -0
  81. package/data/components/iconBusinessSuite.md +92 -0
  82. package/data/components/iconTnt.md +92 -0
  83. package/data/components/illustrated-message.md +439 -0
  84. package/data/components/info-label.md +348 -0
  85. package/data/components/input-group.md +2068 -0
  86. package/data/components/label.md +66 -0
  87. package/data/components/layout-grid.md +447 -0
  88. package/data/components/layout-panel.md +261 -0
  89. package/data/components/layouts-layout-grid.md +608 -0
  90. package/data/components/layouts-paddings.md +133 -0
  91. package/data/components/layouts-section.md +287 -0
  92. package/data/components/list-2.md +148 -0
  93. package/data/components/list-3.md +735 -0
  94. package/data/components/list-list.md +790 -0
  95. package/data/components/list-object-list.md +1225 -0
  96. package/data/components/list.md +1286 -0
  97. package/data/components/media-queries.md +168 -0
  98. package/data/components/menu.md +946 -0
  99. package/data/components/message-box-docs-static-ai.md +149 -0
  100. package/data/components/message-box-docs-static.md +527 -0
  101. package/data/components/message-page-upload-collection.md +678 -0
  102. package/data/components/message-page.md +256 -0
  103. package/data/components/message-strip.md +977 -0
  104. package/data/components/message-toast.md +119 -0
  105. package/data/components/micro-process-flow.md +991 -0
  106. package/data/components/navigation-menu.md +366 -0
  107. package/data/components/navigation-navigation.md +1245 -0
  108. package/data/components/navigation.md +2604 -0
  109. package/data/components/numeric-content.md +317 -0
  110. package/data/components/object-attribute.md +96 -0
  111. package/data/components/object-identifier.md +227 -0
  112. package/data/components/object-marker.md +202 -0
  113. package/data/components/object-number.md +327 -0
  114. package/data/components/object-status.md +1538 -0
  115. package/data/components/off-screen.md +87 -0
  116. package/data/components/overflow.md +97 -0
  117. package/data/components/padding.md +122 -0
  118. package/data/components/paddings.md +130 -0
  119. package/data/components/page.md +300 -0
  120. package/data/components/pagination.md +672 -0
  121. package/data/components/panel-layouts.md +345 -0
  122. package/data/components/panel.md +514 -0
  123. package/data/components/patterns-label.md +74 -0
  124. package/data/components/popover-2.md +906 -0
  125. package/data/components/popover-ai.md +466 -0
  126. package/data/components/popover-btp.md +886 -0
  127. package/data/components/popover-deprecated.md +308 -0
  128. package/data/components/popover-message-popover.md +683 -0
  129. package/data/components/popover-notification.md +1511 -0
  130. package/data/components/popover-patterns.md +1100 -0
  131. package/data/components/popover-popover.md +1862 -0
  132. package/data/components/popover-quick-view.md +385 -0
  133. package/data/components/popover-timepicker.md +1836 -0
  134. package/data/components/popover-user-menu.md +1303 -0
  135. package/data/components/popover.md +1938 -0
  136. package/data/components/progress-indicator.md +351 -0
  137. package/data/components/prompt-input-ai.md +226 -0
  138. package/data/components/prompt-input.md +226 -0
  139. package/data/components/rating-indicator.md +1469 -0
  140. package/data/components/resizable-card-layout.md +951 -0
  141. package/data/components/scrollbar.md +86 -0
  142. package/data/components/search-field.md +287 -0
  143. package/data/components/section.md +250 -0
  144. package/data/components/segmented-button.md +324 -0
  145. package/data/components/shellbar.md +2183 -0
  146. package/data/components/side-nav.md +1562 -0
  147. package/data/components/skeleton.md +243 -0
  148. package/data/components/slider.md +395 -0
  149. package/data/components/splitter.md +353 -0
  150. package/data/components/table.md +2749 -0
  151. package/data/components/tabs.md +658 -0
  152. package/data/components/text-text.md +380 -0
  153. package/data/components/text.md +253 -0
  154. package/data/components/tile.md +1132 -0
  155. package/data/components/time.md +818 -0
  156. package/data/components/title.md +153 -0
  157. package/data/components/titles.md +83 -0
  158. package/data/components/token.md +311 -0
  159. package/data/components/tokenizer.md +398 -0
  160. package/data/components/tool-header.md +1352 -0
  161. package/data/components/tool-layout.md +199 -0
  162. package/data/components/toolbar-ai.md +174 -0
  163. package/data/components/toolbar-btp.md +526 -0
  164. package/data/components/toolbar-title-bar.md +473 -0
  165. package/data/components/toolbar.md +432 -0
  166. package/data/components/tree.md +1031 -0
  167. package/data/components/typography.md +435 -0
  168. package/data/components/variant-management.md +360 -0
  169. package/data/components/vertical-nav.md +589 -0
  170. package/data/components/wizard.md +1429 -0
  171. package/data/examples/Components/dialog/device-specifications.example.html +39 -30
  172. package/data/examples/Components/shellbar/optional-items.example.html +210 -157
  173. package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
  174. package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
  175. package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
  176. package/data/examples/Components/user-menu/default.example.html +241 -83
  177. package/data/schemas/badge.schema.json +1 -1
  178. package/data/schemas/button-split.schema.json +1 -1
  179. package/data/schemas/component-frontmatter.schema.json +123 -0
  180. package/data/schemas/component-markdown.schema.json +81 -0
  181. package/data/schemas/counter.schema.json +1 -1
  182. package/data/schemas/dynamic-page.schema.json +1 -1
  183. package/data/schemas/dynamic-side-content.schema.json +1 -1
  184. package/data/schemas/facet.schema.json +1 -1
  185. package/data/schemas/fieldset.schema.json +1 -1
  186. package/data/schemas/flexible-column-layout.schema.json +1 -1
  187. package/data/schemas/form-group.schema.json +3 -2
  188. package/data/schemas/form-header.schema.json +1 -1
  189. package/data/schemas/form-label.schema.json +1 -0
  190. package/data/schemas/form-message.schema.json +1 -1
  191. package/data/schemas/grid-list.schema.json +1 -1
  192. package/data/schemas/input-group.schema.json +1 -1
  193. package/data/schemas/layout-panel.schema.json +1 -1
  194. package/data/schemas/page.schema.json +1 -1
  195. package/data/schemas/quick-view.schema.json +2 -1
  196. package/data/schemas/section.schema.json +1 -1
  197. package/data/schemas/side-nav.schema.json +1 -1
  198. package/data/schemas/splitter.schema.json +1 -1
  199. package/data/schemas/tabs.schema.json +1 -1
  200. package/data/schemas/tile.schema.json +1 -1
  201. package/data/schemas/tool-layout.schema.json +1 -1
  202. package/data/schemas/user-menu.schema.json +10 -0
  203. package/data/schemas/wizard.schema.json +1 -1
  204. package/package.json +1 -1
  205. package/src/data/load-catalog.d.ts +2 -0
  206. package/src/data/load-catalog.js +5 -1
  207. package/src/data/load-catalog.js.map +1 -1
  208. package/src/data/load-markdown-docs.d.ts +44 -0
  209. package/src/data/load-markdown-docs.js +179 -0
  210. package/src/data/load-markdown-docs.js.map +1 -0
  211. package/src/data/markdown-cache.d.ts +60 -0
  212. package/src/data/markdown-cache.js +218 -0
  213. package/src/data/markdown-cache.js.map +1 -0
  214. package/src/server.js +72 -1
  215. package/src/server.js.map +1 -1
package/data/components/avatar-group.md ADDED
@@ -0,0 +1,2660 @@
1
+ ---
2
+ component: fd-avatar-group
3
+ title: Components/Avatar Group
4
+ category: Components
5
+ selector: fd-avatar-group
6
+ cssFile: avatar-group.css
7
+ sourcePath: packages/styles/stories/Components/avatar-group/avatar-group.stories.js
8
+ tags: []
9
+ dependencies: ["avatar","avatar-group","bar","button","form-group","form-item","form-label","form-layout-grid","icon","input","layout-grid","link","popover","quick-view","title"]
10
+ relatedComponents: ["avatar","avatar-group","bar","button","form-group","form-item","form-label","form-layout-grid","icon","input","layout-grid","link","popover","quick-view","title"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.528Z
13
+ ---
14
+
15
+ # Components/Avatar Group
16
+
17
+ The avatar group displays a number of avatars, which act as a digital representation of a user. This control is useful for visualizing a team, project team members, or a group of employees, for example. <br />
18
+ For detailed information check Fiori Design Guidelines for <a target="_blank" href="https://experience.sap.com/internal/fiori-design-web/avatar-group/">Avatar Group</a> component.
19
+
20
+ <br />
21
+ ## Usage
22
+
23
+ Use the **AvatarGroup** if:
24
+
25
+ - You want to display a group of avatars (more than two).
26
+ - You want to display several avatars which have something in common.
27
+
28
+ Do not use the **AvatarGroup** if:
29
+
30
+ - You want to display a single avatar.
31
+ - You want to display a gallery for simple images.
32
+ - You want to use it for other visual content than avatars.
33
+
34
+ <br />
35
+ ## Sizes and spacings
36
+
37
+ The spacing between the items depends on the size of the avatars in the group.
38
+
39
+ | **Size** | &nbsp;&nbsp; **Group type** | &nbsp;&nbsp; **Individual type** | **Modifier class** |
40
+ | :---------: | :----------: | :-----------------------: | :--------------- |
41
+ | XS | &nbsp;&nbsp; -0.75rem | &nbsp;&nbsp; 0.0625rem | \
42
+
43
+ ## Dependencies
44
+
45
+ This component depends on the following CSS files:
46
+
47
+ - `avatar.css`
48
+ - `avatar-group.css`
49
+ - `bar.css`
50
+ - `button.css`
51
+ - `form-group.css`
52
+ - `form-item.css`
53
+ - `form-label.css`
54
+ - `form-layout-grid.css`
55
+ - `icon.css`
56
+ - `input.css`
57
+ - `layout-grid.css`
58
+ - `link.css`
59
+ - `popover.css`
60
+ - `quick-view.css`
61
+ - `title.css`
62
+
63
+ ## Installation
64
+
65
+ ```bash
66
+ npm install fundamental-styles
67
+ ```
68
+
69
+ ```html
70
+ <!-- Include theme -->
71
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
72
+
73
+ <!-- Include component CSS -->
74
+ <link href="node_modules/fundamental-styles/dist/avatar-group.css" rel="stylesheet">
75
+
76
+ <!-- Include dependencies -->
77
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
78
+ <link href="node_modules/fundamental-styles/dist/avatar-group.css" rel="stylesheet">
79
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
80
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
81
+ <link href="node_modules/fundamental-styles/dist/form-group.css" rel="stylesheet">
82
+ <link href="node_modules/fundamental-styles/dist/form-item.css" rel="stylesheet">
83
+ <link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
84
+ <link href="node_modules/fundamental-styles/dist/form-layout-grid.css" rel="stylesheet">
85
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
86
+ <link href="node_modules/fundamental-styles/dist/input.css" rel="stylesheet">
87
+ <link href="node_modules/fundamental-styles/dist/layout-grid.css" rel="stylesheet">
88
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
89
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
90
+ <link href="node_modules/fundamental-styles/dist/quick-view.css" rel="stylesheet">
91
+ <link href="node_modules/fundamental-styles/dist/title.css" rel="stylesheet">
92
+ ```
93
+
94
+ ## Basic Usage
95
+
96
+ ```html
97
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--sm">
98
+ <div class="fd-popover">
99
+ <div class="fd-popover__control">
100
+ <span
101
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
102
+ aria-label="Avatar Jason Smith"
103
+ title="Jason Smith"
104
+ tabindex="0"
105
+ aria-haspopup="true"
106
+ aria-expanded="false"
107
+ onclick="onPopoverClick('popover_avatar_5z28edb');">JS
108
+ </span>
109
+ <div class="fd-popover__body" aria-hidden="false" id="popover_avatar_5z28edb">
110
+ <div class="fd-quick-view">
111
+ <div class="fd-bar fd-bar--header">
112
+ <div class="fd-bar__middle">
113
+ <div class="fd-bar__element">
114
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="fd-quick-view__content">
120
+ <div class="fd-bar fd-bar--header-with-subheader">
121
+ <div class="fd-bar__left">
122
+ <span
123
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
124
+ role="img"
125
+ aria-label="Avatar Jason Smith">
126
+ JS
127
+ </span>
128
+ <div class="fd-quick-view__subheader-text">
129
+ <h5 class="fd-title fd-title--h5">Jason Smith</h5>
130
+ <p class="fd-quick-view__subtitle">Marketing Manager</p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ <div class="fd-form-group" role="group">
135
+ <div class="fd-form-group__header" aria-labelledby="contactDetails_5z28edb">
136
+ <p class="fd-form-group__header-text" id="contactDetails_5z28edb">Contact Details</p>
137
+ </div>
138
+ <div class="fd-form-item">
139
+ <label class="fd-form-label">Mobile</label>
140
+ <a class="fd-link" href="tel:+89181818181"><span class="fd-link__content">+89181818181</span></a>
141
+ </div>
142
+ <div class="fd-form-item">
143
+ <label class="fd-form-label">Phone</label>
144
+ <a class="fd-link" href="tel:+2828282828"><span class="fd-link__content">+2828282828</span></a>
145
+ </div>
146
+ <div class="fd-form-item">
147
+ <label class="fd-form-label">Email</label>
148
+ <a class="fd-link" href="mailto:hello@fundamental.com"><span class="fd-link__content">hello@fundamental.com</span></a>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ <div class="fd-popover">
156
+ <div class="fd-popover__control">
157
+ <span
158
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
159
+ role="button"
160
+ aria-label="Avatar Sarah Parker"
161
+ title="Sarah Parker"
162
+ tabindex="0"
163
+ aria-haspopup="true"
164
+ aria-expanded="false"
165
+ onclick="onPopoverClick('popover_avatar_spbw4q');">
166
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
167
+ </span>
168
+ </div>
169
+ <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_spbw4q">
170
+ <div class="fd-quick-view">
171
+ <div class="fd-bar fd-bar--header">
172
+ <div class="fd-bar__middle">
173
+ <div class="fd-bar__element">
174
+ <h1 class="fd-title fd-title--h5 fd-title--wrap">Business Card Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto perferendis sapiente velit excepturi rerum eligendi, nihil impedit exercitationem temporibus ex autem illo. Inventore, commodi molestias hic at quod saepe aut.</h1>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="fd-quick-view__content">
180
+ <div class="fd-bar fd-bar--header-with-subheader">
181
+ <div class="fd-bar__left">
182
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="img" aria-label="Avatar Wendy Wallace" title="Wendy Wallace">WW</span>
183
+ <div class="fd-quick-view__subheader-text">
184
+ <h5 class="fd-title fd-title--h5 fd-title--wrap">Sarah Parker Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam pariatur ratione vitae doloremque numquam!</h5>
185
+ <p class="fd-quick-view__subtitle fd-quick-view__subtitle--wrap">Visual Designer Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore officiis sunt, nostrum et adipisci excepturi accusamus odit ea doloribus ducimus sapiente culpa maxime sit aliquam! Mollitia qui ducimus porro unde?</p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <div class="fd-form-group" role="group">
190
+ <div class="fd-form-group__header" aria-labelledby="contactDetails_spbw4q">
191
+ <p class="fd-form-group__header-text fd-form-group__header-text--wrap" id="contactDetails_spbw4q">Contact Details Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro beatae veritatis eum ratione, cumque rerum libero fugiat consequuntur totam fuga, assumenda quisquam vero earum excepturi, eius ullam in similique! Laborum.</p>
192
+ </div>
193
+ <div class="fd-form-item">
194
+ <label class="fd-form-label">Mobile</label>
195
+ <a class="fd-link" href="tel:+89181818181">
196
+ <span class="fd-link__content">+89181818181</span>
197
+ </a>
198
+ </div>
199
+ <div class="fd-form-item">
200
+ <label class="fd-form-label fd-form-label--wrap">Phone Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi totam doloremque ipsa natus magnam rerum repudiandae autem, beatae reprehenderit aspernatur, cupiditate aliquam doloribus quaerat maiores dolores! Rerum amet expedita vitae.</label>
201
+ <a class="fd-link" href="tel:+2828282828">
202
+ <span class="fd-link__content">
203
+ +28282828283745873657816578265782456784568256834567384563845637845637845637485387453
204
+ </span>
205
+ </a>
206
+ </div>
207
+ <div class="fd-form-item">
208
+ <label class="fd-form-label fd-form-label--wrap">Email Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo aperiam ipsa, odit similique modi accusamus! Architecto, voluptatum voluptatibus temporibus dolor aspernatur repellendus, voluptas enim nobis libero vel, exercitationem tempora iure.</label>
209
+ <a class="fd-link" href="mailto:hello@fundamental.com">
210
+ <span class="fd-link__content">
211
+ helloloremvoluptatumvoluptatibustemporibus_doloraspernaturrepellendus_remvoluptatumvoluptatibus@fundamental.com
212
+ </span>
213
+ </a>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <div class="fd-popover">
221
+ <div class="fd-popover__control">
222
+ <span
223
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
224
+ role="button"
225
+ aria-label="Avatar Christian Bow"
226
+ title="Christian Bow"
227
+ tabindex="0"
228
+ aria-haspopup="true"
229
+ aria-expanded="false"
230
+ onclick="onPopoverClick('popover_avatar_4ahzcg');">
231
+ </span>
232
+ </div>
233
+ <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_4ahzcg">
234
+ <div class="fd-quick-view">
235
+ <div class="fd-bar fd-bar--header">
236
+ <div class="fd-bar__middle">
237
+ <div class="fd-bar__element">
238
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="fd-quick-view__content">
244
+ <div class="fd-bar fd-bar--header-with-subheader">
245
+ <div class="fd-bar__left">
246
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Christian Bow" title="Christian Bow"></span>
247
+ <div class="fd-quick-view__subheader-text">
248
+ <h5 class="fd-title fd-title--h5">Christian Bow</h5>
249
+ <p class="fd-quick-view__subtitle">Marketing Manager</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <div class="fd-form-group" role="group">
254
+ <div class="fd-form-group__header" aria-labelledby="contactDetails_4ahzcg">
255
+ <p class="fd-form-group__header-text" id="contactDetails_4ahzcg">Contact Details</p>
256
+ </div>
257
+ <div class="fd-form-item">
258
+ <label class="fd-form-label">Mobile</label>
259
+ <a class="fd-link" href="tel:+89181818181">+89181818181</a>
260
+ </div>
261
+ <div class="fd-form-item">
262
+ <label class="fd-form-label">Phone</label>
263
+ <a class="fd-link" href="tel:+2828282828">+2828282828</a>
264
+ </div>
265
+ <div class="fd-form-item">
266
+ <label class="fd-form-label">Email</label>
267
+ <a class="fd-link" href="mailto:hello@fundamental.com">hello@fundamental.com</a>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ <div class="fd-popover">
275
+ <div class="fd-popover__control">
276
+ <span
277
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
278
+ role="button"
279
+ aria-label="Avatar Endy Wallace"
280
+ title="Endy Wallace"
281
+ tabindex="0"
282
+ aria-haspopup="true"
283
+ aria-expanded="false"
284
+ onclick="onPopoverClick('popover_avatar_qc1f1jf');">EW
285
+ </span>
286
+ </div>
287
+ <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_qc1f1jf">
288
+ <div class="fd-quick-view">
289
+ <div class="fd-bar fd-bar--header">
290
+ <div class="fd-bar__middle">
291
+ <div class="fd-bar__element">
292
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="fd-quick-view__content">
298
+ <div class="fd-bar fd-bar--header-with-subheader">
299
+ <div class="fd-bar__left">
300
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="img" aria-label="Avatar Endy Wallace" title="Endy Wallace">EW</span>
301
+ <div class="fd-quick-view__subheader-text">
302
+ <h5 class="fd-title fd-title--h5">Endy Wallace</h5>
303
+ <p class="fd-quick-view__subtitle">Software Developer</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ <div class="fd-form-group" role="group">
308
+ <div class="fd-form-group__header" aria-labelledby="contactDetails_qc1f1jf">
309
+ <p class="fd-form-group__header-text" id="contactDetails_qc1f1jf">Contact Details</p>
310
+ </div>
311
+ <div class="fd-form-item">
312
+ <label class="fd-form-label">Mobile</label>
313
+ <a class="fd-link" href="tel:+89181818181">+89181818181</a>
314
+ </div>
315
+ <div class="fd-form-item">
316
+ <label class="fd-form-label">Phone</label>
317
+ <a class="fd-link" href="tel:+2828282828">+2828282828</a>
318
+ </div>
319
+ <div class="fd-form-item">
320
+ <label class="fd-form-label">Email</label>
321
+ <a class="fd-link" href="mailto:hello@fundamental.com">hello@fundamental.com</a>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="fd-popover">
330
+ <div class="fd-popover__control">
331
+ <span
332
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow"
333
+ tabindex="0"
334
+ role="button"
335
+ aria-haspopup="true"
336
+ aria-expanded="false"
337
+ onclick="onPopoverClick('popover_avatar_more_aoiwjth');">+4
338
+ </span>
339
+ </div>
340
+
341
+ <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_more_aoiwjth">
342
+ <div class="fd-popover__wrapper">
343
+ <div class="fd-popover__body-header">
344
+ <div class="fd-bar fd-bar--header">
345
+ <div class="fd-bar__middle">
346
+ <div class="fd-bar__element">
347
+ <h1 class="fd-title fd-title--h5">Team Members (4)</h1>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="fd-avatar-group__overflow-body">
354
+ <span
355
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
356
+ role="button"
357
+ aria-label="Avatar Gordon Smith"
358
+ title="Gordon Smith"
359
+ tabindex="0">
360
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
361
+ </span>
362
+
363
+ <span
364
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
365
+
366
+ role="button"
367
+ alt="John Doe"
368
+ title="John Doe"
369
+ tabindex="0">
370
+ </span>
371
+
372
+ <span
373
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
374
+ role="button"
375
+ aria-label="Avatar John Moe"
376
+ title="John Moe"
377
+ tabindex="0">JM
378
+ </span>
379
+
380
+ <span
381
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
382
+ role="button"
383
+ aria-label="Avatar Joe Bloggs"
384
+ title="Joe Bloggs"
385
+ tabindex="0">JB
386
+ </span>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ ```
394
+
395
+ ## Modifiers
396
+
397
+ | Class | Description |
398
+ |-------|-------------|
399
+ | `fd-avatar-group--group-type` | Style variant |
400
+ | `fd-avatar-group--individual-type` | Style variant |
401
+ | `fd-avatar-group--lg` | Style variant |
402
+ | `fd-avatar-group--md` | Style variant |
403
+ | `fd-avatar-group--sm` | Style variant |
404
+ | `fd-avatar-group--vertical` | Style variant |
405
+ | `fd-avatar-group--xl` | Style variant |
406
+ | `fd-avatar-group--xs` | Style variant |
407
+
408
+ ## States
409
+
410
+ | Class | Description |
411
+ |-------|-------------|
412
+ | `is-active` | Active state |
413
+ | `is-compact` | Compact state |
414
+ | `is-disabled` | Disabled state |
415
+ | `is-focus` | Focus state |
416
+ | `is-hover` | Hover state |
417
+
418
+ ## BEM Elements
419
+
420
+ This component uses the following BEM elements:
421
+
422
+ - `fd-avatar-group__overflow-body`
423
+ - `fd-avatar-group__popover-control`
424
+
425
+ ## Related Components
426
+
427
+ This component works with or depends on:
428
+
429
+ - `avatar`
430
+ - `avatar-group`
431
+ - `bar`
432
+ - `button`
433
+ - `form-group`
434
+ - `form-item`
435
+ - `form-label`
436
+ - `form-layout-grid`
437
+ - `icon`
438
+ - `input`
439
+ - `layout-grid`
440
+ - `link`
441
+ - `popover`
442
+ - `quick-view`
443
+ - `title`
444
+
445
+ ## Design Tokens
446
+
447
+ Key CSS variables used by this component:
448
+
449
+ - `--fdAvatarActiveColor`
450
+ - `--fdAvatarActiveHoverColor`
451
+ - `--fdAvatarBackgroundActiveColor`
452
+ - `--fdAvatarBackgroundActiveHoverColor`
453
+ - `--fdAvatarBackgroundColor`
454
+ - `--fdAvatarBorderActiveColor`
455
+ - `--fdAvatarBorderActiveHoverColor`
456
+ - `--fdAvatarBorderColor`
457
+ - `--fdAvatarBorderHoverColor`
458
+ - `--fdAvatarColor`
459
+ - `--fdAvatarGroupItemsGap`
460
+ - `--fdAvatarGroupItemsSpacingX`
461
+ - `--fdAvatarGroupItemsSpacingY`
462
+ - `--fdAvatarGroup_Focus_Outline_Offset`
463
+ - `--fdAvatarGroup_Focus_Outline_Radius`
464
+
465
+ *...and 5 more*
466
+
467
+ ## Examples
468
+
469
+ ### IndividualType
470
+
471
+ ```html
472
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--sm">
473
+ <div class="fd-popover">
474
+ <div class="fd-popover__control">
475
+ <span
476
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
477
+ aria-label="Avatar Jason Smith"
478
+ title="Jason Smith"
479
+ tabindex="0"
480
+ aria-haspopup="true"
481
+ aria-expanded="false"
482
+ onclick="onPopoverClick('popover_avatar_5z28edb');">JS
483
+ </span>
484
+ <div class="fd-popover__body" aria-hidden="false" id="popover_avatar_5z28edb">
485
+ <div class="fd-quick-view">
486
+ <div class="fd-bar fd-bar--header">
487
+ <div class="fd-bar__middle">
488
+ <div class="fd-bar__element">
489
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="fd-quick-view__content">
495
+ <div class="fd-bar fd-bar--header-with-subheader">
496
+ <div class="fd-bar__left">
497
+ <span
498
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
499
+ role="img"
500
+ aria-label="Avatar Jason Smith">
501
+ JS
502
+ </span>
503
+ <div class="fd-quick-view__subheader-text">
504
+ <h5 class="fd-title fd-title--h5">Jason Smith</h5>
505
+ <p class="fd-quick-view__subtitle">Marketing Manager</p>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ <div class="fd-form-group" role="group">
510
+ <div class="fd-form-group__header" aria-labelledby="contactDetails_5z28edb">
511
+ <p class="fd-form-group__header-text" id="contactDetails_5z28edb">Contact Details</p>
512
+ </div>
513
+ <div class="fd-form-item">
514
+ <label class="fd-form-label">Mobile</label>
515
+ <a class="fd-link" href="tel:+89181818181"><span class="fd-link__content">+89181818181</span></a>
516
+ </div>
517
+ <div class="fd-form-item">
518
+ <label class="fd-form-label">Phone</label>
519
+ <a class="fd-link" href="tel:+2828282828"><span class="fd-link__content">+2828282828</span></a>
520
+ </div>
521
+ <div class="fd-form-item">
522
+ <label class="fd-form-label">Email</label>
523
+ <a class="fd-link" href="mailto:hello@fundamental.com"><span class="fd-link__content">hello@fundamental.com</span></a>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ <div class="fd-popover">
531
+ <div class="fd-popover__control">
532
+ <span
533
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
534
+ role="button"
535
+ aria-label="Avatar Sarah Parker"
536
+ title="Sarah Parker"
537
+ tabindex="0"
538
+ aria-haspopup="true"
539
+ aria-expanded="false"
540
+ onclick="onPopoverClick('popover_avatar_spbw4q');">
541
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
542
+ </span>
543
+ </div>
544
+ <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_spbw4q">
545
+ <div class="fd-quick-view">
546
+ <div class="fd-bar fd-bar--header">
547
+ <div class="fd-bar__middle">
548
+ <div class="fd-bar__element">
549
+ <h1 class="fd-title fd-title--h5 fd-title--wrap">Business Card Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto perferendis sapiente velit excepturi rerum eligendi, nihil impedit exercitationem temporibus ex autem illo. Inventore, commodi molestias hic at quod saepe aut.</h1>
550
+ </div>
551
+ </div>
552
+ </div>
553
+
554
+ <div class="fd-quick-view__content">
555
+ <div class="fd-bar fd-bar--header-with-subheader">
556
+ <div class="fd-bar__left">
557
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="img" aria-label="Avatar Wendy Wallace" title="Wendy Wallace">WW</span>
558
+ <div class="fd-quick-view__subheader-text">
559
+ <h5 class="fd-title fd-title--h5 fd-title--wrap">Sarah Parker Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam pariatur ratione vitae doloremque numquam!</h5>
560
+ <p class="fd-quick-view__subtitle fd-quick-view__subtitle--wrap">Visual Designer Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore officiis sunt, nostrum et adipisci excepturi accusamus odit ea doloribus ducimus sapiente culpa maxime sit aliquam! Mollitia qui ducimus porro unde?</p>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ <div class="fd-form-group" role="group">
565
+ <div class="fd-form-group__header" aria-labelledby="contactDetails_spbw4q">
566
+ <p class="fd-form-group__header-text fd-form-group__header-text--wrap" id="contactDetails_spbw4q">Contact Details Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro beatae veritatis eum ratione, cumque rerum libero fugiat consequuntur totam fuga, assumenda quisquam vero earum excepturi, eius ullam in similique! Laborum.</p>
567
+ </div>
568
+ <div class="fd-form-item">
569
+ <label class="fd-form-label">Mobile</label>
570
+ <a class="fd-link" href="tel:+89181818181">
571
+ <span class="fd-link__content">+89181818181</span>
572
+ </a>
573
+ </div>
574
+ <div class="fd-form-item">
575
+ <label class="fd-form-label fd-form-label--wrap">Phone Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi totam doloremque ipsa natus magnam rerum repudiandae autem, beatae reprehenderit aspernatur, cupiditate aliquam doloribus quaerat maiores dolores! Rerum amet expedita vitae.</label>
576
+ <a class="fd-link" href="tel:+2828282828">
577
+ <span class="fd-link__content">
578
+ +28282828283745873657816578265782456784568256834567384563845637845637845637485387453
579
+ </span>
580
+ </a>
581
+ </div>
582
+ <div class="fd-form-item">
583
+ <label class="fd-form-label fd-form-label--wrap">Email Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo aperiam ipsa, odit similique modi accusamus! Architecto, voluptatum voluptatibus temporibus dolor aspernatur repellendus, voluptas enim nobis libero vel, exercitationem tempora iure.</label>
584
+ <a class="fd-link" href="mailto:hello@fundamental.com">
585
+ <span class="fd-link__content">
586
+ helloloremvoluptatumvoluptatibustemporibus_doloraspernaturrepellendus_remvoluptatumvoluptatibus@fundamental.com
587
+ </span>
588
+ </a>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ <div class="fd-popover">
596
+ <div class="fd-popover__control">
597
+ <span
598
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
599
+ role="button"
600
+ aria-label="Avatar Christian Bow"
601
+ title="Christian Bow"
602
+ tabindex="0"
603
+ aria-haspopup="true"
604
+ aria-expanded="false"
605
+ onclick="onPopoverClick('popover_avatar_4ahzcg');">
606
+ </span>
607
+ </div>
608
+ <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_4ahzcg">
609
+ <div class="fd-quick-view">
610
+ <div class="fd-bar fd-bar--header">
611
+ <div class="fd-bar__middle">
612
+ <div class="fd-bar__element">
613
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <div class="fd-quick-view__content">
619
+ <div class="fd-bar fd-bar--header-with-subheader">
620
+ <div class="fd-bar__left">
621
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Christian Bow" title="Christian Bow"></span>
622
+ <div class="fd-quick-view__subheader-text">
623
+ <h5 class="fd-title fd-title--h5">Christian Bow</h5>
624
+ <p class="fd-quick-view__subtitle">Marketing Manager</p>
625
+ </div>
626
+ </div>
627
+ </div>
628
+ <div class="fd-form-group" role="group">
629
+ <div class="fd-form-group__header" aria-labelledby="contactDetails_4ahzcg">
630
+ <p class="fd-form-group__header-text" id="contactDetails_4ahzcg">Contact Details</p>
631
+ </div>
632
+ <div class="fd-form-item">
633
+ <label class="fd-form-label">Mobile</label>
634
+ <a class="fd-link" href="tel:+89181818181">+89181818181</a>
635
+ </div>
636
+ <div class="fd-form-item">
637
+ <label class="fd-form-label">Phone</label>
638
+ <a class="fd-link" href="tel:+2828282828">+2828282828</a>
639
+ </div>
640
+ <div class="fd-form-item">
641
+ <label class="fd-form-label">Email</label>
642
+ <a class="fd-link" href="mailto:hello@fundamental.com">hello@fundamental.com</a>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ <div class="fd-popover">
650
+ <div class="fd-popover__control">
651
+ <span
652
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
653
+ role="button"
654
+ aria-label="Avatar Endy Wallace"
655
+ title="Endy Wallace"
656
+ tabindex="0"
657
+ aria-haspopup="true"
658
+ aria-expanded="false"
659
+ onclick="onPopoverClick('popover_avatar_qc1f1jf');">EW
660
+ </span>
661
+ </div>
662
+ <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_qc1f1jf">
663
+ <div class="fd-quick-view">
664
+ <div class="fd-bar fd-bar--header">
665
+ <div class="fd-bar__middle">
666
+ <div class="fd-bar__element">
667
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
668
+ </div>
669
+ </div>
670
+ </div>
671
+
672
+ <div class="fd-quick-view__content">
673
+ <div class="fd-bar fd-bar--header-with-subheader">
674
+ <div class="fd-bar__left">
675
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="img" aria-label="Avatar Endy Wallace" title="Endy Wallace">EW</span>
676
+ <div class="fd-quick-view__subheader-text">
677
+ <h5 class="fd-title fd-title--h5">Endy Wallace</h5>
678
+ <p class="fd-quick-view__subtitle">Software Developer</p>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ <div class="fd-form-group" role="group">
683
+ <div class="fd-form-group__header" aria-labelledby="contactDetails_qc1f1jf">
684
+ <p class="fd-form-group__header-text" id="contactDetails_qc1f1jf">Contact Details</p>
685
+ </div>
686
+ <div class="fd-form-item">
687
+ <label class="fd-form-label">Mobile</label>
688
+ <a class="fd-link" href="tel:+89181818181">+89181818181</a>
689
+ </div>
690
+ <div class="fd-form-item">
691
+ <label class="fd-form-label">Phone</label>
692
+ <a class="fd-link" href="tel:+2828282828">+2828282828</a>
693
+ </div>
694
+ <div class="fd-form-item">
695
+ <label class="fd-form-label">Email</label>
696
+ <a class="fd-link" href="mailto:hello@fundamental.com">hello@fundamental.com</a>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+
704
+ <div class="fd-popover">
705
+ <div class="fd-popover__control">
706
+ <span
707
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow"
708
+ tabindex="0"
709
+ role="button"
710
+ aria-haspopup="true"
711
+ aria-expanded="false"
712
+ onclick="onPopoverClick('popover_avatar_more_aoiwjth');">+4
713
+ </span>
714
+ </div>
715
+
716
+ <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_more_aoiwjth">
717
+ <div class="fd-popover__wrapper">
718
+ <div class="fd-popover__body-header">
719
+ <div class="fd-bar fd-bar--header">
720
+ <div class="fd-bar__middle">
721
+ <div class="fd-bar__element">
722
+ <h1 class="fd-title fd-title--h5">Team Members (4)</h1>
723
+ </div>
724
+ </div>
725
+ </div>
726
+ </div>
727
+
728
+ <div class="fd-avatar-group__overflow-body">
729
+ <span
730
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
731
+ role="button"
732
+ aria-label="Avatar Gordon Smith"
733
+ title="Gordon Smith"
734
+ tabindex="0">
735
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
736
+ </span>
737
+
738
+ <span
739
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
740
+
741
+ role="button"
742
+ alt="John Doe"
743
+ title="John Doe"
744
+ tabindex="0">
745
+ </span>
746
+
747
+ <span
748
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
749
+ role="button"
750
+ aria-label="Avatar John Moe"
751
+ title="John Moe"
752
+ tabindex="0">JM
753
+ </span>
754
+
755
+ <span
756
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
757
+ role="button"
758
+ aria-label="Avatar Joe Bloggs"
759
+ title="Joe Bloggs"
760
+ tabindex="0">JB
761
+ </span>
762
+ </div>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+ </div>
768
+ ```
769
+
770
+ ### IndividualTypeVertical
771
+
772
+ ```html
773
+ <div class="is-compact">
774
+
775
+ <div dir="ltr">
776
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--sm fd-avatar-group--vertical">
777
+ <div class="fd-popover">
778
+ <div class="fd-popover__control">
779
+ <span
780
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
781
+ role="button"
782
+ aria-label="Avatar Jason Smith"
783
+ title="Jason Smith"
784
+ tabindex="0"
785
+ aria-haspopup="true"
786
+ aria-expanded="false"
787
+ onclick="onPopoverClick('popover_avatar_5z28edb-v');">JS
788
+ </span>
789
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_5z28edb-v">
790
+ <div class="fd-quick-view">
791
+ <div class="fd-bar fd-bar--header">
792
+ <div class="fd-bar__middle">
793
+ <div class="fd-bar__element">
794
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
795
+ </div>
796
+ </div>
797
+ </div>
798
+
799
+ <div class="fd-quick-view__content">
800
+ <div class="fd-bar fd-bar--header-with-subheader">
801
+ <div class="fd-bar__left">
802
+ <span
803
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
804
+ role="img"
805
+ aria-label="Avatar Jason Smith">JS
806
+ </span>
807
+ <div class="fd-quick-view__subheader-text">
808
+ <h5 class="fd-title fd-title--h5">Jason Smith</h5>
809
+ <p class="fd-quick-view__subtitle">Marketing Manager</p>
810
+ </div>
811
+ </div>
812
+ </div>
813
+ <div class="fd-form-group" role="group">
814
+ <div class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding" aria-labelledby="contactDetails_5z28edb-v">
815
+ <h4 id="contactDetails_5z28edb-v">Contact Details</h4>
816
+ </div>
817
+ <div class="fd-form-item">
818
+ <label class="fd-form-label">Mobile</label>
819
+ <a class="fd-link" href="tel:+89181818181"><span class="fd-link__content">+89181818181</span></a>
820
+ </div>
821
+ <div class="fd-form-item">
822
+ <label class="fd-form-label">Phone</label>
823
+ <a class="fd-link" href="tel:+2828282828"><span class="fd-link__content">+2828282828</span></a>
824
+ </div>
825
+ <div class="fd-form-item">
826
+ <label class="fd-form-label">Email</label>
827
+ <a class="fd-link" href="mailto:hello@fundamental.com"><span class="fd-link__content">hello@fundamental.com</span></a>
828
+ </div>
829
+ </div>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ <div class="fd-popover">
835
+ <div class="fd-popover__control">
836
+ <span
837
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
838
+ role="button"
839
+ aria-label="Avatar Sarah Parker"
840
+ title="Sarah Parker"
841
+ tabindex="0"
842
+ aria-haspopup="true"
843
+ aria-expanded="false"
844
+ onclick="onPopoverClick('popover_avatar_spbw4q-v');">
845
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
846
+ </span>
847
+ </div>
848
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_spbw4q-v">
849
+ <div class="fd-quick-view">
850
+ <div class="fd-bar fd-bar--header">
851
+ <div class="fd-bar__middle">
852
+ <div class="fd-bar__element">
853
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
854
+ </div>
855
+ </div>
856
+ </div>
857
+
858
+ <div class="fd-quick-view__content">
859
+ <div class="fd-bar fd-bar--header-with-subheader">
860
+ <div class="fd-bar__left">
861
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="img" aria-label="Avatar Sarah Parker">SP</span>
862
+ <div class="fd-quick-view__subheader-text">
863
+ <h5 class="fd-title fd-title--h5">Sarah Parker</h5>
864
+ <p class="fd-quick-view__subtitle">Visual Designer</p>
865
+ </div>
866
+ </div>
867
+ </div>
868
+ <div class="fd-form-group" role="group">
869
+ <div class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding" aria-labelledby="contactDetails_spbw4q-v">
870
+ <h4 class="fd-form-group__header-text" id="contactDetails_spbw4q-v">Contact Details</h4>
871
+ </div>
872
+ <div class="fd-form-item">
873
+ <label class="fd-form-label">Mobile</label>
874
+ <a class="fd-link" href="tel:+89181818181">+89181818181</a>
875
+ </div>
876
+ <div class="fd-form-item">
877
+ <label class="fd-form-label">Phone</label>
878
+ <a class="fd-link" href="tel:+2828282828">+2828282828</a>
879
+ </div>
880
+ <div class="fd-form-item">
881
+ <label class="fd-form-label">Email</label>
882
+ <a class="fd-link" href="mailto:hello@fundamental.com">hello@fundamental.com</a>
883
+ </div>
884
+ </div>
885
+ </div>
886
+ </div>
887
+ </div>
888
+ </div>
889
+ <div class="fd-popover">
890
+ <div class="fd-popover__control">
891
+ <span
892
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
893
+ role="button"
894
+ alt="Portrait of Christian Bow"
895
+ aria-label="Avatar Christian Bow"
896
+ title="Christian Bow"
897
+ tabindex="0"
898
+ aria-haspopup="true"
899
+ aria-expanded="false"
900
+ onclick="onPopoverClick('popover_avatar_4ahzcg-v');">
901
+ </span>
902
+ </div>
903
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_4ahzcg-v">
904
+ <div class="fd-quick-view">
905
+ <div class="fd-bar fd-bar--header">
906
+ <div class="fd-bar__middle">
907
+ <div class="fd-bar__element">
908
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
909
+ </div>
910
+ </div>
911
+ </div>
912
+
913
+ <div class="fd-quick-view__content">
914
+ <div class="fd-bar fd-bar--header-with-subheader">
915
+ <div class="fd-bar__left">
916
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Portrait of Christian Bow"></span>
917
+ <div class="fd-quick-view__subheader-text">
918
+ <h5 class="fd-title fd-title--h5">Christian Bow</h5>
919
+ <p class="fd-quick-view__subtitle">Marketing Manager</p>
920
+ </div>
921
+ </div>
922
+ </div>
923
+ <div class="fd-form-group" role="group">
924
+ <div class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding" aria-labelledby="contactDetails_4ahzcg-v">
925
+ <h4 id="contactDetails_4ahzcg-v">Contact Details</h4>
926
+ </div>
927
+ <div class="fd-form-item">
928
+ <label class="fd-form-label">Mobile</label>
929
+ <a class="fd-link" href="tel:+89181818181">+89181818181</a>
930
+ </div>
931
+ <div class="fd-form-item">
932
+ <label class="fd-form-label">Phone</label>
933
+ <a class="fd-link" href="tel:+2828282828">+2828282828</a>
934
+ </div>
935
+ <div class="fd-form-item">
936
+ <label class="fd-form-label">Email</label>
937
+ <a class="fd-link" href="mailto:hello@fundamental.com">hello@fundamental.com</a>
938
+ </div>
939
+ </div>
940
+ </div>
941
+ </div>
942
+ </div>
943
+ </div>
944
+ <div class="fd-popover">
945
+ <div class="fd-popover__control">
946
+ <span
947
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
948
+ role="button"
949
+ aria-label="Avatar Endy Wallace"
950
+ title="Endy Wallace"
951
+ tabindex="0"
952
+ aria-haspopup="true"
953
+ aria-expanded="false"
954
+ onclick="onPopoverClick('popover_avatar_qc1f1jf-v');">EW
955
+ </span>
956
+ </div>
957
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_qc1f1jf-v">
958
+ <div class="fd-quick-view">
959
+ <div class="fd-bar fd-bar--header">
960
+ <div class="fd-bar__middle">
961
+ <div class="fd-bar__element">
962
+ <h1 class="fd-title fd-title--h5">Business Card</h1>
963
+ </div>
964
+ </div>
965
+ </div>
966
+
967
+ <div class="fd-quick-view__content">
968
+ <div class="fd-bar fd-bar--header-with-subheader">
969
+ <div class="fd-bar__left">
970
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="img" aria-label="Avatar Endy Wallace">EW</span>
971
+ <div class="fd-quick-view__subheader-text">
972
+ <h5 class="fd-title fd-title--h5">Endy Wallace</h5>
973
+ <p class="fd-quick-view__subtitle">Software Developer</p>
974
+ </div>
975
+ </div>
976
+ </div>
977
+ <div class="fd-form-group" role="group">
978
+ <div class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding" aria-labelledby="contactDetails_qc1f1jf-v">
979
+ <h4 id="contactDetails_qc1f1jf-v">Contact Details</h4>
980
+ </div>
981
+ <div class="fd-form-item">
982
+ <label class="fd-form-label">Mobile</label>
983
+ <a class="fd-link" href="tel:+89181818181">+89181818181</a>
984
+ </div>
985
+ <div class="fd-form-item">
986
+ <label class="fd-form-label">Phone</label>
987
+ <a class="fd-link" href="tel:+2828282828">+2828282828</a>
988
+ </div>
989
+ <div class="fd-form-item">
990
+ <label class="fd-form-label">Email</label>
991
+ <a class="fd-link" href="mailto:hello@fundamental.com">hello@fundamental.com</a>
992
+ </div>
993
+ </div>
994
+ </div>
995
+ </div>
996
+ </div>
997
+ </div>
998
+
999
+ <div class="fd-popover">
1000
+ <div class="fd-popover__control">
1001
+ <span
1002
+ class="fd-avatar fd-avatar--accent-color-2 fd-avatar--sm fd-avatar--circle fd-avatar--overflow"
1003
+ tabindex="0"
1004
+ role="button"
1005
+ aria-haspopup="true"
1006
+ aria-expanded="false"
1007
+ onclick="onPopoverClick('popover_avatar_more_aoiwjth-v');">+4
1008
+ </span>
1009
+ </div>
1010
+
1011
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar_more_aoiwjth-v">
1012
+ <div class="fd-popover__wrapper">
1013
+ <div class="fd-popover__body-header">
1014
+ <div class="fd-bar fd-bar--header">
1015
+ <div class="fd-bar__middle">
1016
+ <div class="fd-bar__element">
1017
+ <h1 class="fd-title fd-title--h5">Team Members (4)</h1>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+
1023
+ <div class="fd-avatar-group__overflow-body">
1024
+ <span
1025
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1026
+ role="button"
1027
+ aria-label="Avatar Gordon Smith"
1028
+ title="Gordon Smith"
1029
+ tabindex="0">
1030
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1031
+ </span>
1032
+
1033
+ <span
1034
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1035
+
1036
+ role="button"
1037
+ alt="Portrait of Adam Doe"
1038
+ title="Adam Doe"
1039
+ tabindex="0">
1040
+ </span>
1041
+
1042
+ <span
1043
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1044
+ role="button"
1045
+ aria-label="Avatar Mandy Moore"
1046
+ title="Mandy Moore"
1047
+ tabindex="0">JM
1048
+ </span>
1049
+
1050
+ <span
1051
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1052
+ role="button"
1053
+ aria-label="Avatar Jimi Bloggs"
1054
+ title="Jimi Bloggs"
1055
+ tabindex="0">JB
1056
+ </span>
1057
+ </div>
1058
+ </div>
1059
+ </div>
1060
+ </div>
1061
+ </div>
1062
+ </div>
1063
+
1064
+ </div>
1065
+ </div>
1066
+ ```
1067
+
1068
+ ### GroupType
1069
+
1070
+ ```html
1071
+ <div class="fd-popover">
1072
+ <div class="fd-popover__control fd-avatar-group__popover-control"
1073
+ role="button"
1074
+ tabindex="0"
1075
+ aria-label="Has popup type dialog conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list"
1076
+ aria-haspopup="true"
1077
+ aria-expanded="false"
1078
+ onclick="onPopoverClick('popover_avatar-group_tztuj');">
1079
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md">
1080
+ <span
1081
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1082
+ role="img"
1083
+ aria-label="Wendy Wallace">WW
1084
+ </span>
1085
+
1086
+ <span
1087
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1088
+ role="img"
1089
+ aria-label="Simon Drew">
1090
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1091
+ </span>
1092
+
1093
+ <span
1094
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1095
+ role="img"
1096
+ alt="Portrait of Brad Coehn">
1097
+ </span>
1098
+
1099
+ <span
1100
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1101
+ role="img"
1102
+ aria-label="Endy Wallace">EW
1103
+ </span>
1104
+
1105
+ <span
1106
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1107
+ role="img"
1108
+ aria-label="Whitney Copper">
1109
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1110
+ </span>
1111
+
1112
+ <span
1113
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1114
+
1115
+ role="img"
1116
+ alt="Portrait of John Doe">
1117
+ </span>
1118
+
1119
+ <span
1120
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow"
1121
+ role="button"
1122
+ tabindex="-1">+8
1123
+ </span>
1124
+ </div>
1125
+
1126
+ <div class="fd-popover__body" aria-hidden="false" id="popover_avatar-group_tztuj">
1127
+ <div class="fd-popover__wrapper">
1128
+ <div class="fd-popover__body-header">
1129
+ <div class="fd-bar fd-bar--header">
1130
+ <div class="fd-bar__middle">
1131
+ <div class="fd-bar__element">
1132
+ <h1 class="fd-title fd-title--h5">Team Members (14)</h1>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ </div>
1137
+ <div class="fd-avatar-group__overflow-body">
1138
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Wendy Wallace">WW</span>
1139
+
1140
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Sarah Smith">
1141
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
1142
+ </span>
1143
+
1144
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Portrait of Alex Cardigan"></span>
1145
+
1146
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Endy Wallace">EW</span>
1147
+
1148
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Whitney Bow">
1149
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
1150
+ </span>
1151
+
1152
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Portrait of Maria Berrigton"></span>
1153
+
1154
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Andy Wallace">AW</span>
1155
+
1156
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="John Carter">
1157
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
1158
+ </span>
1159
+
1160
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Portrait of Brian Tracey"></span>
1161
+
1162
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Jared Moe">JM</span>
1163
+
1164
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Ben Bloggs">BB</span>
1165
+
1166
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Simon Swan">
1167
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
1168
+ </span>
1169
+
1170
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Portrait of Mike Simons"></span>
1171
+
1172
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Fred Bloggs">FB</span>
1173
+
1174
+ <span class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="img" aria-label="Cameran Alleman">CA</span>
1175
+ </div>
1176
+ </div>
1177
+ </div>
1178
+ </div>
1179
+
1180
+ <h4>XS size</h4>
1181
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xs">
1182
+ <span
1183
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
1184
+ role="img"
1185
+ aria-label="Wendy Wallace">WW
1186
+ </span>
1187
+
1188
+ <span
1189
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
1190
+ role="img"
1191
+ aria-label="Simon Drew">
1192
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1193
+ </span>
1194
+
1195
+ <span
1196
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1197
+ role="img"
1198
+ alt="Portrait of Brad Coehn">
1199
+ </span>
1200
+
1201
+ <span
1202
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
1203
+ role="img"
1204
+ aria-label="Endy Wallace">EW
1205
+ </span>
1206
+
1207
+ <span
1208
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
1209
+ role="img"
1210
+ aria-label="Whitney Copper">
1211
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1212
+ </span>
1213
+
1214
+ <span
1215
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1216
+
1217
+ role="img"
1218
+ alt="Portrait of John Doe">
1219
+ </span>
1220
+
1221
+ <span
1222
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--overflow"
1223
+ role="button"
1224
+ tabindex="-1">+8
1225
+ </span>
1226
+ </div>
1227
+
1228
+ <h4>SM size</h4>
1229
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--sm">
1230
+ <span
1231
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1232
+ role="img"
1233
+ aria-label="Wendy Wallace">WW
1234
+ </span>
1235
+
1236
+ <span
1237
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1238
+ role="img"
1239
+ aria-label="Simon Drew">
1240
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1241
+ </span>
1242
+
1243
+ <span
1244
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1245
+ role="img"
1246
+ alt="Portrait of Brad Coehn">
1247
+ </span>
1248
+
1249
+ <span
1250
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1251
+ role="img"
1252
+ aria-label="Endy Wallace">EW
1253
+ </span>
1254
+
1255
+ <span
1256
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1257
+ role="img"
1258
+ aria-label="Whitney Copper">
1259
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1260
+ </span>
1261
+
1262
+ <span
1263
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1264
+
1265
+ role="img"
1266
+ alt="Portrait of John Doe">
1267
+ </span>
1268
+
1269
+ <span
1270
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow"
1271
+ role="button"
1272
+ tabindex="-1">+8
1273
+ </span>
1274
+ </div>
1275
+
1276
+ <h4>MD size</h4>
1277
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md">
1278
+ <span
1279
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1280
+ role="img"
1281
+ aria-label="Wendy Wallace">WW
1282
+ </span>
1283
+
1284
+ <span
1285
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1286
+ role="img"
1287
+ aria-label="Simon Drew">
1288
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1289
+ </span>
1290
+
1291
+ <span
1292
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1293
+ role="img"
1294
+ alt="Portrait of Brad Coehn">
1295
+ </span>
1296
+
1297
+ <span
1298
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1299
+ role="img"
1300
+ aria-label="Endy Wallace">EW
1301
+ </span>
1302
+
1303
+ <span
1304
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1305
+ role="img"
1306
+ aria-label="Whitney Copper">
1307
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1308
+ </span>
1309
+
1310
+ <span
1311
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1312
+
1313
+ role="img"
1314
+ alt="Portrait of John Doe">
1315
+ </span>
1316
+
1317
+ <span
1318
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow"
1319
+ role="button"
1320
+ tabindex="-1">+8
1321
+ </span>
1322
+ </div>
1323
+
1324
+ <h4>LG size</h4>
1325
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg">
1326
+ <span
1327
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1328
+ role="img"
1329
+ aria-label="Wendy Wallace">WW
1330
+ </span>
1331
+
1332
+ <span
1333
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1334
+ role="img"
1335
+ aria-label="Simon Drew">
1336
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1337
+ </span>
1338
+
1339
+ <span
1340
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1341
+ role="img"
1342
+ alt="Portrait of Brad Coehn">
1343
+ </span>
1344
+
1345
+ <span
1346
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1347
+ role="img"
1348
+ aria-label="Endy Wallace">EW
1349
+ </span>
1350
+
1351
+ <span
1352
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1353
+ role="img"
1354
+ aria-label="Whitney Copper">
1355
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1356
+ </span>
1357
+
1358
+ <span
1359
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1360
+
1361
+ role="img"
1362
+ alt="Portrait of John Doe">
1363
+ </span>
1364
+
1365
+ <span
1366
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow"
1367
+ role="button"
1368
+ tabindex="-1">+8
1369
+ </span>
1370
+ </div>
1371
+
1372
+ <h4>XL size</h4>
1373
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xl">
1374
+ <span
1375
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
1376
+ role="img"
1377
+ aria-label="Wendy Wallace">WW
1378
+ </span>
1379
+
1380
+ <span
1381
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
1382
+ role="img"
1383
+ aria-label="Simon Drew">
1384
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1385
+ </span>
1386
+
1387
+ <span
1388
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1389
+ role="img"
1390
+ alt="Portrait of Brad Coehn">
1391
+ </span>
1392
+
1393
+ <span
1394
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
1395
+ role="img"
1396
+ aria-label="Endy Wallace">EW
1397
+ </span>
1398
+
1399
+ <span
1400
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
1401
+ role="img"
1402
+ aria-label="Whitney Copper">
1403
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1404
+ </span>
1405
+
1406
+ <span
1407
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1408
+
1409
+ role="img"
1410
+ alt="Portrait of John Doe">
1411
+ </span>
1412
+
1413
+ <span
1414
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--overflow"
1415
+ role="button"
1416
+ tabindex="-1">+8
1417
+ </span>
1418
+ </div>
1419
+ ```
1420
+
1421
+ ### GroupTypeVertical
1422
+
1423
+ ```html
1424
+ <div class="fd-popover">
1425
+ <div class="fd-popover__control fd-avatar-group__popover-control"
1426
+ role="button"
1427
+ tabindex="0"
1428
+ aria-label="Conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list"
1429
+ aria-haspopup="true"
1430
+ aria-expanded="false"
1431
+ onclick="onPopoverClick('popover_avatar-group_tztuj-v');">
1432
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg fd-avatar-group--vertical">
1433
+ <span
1434
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1435
+ role="img"
1436
+ aria-label="Wendy Wallace">WW
1437
+ </span>
1438
+
1439
+ <span
1440
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1441
+ role="img"
1442
+ aria-label="Simon Dane">
1443
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1444
+ </span>
1445
+
1446
+ <span
1447
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1448
+ role="img"
1449
+ alt="Portrait of Michael Smith">
1450
+ </span>
1451
+
1452
+ <span
1453
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1454
+ role="img"
1455
+ aria-label="Endy Wallace">EW
1456
+ </span>
1457
+
1458
+ <span
1459
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1460
+ role="img"
1461
+ aria-label="Whitney Copper">
1462
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1463
+ </span>
1464
+
1465
+ <span
1466
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1467
+
1468
+ role="img"
1469
+ alt="Portrait of James Johnson">
1470
+ </span>
1471
+
1472
+ <span
1473
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow"
1474
+ role="button"
1475
+ tabindex="-1">+8
1476
+ </span>
1477
+ </div>
1478
+
1479
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar-group_tztuj-v">
1480
+ <div class="fd-popover__wrapper">
1481
+ <div class="fd-popover__body-header">
1482
+ <div class="fd-bar fd-bar--header">
1483
+ <div class="fd-bar__middle">
1484
+ <div class="fd-bar__element">
1485
+ <h1 class="fd-title fd-title--h5">Team Members (14)</h1>
1486
+ </div>
1487
+ </div>
1488
+ </div>
1489
+ </div>
1490
+ <div class="fd-avatar-group__overflow-body">
1491
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Wendy Wallace">WW</span>
1492
+
1493
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Sarah Smith">
1494
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
1495
+ </span>
1496
+
1497
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Portrait of William Smith"></span>
1498
+
1499
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Endy Wallace" title="Endy Wallace">EW</span>
1500
+
1501
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Whitney Bow">
1502
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
1503
+ </span>
1504
+
1505
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Portrait of Mitch Walters"></span>
1506
+
1507
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Andy Wallace">AW</span>
1508
+
1509
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="John Carter">
1510
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
1511
+ </span>
1512
+
1513
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Portrait of Melanie Burke"></span>
1514
+
1515
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="John Moe">JM</span>
1516
+
1517
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Ben Bloggs">BB</span>
1518
+
1519
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Simon Swan">
1520
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
1521
+ </span>
1522
+
1523
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" role="img" alt="Portrait of Maria Caffrey"></span>
1524
+
1525
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Fred Bloggs">FB</span>
1526
+
1527
+ <span class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="img" aria-label="Jan Alleman">JA</span>
1528
+ </div>
1529
+ </div>
1530
+ </div>
1531
+ </div>
1532
+
1533
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xs fd-avatar-group--vertical" role="button" tabindex="0" aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1534
+ <span
1535
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
1536
+ role="img"
1537
+ aria-label="Wendy Wallace">WW
1538
+ </span>
1539
+
1540
+ <span
1541
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
1542
+ role="img"
1543
+ aria-label="Simon Dane">
1544
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1545
+ </span>
1546
+
1547
+ <span
1548
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1549
+ role="img"
1550
+ alt="Portrait of Michael Smith">
1551
+ </span>
1552
+
1553
+ <span
1554
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
1555
+ role="img"
1556
+ aria-label="Endy Wallace">EW
1557
+ </span>
1558
+
1559
+ <span
1560
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
1561
+ role="img"
1562
+ aria-label="Whitney Copper">
1563
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1564
+ </span>
1565
+
1566
+ <span
1567
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1568
+
1569
+ role="img"
1570
+ alt="Portrait of James Johnson">
1571
+ </span>
1572
+
1573
+ <span
1574
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--overflow"
1575
+ role="button"
1576
+ tabindex="-1">+8
1577
+ </span>
1578
+
1579
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--sm fd-avatar-group--vertical" role="button" tabindex="0" aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1580
+ <span
1581
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1582
+ role="img"
1583
+ aria-label="Wendy Wallace">WW
1584
+ </span>
1585
+
1586
+ <span
1587
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1588
+ role="img"
1589
+ aria-label="Simon Dane">
1590
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1591
+ </span>
1592
+
1593
+ <span
1594
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1595
+ role="img"
1596
+ alt="Portrait of Michael Smith">
1597
+ </span>
1598
+
1599
+ <span
1600
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1601
+ role="img"
1602
+ aria-label="Endy Wallace">EW
1603
+ </span>
1604
+
1605
+ <span
1606
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
1607
+ role="img"
1608
+ aria-label="Whitney Copper">
1609
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1610
+ </span>
1611
+
1612
+ <span
1613
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1614
+
1615
+ role="img"
1616
+ alt="Portrait of James Johnson">
1617
+ </span>
1618
+
1619
+ <span
1620
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow"
1621
+ role="button"
1622
+ tabindex="-1">+8
1623
+ </span>
1624
+ </div>
1625
+
1626
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md fd-avatar-group--vertical" role="button" tabindex="0" aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1627
+ <span
1628
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1629
+ role="img"
1630
+ aria-label="Wendy Wallace">WW
1631
+ </span>
1632
+
1633
+ <span
1634
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1635
+ role="img"
1636
+ aria-label="Simon Dane">
1637
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1638
+ </span>
1639
+
1640
+ <span
1641
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1642
+ role="img"
1643
+ alt="Portrait of Michael Smith">
1644
+ </span>
1645
+
1646
+ <span
1647
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1648
+ role="img"
1649
+ aria-label="Endy Wallace">EW
1650
+ </span>
1651
+
1652
+ <span
1653
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1654
+ role="img"
1655
+ aria-label="Whitney Copper">
1656
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1657
+ </span>
1658
+
1659
+ <span
1660
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1661
+
1662
+ role="img"
1663
+ alt="Portrait of James Johnson">
1664
+ </span>
1665
+
1666
+ <span
1667
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow"
1668
+ role="button"
1669
+ tabindex="-1">+8
1670
+ </span>
1671
+ </div>
1672
+
1673
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--lg fd-avatar-group--vertical" role="button" tabindex="0" aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1674
+ <span
1675
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1676
+ role="img"
1677
+ aria-label="Wendy Wallace">WW
1678
+ </span>
1679
+
1680
+ <span
1681
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1682
+ role="img"
1683
+ aria-label="Simon Dane">
1684
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1685
+ </span>
1686
+
1687
+ <span
1688
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1689
+ role="img"
1690
+ alt="Portrait of Michael Smith">
1691
+ </span>
1692
+
1693
+ <span
1694
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1695
+ role="img"
1696
+ aria-label="Endy Wallace">EW
1697
+ </span>
1698
+
1699
+ <span
1700
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
1701
+ role="img"
1702
+ aria-label="Whitney Copper">
1703
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1704
+ </span>
1705
+
1706
+ <span
1707
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1708
+
1709
+ role="img"
1710
+ alt="Portrait of James Johnson">
1711
+ </span>
1712
+
1713
+ <span
1714
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow"
1715
+ role="button"
1716
+ tabindex="-1">+8
1717
+ </span>
1718
+ </div>
1719
+
1720
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--xl fd-avatar-group--vertical" role="button" tabindex="0" aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1721
+ <span
1722
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
1723
+ role="img"
1724
+ aria-label="Wendy Wallace">WW
1725
+ </span>
1726
+
1727
+ <span
1728
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
1729
+ role="img"
1730
+ aria-label="Simon Dane">
1731
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1732
+ </span>
1733
+
1734
+ <span
1735
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1736
+ role="img"
1737
+ alt="Portrait of Michael Smith">
1738
+ </span>
1739
+
1740
+ <span
1741
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
1742
+ role="img"
1743
+ aria-label="Endy Wallace">EW
1744
+ </span>
1745
+
1746
+ <span
1747
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
1748
+ role="img"
1749
+ aria-label="Whitney Copper">
1750
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1751
+ </span>
1752
+
1753
+ <span
1754
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1755
+
1756
+ role="img"
1757
+ alt="Portrait of James Johnson">
1758
+ </span>
1759
+
1760
+ <span
1761
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--overflow"
1762
+ role="button"
1763
+ tabindex="-1">+8
1764
+ </span>
1765
+ </div>
1766
+ </div>
1767
+ ```
1768
+
1769
+ ### GroupTypeInteractionStates
1770
+
1771
+ ```html
1772
+ <div><b>Regular</b></div><div class="fd-popover">
1773
+ <div class="fd-popover__control fd-avatar-group__popover-control"
1774
+ role="button"
1775
+ tabindex="0"
1776
+ aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1777
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md">
1778
+ <span
1779
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-1"
1780
+ role="img"
1781
+ aria-label="Wendy Wallace">WW
1782
+ </span>
1783
+
1784
+ <span
1785
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-2"
1786
+ role="img"
1787
+ aria-label="Simon Doe">
1788
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1789
+ </span>
1790
+
1791
+ <span
1792
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--thumbnail"
1793
+ role="img"
1794
+ alt="Portrait of Ben Johnson">
1795
+ </span>
1796
+
1797
+ <span
1798
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-3"
1799
+ role="img"
1800
+ aria-label="Endy Wallace">EW
1801
+ </span>
1802
+
1803
+ <span
1804
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1805
+ role="img"
1806
+ aria-label="Whitney Copper">
1807
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1808
+ </span>
1809
+
1810
+ <span
1811
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1812
+
1813
+ role="img"
1814
+ alt="Portrait of Brian Tracey">
1815
+ </span>
1816
+
1817
+ <span
1818
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow"
1819
+ role="button"
1820
+ tabindex="-1">+8
1821
+ </span>
1822
+ </div>
1823
+ </div>
1824
+
1825
+ <div><b>Hover</b></div><div class="fd-popover">
1826
+ <div class="fd-popover__control fd-avatar-group__popover-control"
1827
+ role="button"
1828
+ tabindex="0"
1829
+ aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1830
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md is-hover">
1831
+
1832
+ <span
1833
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-1"
1834
+ role="img"
1835
+ aria-label="Wendy Wallace">WW
1836
+ </span>
1837
+
1838
+ <span
1839
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-2"
1840
+ role="img"
1841
+ aria-label="Simon Doe">
1842
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1843
+ </span>
1844
+
1845
+ <span
1846
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--thumbnail"
1847
+ role="img"
1848
+ alt="Portrait of Ben Johnson">
1849
+ </span>
1850
+
1851
+ <span
1852
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-3"
1853
+ role="img"
1854
+ aria-label="Endy Wallace">EW
1855
+ </span>
1856
+
1857
+ <span
1858
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1859
+ role="img"
1860
+ aria-label="Whitney Copper">
1861
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1862
+ </span>
1863
+
1864
+ <span
1865
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1866
+
1867
+ role="img"
1868
+ alt="Portrait of Brian Tracey">
1869
+ </span>
1870
+
1871
+ <span
1872
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow"
1873
+ role="button"
1874
+ tabindex="-1">+8
1875
+ </span>
1876
+ </div>
1877
+ </div>
1878
+
1879
+ <div><b>Active/Toggled</b></div><div class="fd-popover">
1880
+ <div class="fd-popover__control fd-avatar-group__popover-control"
1881
+ role="button"
1882
+ tabindex="0"
1883
+ aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1884
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md is-active">
1885
+ <span
1886
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-1"
1887
+ role="img"
1888
+ aria-label="Wendy Wallace">WW
1889
+ </span>
1890
+
1891
+ <span
1892
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-2"
1893
+ role="img"
1894
+ aria-label="Simon Doe">
1895
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1896
+ </span>
1897
+
1898
+ <span
1899
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--thumbnail"
1900
+ role="img"
1901
+ alt="Portrait of Ben Johnson">
1902
+ </span>
1903
+
1904
+ <span
1905
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-3"
1906
+ role="img"
1907
+ aria-label="Endy Wallace">EW
1908
+ </span>
1909
+
1910
+ <span
1911
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1912
+ role="img"
1913
+ aria-label="Whitney Copper">
1914
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1915
+ </span>
1916
+
1917
+ <span
1918
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1919
+
1920
+ role="img"
1921
+ alt="Portrait of Brian Tracey">
1922
+ </span>
1923
+
1924
+ <span
1925
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow"
1926
+ role="button"
1927
+ tabindex="-1">+8
1928
+ </span>
1929
+ </div>
1930
+ </div>
1931
+
1932
+ <div><b>Disabled</b></div><div class="fd-popover">
1933
+ <div class="fd-popover__control fd-avatar-group__popover-control"
1934
+ role="button"
1935
+ aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1936
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md is-disabled">
1937
+ <span
1938
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-1"
1939
+ role="img"
1940
+ aria-label="Wendy Wallace">WW
1941
+ </span>
1942
+
1943
+ <span
1944
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-2"
1945
+ role="img"
1946
+ aria-label="Simon Doe">
1947
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1948
+ </span>
1949
+
1950
+ <span
1951
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--thumbnail"
1952
+ role="img"
1953
+ alt="Portrait of Ben Johnson">
1954
+ </span>
1955
+
1956
+ <span
1957
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-3"
1958
+ role="img"
1959
+ aria-label="Endy Wallace">EW
1960
+ </span>
1961
+
1962
+ <span
1963
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
1964
+ role="img"
1965
+ aria-label="Whitney Copper">
1966
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
1967
+ </span>
1968
+
1969
+ <span
1970
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
1971
+
1972
+ role="img"
1973
+ alt="Portrait of Brian Tracey">
1974
+ </span>
1975
+
1976
+ <span
1977
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow"
1978
+ role="button"
1979
+ tabindex="-1">+8
1980
+ </span>
1981
+ </div>
1982
+ </div>
1983
+
1984
+ <div><b>Focus</b></div><div class="fd-popover">
1985
+ <div class="fd-popover__control fd-avatar-group__popover-control"
1986
+ role="button"
1987
+ tabindex="0"
1988
+ aria-label="Conjoined avatars. 6 displayed, 8 hidden. Activate for complete list.">
1989
+ <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--md is-focus">
1990
+ <span
1991
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-1"
1992
+ role="img"
1993
+ aria-label="Wendy Wallace">WW
1994
+ </span>
1995
+
1996
+ <span
1997
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-2"
1998
+ role="img"
1999
+ aria-label="Simon Doe">
2000
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2001
+ </span>
2002
+
2003
+ <span
2004
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--thumbnail"
2005
+ role="img"
2006
+ alt="Portrait of Ben Johnson">
2007
+ </span>
2008
+
2009
+ <span
2010
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--accent-color-3"
2011
+ role="img"
2012
+ aria-label="Endy Wallace">EW
2013
+ </span>
2014
+
2015
+ <span
2016
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
2017
+ role="img"
2018
+ aria-label="Whitney Copper">
2019
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2020
+ </span>
2021
+
2022
+ <span
2023
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2024
+
2025
+ role="img"
2026
+ alt="Portrait of Brian Tracey">
2027
+ </span>
2028
+
2029
+ <span
2030
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow"
2031
+ role="button"
2032
+ tabindex="-1">+8963
2033
+ </span>
2034
+ </div>
2035
+ </div>
2036
+ ```
2037
+
2038
+ ### Overflow
2039
+
2040
+ The overflow Avatar inherits the styling of the secondary regular Button control. Applications can also choose to set the background color to a random or specific color from the Avatar. The span element has a \
2041
+
2042
+ ```html
2043
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--sm">
2044
+ <div class="fd-popover">
2045
+ <div class="fd-popover__control">
2046
+ <span
2047
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2048
+ role="button"
2049
+ tabindex="0"
2050
+ aria-label="Wendy Wallace"
2051
+ title="Wendy Wallace">WW
2052
+ </span>
2053
+ </div>
2054
+ <div class="fd-popover">
2055
+ <div class="fd-popover__control">
2056
+ <span
2057
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2058
+ role="button"
2059
+ tabindex="0"
2060
+ aria-label="Jason Goldwell"
2061
+ title="Jason Goldwell">
2062
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2063
+ </span>
2064
+ </div>
2065
+ </div>
2066
+ <div class="fd-popover">
2067
+ <div class="fd-popover__control">
2068
+ <span
2069
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2070
+ role="button"
2071
+ alt="Portrait of Christian Bow"
2072
+ title="Christian Bow"
2073
+ tabindex="0">
2074
+ </span>
2075
+ </div>
2076
+ </div>
2077
+ <div class="fd-popover">
2078
+ <div class="fd-popover__control">
2079
+ <span
2080
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="button"
2081
+ aria-label="Endy Wallace"
2082
+ tabindex="0"
2083
+ title="Endy Wallace">EW</span>
2084
+ </div>
2085
+ </div>
2086
+
2087
+ <div class="fd-popover">
2088
+ <div class="fd-popover__control">
2089
+ <span
2090
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow" tabindex="0"
2091
+ role="button">+4
2092
+ </span>
2093
+ </div>
2094
+ </div>
2095
+ </div>
2096
+
2097
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--xs">
2098
+ <div class="fd-popover">
2099
+ <div class="fd-popover__control">
2100
+ <span
2101
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
2102
+ role="button"
2103
+ tabindex="0"
2104
+ aria-label="Wendy Wallace"
2105
+ title="Wendy Wallace">WW
2106
+ </span>
2107
+ </div>
2108
+ </div>
2109
+ <div class="fd-popover">
2110
+ <div class="fd-popover__control">
2111
+ <span
2112
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border"
2113
+ role="button"
2114
+ tabindex="0"
2115
+ aria-label="Jason Goldwell"
2116
+ title="Jason Goldwell">
2117
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2118
+ </span>
2119
+ </div>
2120
+ </div>
2121
+ <div class="fd-popover">
2122
+ <div class="fd-popover__control">
2123
+ <span
2124
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2125
+ role="button"
2126
+ alt="Portrait of Christian Bow"
2127
+ title="Christian Bow"
2128
+ tabindex="0">
2129
+ </span>
2130
+ </div>
2131
+ </div>
2132
+ <div class="fd-popover">
2133
+ <div class="fd-popover__control">
2134
+ <span
2135
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--border" role="button"
2136
+ aria-label="Endy Wallace"
2137
+ tabindex="0"
2138
+ title="Endy Wallace">EW</span>
2139
+ </div>
2140
+ </div>
2141
+
2142
+ <div class="fd-popover">
2143
+ <div class="fd-popover__control">
2144
+ <span
2145
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--overflow" tabindex="0"
2146
+ role="button">+19796
2147
+ </span>
2148
+ </div>
2149
+ </div>
2150
+ </div>
2151
+
2152
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--sm">
2153
+ <div class="fd-popover">
2154
+ <div class="fd-popover__control">
2155
+ <span
2156
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2157
+ role="button"
2158
+ tabindex="0"
2159
+ aria-label="Wendy Wallace"
2160
+ title="Wendy Wallace">WW
2161
+ </span>
2162
+ </div>
2163
+ </div>
2164
+ <div class="fd-popover">
2165
+ <div class="fd-popover__control">
2166
+ <span
2167
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2168
+ role="button"
2169
+ tabindex="0"
2170
+ aria-label="Jason Goldwell"
2171
+ title="Jason Goldwell">
2172
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2173
+ </span>
2174
+ </div>
2175
+ </div>
2176
+ <div class="fd-popover">
2177
+ <div class="fd-popover__control">
2178
+ <span
2179
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2180
+ role="button"
2181
+ alt="Portrait of Christian Bow"
2182
+ title="Christian Bow"
2183
+ tabindex="0">
2184
+ </span>
2185
+ </div>
2186
+ </div>
2187
+ <div class="fd-popover">
2188
+ <div class="fd-popover__control">
2189
+ <span
2190
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="button"
2191
+ aria-label="Endy Wallace"
2192
+ tabindex="0"
2193
+ title="Endy Wallace">EW</span>
2194
+ </div>
2195
+ </div>
2196
+
2197
+ <div class="fd-popover">
2198
+ <div class="fd-popover__control">
2199
+ <span
2200
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--overflow" tabindex="0"
2201
+ role="button">+19796
2202
+ </span>
2203
+ </div>
2204
+ </div>
2205
+ </div>
2206
+
2207
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--md">
2208
+ <div class="fd-popover">
2209
+ <div class="fd-popover__control">
2210
+ <span
2211
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
2212
+ role="button"
2213
+ tabindex="0"
2214
+ aria-label="Wendy Wallace"
2215
+ title="Wendy Wallace">WW
2216
+ </span>
2217
+ </div>
2218
+ </div>
2219
+ <div class="fd-popover">
2220
+ <div class="fd-popover__control">
2221
+ <span
2222
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
2223
+ role="button"
2224
+ tabindex="0"
2225
+ aria-label="Jason Goldwell"
2226
+ title="Jason Goldwell">
2227
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2228
+ </span>
2229
+ </div>
2230
+ </div>
2231
+ <div class="fd-popover">
2232
+ <div class="fd-popover__control">
2233
+ <span
2234
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2235
+ role="button"
2236
+ alt="Portrait of Christian Bow"
2237
+ title="Christian Bow"
2238
+ tabindex="0">
2239
+ </span>
2240
+ </div>
2241
+ </div>
2242
+ <div class="fd-popover">
2243
+ <div class="fd-popover__control">
2244
+ <span
2245
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="button"
2246
+ aria-label="Endy Wallace"
2247
+ tabindex="0"
2248
+ title="Endy Wallace">EW</span>
2249
+ </div>
2250
+ </div>
2251
+
2252
+ <div class="fd-popover">
2253
+ <div class="fd-popover__control">
2254
+ <span
2255
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--overflow" tabindex="0"
2256
+ role="button">+19796
2257
+ </span>
2258
+ </div>
2259
+ </div>
2260
+ </div>
2261
+
2262
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group-lg">
2263
+ <div class="fd-popover">
2264
+ <div class="fd-popover__control">
2265
+ <span
2266
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
2267
+ role="button"
2268
+ tabindex="0"
2269
+ aria-label="Wendy Wallace"
2270
+ title="Wendy Wallace">WW
2271
+ </span>
2272
+ </div>
2273
+ </div>
2274
+ <div class="fd-popover">
2275
+ <div class="fd-popover__control">
2276
+ <span
2277
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border"
2278
+ role="button"
2279
+ tabindex="0"
2280
+ aria-label="Jason Goldwell"
2281
+ title="Jason Goldwell">
2282
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2283
+ </span>
2284
+ </div>
2285
+ </div>
2286
+ <div class="fd-popover">
2287
+ <div class="fd-popover__control">
2288
+ <span
2289
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2290
+ role="button"
2291
+ alt="Portrait of Christian Bow"
2292
+ title="Christian Bow"
2293
+ tabindex="0">
2294
+ </span>
2295
+ </div>
2296
+ </div>
2297
+ <div class="fd-popover">
2298
+ <div class="fd-popover__control">
2299
+ <span
2300
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--border" role="button"
2301
+ aria-label="Endy Wallace"
2302
+ tabindex="0"
2303
+ title="Endy Wallace">EW</span>
2304
+ </div>
2305
+ </div>
2306
+
2307
+ <div class="fd-popover">
2308
+ <div class="fd-popover__control">
2309
+ <span
2310
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--overflow" tabindex="0"
2311
+ role="button">+19796
2312
+ </span>
2313
+ </div>
2314
+ </div>
2315
+ </div>
2316
+
2317
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group-xl">
2318
+ <div class="fd-popover">
2319
+ <div class="fd-popover__control">
2320
+ <span
2321
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
2322
+ role="button"
2323
+ tabindex="0"
2324
+ aria-label="Wendy Wallace"
2325
+ title="Wendy Wallace">WW
2326
+ </span>
2327
+ </div>
2328
+ </div>
2329
+ <div class="fd-popover">
2330
+ <div class="fd-popover__control">
2331
+ <span
2332
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border"
2333
+ role="button"
2334
+ tabindex="0"
2335
+ aria-label="Jason Goldwell"
2336
+ title="Jason Goldwell">
2337
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2338
+ </span>
2339
+ </div>
2340
+ </div>
2341
+ <div class="fd-popover">
2342
+ <div class="fd-popover__control">
2343
+ <span
2344
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2345
+ role="button"
2346
+ alt="Portrait of Christian Bow"
2347
+ title="Christian Bow"
2348
+ tabindex="0">
2349
+ </span>
2350
+ </div>
2351
+ </div>
2352
+ <div class="fd-popover">
2353
+ <div class="fd-popover__control">
2354
+ <span
2355
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--border" role="button"
2356
+ aria-label="Endy Wallace"
2357
+ tabindex="0"
2358
+ title="Endy Wallace">EW</span>
2359
+ </div>
2360
+ </div>
2361
+
2362
+ <div class="fd-popover">
2363
+ <div class="fd-popover__control">
2364
+ <span
2365
+ class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--overflow" tabindex="0"
2366
+ role="button">+19796
2367
+ </span>
2368
+ </div>
2369
+ </div>
2370
+ </div>
2371
+
2372
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--sm">
2373
+ <div class="fd-popover">
2374
+ <div class="fd-popover__control">
2375
+ <span
2376
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2377
+ role="button"
2378
+ tabindex="0"
2379
+ aria-label="Wendy Wallace"
2380
+ title="Wendy Wallace">WW
2381
+ </span>
2382
+ </div>
2383
+ </div>
2384
+ <div class="fd-popover">
2385
+ <div class="fd-popover__control">
2386
+ <span
2387
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2388
+ role="button"
2389
+ tabindex="0"
2390
+ aria-label="Jason Goldwell"
2391
+ title="Jason Goldwell">
2392
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2393
+ </span>
2394
+ </div>
2395
+ </div>
2396
+ <div class="fd-popover">
2397
+ <div class="fd-popover__control">
2398
+ <span
2399
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2400
+ role="button"
2401
+ alt="Portrait of Christian Bow"
2402
+ title="Christian Bow"
2403
+ tabindex="0">
2404
+ </span>
2405
+ </div>
2406
+ </div>
2407
+ <div class="fd-popover">
2408
+ <div class="fd-popover__control">
2409
+ <span
2410
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="button"
2411
+ aria-label="Endy Wallace"
2412
+ tabindex="0"
2413
+ title="Endy Wallace">EW</span>
2414
+ </div>
2415
+ </div>
2416
+
2417
+ <div class="fd-popover">
2418
+ <div class="fd-popover__control">
2419
+ <span
2420
+ class="fd-avatar fd-avatar--accent-color-5 fd-avatar--sm fd-avatar--circle fd-avatar--overflow" tabindex="0"
2421
+ role="button">+4
2422
+ </span>
2423
+ </div>
2424
+ </div>
2425
+ </div>
2426
+
2427
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--sm">
2428
+ <div class="fd-popover">
2429
+ <div class="fd-popover__control">
2430
+ <span
2431
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2432
+ role="button"
2433
+ tabindex="0"
2434
+ aria-label="Wendy Wallace"
2435
+ title="Wendy Wallace">WW
2436
+ </span>
2437
+ </div>
2438
+ </div>
2439
+ <div class="fd-popover">
2440
+ <div class="fd-popover__control">
2441
+ <span
2442
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2443
+ role="button"
2444
+ tabindex="0"
2445
+ aria-label="Jason Goldwell"
2446
+ title="Jason Goldwell">
2447
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2448
+ </span>
2449
+ </div>
2450
+ </div>
2451
+ <div class="fd-popover">
2452
+ <div class="fd-popover__control">
2453
+ <span
2454
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2455
+ role="button"
2456
+ alt="Portrait of Christian Bow"
2457
+ title="Christian Bow"
2458
+ tabindex="0">
2459
+ </span>
2460
+ </div>
2461
+ </div>
2462
+ <div class="fd-popover">
2463
+ <div class="fd-popover__control">
2464
+ <span
2465
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="button"
2466
+ aria-label="Endy Wallace"
2467
+ tabindex="0"
2468
+ title="Endy Wallace">EW</span>
2469
+ </div>
2470
+ </div>
2471
+
2472
+ <div class="fd-popover">
2473
+ <div class="fd-popover__control">
2474
+ <span
2475
+ class="fd-avatar fd-avatar--sm fd-avatar--overflow" tabindex="0"
2476
+ role="button">+4
2477
+ </span>
2478
+ </div>
2479
+ </div>
2480
+ </div>
2481
+
2482
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--sm">
2483
+ <div class="fd-popover">
2484
+ <div class="fd-popover__control">
2485
+ <span
2486
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2487
+ role="button"
2488
+ tabindex="0"
2489
+ aria-label="Wendy Wallace"
2490
+ title="Wendy Wallace">WW
2491
+ </span>
2492
+ </div>
2493
+ </div>
2494
+ <div class="fd-popover">
2495
+ <div class="fd-popover__control">
2496
+ <span
2497
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2498
+ role="button"
2499
+ tabindex="0"
2500
+ aria-label="Jason Goldwell"
2501
+ title="Jason Goldwell">
2502
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2503
+ </span>
2504
+ </div>
2505
+ </div>
2506
+ <div class="fd-popover">
2507
+ <div class="fd-popover__control">
2508
+ <span
2509
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2510
+ role="button"
2511
+ alt="Portrait of Christian Bow"
2512
+ title="Christian Bow"
2513
+ tabindex="0">
2514
+ </span>
2515
+ </div>
2516
+ </div>
2517
+ <div class="fd-popover">
2518
+ <div class="fd-popover__control">
2519
+ <span
2520
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="button"
2521
+ aria-label="Endy Wallace"
2522
+ tabindex="0"
2523
+ title="Endy Wallace">EW</span>
2524
+ </div>
2525
+ </div>
2526
+
2527
+ <div class="fd-popover">
2528
+ <div class="fd-popover__control">
2529
+ <span
2530
+ class="fd-avatar fd-avatar--sm fd-avatar--overflow" tabindex="0"
2531
+ role="button">+19678
2532
+ </span>
2533
+ </div>
2534
+ </div>
2535
+ </div>
2536
+
2537
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--md">
2538
+ <div class="fd-popover">
2539
+ <div class="fd-popover__control">
2540
+ <span
2541
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
2542
+ role="button"
2543
+ tabindex="0"
2544
+ aria-label="Wendy Wallace"
2545
+ title="Wendy Wallace">WW
2546
+ </span>
2547
+ </div>
2548
+ </div>
2549
+ <div class="fd-popover">
2550
+ <div class="fd-popover__control">
2551
+ <span
2552
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border"
2553
+ role="button"
2554
+ tabindex="0"
2555
+ aria-label="Jason Goldwell"
2556
+ title="Jason Goldwell">
2557
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2558
+ </span>
2559
+ </div>
2560
+ </div>
2561
+ <div class="fd-popover">
2562
+ <div class="fd-popover__control">
2563
+ <span
2564
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2565
+ role="button"
2566
+ alt="Portrait of Christian Bow"
2567
+ title="Christian Bow"
2568
+ tabindex="0">
2569
+ </span>
2570
+ </div>
2571
+ </div>
2572
+ <div class="fd-popover">
2573
+ <div class="fd-popover__control">
2574
+ <span
2575
+ class="fd-avatar fd-avatar--md fd-avatar--circle fd-avatar--border" role="button"
2576
+ aria-label="Endy Wallace"
2577
+ tabindex="0"
2578
+ title="Endy Wallace">EW</span>
2579
+ </div>
2580
+ </div>
2581
+
2582
+ <div class="fd-popover">
2583
+ <div class="fd-popover__control">
2584
+ <span
2585
+ class="fd-avatar fd-avatar--md fd-avatar--overflow" tabindex="0"
2586
+ role="button">+19678
2587
+ </span>
2588
+ </div>
2589
+ </div>
2590
+ </div>
2591
+
2592
+ <div class="fd-avatar-group fd-avatar-group--individual-type fd-avatar-group--sm">
2593
+ <div class="fd-popover">
2594
+ <div class="fd-popover__control">
2595
+ <span
2596
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2597
+ role="button"
2598
+ tabindex="0"
2599
+ aria-label="Wendy Wallace"
2600
+ title="Wendy Wallace">WW
2601
+ </span>
2602
+ </div>
2603
+ </div>
2604
+ <div class="fd-popover">
2605
+ <div class="fd-popover__control">
2606
+ <span
2607
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border"
2608
+ role="button"
2609
+ tabindex="0"
2610
+ aria-label="Jason Goldwell"
2611
+ title="Jason Goldwell">
2612
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
2613
+ </span>
2614
+ </div>
2615
+ </div>
2616
+ <div class="fd-popover">
2617
+ <div class="fd-popover__control">
2618
+ <span
2619
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
2620
+ role="button"
2621
+ alt="Portrait of Christian Bow"
2622
+ title="Christian Bow"
2623
+ tabindex="0">
2624
+ </span>
2625
+ </div>
2626
+ </div>
2627
+ <div class="fd-popover">
2628
+ <div class="fd-popover__control">
2629
+ <span
2630
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--border" role="button"
2631
+ aria-label="Endy Wallace"
2632
+ tabindex="0"
2633
+ title="Endy Wallace">EW</span>
2634
+ </div>
2635
+ </div>
2636
+
2637
+ <div class="fd-popover">
2638
+ <div class="fd-popover__control">
2639
+ <span
2640
+ class="fd-avatar fd-avatar--sm fd-avatar--accent-color-8 fd-avatar--overflow" tabindex="0"
2641
+ role="button">+4
2642
+ </span>
2643
+ </div>
2644
+ </div>
2645
+ </div>
2646
+ </div>
2647
+ ```
2648
+
2649
+ ## Accessibility
2650
+
2651
+ - Use semantic HTML elements where appropriate
2652
+ - Include proper ARIA attributes for interactive elements
2653
+ - Ensure keyboard navigation support
2654
+ - Provide adequate color contrast
2655
+
2656
+ ## Source
2657
+
2658
+ This documentation was automatically generated from: `packages/styles/stories/Components/avatar-group/avatar-group.stories.js`
2659
+
2660
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).