@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/list.md ADDED
@@ -0,0 +1,1286 @@
1
+ ---
2
+ component: fd-list
3
+ title: Components/Object List
4
+ category: Components
5
+ selector: fd-list
6
+ cssFile: list.css
7
+ sourcePath: packages/styles/stories/Components/object-list/object-list.stories.js
8
+ tags: []
9
+ dependencies: ["avatar","icon","list","object-identifier","object-list","object-marker","object-number","object-status"]
10
+ relatedComponents: ["avatar","icon","list","object-identifier","object-list","object-marker","object-number","object-status"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.521Z
13
+ ---
14
+
15
+ # Components/Object List
16
+
17
+ An object list is a type of list that consists of object list items, where each item provides a quick
18
+ overview of an object. Object list items should only contain essential information for the user to identify
19
+ what objects to prioritize. Avoid long descriptive texts as the text space is limited and will truncate.
20
+
21
+ **Object list items can display the following elements:**
22
+
23
+ - Title of the object
24
+ - Avatar
25
+ - Object display components such as **Object Identifier**, **Object Number**, **Object Attribute**, **Object Marker** and **Object Status**
26
+ - Introductory text indicating the origin of the object, such as _Forwarded by..._ or _On Behalf of..._
27
+ - Icon that identifies the object
28
+ - The first status line can contain indicator icons for locked items, favorites, or items that have been
29
+ flagged for follow-up
30
+
31
+ ##Usage
32
+ **Use the object list if:**
33
+
34
+ - You want to display brief details to the user.
35
+
36
+ **Do not use the object list if:**
37
+
38
+ - You want to display detailed information to the user.
39
+ - You want to trigger more than one event, as each object list item should contain one link.
40
+
41
+ ##Modifiers
42
+
43
+ The object list item can display several object display components with semantic statuses.
44
+ Below are examples of how to add semantic statuses to the components:
45
+
46
+ | **Status** | <span style="margin-left: 2rem;">**Object Number**</span> | <span style="margin-left: 2rem;">**Object Status**</span> |
47
+ | :---- | :-------------- | :-------------- |
48
+ | Positive| <code style="margin-left: 2rem;">fd-object-number--positive</code> | <code style="margin-left: 2rem;">fd-object-status--positive</code> |
49
+ | Negative| <code style="margin-left: 2rem;">fd-object-number--negative</code> | <code style="margin-left: 2rem;">fd-object-status--negative</code> |
50
+ | Critical| <code style="margin-left: 2rem;">fd-object-number--critical</code> | <code style="margin-left: 2rem;">fd-object-status--critical</code> |
51
+ | Informative| <code style="margin-left: 2rem;">fd-object-number--informative</code> | <code style="margin-left: 2rem;">fd-object-status--informative</code> |
52
+
53
+
54
+ ## Structure
55
+ **Object list consists of the following elements:**
56
+
57
+ - \
58
+
59
+ ## Usage Guidelines
60
+
61
+ **Use the object list if:**
62
+
63
+ - You want to display brief details to the user.
64
+
65
+ ## When Not To Use
66
+
67
+ - You want to display detailed information to the user.
68
+ - You want to trigger more than one event, as each object list item should contain one link.
69
+
70
+ ## Dependencies
71
+
72
+ This component depends on the following CSS files:
73
+
74
+ - `avatar.css`
75
+ - `icon.css`
76
+ - `list.css`
77
+ - `object-identifier.css`
78
+ - `object-list.css`
79
+ - `object-marker.css`
80
+ - `object-number.css`
81
+ - `object-status.css`
82
+
83
+ ## Installation
84
+
85
+ ```bash
86
+ npm install fundamental-styles
87
+ ```
88
+
89
+ ```html
90
+ <!-- Include theme -->
91
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
92
+
93
+ <!-- Include component CSS -->
94
+ <link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
95
+
96
+ <!-- Include dependencies -->
97
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
98
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
99
+ <link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
100
+ <link href="node_modules/fundamental-styles/dist/object-identifier.css" rel="stylesheet">
101
+ <link href="node_modules/fundamental-styles/dist/object-list.css" rel="stylesheet">
102
+ <link href="node_modules/fundamental-styles/dist/object-marker.css" rel="stylesheet">
103
+ <link href="node_modules/fundamental-styles/dist/object-number.css" rel="stylesheet">
104
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
105
+ ```
106
+
107
+ ## Basic Usage
108
+
109
+ ```html
110
+ <h4 id="objectListItemHeader">Object List Item</h4>
111
+ <ul class="fd-list fd-object-list" role="list" aria-labelledby="objectListItemHeader">
112
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
113
+ <div class="fd-object-list__container">
114
+ <div class="fd-object-list__intro">
115
+ Optional inline text very very very long
116
+ </div>
117
+ <div class="fd-object-list__header">
118
+ <span class="fd-avatar fd-avatar--s"
119
+ >
120
+ </span>
121
+ <div class="fd-object-list__header-left">
122
+ <div class="fd-object-identifier fd-object-list__object-identifier">
123
+ <p class="fd-object-identifier__title">
124
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
125
+ </p>
126
+ </div>
127
+ </div>
128
+ <div class="fd-object-list__header-right">
129
+ <span class="fd-object-number fd-object-list__object-number">
130
+ <span class="fd-object-number__text">457.00</span>
131
+ <span class="fd-object-number__unit">Euro</span>
132
+ </span>
133
+ </div>
134
+ </div>
135
+ <div class="fd-object-list__content">
136
+ <div class="fd-object-list__row">
137
+ <div class="fd-object-list__row-left">
138
+ <div class="fd-object-list__object-attribute">
139
+
140
+ First Attribute
141
+ </div>
142
+ </div>
143
+ <div class="fd-object-list__row-right">
144
+ <div class="fd-object-marker">
145
+ <i class="fd-object-marker__icon sap-icon--flag"
146
+ aria-label="icon for flag"></i>
147
+ </div>
148
+ <div class="fd-object-marker">
149
+ <i class="fd-object-marker__icon sap-icon--favorite" aria-label="icon for favourite"></i>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <div class="fd-object-list__row">
154
+ <div class="fd-object-list__row-left">
155
+ <div class="fd-object-list__object-attribute">
156
+ Second Attribute
157
+ </div>
158
+ </div>
159
+ <div class="fd-object-list__row-right">
160
+ <span class="fd-object-status fd-object-status--critical">
161
+ <span class="fd-object-status__text">Critical very very very long</span>
162
+ </span>
163
+ </div>
164
+ </div>
165
+ <div class="fd-object-list__row">
166
+ <div class="fd-object-list__row-left">
167
+ <div class="fd-object-list__object-attribute">
168
+ Third Attribute
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </li>
175
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
176
+ <div class="fd-object-list__container">
177
+ <div class="fd-object-list__intro">
178
+ Optional inline text very very very long
179
+ </div>
180
+ <div class="fd-object-list__header">
181
+ <span class="fd-avatar fd-avatar--s"
182
+ >
183
+ </span>
184
+ <div class="fd-object-list__header-left">
185
+ <div class="fd-object-identifier fd-object-list__object-identifier">
186
+ <p class="fd-object-identifier__title">
187
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
188
+ </p>
189
+ </div>
190
+ </div>
191
+ <div class="fd-object-list__header-right">
192
+ <span class="fd-object-number fd-object-list__object-number">
193
+ <span class="fd-object-number__text">956.00</span>
194
+ <span class="fd-object-number__unit">Euro</span>
195
+ </span>
196
+ </div>
197
+ </div>
198
+ <div class="fd-object-list__content">
199
+ <div class="fd-object-list__row">
200
+ <div class="fd-object-list__row-left">
201
+ <div class="fd-object-list__object-attribute">
202
+ First Attribute
203
+ </div>
204
+ </div>
205
+ <div class="fd-object-list__row-right">
206
+ <span class="fd-object-status fd-object-status--negative">
207
+ <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
208
+ <span class="fd-object-status__text">Negative</span>
209
+ </span>
210
+ </div>
211
+ </div>
212
+ <div class="fd-object-list__row">
213
+ <div class="fd-object-list__row-left">
214
+ <div class="fd-object-list__object-attribute">
215
+ Second Attribute
216
+ </div>
217
+ </div>
218
+ <div class="fd-object-list__row-right">
219
+ <span class="fd-object-status fd-object-status--negative">
220
+ <span class="fd-object-status__text">Negative</span>
221
+ </span>
222
+ </div>
223
+ </div>
224
+ <div class="fd-object-list__row">
225
+ <div class="fd-object-list__row-left">
226
+ <div class="fd-object-list__object-attribute">
227
+ Third Attribute
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </li>
234
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
235
+ <div class="fd-object-list__container">
236
+ <div class="fd-object-list__intro">
237
+ Optional inline text very very very long
238
+ </div>
239
+ <div class="fd-object-list__header">
240
+ <span class="fd-avatar fd-avatar--s"
241
+ >
242
+ </span>
243
+ <div class="fd-object-list__header-left">
244
+ <div class="fd-object-identifier fd-object-list__object-identifier">
245
+ <p class="fd-object-identifier__title">
246
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
247
+ </p>
248
+ </div>
249
+ </div>
250
+ <div class="fd-object-list__header-right">
251
+ <span class="fd-object-number fd-object-number--informative fd-object-list__object-number">
252
+ <span class="fd-object-number__text">956.00</span>
253
+ <span class="fd-object-number__unit">Euro</span>
254
+ </span>
255
+ </div>
256
+ </div>
257
+ <div class="fd-object-list__content">
258
+ <div class="fd-object-list__row">
259
+
260
+ <div class="fd-object-list__row-right">
261
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--critical">
262
+ <span class="fd-object-status__text">Warning</span>
263
+ </span>
264
+ </div>
265
+ </div>
266
+ <div class="fd-object-list__row">
267
+
268
+ <div class="fd-object-list__row-right">
269
+ <span class="fd-object-status fd-object-status--critical">
270
+ <span class="fd-object-status__text">Critical</span>
271
+ </span>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </li>
277
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
278
+ <div class="fd-object-list__container">
279
+ <div class="fd-object-list__intro">
280
+ Optional inline text very very very long
281
+ </div>
282
+ <div class="fd-object-list__header">
283
+ <span class="fd-avatar fd-avatar--s"
284
+ >
285
+ </span>
286
+ <div class="fd-object-list__header-left">
287
+ <div class="fd-object-identifier fd-object-list__object-identifier">
288
+ <p class="fd-object-identifier__title">
289
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
290
+ </p>
291
+ </div>
292
+ </div>
293
+ <div class="fd-object-list__header-right">
294
+ <span class="fd-object-number fd-object-number--negative fd-object-list__object-number">
295
+ <span class="fd-object-number__text">457.00</span>
296
+ <span class="fd-object-number__unit">Euro</span>
297
+ </span>
298
+ </div>
299
+ </div>
300
+ <div class="fd-object-list__content">
301
+ <div class="fd-object-list__row">
302
+ <div class="fd-object-list__row-left">
303
+ <div class="fd-object-list__object-attribute">
304
+ First Attribute
305
+ </div>
306
+ </div>
307
+ <div class="fd-object-list__row-right">
308
+ <div class="fd-object-marker">
309
+ <i class="fd-object-marker__icon sap-icon--user-edit" role="presentation"></i>
310
+ <span class="fd-object-marker__text">Draft</span>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="fd-object-list__row">
315
+ <div class="fd-object-list__row-left">
316
+ <div class="fd-object-list__object-attribute">
317
+ Second Attribute
318
+ </div>
319
+ </div>
320
+ </div>
321
+ <div class="fd-object-list__row">
322
+ <div class="fd-object-list__row-left">
323
+ <div class="fd-object-list__object-attribute">
324
+ Third Attribute
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </li>
331
+ </ul>
332
+ ```
333
+
334
+ ## Modifiers
335
+
336
+ | Class | Description |
337
+ |-------|-------------|
338
+ | `fd-list--navigation` | An object list can display links that the users can navigate to |
339
+ | `fd-list--navigation-object` | An object list can display links that the users can navigate to |
340
+ | `fd-list--no-border` | Object list items can be displayed without borders |
341
+ | `fd-list--selection` | Object list items can be selectable by adding the `fd-list--selection` and `fd-list--selection-row` modifier classes to the main element. |
342
+ | `fd-list--selection-row` | Object list items can be selectable by adding the `fd-list--selection` and `fd-list--selection-row` modifier classes to the main element. |
343
+
344
+ ## States
345
+
346
+ | Class | Description |
347
+ |-------|-------------|
348
+ | `is-active` | Active state |
349
+ | `is-selected` | Selected state |
350
+
351
+ ## BEM Elements
352
+
353
+ This component uses the following BEM elements:
354
+
355
+ - `fd-list__item`
356
+ - `fd-list__item--link`
357
+ - `fd-list__link`
358
+
359
+ ## Component Structure
360
+
361
+ **Object list consists of the following elements:**
362
+
363
+ - \
364
+
365
+ ## Related Components
366
+
367
+ This component works with or depends on:
368
+
369
+ - `avatar`
370
+ - `icon`
371
+ - `list`
372
+ - `object-identifier`
373
+ - `object-list`
374
+ - `object-marker`
375
+ - `object-number`
376
+ - `object-status`
377
+
378
+ ## Examples
379
+
380
+ ### Standard
381
+
382
+ The standard object list item displays a title, introductory text, an avatar and object display components. It is recommended to display avatar in size S, therefore add the `fd-avatar--s` modifier class to the `fd-avatar` element.
383
+
384
+ ```html
385
+ <h4 id="objectListItemHeader">Object List Item</h4>
386
+ <ul class="fd-list fd-object-list" role="list" aria-labelledby="objectListItemHeader">
387
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
388
+ <div class="fd-object-list__container">
389
+ <div class="fd-object-list__intro">
390
+ Optional inline text very very very long
391
+ </div>
392
+ <div class="fd-object-list__header">
393
+ <span class="fd-avatar fd-avatar--s"
394
+ >
395
+ </span>
396
+ <div class="fd-object-list__header-left">
397
+ <div class="fd-object-identifier fd-object-list__object-identifier">
398
+ <p class="fd-object-identifier__title">
399
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
400
+ </p>
401
+ </div>
402
+ </div>
403
+ <div class="fd-object-list__header-right">
404
+ <span class="fd-object-number fd-object-list__object-number">
405
+ <span class="fd-object-number__text">457.00</span>
406
+ <span class="fd-object-number__unit">Euro</span>
407
+ </span>
408
+ </div>
409
+ </div>
410
+ <div class="fd-object-list__content">
411
+ <div class="fd-object-list__row">
412
+ <div class="fd-object-list__row-left">
413
+ <div class="fd-object-list__object-attribute">
414
+
415
+ First Attribute
416
+ </div>
417
+ </div>
418
+ <div class="fd-object-list__row-right">
419
+ <div class="fd-object-marker">
420
+ <i class="fd-object-marker__icon sap-icon--flag"
421
+ aria-label="icon for flag"></i>
422
+ </div>
423
+ <div class="fd-object-marker">
424
+ <i class="fd-object-marker__icon sap-icon--favorite" aria-label="icon for favourite"></i>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ <div class="fd-object-list__row">
429
+ <div class="fd-object-list__row-left">
430
+ <div class="fd-object-list__object-attribute">
431
+ Second Attribute
432
+ </div>
433
+ </div>
434
+ <div class="fd-object-list__row-right">
435
+ <span class="fd-object-status fd-object-status--critical">
436
+ <span class="fd-object-status__text">Critical very very very long</span>
437
+ </span>
438
+ </div>
439
+ </div>
440
+ <div class="fd-object-list__row">
441
+ <div class="fd-object-list__row-left">
442
+ <div class="fd-object-list__object-attribute">
443
+ Third Attribute
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </li>
450
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
451
+ <div class="fd-object-list__container">
452
+ <div class="fd-object-list__intro">
453
+ Optional inline text very very very long
454
+ </div>
455
+ <div class="fd-object-list__header">
456
+ <span class="fd-avatar fd-avatar--s"
457
+ >
458
+ </span>
459
+ <div class="fd-object-list__header-left">
460
+ <div class="fd-object-identifier fd-object-list__object-identifier">
461
+ <p class="fd-object-identifier__title">
462
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
463
+ </p>
464
+ </div>
465
+ </div>
466
+ <div class="fd-object-list__header-right">
467
+ <span class="fd-object-number fd-object-list__object-number">
468
+ <span class="fd-object-number__text">956.00</span>
469
+ <span class="fd-object-number__unit">Euro</span>
470
+ </span>
471
+ </div>
472
+ </div>
473
+ <div class="fd-object-list__content">
474
+ <div class="fd-object-list__row">
475
+ <div class="fd-object-list__row-left">
476
+ <div class="fd-object-list__object-attribute">
477
+ First Attribute
478
+ </div>
479
+ </div>
480
+ <div class="fd-object-list__row-right">
481
+ <span class="fd-object-status fd-object-status--negative">
482
+ <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
483
+ <span class="fd-object-status__text">Negative</span>
484
+ </span>
485
+ </div>
486
+ </div>
487
+ <div class="fd-object-list__row">
488
+ <div class="fd-object-list__row-left">
489
+ <div class="fd-object-list__object-attribute">
490
+ Second Attribute
491
+ </div>
492
+ </div>
493
+ <div class="fd-object-list__row-right">
494
+ <span class="fd-object-status fd-object-status--negative">
495
+ <span class="fd-object-status__text">Negative</span>
496
+ </span>
497
+ </div>
498
+ </div>
499
+ <div class="fd-object-list__row">
500
+ <div class="fd-object-list__row-left">
501
+ <div class="fd-object-list__object-attribute">
502
+ Third Attribute
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </li>
509
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
510
+ <div class="fd-object-list__container">
511
+ <div class="fd-object-list__intro">
512
+ Optional inline text very very very long
513
+ </div>
514
+ <div class="fd-object-list__header">
515
+ <span class="fd-avatar fd-avatar--s"
516
+ >
517
+ </span>
518
+ <div class="fd-object-list__header-left">
519
+ <div class="fd-object-identifier fd-object-list__object-identifier">
520
+ <p class="fd-object-identifier__title">
521
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
522
+ </p>
523
+ </div>
524
+ </div>
525
+ <div class="fd-object-list__header-right">
526
+ <span class="fd-object-number fd-object-number--informative fd-object-list__object-number">
527
+ <span class="fd-object-number__text">956.00</span>
528
+ <span class="fd-object-number__unit">Euro</span>
529
+ </span>
530
+ </div>
531
+ </div>
532
+ <div class="fd-object-list__content">
533
+ <div class="fd-object-list__row">
534
+
535
+ <div class="fd-object-list__row-right">
536
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--critical">
537
+ <span class="fd-object-status__text">Warning</span>
538
+ </span>
539
+ </div>
540
+ </div>
541
+ <div class="fd-object-list__row">
542
+
543
+ <div class="fd-object-list__row-right">
544
+ <span class="fd-object-status fd-object-status--critical">
545
+ <span class="fd-object-status__text">Critical</span>
546
+ </span>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </li>
552
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
553
+ <div class="fd-object-list__container">
554
+ <div class="fd-object-list__intro">
555
+ Optional inline text very very very long
556
+ </div>
557
+ <div class="fd-object-list__header">
558
+ <span class="fd-avatar fd-avatar--s"
559
+ >
560
+ </span>
561
+ <div class="fd-object-list__header-left">
562
+ <div class="fd-object-identifier fd-object-list__object-identifier">
563
+ <p class="fd-object-identifier__title">
564
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
565
+ </p>
566
+ </div>
567
+ </div>
568
+ <div class="fd-object-list__header-right">
569
+ <span class="fd-object-number fd-object-number--negative fd-object-list__object-number">
570
+ <span class="fd-object-number__text">457.00</span>
571
+ <span class="fd-object-number__unit">Euro</span>
572
+ </span>
573
+ </div>
574
+ </div>
575
+ <div class="fd-object-list__content">
576
+ <div class="fd-object-list__row">
577
+ <div class="fd-object-list__row-left">
578
+ <div class="fd-object-list__object-attribute">
579
+ First Attribute
580
+ </div>
581
+ </div>
582
+ <div class="fd-object-list__row-right">
583
+ <div class="fd-object-marker">
584
+ <i class="fd-object-marker__icon sap-icon--user-edit" role="presentation"></i>
585
+ <span class="fd-object-marker__text">Draft</span>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ <div class="fd-object-list__row">
590
+ <div class="fd-object-list__row-left">
591
+ <div class="fd-object-list__object-attribute">
592
+ Second Attribute
593
+ </div>
594
+ </div>
595
+ </div>
596
+ <div class="fd-object-list__row">
597
+ <div class="fd-object-list__row-left">
598
+ <div class="fd-object-list__object-attribute">
599
+ Third Attribute
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </li>
606
+ </ul>
607
+ ```
608
+
609
+ ### Navigation
610
+
611
+ An object list can display links that the users can navigate to. To display a navigation object list, add the `fd-list--navigation-object` modifier class together with `fd-list--navigation` and the `fd-list__item--link` modifier class to the list elements that contain a link. All items should be navigable.
612
+
613
+ ```html
614
+ <h4 id="objectListItemNavigation">Object List Item With Navigation</h4>
615
+
616
+ <div role="navigation">
617
+ <ul class="fd-list fd-object-list fd-list--navigation-object fd-list--navigation" role="list" aria-labelledby="objectListItemNavigation">
618
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item fd-list__item--link">
619
+ <a tabindex="0" class="fd-list__link" href="#">
620
+ <div class="fd-object-list__container">
621
+ <div class="fd-object-list__intro">
622
+ Optional inline text very very very long
623
+ </div>
624
+ <div class="fd-object-list__header">
625
+ <span class="fd-avatar fd-avatar--s fd-avatar--circle"
626
+ >
627
+ </span>
628
+ <div class="fd-object-list__header-left">
629
+ <div class="fd-object-identifier fd-object-list__object-identifier">
630
+ <p class="fd-object-identifier__title">
631
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
632
+ </p>
633
+ </div>
634
+ </div>
635
+ <div class="fd-object-list__header-right">
636
+ <span class="fd-object-number fd-object-number--critical fd-object-list__object-number">
637
+ <span class="fd-object-number__text">457.00</span>
638
+ <span class="fd-object-number__unit">Euro</span>
639
+ </span>
640
+ </div>
641
+ </div>
642
+ <div class="fd-object-list__content">
643
+ <div class="fd-object-list__row">
644
+ <div class="fd-object-list__row-left">
645
+ <div class="fd-object-list__object-attribute">
646
+
647
+ First Attribute
648
+ </div>
649
+ </div>
650
+ <div class="fd-object-list__row-right">
651
+ <div class="fd-object-marker">
652
+ <i class="fd-object-marker__icon sap-icon--flag"
653
+ aria-label="icon for flag"></i>
654
+ </div>
655
+ <div class="fd-object-marker">
656
+ <i class="fd-object-marker__icon sap-icon--favorite" aria-label="icon for favourite"></i>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ <div class="fd-object-list__row">
661
+ <div class="fd-object-list__row-left">
662
+ <div class="fd-object-list__object-attribute">
663
+ Second Attribute
664
+ </div>
665
+ </div>
666
+ <div class="fd-object-list__row-right">
667
+ <span class="fd-object-status">
668
+ <span class="fd-object-status__text">Default</span>
669
+ </span>
670
+ </div>
671
+ </div>
672
+ <div class="fd-object-list__row">
673
+ <div class="fd-object-list__row-left">
674
+ <div class="fd-object-list__object-attribute">
675
+ Third Attribute
676
+ </div>
677
+ </div>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ </a>
682
+ </li>
683
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item fd-list__item--link">
684
+ <a tabindex="0" class="fd-list__link" href="#">
685
+ <div class="fd-object-list__container">
686
+ <div class="fd-object-list__intro">
687
+ Optional inline text very very very long
688
+ </div>
689
+ <div class="fd-object-list__header">
690
+ <span class="fd-avatar fd-avatar--s fd-avatar--circle"
691
+ >
692
+ </span>
693
+ <div class="fd-object-list__header-left">
694
+ <div class="fd-object-identifier fd-object-list__object-identifier">
695
+ <p class="fd-object-identifier__title">
696
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
697
+ </p>
698
+ </div>
699
+ </div>
700
+ <div class="fd-object-list__header-right">
701
+ <span class="fd-object-number fd-object-list__object-number">
702
+ <span class="fd-object-number__text">956.00</span>
703
+ <span class="fd-object-number__unit">Euro</span>
704
+ </span>
705
+ </div>
706
+ </div>
707
+ <div class="fd-object-list__content">
708
+ <div class="fd-object-list__row">
709
+ <div class="fd-object-list__row-left">
710
+ <div class="fd-object-list__object-attribute">
711
+
712
+ First Attribute
713
+ </div>
714
+ </div>
715
+ <div class="fd-object-list__row-right">
716
+ <span class="fd-object-status fd-object-status--negative">
717
+ <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
718
+ <span class="fd-object-status__text">Negative</span>
719
+ </span>
720
+ </div>
721
+ </div>
722
+ <div class="fd-object-list__row">
723
+ <div class="fd-object-list__row-left">
724
+ <div class="fd-object-list__object-attribute">
725
+ Second Attribute
726
+ </div>
727
+ </div>
728
+ <div class="fd-object-list__row-right">
729
+ <span class="fd-object-status fd-object-status--positive">
730
+ <span class="fd-object-status__text">Positive</span>
731
+ </span>
732
+ </div>
733
+ </div>
734
+ <div class="fd-object-list__row">
735
+ <div class="fd-object-list__row-left">
736
+ <div class="fd-object-list__object-attribute">
737
+ Third Attribute
738
+ </div>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ </a>
744
+ </li>
745
+ </ul>
746
+ </div>
747
+ ```
748
+
749
+ ### Selection
750
+
751
+ Object list items can be selectable by adding the `fd-list--selection` and `fd-list--selection-row` modifier classes to the main element.
752
+
753
+ ```html
754
+ <h4 id="objectListItemRowSelection">Object List Item With Row Selection</h4>
755
+ <ul class="fd-list fd-object-list fd-list--selection fd-list--selection-row" role="listbox" aria-labelledby="objectListItemRowSelection">
756
+ <li role="option" aria-selected="true" tabindex="0" class="fd-list__item fd-object-list__item is-selected">
757
+ <div class="fd-object-list__container">
758
+ <div class="fd-object-list__intro">
759
+ Optional inline text
760
+ <div class="fd-object-list__header">
761
+ <div class="fd-object-list__header-left">
762
+ <div class="fd-object-identifier fd-object-list__object-identifier">
763
+ <p class="fd-object-identifier__title">
764
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
765
+ </p>
766
+ </div>
767
+ </div>
768
+ <div class="fd-object-list__header-right">
769
+ <span class="fd-object-number fd-object-list__object-number">
770
+ <span class="fd-object-number__text">457.00</span>
771
+ <span class="fd-object-number__unit">Euro</span>
772
+ </span>
773
+ </div>
774
+ </div>
775
+ <div class="fd-object-list__content">
776
+ <div class="fd-object-list__row">
777
+ <div class="fd-object-list__row-left">
778
+ <div class="fd-object-list__object-attribute">
779
+
780
+ First Attribute
781
+ </div>
782
+ </div>
783
+ <div class="fd-object-list__row-right">
784
+ <div class="fd-object-marker">
785
+ <i class="fd-object-marker__icon sap-icon--flag"
786
+ aria-label="icon for flag"></i>
787
+ </div>
788
+ <div class="fd-object-marker">
789
+ <i class="fd-object-marker__icon sap-icon--favorite" aria-label="icon for favourite"></i>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ <div class="fd-object-list__row">
794
+ <div class="fd-object-list__row-left">
795
+ <div class="fd-object-list__object-attribute">
796
+ Second Attribute
797
+ </div>
798
+ </div>
799
+ <div class="fd-object-list__row-right">
800
+ <span class="fd-object-status fd-object-status--critical">
801
+ <span class="fd-object-status__text">Avaliable</span>
802
+ </span>
803
+ </div>
804
+ </div>
805
+ <div class="fd-object-list__row">
806
+ <div class="fd-object-list__row-left">
807
+ <div class="fd-object-list__object-attribute">
808
+ Third Attribute
809
+ </div>
810
+ </div>
811
+ </div>
812
+ </div>
813
+ </div>
814
+ </li>
815
+ <li role="option" aria-selected="false" tabindex="0" class="fd-list__item fd-object-list__item">
816
+ <div class="fd-object-list__container">
817
+ <div class="fd-object-list__intro">
818
+ Optional inline text
819
+ </div>
820
+ <div class="fd-object-list__header">
821
+ <span class="fd-avatar fd-avatar--s"
822
+ >
823
+ </span>
824
+ <div class="fd-object-list__header-left">
825
+ <div class="fd-object-identifier fd-object-list__object-identifier">
826
+ <p class="fd-object-identifier__title">
827
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
828
+ </p>
829
+ </div>
830
+ </div>
831
+ <div class="fd-object-list__header-right">
832
+ <span class="fd-object-number fd-object-number--positive fd-object-list__object-number">
833
+ <span class="fd-object-number__text">666.00</span>
834
+ <span class="fd-object-number__unit">Euro</span>
835
+ </span>
836
+ </div>
837
+ </div>
838
+ <div class="fd-object-list__content">
839
+ <div class="fd-object-list__row">
840
+ <div class="fd-object-list__row-left">
841
+ <div class="fd-object-list__object-attribute">
842
+
843
+ First Attribute
844
+ </div>
845
+ </div>
846
+ <div class="fd-object-list__row-right">
847
+ <span class="fd-object-status fd-object-status--negative">
848
+ <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
849
+ <span class="fd-object-status__text">Negative</span>
850
+ </span>
851
+ </div>
852
+ </div>
853
+ <div class="fd-object-list__row">
854
+ <div class="fd-object-list__row-left">
855
+ <div class="fd-object-list__object-attribute">
856
+ Second Attribute
857
+ </div>
858
+ </div>
859
+ <div class="fd-object-list__row-right">
860
+ <span class="fd-object-status fd-object-status--informative">
861
+ <span class="fd-object-status__text">Informative</span>
862
+ </span>
863
+ </div>
864
+ </div>
865
+ <div class="fd-object-list__row">
866
+ <div class="fd-object-list__row-left">
867
+ <div class="fd-object-list__object-attribute">
868
+ Third Attribute
869
+ </div>
870
+ </div>
871
+ </div>
872
+ </div>
873
+ </div>
874
+ </li>
875
+ </ul>
876
+ </div>
877
+ ```
878
+
879
+ ### SelectionWithNavigation
880
+
881
+ This object list is both selectable and navigable. To display selectable object list items with navigation, add the `fd-list--selection`, `fd-list--navigation` and `fd-list--navigation-object` modifier classes to the list and the `fd-list__item--link` modifier class to the list elements that contain links. All items should be navigable.
882
+
883
+ ```html
884
+ <h4 id="objectListItemRowSelectionAndNavigation">Object List Item With Row Selection And Navigation</h4>
885
+ <div role="navigation">
886
+ <ul class="fd-list fd-object-list fd-list--navigation-object fd-list--navigation fd-list--selection" role="listbox" aria-labelledby="objectListItemRowSelectionAndNavigation">
887
+ <li role="option" aria-selected="true" tabindex="0" class="fd-list__item fd-object-list__item fd-list__item--link is-selected">
888
+ <a tabindex="0" id="anchor" class="fd-list__link is-active">
889
+ <div class="fd-object-list__container">
890
+ <div class="fd-object-list__intro">
891
+ Optional inline text
892
+ </div>
893
+ <div class="fd-object-list__header">
894
+ <span class="fd-avatar fd-avatar--s"
895
+ >
896
+ </span>
897
+ <div class="fd-object-list__header-left">
898
+ <div class="fd-object-identifier fd-object-list__object-identifier">
899
+ <p class="fd-object-identifier__title">
900
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
901
+ </p>
902
+ </div>
903
+ </div>
904
+ <div class="fd-object-list__header-right">
905
+ <span class="fd-object-number fd-object-list__object-number">
906
+ <span class="fd-object-number__text">457.00</span>
907
+ <span class="fd-object-number__unit">Euro</span>
908
+ </span>
909
+ </div>
910
+ </div>
911
+ <div class="fd-object-list__content">
912
+ <div class="fd-object-list__row">
913
+ <div class="fd-object-list__row-left">
914
+ <div class="fd-object-list__object-attribute">
915
+
916
+ First Attribute
917
+ </div>
918
+ </div>
919
+ <div class="fd-object-list__row-right">
920
+ <div class="fd-object-marker">
921
+ <i class="fd-object-marker__icon sap-icon--flag"
922
+ aria-label="icon for flag"></i>
923
+ </div>
924
+ <div class="fd-object-marker">
925
+ <i class="fd-object-marker__icon sap-icon--favorite" aria-label="icon for favourite"></i>
926
+ </div>
927
+ </div>
928
+ </div>
929
+ <div class="fd-object-list__row">
930
+ <div class="fd-object-list__row-left">
931
+ <div class="fd-object-list__object-attribute">
932
+ Second Attribute
933
+ </div>
934
+ </div>
935
+ <div class="fd-object-list__row-right">
936
+ <span class="fd-object-status fd-object-status--critical">
937
+ <span class="fd-object-status__text">Avaliable</span>
938
+ </span>
939
+ </div>
940
+ </div>
941
+ <div class="fd-object-list__row">
942
+ <div class="fd-object-list__row-left">
943
+ <div class="fd-object-list__object-attribute">
944
+ Third Attribute
945
+ </div>
946
+ </div>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ </a>
951
+ </li>
952
+ <li role="option" aria-selected="true" tabindex="0" class="fd-list__item fd-object-list__item fd-list__item--link is-selected">
953
+ <a tabindex="0" class="fd-list__link">
954
+ <div class="fd-object-list__container">
955
+ <div class="fd-object-list__intro">
956
+ Optional inline text
957
+ </div>
958
+ <div class="fd-object-list__header">
959
+ <span class="fd-avatar fd-avatar--s"
960
+ >
961
+ </span>
962
+ <div class="fd-object-list__header-left">
963
+ <div class="fd-object-identifier fd-object-list__object-identifier">
964
+ <p class="fd-object-identifier__title">
965
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
966
+ </p>
967
+ </div>
968
+ </div>
969
+ <div class="fd-object-list__header-right">
970
+ <span class="fd-object-number fd-object-list__object-number">
971
+ <span class="fd-object-number__text">457.00</span>
972
+ <span class="fd-object-number__unit">Euro</span>
973
+ </span>
974
+ </div>
975
+ </div>
976
+ <div class="fd-object-list__content">
977
+ <div class="fd-object-list__row">
978
+ <div class="fd-object-list__row-left">
979
+ <div class="fd-object-list__object-attribute">
980
+
981
+ First Attribute
982
+ </div>
983
+ </div>
984
+ <div class="fd-object-list__row-right">
985
+ <div class="fd-object-marker">
986
+ <i class="fd-object-marker__icon sap-icon--flag"
987
+ aria-label="icon for flag"></i>
988
+ </div>
989
+ <div class="fd-object-marker">
990
+ <i class="fd-object-marker__icon sap-icon--favorite" aria-label="icon for favourite"></i>
991
+ </div>
992
+ </div>
993
+ </div>
994
+ <div class="fd-object-list__row">
995
+ <div class="fd-object-list__row-left">
996
+ <div class="fd-object-list__object-attribute">
997
+ Second Attribute
998
+ </div>
999
+ </div>
1000
+ <div class="fd-object-list__row-right">
1001
+ <span class="fd-object-status fd-object-status--critical">
1002
+ <span class="fd-object-status__text">Avaliable</span>
1003
+ </span>
1004
+ </div>
1005
+ </div>
1006
+ <div class="fd-object-list__row">
1007
+ <div class="fd-object-list__row-left">
1008
+ <div class="fd-object-list__object-attribute">
1009
+ Third Attribute
1010
+ </div>
1011
+ </div>
1012
+ </div>
1013
+ </div>
1014
+ </div>
1015
+ </a>
1016
+ </li>
1017
+ <li role="option" aria-selected="false" tabindex="0" class="fd-list__item fd-object-list__item fd-list__item--link">
1018
+ <a tabindex="0" class="fd-list__link">
1019
+ <div class="fd-object-list__container">
1020
+ <div class="fd-object-list__intro">
1021
+ Optional inline text
1022
+ </div>
1023
+ <div class="fd-object-list__header">
1024
+ <span class="fd-avatar fd-avatar--s"
1025
+ >
1026
+ </span>
1027
+ <div class="fd-object-list__header-left">
1028
+ <div class="fd-object-identifier fd-object-list__object-identifier">
1029
+ <p class="fd-object-identifier__title">
1030
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
1031
+ </p>
1032
+ </div>
1033
+ </div>
1034
+ <div class="fd-object-list__header-right">
1035
+ <span class="fd-object-number fd-object-list__object-number">
1036
+ <span class="fd-object-number__text">666.00</span>
1037
+ <span class="fd-object-number__unit">Euro</span>
1038
+ </span>
1039
+ </div>
1040
+ </div>
1041
+ <div class="fd-object-list__content">
1042
+ <div class="fd-object-list__row">
1043
+ <div class="fd-object-list__row-left">
1044
+ <div class="fd-object-list__object-attribute">
1045
+
1046
+ First Attribute
1047
+ </div>
1048
+ </div>
1049
+ <div class="fd-object-list__row-right">
1050
+ <span class="fd-object-status fd-object-status--negative">
1051
+ <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
1052
+ <span class="fd-object-status__text">Negative</span>
1053
+ </span>
1054
+ </div>
1055
+ </div>
1056
+ <div class="fd-object-list__row">
1057
+ <div class="fd-object-list__row-left">
1058
+ <div class="fd-object-list__object-attribute">
1059
+ Second Attribute
1060
+ </div>
1061
+ </div>
1062
+ <div class="fd-object-list__row-right">
1063
+ <span class="fd-object-status fd-object-status--critical">
1064
+ <span class="fd-object-status__text">Critical</span>
1065
+ </span>
1066
+ </div>
1067
+ </div>
1068
+ <div class="fd-object-list__row">
1069
+ <div class="fd-object-list__row-left">
1070
+ <div class="fd-object-list__object-attribute">
1071
+ Third Attribute
1072
+ </div>
1073
+ </div>
1074
+ </div>
1075
+ </div>
1076
+ </div>
1077
+ </a>
1078
+ </li>
1079
+ </ul>
1080
+ </div>
1081
+ ```
1082
+
1083
+ ### Borderless
1084
+
1085
+ Object list items can be displayed without borders. To display a borderless list, add the `fd-list--no-border` modifier class to the list element.
1086
+
1087
+ ```html
1088
+ <h4 id="objectListItemBorderless">Borderless Object List Item</h4>
1089
+ <ul class="fd-list fd-object-list fd-list--no-border" role="list" aria-labelledby="objectListItemBorderless">
1090
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
1091
+ <div class="fd-object-list__container">
1092
+ <div class="fd-object-list__intro">
1093
+ Optional inline text very very very long
1094
+ <div class="fd-object-list__header">
1095
+ <span class="fd-avatar fd-avatar--s"
1096
+ >
1097
+ </span>
1098
+ <div class="fd-object-list__header-left">
1099
+ <div class="fd-object-identifier fd-object-list__object-identifier">
1100
+ <p class="fd-object-identifier__title">
1101
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
1102
+ </p>
1103
+ </div>
1104
+ </div>
1105
+ <div class="fd-object-list__header-right">
1106
+ <span class="fd-object-number fd-object-list__object-number">
1107
+ <span class="fd-object-number__text">457.00</span>
1108
+ <span class="fd-object-number__unit">Euro</span>
1109
+ </span>
1110
+ </div>
1111
+ </div>
1112
+ <div class="fd-object-list__content">
1113
+ <div class="fd-object-list__row">
1114
+ <div class="fd-object-list__row-left">
1115
+ <div class="fd-object-list__object-attribute">
1116
+
1117
+ First Attribute
1118
+ </div>
1119
+ </div>
1120
+ <div class="fd-object-list__row-right">
1121
+ <div class="fd-object-marker">
1122
+ <i class="fd-object-marker__icon sap-icon--flag"
1123
+ aria-label="icon for flag"></i>
1124
+ </div>
1125
+ <div class="fd-object-marker">
1126
+ <i class="fd-object-marker__icon sap-icon--favorite" aria-label="icon for favourite"></i>
1127
+ </div>
1128
+ </div>
1129
+ </div>
1130
+ <div class="fd-object-list__row">
1131
+ <div class="fd-object-list__row-left">
1132
+ <div class="fd-object-list__object-attribute">
1133
+ Second Attribute
1134
+ </div>
1135
+ </div>
1136
+ <div class="fd-object-list__row-right">
1137
+ <span class="fd-object-status fd-object-status--positive">
1138
+ <span class="fd-object-status__text">Positive very very very long</span>
1139
+ </span>
1140
+ </div>
1141
+ </div>
1142
+ <div class="fd-object-list__row">
1143
+ <div class="fd-object-list__row-left">
1144
+ <div class="fd-object-list__object-attribute">
1145
+ Third Attribute
1146
+ </div>
1147
+ </div>
1148
+ </div>
1149
+ </div>
1150
+ </div>
1151
+ </li>
1152
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
1153
+ <div class="fd-object-list__container">
1154
+ <div class="fd-object-list__intro">
1155
+ Optional inline text very very very long
1156
+ </div>
1157
+ <div class="fd-object-list__header">
1158
+ <span class="fd-avatar fd-avatar--s"
1159
+ >
1160
+ </span>
1161
+ <div class="fd-object-list__header-left">
1162
+ <div class="fd-object-identifier fd-object-list__object-identifier">
1163
+ <p class="fd-object-identifier__title">
1164
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
1165
+ </p>
1166
+ </div>
1167
+ </div>
1168
+ <div class="fd-object-list__header-right">
1169
+ <span class="fd-object-number fd-object-number--critical fd-object-list__object-number">
1170
+ <span class="fd-object-number__text">956.00</span>
1171
+ <span class="fd-object-number__unit">Euro</span>
1172
+ </span>
1173
+ </div>
1174
+ </div>
1175
+ <div class="fd-object-list__content">
1176
+ <div class="fd-object-list__row">
1177
+ <div class="fd-object-list__row-left">
1178
+ <div class="fd-object-list__object-attribute">
1179
+
1180
+ First Attribute
1181
+ </div>
1182
+ </div>
1183
+ <div class="fd-object-list__row-right">
1184
+ <span class="fd-object-status fd-object-status--negative">
1185
+ <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
1186
+ <span class="fd-object-status__text">Negative</span>
1187
+ </span>
1188
+ </div>
1189
+ </div>
1190
+ <div class="fd-object-list__row">
1191
+ <div class="fd-object-list__row-left">
1192
+ <div class="fd-object-list__object-attribute">
1193
+ Second Attribute
1194
+ </div>
1195
+ </div>
1196
+ <div class="fd-object-list__row-right">
1197
+ <span class="fd-object-status fd-object-status--critical">
1198
+ <span class="fd-object-status__text">Critical</span>
1199
+ </span>
1200
+ </div>
1201
+ </div>
1202
+ <div class="fd-object-list__row">
1203
+ <div class="fd-object-list__row-left">
1204
+ <div class="fd-object-list__object-attribute">
1205
+ Third Attribute
1206
+ </div>
1207
+ </div>
1208
+ </div>
1209
+ </div>
1210
+ </div>
1211
+ </li>
1212
+ <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
1213
+ <div class="fd-object-list__container">
1214
+ <div class="fd-object-list__intro">
1215
+ Optional inline text very very very long
1216
+ </div>
1217
+ <div class="fd-object-list__header">
1218
+ <span class="fd-avatar fd-avatar--s"
1219
+ >
1220
+ </span>
1221
+ <div class="fd-object-list__header-left">
1222
+ <div class="fd-object-identifier fd-object-list__object-identifier">
1223
+ <p class="fd-object-identifier__title">
1224
+ Fitbit Versa Smart Watch, Black Fitbit Versa Smart Watch
1225
+ </p>
1226
+ </div>
1227
+ </div>
1228
+ <div class="fd-object-list__header-right">
1229
+ <span class="fd-object-number fd-object-list__object-number">
1230
+ <span class="fd-object-number__text">956.00</span>
1231
+ <span class="fd-object-number__unit">Euro</span>
1232
+ </span>
1233
+ </div>
1234
+ </div>
1235
+ <div class="fd-object-list__content">
1236
+ <div class="fd-object-list__row">
1237
+ <div class="fd-object-list__row-left">
1238
+ <div class="fd-object-list__object-attribute">
1239
+
1240
+ First Attribute
1241
+ </div>
1242
+ </div>
1243
+ <div class="fd-object-list__row-right">
1244
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--critical">
1245
+ <span class="fd-object-status__text">Warning</span>
1246
+ </span>
1247
+ </div>
1248
+ </div>
1249
+ <div class="fd-object-list__row">
1250
+ <div class="fd-object-list__row-left">
1251
+ <div class="fd-object-list__object-attribute">
1252
+ Second Attribute
1253
+ </div>
1254
+ </div>
1255
+ <div class="fd-object-list__row-right">
1256
+ <span class="fd-object-status fd-object-status--critical">
1257
+ <span class="fd-object-status__text">Critical</span>
1258
+ </span>
1259
+ </div>
1260
+ </div>
1261
+ <div class="fd-object-list__row">
1262
+ <div class="fd-object-list__row-left">
1263
+ <div class="fd-object-list__object-attribute">
1264
+ Third Attribute
1265
+ </div>
1266
+ </div>
1267
+ </div>
1268
+ </div>
1269
+ </div>
1270
+ </li>
1271
+ </ul>
1272
+ </div>
1273
+ ```
1274
+
1275
+ ## Accessibility
1276
+
1277
+ - Use semantic HTML elements where appropriate
1278
+ - Include proper ARIA attributes for interactive elements
1279
+ - Ensure keyboard navigation support
1280
+ - Provide adequate color contrast
1281
+
1282
+ ## Source
1283
+
1284
+ This documentation was automatically generated from: `packages/styles/stories/Components/object-list/object-list.stories.js`
1285
+
1286
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).