@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/card-layouts.md ADDED
@@ -0,0 +1,1201 @@
1
+ ---
2
+ component: fd-card
3
+ title: Layouts/Fixed Card Layout
4
+ category: Layouts
5
+ selector: fd-card
6
+ cssFile: card.css
7
+ sourcePath: packages/styles/stories/Layouts/fixed-card-layout/fixed-card-layout.stories.js
8
+ tags: []
9
+ dependencies: ["avatar","card","checkbox","fixed-card-layout","icon","list","numeric-content","object-status","table"]
10
+ relatedComponents: ["avatar","card","checkbox","fixed-card-layout","icon","list","numeric-content","object-status","table"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.758Z
13
+ ---
14
+
15
+ # Layouts/Fixed Card Layout
16
+
17
+ The fixed card layout is a layout for the overview page. The cards have a fixed width, and the height is determined by the card type and the embedded control.
18
+
19
+ ## Dependencies
20
+
21
+ This component depends on the following CSS files:
22
+
23
+ - `avatar.css`
24
+ - `card.css`
25
+ - `checkbox.css`
26
+ - `fixed-card-layout.css`
27
+ - `icon.css`
28
+ - `list.css`
29
+ - `numeric-content.css`
30
+ - `object-status.css`
31
+ - `table.css`
32
+
33
+ ## Installation
34
+
35
+ ```bash
36
+ npm install fundamental-styles
37
+ ```
38
+
39
+ ```html
40
+ <!-- Include theme -->
41
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
42
+
43
+ <!-- Include component CSS -->
44
+ <link href="node_modules/fundamental-styles/dist/card.css" rel="stylesheet">
45
+
46
+ <!-- Include dependencies -->
47
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
48
+ <link href="node_modules/fundamental-styles/dist/card.css" rel="stylesheet">
49
+ <link href="node_modules/fundamental-styles/dist/checkbox.css" rel="stylesheet">
50
+ <link href="node_modules/fundamental-styles/dist/fixed-card-layout.css" rel="stylesheet">
51
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
52
+ <link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
53
+ <link href="node_modules/fundamental-styles/dist/numeric-content.css" rel="stylesheet">
54
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
55
+ <link href="node_modules/fundamental-styles/dist/table.css" rel="stylesheet">
56
+ ```
57
+
58
+ ## Basic Usage
59
+
60
+ ```html
61
+ <div class="fd-fixed-card-layout__card-layout fd-fixed-card-layout__card-layout--columns-3" >
62
+ <div class="fd-fixed-card-layout__card">
63
+ <div class="fd-card" role="region" aria-label="List Card Example 1">
64
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-1">
65
+ <div class="fd-card__header-main">
66
+ <div class="fd-card__header-main-container">
67
+ <div class="fd-card__header-text">
68
+ <div class="fd-card__title-area">
69
+ <div class="fd-card__title" id="list-card-title-1" role="heading" aria-level="3">Quick Links</div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ <div class="fd-card__header-main-actions">
74
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
79
+ <ul class="fd-list fd-list--no-border" role="list">
80
+ <li role="listitem" tabindex="0" class="fd-list__item">
81
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
82
+ <span class="fd-list__title">List item 1</span>
83
+ </li>
84
+ <li role="listitem" tabindex="0" class="fd-list__item">
85
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
86
+ <span class="fd-list__title">List item 2</span>
87
+ </li>
88
+ <li role="listitem" tabindex="0" class="fd-list__item">
89
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
90
+ <span class="fd-list__title">List item 3</span>
91
+ </li>
92
+ <li role="listitem" tabindex="0" class="fd-list__item">
93
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
94
+ <span class="fd-list__title">List item 4</span>
95
+ </li>
96
+ <li role="listitem" tabindex="0" class="fd-list__item">
97
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
98
+ <span class="fd-list__title">List item 5</span>
99
+ </li>
100
+ <li role="listitem" tabindex="0" class="fd-list__item">
101
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
102
+ <span class="fd-list__title">List item 6</span>
103
+ </li>
104
+ </ul>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="fd-fixed-card-layout__card">
110
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 1">
111
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-1">
112
+ <div class="fd-card__header-main">
113
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
114
+ <span
115
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
116
+
117
+ role="img"
118
+ aria-label="John Doe">
119
+ </span>
120
+ <div class="fd-card__header-text">
121
+ <div class="fd-card__title-area">
122
+ <div class="fd-card__title" id="object-card-title-1" role="heading" aria-level="3">Card Title</div>
123
+ </div>
124
+ <div class="fd-card__subtitle-area">
125
+ <div class="fd-card__subtitle">Card Subtitle</div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
132
+ <div class="fd-card__content-container">
133
+ <div class="fd-card__content-section">
134
+ <div class="fd-card__content-title-container">Group Title 1</div>
135
+ <div class="fd-card__content-group">
136
+ <div class="fd-card__content-group-text">
137
+ <span>Label</span>
138
+ <span>Text</span>
139
+ </div>
140
+ </div>
141
+ <div class="fd-card__content-group">
142
+ <div class="fd-card__content-group-text">
143
+ <span>Label</span>
144
+ <span>Text</span>
145
+ </div>
146
+ </div>
147
+ <div class="fd-card__content-group">
148
+ <div class="fd-card__content-group-text">
149
+ <span>Label</span>
150
+ <span>Text</span>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ <div class="fd-card__content-section">
155
+ <div class="fd-card__content-title-container">Group Title 2</div>
156
+ <div class="fd-card__content-group">
157
+ <div class="fd-card__content-group-text">
158
+ <span>Label</span>
159
+ <span>Text</span>
160
+ </div>
161
+ </div>
162
+ <div class="fd-card__content-group">
163
+ <div class="fd-card__content-group-text">
164
+ <span>Label</span>
165
+ <span>Text</span>
166
+ </div>
167
+ </div>
168
+ <div class="fd-card__content-group">
169
+ <div class="fd-card__content-group-text">
170
+ <span>Label Only</span>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="fd-fixed-card-layout__card">
180
+ <div class="fd-card" role="region" aria-label="List Card Example 2">
181
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-2">
182
+ <div class="fd-card__header-main">
183
+ <div class="fd-card__header-main-container">
184
+ <div class="fd-card__header-text">
185
+ <div class="fd-card__title-area">
186
+ <div class="fd-card__title" id="list-card-title-2" role="heading" aria-level="3">Quick Links</div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ <div class="fd-card__header-main-actions">
191
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
196
+ <ul class="fd-list fd-list--no-border" role="list">
197
+ <li role="listitem" tabindex="0" class="fd-list__item">
198
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
199
+ <span class="fd-list__title">List item 1</span>
200
+ </li>
201
+ <li role="listitem" tabindex="0" class="fd-list__item">
202
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
203
+ <span class="fd-list__title">List item 2</span>
204
+ </li>
205
+ <li role="listitem" tabindex="0" class="fd-list__item">
206
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
207
+ <span class="fd-list__title">List item 3</span>
208
+ </li>
209
+ <li role="listitem" tabindex="0" class="fd-list__item">
210
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
211
+ <span class="fd-list__title">List item 4</span>
212
+ </li>
213
+ <li role="listitem" tabindex="0" class="fd-list__item">
214
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
215
+ <span class="fd-list__title">List item 5</span>
216
+ </li>
217
+ <li role="listitem" tabindex="0" class="fd-list__item">
218
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
219
+ <span class="fd-list__title">List item 6</span>
220
+ </li>
221
+ </ul>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="fd-fixed-card-layout__card">
227
+ <div class="fd-card fd-card--table" role="region" aria-label="Table Card Example 1">
228
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="table-card-title-1">
229
+ <div class="fd-card__header-main">
230
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
231
+ <div class="fd-card__header-text">
232
+ <div class="fd-card__title-area">
233
+ <div class="fd-card__title" id="table-card-title-1" role="heading" aria-level="3">Table Card</div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ <div class="fd-card__header-main-actions">
238
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
243
+ <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--no-outer-border fd-table--top-border">
244
+ <thead class="fd-table__header">
245
+ <tr class="fd-table__row">
246
+ <th class="fd-table__cell" scope="col">Name</th>
247
+ <th class="fd-table__cell" scope="col">Status</th>
248
+ <th class="fd-table__cell" scope="col">Price</th>
249
+ <th class="fd-table__cell" scope="col">Country</th>
250
+ <th class="fd-table__cell"></th>
251
+ </tr>
252
+ </thead>
253
+ <tbody class="fd-table__body">
254
+ <tr class="fd-table__row">
255
+ <td class="fd-table__cell">Banana</td>
256
+ <td class="fd-table__cell">
257
+ <span class="fd-object-status fd-object-status--positive">
258
+ Available
259
+ </span>
260
+ </td>
261
+ <td class="fd-table__cell">5 EUR</td>
262
+ <td class="fd-table__cell">India</td>
263
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
264
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
265
+ </td>
266
+ </tr>
267
+ <tr class="fd-table__row">
268
+ <td class="fd-table__cell">Pineapple</td>
269
+ <td class="fd-table__cell">
270
+ <span class="fd-object-status fd-object-status--negative">
271
+ Out of stock
272
+ </span>
273
+ </td>
274
+ <td class="fd-table__cell">2 EUR</td>
275
+ <td class="fd-table__cell">Mexico</td>
276
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
277
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
278
+ </td>
279
+ </tr>
280
+ <tr class="fd-table__row">
281
+ <td class="fd-table__cell">Orange</td>
282
+ <td class="fd-table__cell">
283
+ <span class="fd-object-status fd-object-status--informative">
284
+ Temporary unavailable
285
+ </span>
286
+ </td>
287
+ <td class="fd-table__cell">6 EUR</td>
288
+ <td class="fd-table__cell">Spain</td>
289
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
290
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
291
+ </td>
292
+ </tr>
293
+ </tbody>
294
+ </table>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="fd-fixed-card-layout__card">
300
+ <div class="fd-card" role="region" aria-label="List Card Example 3">
301
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-3">
302
+ <div class="fd-card__header-main">
303
+ <div class="fd-card__header-main-container">
304
+ <div class="fd-card__header-text">
305
+ <div class="fd-card__title-area">
306
+ <div class="fd-card__title" id="list-card-title-3" role="heading" aria-level="3">Quick Links</div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ <div class="fd-card__header-main-actions">
311
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
316
+ <ul class="fd-list fd-list--no-border" role="list">
317
+ <li role="listitem" tabindex="0" class="fd-list__item">
318
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
319
+ <span class="fd-list__title">List item 1</span>
320
+ </li>
321
+ <li role="listitem" tabindex="0" class="fd-list__item">
322
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
323
+ <span class="fd-list__title">List item 2</span>
324
+ </li>
325
+ <li role="listitem" tabindex="0" class="fd-list__item">
326
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
327
+ <span class="fd-list__title">List item 3</span>
328
+ </li>
329
+ <li role="listitem" tabindex="0" class="fd-list__item">
330
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
331
+ <span class="fd-list__title">List item 4</span>
332
+ </li>
333
+ </ul>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="fd-fixed-card-layout__card">
339
+ <div class="fd-card" role="region" aria-label="List Card Example 4">
340
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-4">
341
+ <div class="fd-card__header-main">
342
+ <div class="fd-card__header-main-container">
343
+ <div class="fd-card__header-text">
344
+ <div class="fd-card__title-area">
345
+ <div class="fd-card__title" id="list-card-title-4" role="heading" aria-level="3">Quick Links</div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ <div class="fd-card__header-main-actions">
350
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
355
+ <ul class="fd-list fd-list--no-border" role="list">
356
+ <li role="listitem" tabindex="0" class="fd-list__item">
357
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
358
+ <span class="fd-list__title">List item 1</span>
359
+ </li>
360
+ <li role="listitem" tabindex="0" class="fd-list__item">
361
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
362
+ <span class="fd-list__title">List item 2</span>
363
+ </li>
364
+ <li role="listitem" tabindex="0" class="fd-list__item">
365
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
366
+ <span class="fd-list__title">List item 3</span>
367
+ </li>
368
+ <li role="listitem" tabindex="0" class="fd-list__item">
369
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
370
+ <span class="fd-list__title">List item 4</span>
371
+ </li>
372
+ <li role="listitem" tabindex="0" class="fd-list__item">
373
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
374
+ <span class="fd-list__title">List item 5</span>
375
+ </li>
376
+ <li role="listitem" tabindex="0" class="fd-list__item">
377
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
378
+ <span class="fd-list__title">List item 6</span>
379
+ </li>
380
+ <li role="listitem" tabindex="0" class="fd-list__item">
381
+ <i role="presentation" class="fd-list__icon sap-icon--lead"></i>
382
+ <span class="fd-list__title">List item 7</span>
383
+ </li>
384
+ <li role="listitem" tabindex="0" class="fd-list__item">
385
+ <i role="presentation" class="fd-list__icon sap-icon--laptop"></i>
386
+ <span class="fd-list__title">List item 8</span>
387
+ </li>
388
+ <li role="listitem" tabindex="0" class="fd-list__item">
389
+ <i role="presentation" class="fd-list__icon sap-icon--log"></i>
390
+ <span class="fd-list__title">List item 9</span>
391
+ </li>
392
+ </ul>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="fd-fixed-card-layout__card">
398
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 2">
399
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-2">
400
+ <div class="fd-card__header-main">
401
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
402
+ <span
403
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
404
+
405
+ role="img"
406
+ aria-label="John Doe">
407
+ </span>
408
+ <div class="fd-card__header-text">
409
+ <div class="fd-card__title-area">
410
+ <div class="fd-card__title" id="object-card-title-2" role="heading" aria-level="3">Card Title</div>
411
+ </div>
412
+ <div class="fd-card__subtitle-area">
413
+ <div class="fd-card__subtitle">Card Subtitle</div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
420
+ <div class="fd-card__content-container">
421
+ <div class="fd-card__content-section">
422
+ <div class="fd-card__content-title-container">Group Title 1</div>
423
+ <div class="fd-card__content-group">
424
+ <div class="fd-card__content-group-text">
425
+ <span>Label</span>
426
+ <span>Text</span>
427
+ </div>
428
+ </div>
429
+ <div class="fd-card__content-group">
430
+ <div class="fd-card__content-group-text">
431
+ <span>Label</span>
432
+ <span>Text</span>
433
+ </div>
434
+ </div>
435
+ <div class="fd-card__content-group">
436
+ <div class="fd-card__content-group-text">
437
+ <span>Label</span>
438
+ <span>Text</span>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ <div class="fd-card__content-section">
443
+ <div class="fd-card__content-title-container">Group Title 2</div>
444
+ <div class="fd-card__content-group">
445
+ <div class="fd-card__content-group-text">
446
+ <span>Label</span>
447
+ <span>Text</span>
448
+ </div>
449
+ </div>
450
+ <div class="fd-card__content-group">
451
+ <div class="fd-card__content-group-text">
452
+ <span>Label</span>
453
+ <span>Text</span>
454
+ </div>
455
+ </div>
456
+ <div class="fd-card__content-group">
457
+ <div class="fd-card__content-group-text">
458
+ <span>Label Only</span>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="fd-fixed-card-layout__card">
468
+ <div class="fd-card" role="region" aria-label="List Card Example 5">
469
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-5">
470
+ <div class="fd-card__header-main">
471
+ <div class="fd-card__header-main-container">
472
+ <div class="fd-card__header-text">
473
+ <div class="fd-card__title-area">
474
+ <div class="fd-card__title" id="list-card-title-5" role="heading" aria-level="3">Quick Links</div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ <div class="fd-card__header-main-actions">
479
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
484
+ <ul class="fd-list fd-list--no-border" role="list">
485
+ <li role="listitem" tabindex="0" class="fd-list__item">
486
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
487
+ <span class="fd-list__title">List item 1</span>
488
+ </li>
489
+ <li role="listitem" tabindex="0" class="fd-list__item">
490
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
491
+ <span class="fd-list__title">List item 2</span>
492
+ </li>
493
+ <li role="listitem" tabindex="0" class="fd-list__item">
494
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
495
+ <span class="fd-list__title">List item 3</span>
496
+ </li>
497
+ <li role="listitem" tabindex="0" class="fd-list__item">
498
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
499
+ <span class="fd-list__title">List item 4</span>
500
+ </li>
501
+ <li role="listitem" tabindex="0" class="fd-list__item">
502
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
503
+ <span class="fd-list__title">List item 5</span>
504
+ </li>
505
+ <li role="listitem" tabindex="0" class="fd-list__item">
506
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
507
+ <span class="fd-list__title">List item 6</span>
508
+ </li>
509
+ </ul>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="fd-fixed-card-layout__card">
515
+ <div class="fd-card fd-card--table" role="region" aria-label="Table Card Example 2">
516
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="table-card-title-2">
517
+ <div class="fd-card__header-main">
518
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
519
+ <div class="fd-card__header-text">
520
+ <div class="fd-card__title-area">
521
+ <div class="fd-card__title" id="table-card-title-2" role="heading" aria-level="3">Table Card</div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ <div class="fd-card__header-main-actions">
526
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
531
+ <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--no-outer-border fd-table--top-border">
532
+ <thead class="fd-table__header">
533
+ <tr class="fd-table__row">
534
+ <th class="fd-table__cell" scope="col">Name</th>
535
+ <th class="fd-table__cell" scope="col">Status</th>
536
+ <th class="fd-table__cell" scope="col">Price</th>
537
+ <th class="fd-table__cell" scope="col">Country</th>
538
+ <th class="fd-table__cell"></th>
539
+ </tr>
540
+ </thead>
541
+ <tbody class="fd-table__body">
542
+ <tr class="fd-table__row">
543
+ <td class="fd-table__cell">Banana</td>
544
+ <td class="fd-table__cell">
545
+ <span class="fd-object-status fd-object-status--positive">
546
+ Available
547
+ </span>
548
+ </td>
549
+ <td class="fd-table__cell">5 EUR</td>
550
+ <td class="fd-table__cell">India</td>
551
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
552
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
553
+ </td>
554
+ </tr>
555
+ <tr class="fd-table__row">
556
+ <td class="fd-table__cell">Pineapple</td>
557
+ <td class="fd-table__cell">
558
+ <span class="fd-object-status fd-object-status--negative">
559
+ Out of stock
560
+ </span>
561
+ </td>
562
+ <td class="fd-table__cell">2 EUR</td>
563
+ <td class="fd-table__cell">Mexico</td>
564
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
565
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
566
+ </td>
567
+ </tr>
568
+ <tr class="fd-table__row">
569
+ <td class="fd-table__cell">Orange</td>
570
+ <td class="fd-table__cell">
571
+ <span class="fd-object-status fd-object-status--informative">
572
+ Temporary unavailable
573
+ </span>
574
+ </td>
575
+ <td class="fd-table__cell">6 EUR</td>
576
+ <td class="fd-table__cell">Spain</td>
577
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
578
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
579
+ </td>
580
+ </tr>
581
+ </tbody>
582
+ </table>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ ```
588
+
589
+ ## Modifiers
590
+
591
+ | Class | Description |
592
+ |-------|-------------|
593
+ | `fd-card--object` | Style variant |
594
+ | `fd-card--table` | Style variant |
595
+
596
+ ## BEM Elements
597
+
598
+ This component uses the following BEM elements:
599
+
600
+ - `fd-card__avatar`
601
+ - `fd-card__content`
602
+ - `fd-card__content-container`
603
+ - `fd-card__content-group`
604
+ - `fd-card__content-group-text`
605
+ - `fd-card__content-section`
606
+ - `fd-card__content-title-container`
607
+ - `fd-card__counter`
608
+ - `fd-card__header`
609
+ - `fd-card__header-main`
610
+ - `fd-card__header-main-actions`
611
+ - `fd-card__header-main-container`
612
+ - `fd-card__header-text`
613
+ - `fd-card__subtitle`
614
+ - `fd-card__subtitle-area`
615
+ - `fd-card__title`
616
+ - `fd-card__title-area`
617
+
618
+ ## Related Components
619
+
620
+ This component works with or depends on:
621
+
622
+ - `avatar`
623
+ - `card`
624
+ - `checkbox`
625
+ - `fixed-card-layout`
626
+ - `icon`
627
+ - `list`
628
+ - `numeric-content`
629
+ - `object-status`
630
+ - `table`
631
+
632
+ ## Design Tokens
633
+
634
+ Key CSS variables used by this component:
635
+
636
+ - `--analytical`
637
+ - `--banner`
638
+ - `--bg-legend-`
639
+ - `--bg-shell-`
640
+ - `--bottom-aligned`
641
+ - `--fdCard_Background`
642
+ - `--fdCard_Border`
643
+ - `--fdCard_Border_Corner_Radius`
644
+ - `--fdCard_Box_Shadow`
645
+ - `--fdCard_Box_Shadow_Hover`
646
+ - `--fdCard_Box_Shadow_Regular`
647
+ - `--fdCard_Content_Border_Radius`
648
+ - `--fdCard_Counter_Margin`
649
+ - `--fdCard_Focus_Outline_Offset`
650
+ - `--fdCard_Focus_Outline_Radius`
651
+
652
+ *...and 5 more*
653
+
654
+ ## Examples
655
+
656
+ ### Fixed card layout with 3 columns
657
+
658
+ Cards arrangement in a 3 column layout.
659
+ * Use \
660
+
661
+ ```html
662
+ <div class="fd-fixed-card-layout__card-layout fd-fixed-card-layout__card-layout--columns-3" >
663
+ <div class="fd-fixed-card-layout__card">
664
+ <div class="fd-card" role="region" aria-label="List Card Example 1">
665
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-1">
666
+ <div class="fd-card__header-main">
667
+ <div class="fd-card__header-main-container">
668
+ <div class="fd-card__header-text">
669
+ <div class="fd-card__title-area">
670
+ <div class="fd-card__title" id="list-card-title-1" role="heading" aria-level="3">Quick Links</div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ <div class="fd-card__header-main-actions">
675
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
680
+ <ul class="fd-list fd-list--no-border" role="list">
681
+ <li role="listitem" tabindex="0" class="fd-list__item">
682
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
683
+ <span class="fd-list__title">List item 1</span>
684
+ </li>
685
+ <li role="listitem" tabindex="0" class="fd-list__item">
686
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
687
+ <span class="fd-list__title">List item 2</span>
688
+ </li>
689
+ <li role="listitem" tabindex="0" class="fd-list__item">
690
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
691
+ <span class="fd-list__title">List item 3</span>
692
+ </li>
693
+ <li role="listitem" tabindex="0" class="fd-list__item">
694
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
695
+ <span class="fd-list__title">List item 4</span>
696
+ </li>
697
+ <li role="listitem" tabindex="0" class="fd-list__item">
698
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
699
+ <span class="fd-list__title">List item 5</span>
700
+ </li>
701
+ <li role="listitem" tabindex="0" class="fd-list__item">
702
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
703
+ <span class="fd-list__title">List item 6</span>
704
+ </li>
705
+ </ul>
706
+ </div>
707
+ </div>
708
+ </div>
709
+
710
+ <div class="fd-fixed-card-layout__card">
711
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 1">
712
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-1">
713
+ <div class="fd-card__header-main">
714
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
715
+ <span
716
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
717
+
718
+ role="img"
719
+ aria-label="John Doe">
720
+ </span>
721
+ <div class="fd-card__header-text">
722
+ <div class="fd-card__title-area">
723
+ <div class="fd-card__title" id="object-card-title-1" role="heading" aria-level="3">Card Title</div>
724
+ </div>
725
+ <div class="fd-card__subtitle-area">
726
+ <div class="fd-card__subtitle">Card Subtitle</div>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
733
+ <div class="fd-card__content-container">
734
+ <div class="fd-card__content-section">
735
+ <div class="fd-card__content-title-container">Group Title 1</div>
736
+ <div class="fd-card__content-group">
737
+ <div class="fd-card__content-group-text">
738
+ <span>Label</span>
739
+ <span>Text</span>
740
+ </div>
741
+ </div>
742
+ <div class="fd-card__content-group">
743
+ <div class="fd-card__content-group-text">
744
+ <span>Label</span>
745
+ <span>Text</span>
746
+ </div>
747
+ </div>
748
+ <div class="fd-card__content-group">
749
+ <div class="fd-card__content-group-text">
750
+ <span>Label</span>
751
+ <span>Text</span>
752
+ </div>
753
+ </div>
754
+ </div>
755
+ <div class="fd-card__content-section">
756
+ <div class="fd-card__content-title-container">Group Title 2</div>
757
+ <div class="fd-card__content-group">
758
+ <div class="fd-card__content-group-text">
759
+ <span>Label</span>
760
+ <span>Text</span>
761
+ </div>
762
+ </div>
763
+ <div class="fd-card__content-group">
764
+ <div class="fd-card__content-group-text">
765
+ <span>Label</span>
766
+ <span>Text</span>
767
+ </div>
768
+ </div>
769
+ <div class="fd-card__content-group">
770
+ <div class="fd-card__content-group-text">
771
+ <span>Label Only</span>
772
+ </div>
773
+ </div>
774
+ </div>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ </div>
779
+
780
+ <div class="fd-fixed-card-layout__card">
781
+ <div class="fd-card" role="region" aria-label="List Card Example 2">
782
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-2">
783
+ <div class="fd-card__header-main">
784
+ <div class="fd-card__header-main-container">
785
+ <div class="fd-card__header-text">
786
+ <div class="fd-card__title-area">
787
+ <div class="fd-card__title" id="list-card-title-2" role="heading" aria-level="3">Quick Links</div>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ <div class="fd-card__header-main-actions">
792
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
797
+ <ul class="fd-list fd-list--no-border" role="list">
798
+ <li role="listitem" tabindex="0" class="fd-list__item">
799
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
800
+ <span class="fd-list__title">List item 1</span>
801
+ </li>
802
+ <li role="listitem" tabindex="0" class="fd-list__item">
803
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
804
+ <span class="fd-list__title">List item 2</span>
805
+ </li>
806
+ <li role="listitem" tabindex="0" class="fd-list__item">
807
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
808
+ <span class="fd-list__title">List item 3</span>
809
+ </li>
810
+ <li role="listitem" tabindex="0" class="fd-list__item">
811
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
812
+ <span class="fd-list__title">List item 4</span>
813
+ </li>
814
+ <li role="listitem" tabindex="0" class="fd-list__item">
815
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
816
+ <span class="fd-list__title">List item 5</span>
817
+ </li>
818
+ <li role="listitem" tabindex="0" class="fd-list__item">
819
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
820
+ <span class="fd-list__title">List item 6</span>
821
+ </li>
822
+ </ul>
823
+ </div>
824
+ </div>
825
+ </div>
826
+
827
+ <div class="fd-fixed-card-layout__card">
828
+ <div class="fd-card fd-card--table" role="region" aria-label="Table Card Example 1">
829
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="table-card-title-1">
830
+ <div class="fd-card__header-main">
831
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
832
+ <div class="fd-card__header-text">
833
+ <div class="fd-card__title-area">
834
+ <div class="fd-card__title" id="table-card-title-1" role="heading" aria-level="3">Table Card</div>
835
+ </div>
836
+ </div>
837
+ </div>
838
+ <div class="fd-card__header-main-actions">
839
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
844
+ <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--no-outer-border fd-table--top-border">
845
+ <thead class="fd-table__header">
846
+ <tr class="fd-table__row">
847
+ <th class="fd-table__cell" scope="col">Name</th>
848
+ <th class="fd-table__cell" scope="col">Status</th>
849
+ <th class="fd-table__cell" scope="col">Price</th>
850
+ <th class="fd-table__cell" scope="col">Country</th>
851
+ <th class="fd-table__cell"></th>
852
+ </tr>
853
+ </thead>
854
+ <tbody class="fd-table__body">
855
+ <tr class="fd-table__row">
856
+ <td class="fd-table__cell">Banana</td>
857
+ <td class="fd-table__cell">
858
+ <span class="fd-object-status fd-object-status--positive">
859
+ Available
860
+ </span>
861
+ </td>
862
+ <td class="fd-table__cell">5 EUR</td>
863
+ <td class="fd-table__cell">India</td>
864
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
865
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
866
+ </td>
867
+ </tr>
868
+ <tr class="fd-table__row">
869
+ <td class="fd-table__cell">Pineapple</td>
870
+ <td class="fd-table__cell">
871
+ <span class="fd-object-status fd-object-status--negative">
872
+ Out of stock
873
+ </span>
874
+ </td>
875
+ <td class="fd-table__cell">2 EUR</td>
876
+ <td class="fd-table__cell">Mexico</td>
877
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
878
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
879
+ </td>
880
+ </tr>
881
+ <tr class="fd-table__row">
882
+ <td class="fd-table__cell">Orange</td>
883
+ <td class="fd-table__cell">
884
+ <span class="fd-object-status fd-object-status--informative">
885
+ Temporary unavailable
886
+ </span>
887
+ </td>
888
+ <td class="fd-table__cell">6 EUR</td>
889
+ <td class="fd-table__cell">Spain</td>
890
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
891
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
892
+ </td>
893
+ </tr>
894
+ </tbody>
895
+ </table>
896
+ </div>
897
+ </div>
898
+ </div>
899
+
900
+ <div class="fd-fixed-card-layout__card">
901
+ <div class="fd-card" role="region" aria-label="List Card Example 3">
902
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-3">
903
+ <div class="fd-card__header-main">
904
+ <div class="fd-card__header-main-container">
905
+ <div class="fd-card__header-text">
906
+ <div class="fd-card__title-area">
907
+ <div class="fd-card__title" id="list-card-title-3" role="heading" aria-level="3">Quick Links</div>
908
+ </div>
909
+ </div>
910
+ </div>
911
+ <div class="fd-card__header-main-actions">
912
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
917
+ <ul class="fd-list fd-list--no-border" role="list">
918
+ <li role="listitem" tabindex="0" class="fd-list__item">
919
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
920
+ <span class="fd-list__title">List item 1</span>
921
+ </li>
922
+ <li role="listitem" tabindex="0" class="fd-list__item">
923
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
924
+ <span class="fd-list__title">List item 2</span>
925
+ </li>
926
+ <li role="listitem" tabindex="0" class="fd-list__item">
927
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
928
+ <span class="fd-list__title">List item 3</span>
929
+ </li>
930
+ <li role="listitem" tabindex="0" class="fd-list__item">
931
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
932
+ <span class="fd-list__title">List item 4</span>
933
+ </li>
934
+ </ul>
935
+ </div>
936
+ </div>
937
+ </div>
938
+
939
+ <div class="fd-fixed-card-layout__card">
940
+ <div class="fd-card" role="region" aria-label="List Card Example 4">
941
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-4">
942
+ <div class="fd-card__header-main">
943
+ <div class="fd-card__header-main-container">
944
+ <div class="fd-card__header-text">
945
+ <div class="fd-card__title-area">
946
+ <div class="fd-card__title" id="list-card-title-4" role="heading" aria-level="3">Quick Links</div>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ <div class="fd-card__header-main-actions">
951
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
952
+ </div>
953
+ </div>
954
+ </div>
955
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
956
+ <ul class="fd-list fd-list--no-border" role="list">
957
+ <li role="listitem" tabindex="0" class="fd-list__item">
958
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
959
+ <span class="fd-list__title">List item 1</span>
960
+ </li>
961
+ <li role="listitem" tabindex="0" class="fd-list__item">
962
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
963
+ <span class="fd-list__title">List item 2</span>
964
+ </li>
965
+ <li role="listitem" tabindex="0" class="fd-list__item">
966
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
967
+ <span class="fd-list__title">List item 3</span>
968
+ </li>
969
+ <li role="listitem" tabindex="0" class="fd-list__item">
970
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
971
+ <span class="fd-list__title">List item 4</span>
972
+ </li>
973
+ <li role="listitem" tabindex="0" class="fd-list__item">
974
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
975
+ <span class="fd-list__title">List item 5</span>
976
+ </li>
977
+ <li role="listitem" tabindex="0" class="fd-list__item">
978
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
979
+ <span class="fd-list__title">List item 6</span>
980
+ </li>
981
+ <li role="listitem" tabindex="0" class="fd-list__item">
982
+ <i role="presentation" class="fd-list__icon sap-icon--lead"></i>
983
+ <span class="fd-list__title">List item 7</span>
984
+ </li>
985
+ <li role="listitem" tabindex="0" class="fd-list__item">
986
+ <i role="presentation" class="fd-list__icon sap-icon--laptop"></i>
987
+ <span class="fd-list__title">List item 8</span>
988
+ </li>
989
+ <li role="listitem" tabindex="0" class="fd-list__item">
990
+ <i role="presentation" class="fd-list__icon sap-icon--log"></i>
991
+ <span class="fd-list__title">List item 9</span>
992
+ </li>
993
+ </ul>
994
+ </div>
995
+ </div>
996
+ </div>
997
+
998
+ <div class="fd-fixed-card-layout__card">
999
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 2">
1000
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-2">
1001
+ <div class="fd-card__header-main">
1002
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
1003
+ <span
1004
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1005
+
1006
+ role="img"
1007
+ aria-label="John Doe">
1008
+ </span>
1009
+ <div class="fd-card__header-text">
1010
+ <div class="fd-card__title-area">
1011
+ <div class="fd-card__title" id="object-card-title-2" role="heading" aria-level="3">Card Title</div>
1012
+ </div>
1013
+ <div class="fd-card__subtitle-area">
1014
+ <div class="fd-card__subtitle">Card Subtitle</div>
1015
+ </div>
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
1021
+ <div class="fd-card__content-container">
1022
+ <div class="fd-card__content-section">
1023
+ <div class="fd-card__content-title-container">Group Title 1</div>
1024
+ <div class="fd-card__content-group">
1025
+ <div class="fd-card__content-group-text">
1026
+ <span>Label</span>
1027
+ <span>Text</span>
1028
+ </div>
1029
+ </div>
1030
+ <div class="fd-card__content-group">
1031
+ <div class="fd-card__content-group-text">
1032
+ <span>Label</span>
1033
+ <span>Text</span>
1034
+ </div>
1035
+ </div>
1036
+ <div class="fd-card__content-group">
1037
+ <div class="fd-card__content-group-text">
1038
+ <span>Label</span>
1039
+ <span>Text</span>
1040
+ </div>
1041
+ </div>
1042
+ </div>
1043
+ <div class="fd-card__content-section">
1044
+ <div class="fd-card__content-title-container">Group Title 2</div>
1045
+ <div class="fd-card__content-group">
1046
+ <div class="fd-card__content-group-text">
1047
+ <span>Label</span>
1048
+ <span>Text</span>
1049
+ </div>
1050
+ </div>
1051
+ <div class="fd-card__content-group">
1052
+ <div class="fd-card__content-group-text">
1053
+ <span>Label</span>
1054
+ <span>Text</span>
1055
+ </div>
1056
+ </div>
1057
+ <div class="fd-card__content-group">
1058
+ <div class="fd-card__content-group-text">
1059
+ <span>Label Only</span>
1060
+ </div>
1061
+ </div>
1062
+ </div>
1063
+ </div>
1064
+ </div>
1065
+ </div>
1066
+ </div>
1067
+
1068
+ <div class="fd-fixed-card-layout__card">
1069
+ <div class="fd-card" role="region" aria-label="List Card Example 5">
1070
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="list-card-title-5">
1071
+ <div class="fd-card__header-main">
1072
+ <div class="fd-card__header-main-container">
1073
+ <div class="fd-card__header-text">
1074
+ <div class="fd-card__title-area">
1075
+ <div class="fd-card__title" id="list-card-title-5" role="heading" aria-level="3">Quick Links</div>
1076
+ </div>
1077
+ </div>
1078
+ </div>
1079
+ <div class="fd-card__header-main-actions">
1080
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
1081
+ </div>
1082
+ </div>
1083
+ </div>
1084
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
1085
+ <ul class="fd-list fd-list--no-border" role="list">
1086
+ <li role="listitem" tabindex="0" class="fd-list__item">
1087
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
1088
+ <span class="fd-list__title">List item 1</span>
1089
+ </li>
1090
+ <li role="listitem" tabindex="0" class="fd-list__item">
1091
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
1092
+ <span class="fd-list__title">List item 2</span>
1093
+ </li>
1094
+ <li role="listitem" tabindex="0" class="fd-list__item">
1095
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
1096
+ <span class="fd-list__title">List item 3</span>
1097
+ </li>
1098
+ <li role="listitem" tabindex="0" class="fd-list__item">
1099
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
1100
+ <span class="fd-list__title">List item 4</span>
1101
+ </li>
1102
+ <li role="listitem" tabindex="0" class="fd-list__item">
1103
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
1104
+ <span class="fd-list__title">List item 5</span>
1105
+ </li>
1106
+ <li role="listitem" tabindex="0" class="fd-list__item">
1107
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
1108
+ <span class="fd-list__title">List item 6</span>
1109
+ </li>
1110
+ </ul>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ <div class="fd-fixed-card-layout__card">
1116
+ <div class="fd-card fd-card--table" role="region" aria-label="Table Card Example 2">
1117
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="table-card-title-2">
1118
+ <div class="fd-card__header-main">
1119
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
1120
+ <div class="fd-card__header-text">
1121
+ <div class="fd-card__title-area">
1122
+ <div class="fd-card__title" id="table-card-title-2" role="heading" aria-level="3">Table Card</div>
1123
+ </div>
1124
+ </div>
1125
+ </div>
1126
+ <div class="fd-card__header-main-actions">
1127
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
1128
+ </div>
1129
+ </div>
1130
+ </div>
1131
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
1132
+ <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--no-outer-border fd-table--top-border">
1133
+ <thead class="fd-table__header">
1134
+ <tr class="fd-table__row">
1135
+ <th class="fd-table__cell" scope="col">Name</th>
1136
+ <th class="fd-table__cell" scope="col">Status</th>
1137
+ <th class="fd-table__cell" scope="col">Price</th>
1138
+ <th class="fd-table__cell" scope="col">Country</th>
1139
+ <th class="fd-table__cell"></th>
1140
+ </tr>
1141
+ </thead>
1142
+ <tbody class="fd-table__body">
1143
+ <tr class="fd-table__row">
1144
+ <td class="fd-table__cell">Banana</td>
1145
+ <td class="fd-table__cell">
1146
+ <span class="fd-object-status fd-object-status--positive">
1147
+ Available
1148
+ </span>
1149
+ </td>
1150
+ <td class="fd-table__cell">5 EUR</td>
1151
+ <td class="fd-table__cell">India</td>
1152
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
1153
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
1154
+ </td>
1155
+ </tr>
1156
+ <tr class="fd-table__row">
1157
+ <td class="fd-table__cell">Pineapple</td>
1158
+ <td class="fd-table__cell">
1159
+ <span class="fd-object-status fd-object-status--negative">
1160
+ Out of stock
1161
+ </span>
1162
+ </td>
1163
+ <td class="fd-table__cell">2 EUR</td>
1164
+ <td class="fd-table__cell">Mexico</td>
1165
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
1166
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
1167
+ </td>
1168
+ </tr>
1169
+ <tr class="fd-table__row">
1170
+ <td class="fd-table__cell">Orange</td>
1171
+ <td class="fd-table__cell">
1172
+ <span class="fd-object-status fd-object-status--informative">
1173
+ Temporary unavailable
1174
+ </span>
1175
+ </td>
1176
+ <td class="fd-table__cell">6 EUR</td>
1177
+ <td class="fd-table__cell">Spain</td>
1178
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
1179
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
1180
+ </td>
1181
+ </tr>
1182
+ </tbody>
1183
+ </table>
1184
+ </div>
1185
+ </div>
1186
+ </div>
1187
+ </div>
1188
+ ```
1189
+
1190
+ ## Accessibility
1191
+
1192
+ - Use semantic HTML elements where appropriate
1193
+ - Include proper ARIA attributes for interactive elements
1194
+ - Ensure keyboard navigation support
1195
+ - Provide adequate color contrast
1196
+
1197
+ ## Source
1198
+
1199
+ This documentation was automatically generated from: `packages/styles/stories/Layouts/fixed-card-layout/fixed-card-layout.stories.js`
1200
+
1201
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).