@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/popover-notification.md ADDED
@@ -0,0 +1,1511 @@
1
+ ---
2
+ component: fd-popover
3
+ title: Components/Notifications
4
+ category: Components
5
+ selector: fd-popover
6
+ cssFile: popover.css
7
+ sourcePath: packages/styles/stories/Components/notification/notification.stories.js
8
+ tags: []
9
+ dependencies: ["avatar","bar","btp/avatar","button","icon","link","menu","message-strip","notification","object-status","popover","title","toolbar"]
10
+ relatedComponents: ["avatar","bar","button","icon","link","menu","message-strip","notification","object-status","popover","title","toolbar"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.554Z
13
+ ---
14
+
15
+ # Components/Notifications
16
+
17
+ Notifications are used to relay information to the user about a situation or task that requires their input. They can notice and access the notifications by the bell icon in the shell bar on the top-right of the screen. In the notification popover, they take immediate action, navigate to the source of a specific notification or in the case of a notification group, they can sort the list items in various ways.
18
+
19
+ ##Usage
20
+ **Use notifications if:**
21
+
22
+ * You want to make users aware of situations that require attention.
23
+ * You intend to reduce the amount of information and actions to a minimum, but provide enough information to highlight the level of importance.
24
+
25
+ ## Usage Guidelines
26
+
27
+ **Use notifications if:**
28
+
29
+ * You want to make users aware of situations that require attention.
30
+ * You intend to reduce the amount of information and actions to a minimum, but provide enough information to highlight the level of importance.
31
+
32
+ ## Dependencies
33
+
34
+ This component depends on the following CSS files:
35
+
36
+ - `avatar.css`
37
+ - `bar.css`
38
+ - `btp/avatar.css`
39
+ - `button.css`
40
+ - `icon.css`
41
+ - `link.css`
42
+ - `menu.css`
43
+ - `message-strip.css`
44
+ - `notification.css`
45
+ - `object-status.css`
46
+ - `popover.css`
47
+ - `title.css`
48
+ - `toolbar.css`
49
+
50
+ ## Installation
51
+
52
+ ```bash
53
+ npm install fundamental-styles
54
+ ```
55
+
56
+ ```html
57
+ <!-- Include theme -->
58
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
59
+
60
+ <!-- Include component CSS -->
61
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
62
+
63
+ <!-- Include dependencies -->
64
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
65
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
66
+ <link href="node_modules/fundamental-styles/dist/btp/avatar.css" rel="stylesheet">
67
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
68
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
69
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
70
+ <link href="node_modules/fundamental-styles/dist/menu.css" rel="stylesheet">
71
+ <link href="node_modules/fundamental-styles/dist/message-strip.css" rel="stylesheet">
72
+ <link href="node_modules/fundamental-styles/dist/notification.css" rel="stylesheet">
73
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
74
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
75
+ <link href="node_modules/fundamental-styles/dist/title.css" rel="stylesheet">
76
+ <link href="node_modules/fundamental-styles/dist/toolbar.css" rel="stylesheet">
77
+ ```
78
+
79
+ ## Basic Usage
80
+
81
+ ```html
82
+ <div
83
+ class="fd-notification"
84
+ tabindex="0"
85
+ aria-labelledby="
86
+ fd-object-status-1
87
+ fd-notification-status-1
88
+ fd-notification-title-1
89
+ fd-notification-title-status-1
90
+ fd-notification-paragraph-1
91
+ fd-notification-footnotes-1
92
+ ">
93
+
94
+ <div class="fd-notification__body">
95
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
96
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
97
+ </span>
98
+ <div class="fd-notification__content">
99
+ <div class="fd-notification__header">
100
+ <span
101
+ id="fd-notification-status-1"
102
+ class="sap-icon sap-icon--error sap-icon--color-negative"
103
+ aria-label="Status Negative"
104
+ title="Status Icon Negative">
105
+ </span>
106
+
107
+ <h4
108
+ id="fd-notification-title-1"
109
+ class="fd-notification__title fd-notification__title--unread">
110
+ Notification Title
111
+ </h4>
112
+
113
+ <span
114
+ id="fd-notification-title-status-1"
115
+ class="fd-notification__sr-only">
116
+ Unread
117
+ </span>
118
+ </div>
119
+ <p
120
+ id="fd-notification-paragraph-1"
121
+ class="fd-notification__paragraph">
122
+ Description of notification topic
123
+ </p>
124
+
125
+ <div class="fd-notification__footer" id="fd-notification-footnotes-1">
126
+ <span class="fd-notification__footer-content">Product Name</span>
127
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
128
+ <span class="fd-notification__footer-content">Feature Name</span>
129
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
130
+ <span class="fd-notification__footer-content">11:11</span>
131
+ <a
132
+ href="#"
133
+ role="button"
134
+ tabindex="0"
135
+ aria-expanded="false"
136
+ aria-disabled="false"
137
+ class="fd-link fd-notification__link"
138
+ aria-label="More button. Show the full texts."
139
+ title="More button. Show the full texts.">
140
+ <span class="fd-link__content">More</span>
141
+ </a>
142
+ </div>
143
+
144
+ <span
145
+ id="fd-object-status-1"
146
+ class="fd-object-status fd-object-status--inverted fd-object-status--indication-2b">
147
+ <i class="fd-object-status__icon sap-icon--high-priority" role="presentation" aria-hidden="true"></i>
148
+ <span class="fd-object-status__text">Important</span>
149
+ <span class="fd-object-status__sr-only">Tag</span>
150
+ </span>
151
+ </div>
152
+
153
+ <div class="fd-notification__actions">
154
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
155
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
156
+ </button>
157
+ </div>
158
+ </div>
159
+
160
+ <div
161
+ class="fd-notification"
162
+ tabindex="0"
163
+ aria-labelledby="
164
+ fd-notification-status-2
165
+ fd-notification-title-2
166
+ fd-notification-title-status-2
167
+ fd-notification-paragraph-2
168
+ fd-notification-footnotes-2
169
+ ">
170
+ <div class="fd-notification__body">
171
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
172
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
173
+ </span>
174
+ <div class="fd-notification__content">
175
+ <div class="fd-notification__header">
176
+ <span
177
+ id="fd-notification-status-2"
178
+ class="sap-icon sap-icon--sys-enter-2 sap-icon--color-positive"
179
+ aria-label="Status Positive"
180
+ title="Status Icon Positive">
181
+ </span>
182
+
183
+ <h4
184
+ id="fd-notification-title-2"
185
+ class="fd-notification__title">
186
+ Notification Title lorem ipsum dolor sit amet, consectetur adipisicing elit. Et expedita quis adipisci libero culpa inventore sequi blanditiis nobis doloremque amet optio atque officia facilis reprehenderit ex nesciunt, dicta, beatae molestias. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sequi corporis eius voluptatem praesentium, et sapiente enim facere. Ratione totam fuga laudantium quibusdam ducimus iste. Delectus eligendi debitis labore quam!
187
+ </h4>
188
+
189
+ <span
190
+ id="fd-notification-title-status-2"
191
+ class="fd-notification__sr-only">
192
+ Read
193
+ </span>
194
+ </div>
195
+ <p
196
+ id="fd-notification-paragraph-2"
197
+ class="fd-notification__paragraph">
198
+ Description of notification topic lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, impedit fuga sit eligendi cumque laborum quae id. Dolor nesciunt voluptatum, dolorem reprehenderit animi expedita harum fugit blanditiis quaerat vitae aliquid. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur minima libero suscipit quidem sequi dolores? Natus necessitatibus, reprehenderit, repudiandae incidunt ipsam, unde molestiae doloremque distinctio ad placeat dolorem labore quasi!
199
+ </p>
200
+
201
+ <div class="fd-notification__footer" id="fd-notification-footnotes-2">
202
+ <span class="fd-notification__footer-content">Product Name</span>
203
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
204
+ <span class="fd-notification__footer-content">Feature Name</span>
205
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
206
+ <span class="fd-notification__footer-content">11:11</span>
207
+ <a
208
+ href="#"
209
+ role="button"
210
+ tabindex="0"
211
+ aria-expanded="false"
212
+ aria-disabled="false"
213
+ class="fd-link fd-notification__link"
214
+ aria-label="More button. Show the full texts."
215
+ title="More button. Show the full texts.">
216
+ <span class="fd-link__content">More</span>
217
+ </a>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="fd-notification__actions">
222
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
223
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
224
+ </button>
225
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
226
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
227
+ </button>
228
+ </div>
229
+ </div>
230
+
231
+ <div
232
+ class="fd-notification"
233
+ tabindex="0"
234
+ aria-labelledby="
235
+ fd-notification-status-3
236
+ fd-notification-title-3
237
+ fd-notification-title-status-3
238
+ fd-notification-paragraph-3
239
+ fd-notification-footnotes-3
240
+ ">
241
+ <div class="fd-notification__body">
242
+ <div class="fd-notification__content">
243
+ <div class="fd-notification__header">
244
+ <span
245
+ id="fd-notification-status-3"
246
+ class="sap-icon sap-icon--information sap-icon--color-information"
247
+ aria-label="Status Negative"
248
+ title="Status Icon Information">
249
+ </span>
250
+
251
+ <h4
252
+ id="fd-notification-title-3"
253
+ class="fd-notification__title">
254
+ Notification Title
255
+ </h4>
256
+
257
+ <span
258
+ id="fd-notification-title-status-3"
259
+ class="fd-notification__sr-only">
260
+ Read
261
+ </span>
262
+ </div>
263
+ <p
264
+ id="fd-notification-paragraph-3"
265
+ class="fd-notification__paragraph">
266
+ Description of notification
267
+ </p>
268
+
269
+ <div class="fd-notification__footer" id="fd-notification-footnotes-3">
270
+ <span class="fd-notification__footer-content">Product Name</span>
271
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
272
+ <span class="fd-notification__footer-content">Feature Name</span>
273
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
274
+ <span class="fd-notification__footer-content">10:20</span>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="fd-notification__actions">
279
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
280
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
281
+ </button>
282
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
283
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
284
+ </button>
285
+ </div>
286
+ </div>
287
+
288
+ <div
289
+ class="fd-notification"
290
+ tabindex="0"
291
+ aria-labelledby="
292
+ fd-notification-title-4
293
+ fd-notification-title-status-4
294
+ fd-notification-paragraph-4
295
+ fd-notification-footnotes-4
296
+ ">
297
+ <div class="fd-notification__body">
298
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
299
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
300
+ </span>
301
+ <div class="fd-notification__content">
302
+ <div class="fd-notification__header">
303
+
304
+ <h4
305
+ id="fd-notification-title-4"
306
+ class="fd-notification__title fd-notification__title--unread">
307
+ Notification Title
308
+ </h4>
309
+
310
+ <span
311
+ id="fd-notification-title-status-4"
312
+ class="fd-notification__sr-only">
313
+ Unread
314
+ </span>
315
+ </div>
316
+ <p
317
+ id="fd-notification-paragraph-4"
318
+ class="fd-notification__paragraph">
319
+ Description of notification topic
320
+ </p>
321
+
322
+ <div class="fd-notification__footer" id="fd-notification-footnotes-4">
323
+ <span class="fd-notification__footer-content">Product Name</span>
324
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
325
+ <span class="fd-notification__footer-content">Feature Name</span>
326
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
327
+ <span class="fd-notification__footer-content">11:11</span>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="fd-notification__actions">
332
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
333
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
334
+ </button>
335
+ </div>
336
+ </div>
337
+ ```
338
+
339
+ ## BEM Elements
340
+
341
+ This component uses the following BEM elements:
342
+
343
+ - `fd-popover__body`
344
+ - `fd-popover__body-content`
345
+ - `fd-popover__control`
346
+
347
+ ## Related Components
348
+
349
+ This component works with or depends on:
350
+
351
+ - `avatar`
352
+ - `bar`
353
+ - `button`
354
+ - `icon`
355
+ - `link`
356
+ - `menu`
357
+ - `message-strip`
358
+ - `notification`
359
+ - `object-status`
360
+ - `popover`
361
+ - `title`
362
+ - `toolbar`
363
+
364
+ ## Design Tokens
365
+
366
+ Key CSS variables used by this component:
367
+
368
+ - `--above`
369
+ - `--after`
370
+ - `--arrow`
371
+ - `--arrow-x-end`
372
+ - `--before`
373
+ - `--bottom`
374
+ - `--btp`
375
+ - `--center`
376
+ - `--display`
377
+ - `--dropdown`
378
+ - `--fdIcon_Button_Height`
379
+ - `--fdIcon_Button_Width`
380
+ - `--fdModal_BackgroundColor`
381
+ - `--fdPopover_Arrow_Size`
382
+ - `--fdPopover_Body_Border_Radius`
383
+
384
+ *...and 5 more*
385
+
386
+ ## Examples
387
+
388
+ ### Notification Item
389
+
390
+ Notification items display a container with:
391
+ <ul>
392
+ <li><b>Avatar</b> (optional): uses Avatar component, size XS</li>
393
+ <li><b>Title</b> (required): the title wraps up to two lines and then truncates. For unread title (renders with bold font-weight) use <code>fd-notification__title--unread</code> modifier class.</li>
394
+ <li><b>Description</b> (optional): the description wraps up to two lines and then truncates.</li>
395
+ <li><b>Meta</b> (optional): items separated by a span element with class <code>fd-notification__separator</code>. Items truncate if there's not enough space. In case Title or Description truncates in an ellipsis, the meta is followed by the text <b>Expansion Trigger</b> ("More" / "Less"). </li>
396
+ <li><b>Priority Indicator</b> (optional): the priority is displayed using Message and Status Icons. </li>
397
+ <li><b>Object Status</b> (optional): uses Inverted ObjectStatus / Tag (Horizon) - Inverted Object Status with icon, indication color: Second Color Set - Indication 2 - Red</li>
398
+ <li><b>Actions</b> (optional): include a "Close" and "Overflow" button (Transparent Button) actions.</li>
399
+ </ul>
400
+
401
+ ```html
402
+ <div
403
+ class="fd-notification"
404
+ tabindex="0"
405
+ aria-labelledby="
406
+ fd-object-status-1
407
+ fd-notification-status-1
408
+ fd-notification-title-1
409
+ fd-notification-title-status-1
410
+ fd-notification-paragraph-1
411
+ fd-notification-footnotes-1
412
+ ">
413
+
414
+ <div class="fd-notification__body">
415
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
416
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
417
+ </span>
418
+ <div class="fd-notification__content">
419
+ <div class="fd-notification__header">
420
+ <span
421
+ id="fd-notification-status-1"
422
+ class="sap-icon sap-icon--error sap-icon--color-negative"
423
+ aria-label="Status Negative"
424
+ title="Status Icon Negative">
425
+ </span>
426
+
427
+ <h4
428
+ id="fd-notification-title-1"
429
+ class="fd-notification__title fd-notification__title--unread">
430
+ Notification Title
431
+ </h4>
432
+
433
+ <span
434
+ id="fd-notification-title-status-1"
435
+ class="fd-notification__sr-only">
436
+ Unread
437
+ </span>
438
+ </div>
439
+ <p
440
+ id="fd-notification-paragraph-1"
441
+ class="fd-notification__paragraph">
442
+ Description of notification topic
443
+ </p>
444
+
445
+ <div class="fd-notification__footer" id="fd-notification-footnotes-1">
446
+ <span class="fd-notification__footer-content">Product Name</span>
447
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
448
+ <span class="fd-notification__footer-content">Feature Name</span>
449
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
450
+ <span class="fd-notification__footer-content">11:11</span>
451
+ <a
452
+ href="#"
453
+ role="button"
454
+ tabindex="0"
455
+ aria-expanded="false"
456
+ aria-disabled="false"
457
+ class="fd-link fd-notification__link"
458
+ aria-label="More button. Show the full texts."
459
+ title="More button. Show the full texts.">
460
+ <span class="fd-link__content">More</span>
461
+ </a>
462
+ </div>
463
+
464
+ <span
465
+ id="fd-object-status-1"
466
+ class="fd-object-status fd-object-status--inverted fd-object-status--indication-2b">
467
+ <i class="fd-object-status__icon sap-icon--high-priority" role="presentation" aria-hidden="true"></i>
468
+ <span class="fd-object-status__text">Important</span>
469
+ <span class="fd-object-status__sr-only">Tag</span>
470
+ </span>
471
+ </div>
472
+
473
+ <div class="fd-notification__actions">
474
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
475
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
476
+ </button>
477
+ </div>
478
+ </div>
479
+
480
+ <div
481
+ class="fd-notification"
482
+ tabindex="0"
483
+ aria-labelledby="
484
+ fd-notification-status-2
485
+ fd-notification-title-2
486
+ fd-notification-title-status-2
487
+ fd-notification-paragraph-2
488
+ fd-notification-footnotes-2
489
+ ">
490
+ <div class="fd-notification__body">
491
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
492
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
493
+ </span>
494
+ <div class="fd-notification__content">
495
+ <div class="fd-notification__header">
496
+ <span
497
+ id="fd-notification-status-2"
498
+ class="sap-icon sap-icon--sys-enter-2 sap-icon--color-positive"
499
+ aria-label="Status Positive"
500
+ title="Status Icon Positive">
501
+ </span>
502
+
503
+ <h4
504
+ id="fd-notification-title-2"
505
+ class="fd-notification__title">
506
+ Notification Title lorem ipsum dolor sit amet, consectetur adipisicing elit. Et expedita quis adipisci libero culpa inventore sequi blanditiis nobis doloremque amet optio atque officia facilis reprehenderit ex nesciunt, dicta, beatae molestias. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sequi corporis eius voluptatem praesentium, et sapiente enim facere. Ratione totam fuga laudantium quibusdam ducimus iste. Delectus eligendi debitis labore quam!
507
+ </h4>
508
+
509
+ <span
510
+ id="fd-notification-title-status-2"
511
+ class="fd-notification__sr-only">
512
+ Read
513
+ </span>
514
+ </div>
515
+ <p
516
+ id="fd-notification-paragraph-2"
517
+ class="fd-notification__paragraph">
518
+ Description of notification topic lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, impedit fuga sit eligendi cumque laborum quae id. Dolor nesciunt voluptatum, dolorem reprehenderit animi expedita harum fugit blanditiis quaerat vitae aliquid. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur minima libero suscipit quidem sequi dolores? Natus necessitatibus, reprehenderit, repudiandae incidunt ipsam, unde molestiae doloremque distinctio ad placeat dolorem labore quasi!
519
+ </p>
520
+
521
+ <div class="fd-notification__footer" id="fd-notification-footnotes-2">
522
+ <span class="fd-notification__footer-content">Product Name</span>
523
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
524
+ <span class="fd-notification__footer-content">Feature Name</span>
525
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
526
+ <span class="fd-notification__footer-content">11:11</span>
527
+ <a
528
+ href="#"
529
+ role="button"
530
+ tabindex="0"
531
+ aria-expanded="false"
532
+ aria-disabled="false"
533
+ class="fd-link fd-notification__link"
534
+ aria-label="More button. Show the full texts."
535
+ title="More button. Show the full texts.">
536
+ <span class="fd-link__content">More</span>
537
+ </a>
538
+ </div>
539
+ </div>
540
+
541
+ <div class="fd-notification__actions">
542
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
543
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
544
+ </button>
545
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
546
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
547
+ </button>
548
+ </div>
549
+ </div>
550
+
551
+ <div
552
+ class="fd-notification"
553
+ tabindex="0"
554
+ aria-labelledby="
555
+ fd-notification-status-3
556
+ fd-notification-title-3
557
+ fd-notification-title-status-3
558
+ fd-notification-paragraph-3
559
+ fd-notification-footnotes-3
560
+ ">
561
+ <div class="fd-notification__body">
562
+ <div class="fd-notification__content">
563
+ <div class="fd-notification__header">
564
+ <span
565
+ id="fd-notification-status-3"
566
+ class="sap-icon sap-icon--information sap-icon--color-information"
567
+ aria-label="Status Negative"
568
+ title="Status Icon Information">
569
+ </span>
570
+
571
+ <h4
572
+ id="fd-notification-title-3"
573
+ class="fd-notification__title">
574
+ Notification Title
575
+ </h4>
576
+
577
+ <span
578
+ id="fd-notification-title-status-3"
579
+ class="fd-notification__sr-only">
580
+ Read
581
+ </span>
582
+ </div>
583
+ <p
584
+ id="fd-notification-paragraph-3"
585
+ class="fd-notification__paragraph">
586
+ Description of notification
587
+ </p>
588
+
589
+ <div class="fd-notification__footer" id="fd-notification-footnotes-3">
590
+ <span class="fd-notification__footer-content">Product Name</span>
591
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
592
+ <span class="fd-notification__footer-content">Feature Name</span>
593
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
594
+ <span class="fd-notification__footer-content">10:20</span>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="fd-notification__actions">
599
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
600
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
601
+ </button>
602
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
603
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
604
+ </button>
605
+ </div>
606
+ </div>
607
+
608
+ <div
609
+ class="fd-notification"
610
+ tabindex="0"
611
+ aria-labelledby="
612
+ fd-notification-title-4
613
+ fd-notification-title-status-4
614
+ fd-notification-paragraph-4
615
+ fd-notification-footnotes-4
616
+ ">
617
+ <div class="fd-notification__body">
618
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
619
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
620
+ </span>
621
+ <div class="fd-notification__content">
622
+ <div class="fd-notification__header">
623
+
624
+ <h4
625
+ id="fd-notification-title-4"
626
+ class="fd-notification__title fd-notification__title--unread">
627
+ Notification Title
628
+ </h4>
629
+
630
+ <span
631
+ id="fd-notification-title-status-4"
632
+ class="fd-notification__sr-only">
633
+ Unread
634
+ </span>
635
+ </div>
636
+ <p
637
+ id="fd-notification-paragraph-4"
638
+ class="fd-notification__paragraph">
639
+ Description of notification topic
640
+ </p>
641
+
642
+ <div class="fd-notification__footer" id="fd-notification-footnotes-4">
643
+ <span class="fd-notification__footer-content">Product Name</span>
644
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
645
+ <span class="fd-notification__footer-content">Feature Name</span>
646
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
647
+ <span class="fd-notification__footer-content">11:11</span>
648
+ </div>
649
+ </div>
650
+
651
+ <div class="fd-notification__actions">
652
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
653
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
654
+ </button>
655
+ </div>
656
+ </div>
657
+ ```
658
+
659
+ ### NotificationGroup
660
+
661
+ You can display a group of notifications in a list format, and the user can sort them from the header. A Message Strip can be places after the group header. To load more notifications, the list can have a Growing Item placed at the bottom of the group.
662
+
663
+ ```html
664
+ <div class="fd-popover">
665
+ <div class="fd-popover__control">
666
+ <button
667
+ class="fd-button"
668
+ aria-label="Cart"
669
+ aria-controls="popoverNotificationsGroup"
670
+ aria-expanded="true"
671
+ aria-haspopup="true"
672
+ onclick="onPopoverClick('popoverNotificationsGroup');"
673
+ role="button">
674
+ <i class="sap-icon--bell" role="presentation"></i>
675
+ <span class="fd-button__badge">30</span>
676
+ </button>
677
+ <div class="fd-popover__body" aria-hidden="false" id="popoverNotificationsGroup">
678
+ <div class="fd-popover__body-content">
679
+ <div class="fd-notification-popover">
680
+ <div
681
+ class="fd-toolbar fd-toolbar--title fd-toolbar--clear"
682
+ role="toolbar"
683
+ aria-label="Notifications Header">
684
+ <h2 class="fd-title fd-title--h4 fd-toolbar__title">Notifications</h2>
685
+ <span class="fd-toolbar__spacer" aria-hidden="true" role="presentation"></span>
686
+ <button class="fd-button fd-button--transparent" aria-label="Clear All">Clear All</button>
687
+ <button aria-label="Sort" title="Sort" class="fd-button fd-button--transparent">
688
+ <i class="sap-icon--sort"></i>
689
+ </button>
690
+ <button aria-label="Settings" title="Settings" class="fd-button fd-button--transparent">
691
+ <i class="sap-icon--action-settings"></i>
692
+ </button>
693
+ </div>
694
+
695
+ <div class="fd-notification-message-strip">
696
+ <div class="fd-message-strip fd-message-strip--error" role="note" aria-live="assertive" id="message-strip-5" aria-labelledby="message-strip-5">
697
+ <div class="fd-message-strip__icon-container" aria-hidden="true">
698
+ <span class="sap-icon sap-icon--message-error" focusable="false" role="presentation" aria-hidden="true"></span>
699
+ </div>
700
+ <p class="fd-message-strip__text">
701
+ Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
702
+ </p>
703
+ </div>
704
+ </div>
705
+
706
+ <ul class="fd-notification-list" role="list" aria-label="Notifications">
707
+ <li
708
+ class="fd-notification-group"
709
+ tabindex="0"
710
+ aria-level="1"
711
+ aria-posinset="1"
712
+ aria-setsize="4"
713
+ aria-description="Notification group expanded"
714
+ aria-labelledby="fd-notification-group-title-1">
715
+ <div class="fd-notification-group__wrapper">
716
+ <div
717
+ class="fd-notification-group__header"
718
+ tabindex="0"
719
+ role="button"
720
+ aria-expanded="false"
721
+ aria-controls="fd-notification-group-1"
722
+ title="Expand/Collapse">
723
+ <span class="fd-notification-group__header-arrow">
724
+ <i class="sap-icon--navigation-down-arrow" role="presentation" aria-hidden="true"></i>
725
+ </span>
726
+ <span
727
+ class="fd-notification-group__header-title"
728
+ role="heading"
729
+ aria-level="2"
730
+ id="fd-notification-group-title-1">
731
+ Today
732
+ </span>
733
+ </div>
734
+
735
+ <ul
736
+ class="fd-notification-group__list"
737
+ role="list"
738
+ aria-labelledby="fd-notification-group-title-1"
739
+ id="fd-notification-group-1">
740
+ <li
741
+ class="fd-notification"
742
+ aria-level="2"
743
+ aria-posinset="1"
744
+ aria-setsize="5"
745
+ tabindex="0"
746
+ aria-labelledby="
747
+ fd-notification-title-1t
748
+ fd-notification-title-status-1t
749
+ fd-notification-paragraph-1t
750
+ fd-notification-footnotes-1t
751
+ ">
752
+ <div class="fd-notification__body">
753
+ <span class="fd-avatar fd-avatar--accent-color-1 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
754
+ <i
755
+ role="presentation"
756
+ aria-hidden="true"
757
+ aria-label="Product placeholder"
758
+ class="fd-avatar__icon sap-icon--product">
759
+ </i>
760
+ </span>
761
+ <div class="fd-notification__content">
762
+ <div class="fd-notification__header">
763
+ <h4
764
+ id="fd-notification-title-1t"
765
+ class="fd-notification__title fd-notification__title--unread">
766
+ Notification Title
767
+ </h4>
768
+ <span
769
+ id="fd-notification-title-status-1t"
770
+ class="fd-notification__sr-only">
771
+ Unread
772
+ </span>
773
+ </div>
774
+ <p
775
+ id="fd-notification-paragraph-1t"
776
+ class="fd-notification__paragraph">
777
+ Description of notification topic
778
+ </p>
779
+
780
+ <div class="fd-notification__footer" id="fd-notification-footnotes-1t">
781
+ <span class="fd-notification__footer-content">Product Name</span>
782
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
783
+ <span class="fd-notification__footer-content">Feature Name</span>
784
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
785
+ <span class="fd-notification__footer-content">11:00</span>
786
+ </div>
787
+ </div>
788
+
789
+ <div class="fd-notification__actions">
790
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
791
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
792
+ </button>
793
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
794
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
795
+ </button>
796
+ </div>
797
+ </div>
798
+ </li>
799
+ <li
800
+ class="fd-notification"
801
+ aria-level="2"
802
+ aria-posinset="2"
803
+ aria-setsize="5"
804
+ tabindex="0"
805
+ aria-labelledby="
806
+ fd-notification-title-2t
807
+ fd-notification-title-status-2t
808
+ fd-notification-paragraph-2t
809
+ fd-notification-footnotes-2t
810
+ ">
811
+ <div class="fd-notification__body">
812
+ <span class="fd-avatar fd-avatar--accent-color-2 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
813
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--account"></i>
814
+ </span>
815
+ <div class="fd-notification__content">
816
+ <div class="fd-notification__header">
817
+ <h4
818
+ id="fd-notification-title-2t"
819
+ class="fd-notification__title fd-notification__title--unread">
820
+ Notification Title
821
+ </h4>
822
+ <span
823
+ id="fd-notification-title-status-2t"
824
+ class="fd-notification__sr-only">
825
+ Unread
826
+ </span>
827
+ </div>
828
+ <p
829
+ id="fd-notification-paragraph-2t"
830
+ class="fd-notification__paragraph">
831
+ Description of notification topic
832
+ </p>
833
+
834
+ <div class="fd-notification__footer" id="fd-notification-footnotes-2t">
835
+ <span class="fd-notification__footer-content">Product Name</span>
836
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
837
+ <span class="fd-notification__footer-content">Feature Name</span>
838
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
839
+ <span class="fd-notification__footer-content">12:00</span>
840
+ </div>
841
+ </div>
842
+
843
+ <div class="fd-notification__actions">
844
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
845
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
846
+ </button>
847
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
848
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
849
+ </button>
850
+ </div>
851
+ </div>
852
+ </li>
853
+ <li
854
+ class="fd-notification"
855
+ aria-level="2"
856
+ aria-posinset="3"
857
+ aria-setsize="5"
858
+ tabindex="0"
859
+ aria-labelledby="
860
+ fd-notification-title-3t
861
+ fd-notification-title-status-3t
862
+ fd-notification-paragraph-3t
863
+ fd-notification-footnotes-3t
864
+ ">
865
+ <div class="fd-notification__body">
866
+ <span class="fd-avatar fd-avatar--accent-color-3 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
867
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--task"></i>
868
+ </span>
869
+ <div class="fd-notification__content">
870
+ <div class="fd-notification__header">
871
+ <h4
872
+ id="fd-notification-title-3t"
873
+ class="fd-notification__title fd-notification__title--unread">
874
+ Notification Title
875
+ </h4>
876
+ <span
877
+ id="fd-notification-title-status-3t"
878
+ class="fd-notification__sr-only">
879
+ Unread
880
+ </span>
881
+ </div>
882
+ <p
883
+ id="fd-notification-paragraph-3t"
884
+ class="fd-notification__paragraph">
885
+ Description of notification topic
886
+ </p>
887
+
888
+ <div class="fd-notification__footer" id="fd-notification-footnotes-3t">
889
+ <span class="fd-notification__footer-content">Product Name</span>
890
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
891
+ <span class="fd-notification__footer-content">Feature Name</span>
892
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
893
+ <span class="fd-notification__footer-content">13:00</span>
894
+ </div>
895
+ </div>
896
+
897
+ <div class="fd-notification__actions">
898
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
899
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
900
+ </button>
901
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
902
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
903
+ </button>
904
+ </div>
905
+ </div>
906
+ </li>
907
+ <li
908
+ class="fd-notification"
909
+ aria-level="2"
910
+ aria-posinset="4"
911
+ aria-setsize="5"
912
+ tabindex="0"
913
+ aria-labelledby="
914
+ fd-notification-title-4t
915
+ fd-notification-title-status-4t
916
+ fd-notification-paragraph-4t
917
+ fd-notification-footnotes-4t
918
+ ">
919
+ <div class="fd-notification__body">
920
+ <span class="fd-avatar fd-avatar--accent-color-4 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
921
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--retail-store"></i>
922
+ </span>
923
+ <div class="fd-notification__content">
924
+ <div class="fd-notification__header">
925
+ <h4
926
+ id="fd-notification-title-4t"
927
+ class="fd-notification__title fd-notification__title--unread">
928
+ Notification Title
929
+ </h4>
930
+ <span
931
+ id="fd-notification-title-status-4t"
932
+ class="fd-notification__sr-only">
933
+ Unread
934
+ </span>
935
+ </div>
936
+ <p
937
+ id="fd-notification-paragraph-4t"
938
+ class="fd-notification__paragraph">
939
+ Description of notification topic
940
+ </p>
941
+
942
+ <div class="fd-notification__footer" id="fd-notification-footnotes-4t">
943
+ <span class="fd-notification__footer-content">Product Name</span>
944
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
945
+ <span class="fd-notification__footer-content">Feature Name</span>
946
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
947
+ <span class="fd-notification__footer-content">14:00</span>
948
+ </div>
949
+ </div>
950
+
951
+ <div class="fd-notification__actions">
952
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
953
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
954
+ </button>
955
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
956
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
957
+ </button>
958
+ </div>
959
+ </div>
960
+ </li>
961
+ <li
962
+ class="fd-notification"
963
+ aria-level="2"
964
+ aria-posinset="5"
965
+ aria-setsize="5"
966
+ tabindex="0"
967
+ aria-labelledby="
968
+ fd-notification-title-5t
969
+ fd-notification-title-status-5t
970
+ fd-notification-paragraph-5t
971
+ fd-notification-footnotes-5t
972
+ ">
973
+ <div class="fd-notification__body">
974
+ <span class="fd-avatar fd-avatar--accent-color-5 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
975
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--travel-expense"></i>
976
+ </span>
977
+ <div class="fd-notification__content">
978
+ <div class="fd-notification__header">
979
+ <h4
980
+ id="fd-notification-title-5t"
981
+ class="fd-notification__title fd-notification__title--unread">
982
+ Notification Title
983
+ </h4>
984
+ <span
985
+ id="fd-notification-title-status-5t"
986
+ class="fd-notification__sr-only">
987
+ Unread
988
+ </span>
989
+ </div>
990
+ <p
991
+ id="fd-notification-paragraph-5t"
992
+ class="fd-notification__paragraph">
993
+ Description of notification topic
994
+ </p>
995
+
996
+ <div class="fd-notification__footer" id="fd-notification-footnotes-5t">
997
+ <span class="fd-notification__footer-content">Product Name</span>
998
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
999
+ <span class="fd-notification__footer-content">Feature Name</span>
1000
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1001
+ <span class="fd-notification__footer-content">15:00</span>
1002
+ </div>
1003
+ </div>
1004
+
1005
+ <div class="fd-notification__actions">
1006
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
1007
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
1008
+ </button>
1009
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
1010
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
1011
+ </button>
1012
+ </div>
1013
+ </div>
1014
+ </li>
1015
+ </ul>
1016
+
1017
+ <div class="fd-notification-group__growing-item" role="button" tabindex="0" title="More" aria-label="More">
1018
+ <span class="fd-notification-group__growing-item-title">
1019
+ More
1020
+ </span>
1021
+ </div>
1022
+ </div>
1023
+ </li>
1024
+
1025
+ <li
1026
+ class="fd-notification-group"
1027
+ tabindex="0"
1028
+ aria-level="1"
1029
+ aria-posinset="2"
1030
+ aria-setsize="4"
1031
+ aria-description="Notification group expanded"
1032
+ aria-labelledby="fd-notification-group-title-2">
1033
+ <div class="fd-notification-group__wrapper">
1034
+ <div
1035
+ class="fd-notification-group__header"
1036
+ tabindex="0"
1037
+ role="button"
1038
+ aria-expanded="false"
1039
+ aria-controls="fd-notification-group-2"
1040
+ title="Expand/Collapse">
1041
+ <span class="fd-notification-group__header-arrow">
1042
+ <i class="sap-icon--navigation-down-arrow" role="presentation" aria-hidden="true"></i>
1043
+ </span>
1044
+ <span
1045
+ class="fd-notification-group__header-title"
1046
+ role="heading"
1047
+ aria-level="2" id="fd-notification-group-title-2">
1048
+ Yesterday
1049
+ </span>
1050
+ </div>
1051
+
1052
+ <ul
1053
+ class="fd-notification-group__list"
1054
+ role="list"
1055
+ aria-labelledby="fd-notification-group-title-2"
1056
+ id="fd-notification-group-2">
1057
+ <li
1058
+ class="fd-notification"
1059
+ aria-level="2"
1060
+ aria-posinset="1"
1061
+ aria-setsize="5"
1062
+ tabindex="0"
1063
+ aria-labelledby="
1064
+ fd-notification-title-1y
1065
+ fd-notification-title-status-1y
1066
+ fd-notification-paragraph-1y
1067
+ fd-notification-footnotes-1y
1068
+ ">
1069
+ <div class="fd-notification__body">
1070
+ <span class="fd-avatar fd-avatar--accent-color-6 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
1071
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--opportunity"></i>
1072
+ </span>
1073
+ <div class="fd-notification__content">
1074
+ <div class="fd-notification__header">
1075
+ <h4
1076
+ id="fd-notification-title-1y"
1077
+ class="fd-notification__title fd-notification__title--unread">
1078
+ Notification Title
1079
+ </h4>
1080
+ <span
1081
+ id="fd-notification-title-status-1y"
1082
+ class="fd-notification__sr-only">
1083
+ Unread
1084
+ </span>
1085
+ </div>
1086
+ <p
1087
+ id="fd-notification-paragraph-1y"
1088
+ class="fd-notification__paragraph">
1089
+ Description of notification topic
1090
+ </p>
1091
+
1092
+ <div class="fd-notification__footer" id="fd-notification-footnotes-1y">
1093
+ <span class="fd-notification__footer-content">Product Name</span>
1094
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1095
+ <span class="fd-notification__footer-content">Feature Name</span>
1096
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1097
+ <span class="fd-notification__footer-content">11:00</span>
1098
+ </div>
1099
+ </div>
1100
+
1101
+ <div class="fd-notification__actions">
1102
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
1103
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
1104
+ </button>
1105
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
1106
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
1107
+ </button>
1108
+ </div>
1109
+ </div>
1110
+ </li>
1111
+ <li
1112
+ class="fd-notification"
1113
+ aria-level="2"
1114
+ aria-posinset="2"
1115
+ aria-setsize="5"
1116
+ tabindex="0"
1117
+ aria-labelledby="
1118
+ fd-notification-title-2y
1119
+ fd-notification-title-status-2y
1120
+ fd-notification-paragraph-2y
1121
+ fd-notification-footnotes-2y
1122
+ ">
1123
+ <div class="fd-notification__body">
1124
+ <span class="fd-avatar fd-avatar--accent-color-7 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
1125
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--inbox"></i>
1126
+ </span>
1127
+ <div class="fd-notification__content">
1128
+ <div class="fd-notification__header">
1129
+ <h4
1130
+ id="fd-notification-title-2y"
1131
+ class="fd-notification__title fd-notification__title--unread">
1132
+ Notification Title
1133
+ </h4>
1134
+ <span
1135
+ id="fd-notification-title-status-2y"
1136
+ class="fd-notification__sr-only">
1137
+ Unread
1138
+ </span>
1139
+ </div>
1140
+ <p
1141
+ id="fd-notification-paragraph-2y"
1142
+ class="fd-notification__paragraph">
1143
+ Description of notification topic
1144
+ </p>
1145
+
1146
+ <div class="fd-notification__footer" id="fd-notification-footnotes-2y">
1147
+ <span class="fd-notification__footer-content">Product Name</span>
1148
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1149
+ <span class="fd-notification__footer-content">Feature Name</span>
1150
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1151
+ <span class="fd-notification__footer-content">12:00</span>
1152
+ </div>
1153
+ </div>
1154
+
1155
+ <div class="fd-notification__actions">
1156
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
1157
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
1158
+ </button>
1159
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
1160
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
1161
+ </button>
1162
+ </div>
1163
+ </div>
1164
+ </li>
1165
+ <li
1166
+ class="fd-notification"
1167
+ aria-level="2"
1168
+ aria-posinset="3"
1169
+ aria-setsize="5"
1170
+ tabindex="0"
1171
+ aria-labelledby="
1172
+ fd-notification-title-3y
1173
+ fd-notification-title-status-3y
1174
+ fd-notification-paragraph-3y
1175
+ fd-notification-footnotes-3y
1176
+ ">
1177
+ <div class="fd-notification__body">
1178
+ <span class="fd-avatar fd-avatar--accent-color-8 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
1179
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--attachment"></i>
1180
+ </span>
1181
+ <div class="fd-notification__content">
1182
+ <div class="fd-notification__header">
1183
+ <h4
1184
+ id="fd-notification-title-3y"
1185
+ class="fd-notification__title fd-notification__title--unread">
1186
+ Notification Title
1187
+ </h4>
1188
+ <span
1189
+ id="fd-notification-title-status-3y"
1190
+ class="fd-notification__sr-only">
1191
+ Unread
1192
+ </span>
1193
+ </div>
1194
+ <p
1195
+ id="fd-notification-paragraph-3y"
1196
+ class="fd-notification__paragraph">
1197
+ Description of notification topic
1198
+ </p>
1199
+
1200
+ <div class="fd-notification__footer" id="fd-notification-footnotes-3y">
1201
+ <span class="fd-notification__footer-content">Product Name</span>
1202
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1203
+ <span class="fd-notification__footer-content">Feature Name</span>
1204
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1205
+ <span class="fd-notification__footer-content">13:00</span>
1206
+ </div>
1207
+ </div>
1208
+
1209
+ <div class="fd-notification__actions">
1210
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
1211
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
1212
+ </button>
1213
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
1214
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
1215
+ </button>
1216
+ </div>
1217
+ </div>
1218
+ </li>
1219
+ <li
1220
+ class="fd-notification"
1221
+ aria-level="2"
1222
+ aria-posinset="4"
1223
+ aria-setsize="5"
1224
+ tabindex="0"
1225
+ aria-labelledby="
1226
+ fd-notification-title-4y
1227
+ fd-notification-title-status-4y
1228
+ fd-notification-paragraph-4y
1229
+ fd-notification-footnotes-4y
1230
+ ">
1231
+ <div class="fd-notification__body">
1232
+ <span class="fd-avatar fd-avatar--accent-color-9 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
1233
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--payment-approval"></i>
1234
+ </span>
1235
+ <div class="fd-notification__content">
1236
+ <div class="fd-notification__header">
1237
+ <h4
1238
+ id="fd-notification-title-4y"
1239
+ class="fd-notification__title fd-notification__title--unread">
1240
+ Notification Title
1241
+ </h4>
1242
+ <span
1243
+ id="fd-notification-title-status-4y"
1244
+ class="fd-notification__sr-only">
1245
+ Unread
1246
+ </span>
1247
+ </div>
1248
+ <p
1249
+ id="fd-notification-paragraph-4y"
1250
+ class="fd-notification__paragraph">
1251
+ Description of notification topic
1252
+ </p>
1253
+
1254
+ <div class="fd-notification__footer" id="fd-notification-footnotes-4y">
1255
+ <span class="fd-notification__footer-content">Product Name</span>
1256
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1257
+ <span class="fd-notification__footer-content">Feature Name</span>
1258
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1259
+ <span class="fd-notification__footer-content">14:00</span>
1260
+ </div>
1261
+ </div>
1262
+
1263
+ <div class="fd-notification__actions">
1264
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
1265
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
1266
+ </button>
1267
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
1268
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
1269
+ </button>
1270
+ </div>
1271
+ </div>
1272
+ </li>
1273
+ <li
1274
+ class="fd-notification"
1275
+ aria-level="2"
1276
+ aria-posinset="5"
1277
+ aria-setsize="5"
1278
+ tabindex="0"
1279
+ aria-labelledby="
1280
+ fd-notification-title-5y
1281
+ fd-notification-title-status-5y
1282
+ fd-notification-paragraph-5y
1283
+ fd-notification-footnotes-5y
1284
+ ">
1285
+ <div class="fd-notification__body">
1286
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar" aria-hidden="true">
1287
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--image-viewer"></i>
1288
+ </span>
1289
+ <div class="fd-notification__content">
1290
+ <div class="fd-notification__header">
1291
+ <h4
1292
+ id="fd-notification-title-5y"
1293
+ class="fd-notification__title fd-notification__title--unread">
1294
+ Notification Title
1295
+ </h4>
1296
+ <span
1297
+ id="fd-notification-title-status-5y"
1298
+ class="fd-notification__sr-only">
1299
+ Unread
1300
+ </span>
1301
+ </div>
1302
+ <p
1303
+ id="fd-notification-paragraph-5y"
1304
+ class="fd-notification__paragraph">
1305
+ Description of notification topic
1306
+ </p>
1307
+
1308
+ <div class="fd-notification__footer" id="fd-notification-footnotes-5y">
1309
+ <span class="fd-notification__footer-content">Product Name</span>
1310
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1311
+ <span class="fd-notification__footer-content">Feature Name</span>
1312
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1313
+ <span class="fd-notification__footer-content">15:00</span>
1314
+ </div>
1315
+ </div>
1316
+
1317
+ <div class="fd-notification__actions">
1318
+ <button class="fd-button fd-button--transparent" aria-label="More Actions" title="More Actions" tabindex="0">
1319
+ <i class="sap-icon--overflow" role="presentation" aria-hidden="true"></i>
1320
+ </button>
1321
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
1322
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
1323
+ </button>
1324
+ </div>
1325
+ </div>
1326
+ </li>
1327
+ </ul>
1328
+ </div>
1329
+ </li>
1330
+
1331
+ <li
1332
+ class="fd-notification-group"
1333
+ tabindex="0"
1334
+ aria-level="1"
1335
+ aria-posinset="3"
1336
+ aria-setsize="4"
1337
+ aria-description="Notification group collapsed"
1338
+ aria-labelledby="fd-notification-group-title-3">
1339
+ <div class="fd-notification-group__wrapper">
1340
+ <div
1341
+ class="fd-notification-group__header"
1342
+ tabindex="0"
1343
+ role="button"
1344
+ aria-expanded="false"
1345
+ aria-controls="fd-notification-group-3"
1346
+ title="Expand/Collapse">
1347
+ <span class="fd-notification-group__header-arrow">
1348
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
1349
+ </span>
1350
+ <span
1351
+ class="fd-notification-group__header-title"
1352
+ role="heading"
1353
+ aria-level="2" id="fd-notification-group-title-3">
1354
+ Last Week
1355
+ </span>
1356
+ </div>
1357
+ </div>
1358
+ </li>
1359
+
1360
+ <li
1361
+ class="fd-notification-group"
1362
+ tabindex="0"
1363
+ aria-level="1"
1364
+ aria-posinset="4"
1365
+ aria-setsize="4"
1366
+ aria-description="Notification group collapsed"
1367
+ aria-labelledby="fd-notification-group-title-4">
1368
+ <div class="fd-notification-group__wrapper">
1369
+ <div
1370
+ class="fd-notification-group__header"
1371
+ tabindex="0"
1372
+ role="button"
1373
+ aria-expanded="false"
1374
+ aria-controls="fd-notification-group-4"
1375
+ title="Expand/Collapse">
1376
+ <span class="fd-notification-group__header-arrow">
1377
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
1378
+ </span>
1379
+ <span
1380
+ class="fd-notification-group__header-title"
1381
+ role="heading"
1382
+ aria-level="2"
1383
+ id="fd-notification-group-title-4">Last Month Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione odit velit consequatur itaque temporibus. Amet aspernatur quos suscipit numquam soluta blanditiis nostrum repellendus. Temporibus accusantium ullam aut aspernatur dolor reprehenderit.</span>
1384
+ </div>
1385
+ </div>
1386
+ </li>
1387
+ </ul>
1388
+ ```
1389
+
1390
+ ### NotificationBanner
1391
+
1392
+ Notifications can be displayed as banners in the top right corner. Apply the modifier class \
1393
+
1394
+ ```html
1395
+ <div class="fd-notification-banner">
1396
+ <div
1397
+ class="fd-notification"
1398
+ role="alert"
1399
+ tabindex="0"
1400
+ aria-labelledby="
1401
+ fd-notification-title-1b
1402
+ fd-notification-title-status-1b
1403
+ fd-notification-paragraph-1b
1404
+ fd-notification-footnotes-1b
1405
+ ">
1406
+ <div class="fd-notification__body">
1407
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
1408
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
1409
+ </span>
1410
+ <div class="fd-notification__content">
1411
+ <div class="fd-notification__header">
1412
+
1413
+ <h4
1414
+ id="fd-notification-title-1b"
1415
+ class="fd-notification__title fd-notification__title--unread">
1416
+ Notification Title
1417
+ </h4>
1418
+
1419
+ <span
1420
+ id="fd-notification-title-status-1b"
1421
+ class="fd-notification__sr-only">
1422
+ Unread
1423
+ </span>
1424
+ <p
1425
+ id="fd-notification-paragraph-1b"
1426
+ class="fd-notification__paragraph">
1427
+ Description of notification topic
1428
+ </p>
1429
+
1430
+ <div class="fd-notification__footer" id="fd-notification-footnotes-1b">
1431
+ <span class="fd-notification__footer-content">Product Name</span>
1432
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1433
+ <span class="fd-notification__footer-content">Feature Name</span>
1434
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1435
+ <span class="fd-notification__footer-content">11:11</span>
1436
+ </div>
1437
+ </div>
1438
+
1439
+ <div class="fd-notification__actions">
1440
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
1441
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
1442
+ </button>
1443
+ </div>
1444
+ </div>
1445
+ </div>
1446
+
1447
+ <div
1448
+ class="fd-notification"
1449
+ role="alert"
1450
+ tabindex="0"
1451
+ aria-labelledby="
1452
+ fd-notification-title-2b
1453
+ fd-notification-title-status-2b
1454
+ fd-notification-paragraph-2b
1455
+ fd-notification-footnotes-2b
1456
+ ">
1457
+ <div class="fd-notification__body">
1458
+ <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
1459
+ <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
1460
+ </span>
1461
+ <div class="fd-notification__content">
1462
+ <div class="fd-notification__header">
1463
+
1464
+ <h4
1465
+ id="fd-notification-title-2b"
1466
+ class="fd-notification__title fd-notification__title--unread">
1467
+ Notification Title
1468
+ </h4>
1469
+
1470
+ <span
1471
+ id="fd-notification-title-status-2b"
1472
+ class="fd-notification__sr-only">
1473
+ Unread
1474
+ </span>
1475
+ </div>
1476
+ <p
1477
+ id="fd-notification-paragraph-2b"
1478
+ class="fd-notification__paragraph">
1479
+ Description of notification topic
1480
+ </p>
1481
+
1482
+ <div class="fd-notification__footer" id="fd-notification-footnotes-2b">
1483
+ <span class="fd-notification__footer-content">Product Name</span>
1484
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1485
+ <span class="fd-notification__footer-content">Feature Name</span>
1486
+ <span class="fd-notification__separator" role="presentation" aria-hidden="true"></span>
1487
+ <span class="fd-notification__footer-content">11:11</span>
1488
+ </div>
1489
+ </div>
1490
+
1491
+ <div class="fd-notification__actions">
1492
+ <button class="fd-button fd-button--transparent" aria-label="Close" title="Close" tabindex="0">
1493
+ <i class="sap-icon--decline" role="presentation" aria-hidden="true"></i>
1494
+ </button>
1495
+ </div>
1496
+ </div>
1497
+ </div>
1498
+ ```
1499
+
1500
+ ## Accessibility
1501
+
1502
+ - Use semantic HTML elements where appropriate
1503
+ - Include proper ARIA attributes for interactive elements
1504
+ - Ensure keyboard navigation support
1505
+ - Provide adequate color contrast
1506
+
1507
+ ## Source
1508
+
1509
+ This documentation was automatically generated from: `packages/styles/stories/Components/notification/notification.stories.js`
1510
+
1511
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).