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