@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/resizable-card-layout.md ADDED
@@ -0,0 +1,951 @@
1
+ ---
2
+ component: fd-resizable-card-layout
3
+ title: Layouts/Resizable Card Layout
4
+ category: Layouts
5
+ selector: fd-resizable-card-layout
6
+ cssFile: resizable-card-layout.css
7
+ sourcePath: packages/styles/stories/Layouts/resizable-card-layout/resizable-card-layout.stories.js
8
+ tags: []
9
+ dependencies: ["avatar","badge","button","card","checkbox","icon","link","list","numeric-content","object-status","resizable-card-layout","table"]
10
+ relatedComponents: ["avatar","badge","button","card","checkbox","icon","link","list","numeric-content","object-status","resizable-card-layout","table"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.780Z
13
+ ---
14
+
15
+ # Layouts/Resizable Card Layout
16
+
17
+ The resizable card layout is a layout for the overview page. It enables users to define a personalized card layout by changing not only the position of a card, but also its size, and thus how the card content is presented.
18
+
19
+ This layout gives users much greater flexibility in tailoring the overview page to their specific business needs. And it allows app teams to offer varying levels of detail for any given card. Whenever the size of a card changes, the content adapts automatically to show the most relevant information in the available space.
20
+
21
+ Cards can be resized vertically in rows of 1 rem and horizontally in steps of 20 rem (minimum width).
22
+
23
+ ## Dependencies
24
+
25
+ This component depends on the following CSS files:
26
+
27
+ - `avatar.css`
28
+ - `badge.css`
29
+ - `button.css`
30
+ - `card.css`
31
+ - `checkbox.css`
32
+ - `icon.css`
33
+ - `link.css`
34
+ - `list.css`
35
+ - `numeric-content.css`
36
+ - `object-status.css`
37
+ - `resizable-card-layout.css`
38
+ - `table.css`
39
+
40
+ ## Installation
41
+
42
+ ```bash
43
+ npm install fundamental-styles
44
+ ```
45
+
46
+ ```html
47
+ <!-- Include theme -->
48
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
49
+
50
+ <!-- Include component CSS -->
51
+ <link href="node_modules/fundamental-styles/dist/resizable-card-layout.css" rel="stylesheet">
52
+
53
+ <!-- Include dependencies -->
54
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
55
+ <link href="node_modules/fundamental-styles/dist/badge.css" rel="stylesheet">
56
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
57
+ <link href="node_modules/fundamental-styles/dist/card.css" rel="stylesheet">
58
+ <link href="node_modules/fundamental-styles/dist/checkbox.css" rel="stylesheet">
59
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
60
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
61
+ <link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
62
+ <link href="node_modules/fundamental-styles/dist/numeric-content.css" rel="stylesheet">
63
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
64
+ <link href="node_modules/fundamental-styles/dist/resizable-card-layout.css" rel="stylesheet">
65
+ <link href="node_modules/fundamental-styles/dist/table.css" rel="stylesheet">
66
+ ```
67
+
68
+ ## Basic Usage
69
+
70
+ ```html
71
+ <div id="layout1" class="fd-resizable-card-layout fd-resizable-card-layout--md fd-custom-resizable-card-layout-flex">
72
+ <div id="one" class="fd-resizable-card-layout__item card-one-dimensions">
73
+
74
+ <div class="fd-resizable-card-layout__card">
75
+ <div class="fd-card" role="region" aria-label="List Card Example">
76
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="resizable-list-card-title-5">
77
+ <div class="fd-card__header-main">
78
+ <div class="fd-card__header-main-container">
79
+ <div class="fd-card__header-text">
80
+ <div class="fd-card__title-area">
81
+ <div class="fd-card__title" id="resizable-list-card-title-5" role="heading" aria-level="3">Quick Links</div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ <div class="fd-card__header-main-actions">
86
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
91
+ <ul class="fd-list fd-list--no-border" role="list">
92
+ <li role="listitem" tabindex="0" class="fd-list__item">
93
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
94
+ <span class="fd-list__title">List item 1</span>
95
+ </li>
96
+ <li role="listitem" tabindex="0" class="fd-list__item">
97
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
98
+ <span class="fd-list__title">List item 2</span>
99
+ </li>
100
+ <li role="listitem" tabindex="0" class="fd-list__item">
101
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
102
+ <span class="fd-list__title">List item 3</span>
103
+ </li>
104
+ <li role="listitem" tabindex="0" class="fd-list__item">
105
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
106
+ <span class="fd-list__title">List item 4</span>
107
+ </li>
108
+ </ul>
109
+ </div>
110
+ </div>
111
+
112
+ </div>
113
+
114
+ </div>
115
+
116
+ <div id="two" class="fd-resizable-card-layout__item card-two-dimensions">
117
+
118
+ <div class="fd-resizable-card-layout__card">
119
+ <div class="fd-card" role="region" aria-label="Card Example 6">
120
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="card-title-6">
121
+ <div class="fd-card__header-main">
122
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
123
+ <span
124
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
125
+
126
+ role="img"
127
+ aria-label="John Doe">
128
+ </span>
129
+ <div class="fd-card__header-text">
130
+ <div class="fd-card__title-area">
131
+ <div class="fd-card__title" id="card-title-6" role="heading" aria-level="3">Card Title</div>
132
+ </div>
133
+ <div class="fd-card__subtitle-area">
134
+ <div class="fd-card__subtitle">Card Subtitle</div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <div class="fd-card__header-main-actions">
139
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ </div>
146
+
147
+ </div>
148
+
149
+ <div id="three" class="fd-resizable-card-layout__item card-three-dimensions">
150
+
151
+ <div class="fd-resizable-card-layout__card">
152
+ <div class="fd-card" role="region" aria-label="List Card Example">
153
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="resizable-list-card-title-6">
154
+ <div class="fd-card__header-main">
155
+ <div class="fd-card__header-main-container">
156
+ <div class="fd-card__header-text">
157
+ <div class="fd-card__title-area">
158
+ <div class="fd-card__title" id="resizable-list-card-title-6" role="heading" aria-level="3">Quick Links</div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ <div class="fd-card__header-main-actions">
163
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
168
+ <ul class="fd-list fd-list--no-border" role="list">
169
+ <li role="listitem" tabindex="0" class="fd-list__item">
170
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
171
+ <span class="fd-list__title">List item 1</span>
172
+ </li>
173
+ <li role="listitem" tabindex="0" class="fd-list__item">
174
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
175
+ <span class="fd-list__title">List item 2</span>
176
+ </li>
177
+ <li role="listitem" tabindex="0" class="fd-list__item">
178
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
179
+ <span class="fd-list__title">List item 3</span>
180
+ </li>
181
+ <li role="listitem" tabindex="0" class="fd-list__item">
182
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
183
+ <span class="fd-list__title">List item 4</span>
184
+ </li>
185
+ <li role="listitem" tabindex="0" class="fd-list__item">
186
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
187
+ <span class="fd-list__title">List item 5</span>
188
+ </li>
189
+ </ul>
190
+ </div>
191
+ </div>
192
+
193
+ </div>
194
+
195
+ </div>
196
+
197
+ <div id="six" class="fd-resizable-card-layout__item card-six-dimensions">
198
+
199
+ <div class="fd-resizable-card-layout__card">
200
+ <div class="fd-card" role="region" aria-label="List Card Example">
201
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="resizable-list-card-title-7">
202
+ <div class="fd-card__header-main">
203
+ <div class="fd-card__header-main-container">
204
+ <div class="fd-card__header-text">
205
+ <div class="fd-card__title-area">
206
+ <div class="fd-card__title" id="resizable-list-card-title-7" role="heading" aria-level="3">Quick Links</div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="fd-card__header-main-actions">
211
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
216
+ <ul class="fd-list fd-list--no-border" role="list">
217
+ <li role="listitem" tabindex="0" class="fd-list__item">
218
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
219
+ <span class="fd-list__title">List item 1</span>
220
+ </li>
221
+ <li role="listitem" tabindex="0" class="fd-list__item">
222
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
223
+ <span class="fd-list__title">List item 2</span>
224
+ </li>
225
+ <li role="listitem" tabindex="0" class="fd-list__item">
226
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
227
+ <span class="fd-list__title">List item 3</span>
228
+ </li>
229
+ <li role="listitem" tabindex="0" class="fd-list__item">
230
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
231
+ <span class="fd-list__title">List item 4</span>
232
+ </li>
233
+ </ul>
234
+ </div>
235
+ </div>
236
+
237
+ </div>
238
+
239
+ </div>
240
+
241
+ <div id="four" class="fd-resizable-card-layout__item card-four-dimensions">
242
+
243
+ <div class="fd-resizable-card-layout__card">
244
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 1">
245
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-1">
246
+ <div class="fd-card__header-main">
247
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
248
+ <span
249
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
250
+
251
+ role="img"
252
+ aria-label="John Doe">
253
+ </span>
254
+ <div class="fd-card__header-text">
255
+ <div class="fd-card__title-area">
256
+ <div class="fd-card__title" id="object-card-title-1" role="heading" aria-level="3">Card Title</div>
257
+ </div>
258
+ <div class="fd-card__subtitle-area">
259
+ <div class="fd-card__subtitle">Card Subtitle</div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
266
+ <div class="fd-card__content-container">
267
+ <div class="fd-card__content-section">
268
+ <div class="fd-card__content-title-container">Group Title 1</div>
269
+ <div class="fd-card__content-group">
270
+ <div class="fd-card__content-group-text">
271
+ <span>Label</span>
272
+ <span>Text</span>
273
+ </div>
274
+ </div>
275
+ <div class="fd-card__content-group">
276
+ <div class="fd-card__content-group-text">
277
+ <span>Label</span>
278
+ <span>Text</span>
279
+ </div>
280
+ </div>
281
+ <div class="fd-card__content-group">
282
+ <div class="fd-card__content-group-text">
283
+ <span>Label</span>
284
+ <span>Text</span>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <div class="fd-card__content-section">
289
+ <div class="fd-card__content-title-container">Group Title 2</div>
290
+ <div class="fd-card__content-group">
291
+ <div class="fd-card__content-group-text">
292
+ <span>Label</span>
293
+ <span>Text</span>
294
+ </div>
295
+ </div>
296
+ <div class="fd-card__content-group">
297
+ <div class="fd-card__content-group-text">
298
+ <span>Label</span>
299
+ <span>Text</span>
300
+ </div>
301
+ </div>
302
+ <div class="fd-card__content-group">
303
+ <div class="fd-card__content-group-text">
304
+ <span>Label Only</span>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ </div>
313
+
314
+ </div>
315
+
316
+ <div id="five" class="fd-resizable-card-layout__item card-five-dimensions">
317
+
318
+ <div class="fd-resizable-card-layout__card">
319
+ <div class="fd-card fd-card--table" role="region" aria-label="Table Card Example 2">
320
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="table-card-title-2">
321
+ <div class="fd-card__header-main">
322
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
323
+ <div class="fd-card__header-text">
324
+ <div class="fd-card__title-area">
325
+ <div class="fd-card__title" id="table-card-title-2" role="heading" aria-level="3">Table Card</div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <div class="fd-card__header-main-actions">
330
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
335
+ <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--no-outer-border fd-table--top-border">
336
+ <thead class="fd-table__header">
337
+ <tr class="fd-table__row">
338
+ <th class="fd-table__cell" scope="col">Name</th>
339
+ <th class="fd-table__cell" scope="col">Status</th>
340
+ <th class="fd-table__cell" scope="col">Price</th>
341
+ <th class="fd-table__cell" scope="col">Country</th>
342
+ <th class="fd-table__cell"></th>
343
+ </tr>
344
+ </thead>
345
+ <tbody class="fd-table__body">
346
+ <tr class="fd-table__row">
347
+ <td class="fd-table__cell">Banana</td>
348
+ <td class="fd-table__cell">
349
+ <span class="fd-object-status fd-object-status--positive">
350
+ Available
351
+ </span>
352
+ </td>
353
+ <td class="fd-table__cell">5 EUR</td>
354
+ <td class="fd-table__cell">India</td>
355
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
356
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
357
+ </td>
358
+ </tr>
359
+ <tr class="fd-table__row">
360
+ <td class="fd-table__cell">Pineapple</td>
361
+ <td class="fd-table__cell">
362
+ <span class="fd-object-status fd-object-status--negative">
363
+ Out of stock
364
+ </span>
365
+ </td>
366
+ <td class="fd-table__cell">2 EUR</td>
367
+ <td class="fd-table__cell">Mexico</td>
368
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
369
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
370
+ </td>
371
+ </tr>
372
+ <tr class="fd-table__row">
373
+ <td class="fd-table__cell">Orange</td>
374
+ <td class="fd-table__cell">
375
+ <span class="fd-object-status fd-object-status--informative">
376
+ Temporary unavailable
377
+ </span>
378
+ </td>
379
+ <td class="fd-table__cell">6 EUR</td>
380
+ <td class="fd-table__cell">Spain</td>
381
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
382
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
383
+ </td>
384
+ </tr>
385
+ </tbody>
386
+ </table>
387
+ </div>
388
+ </div>
389
+
390
+ </div>
391
+
392
+ </div>
393
+ </div>
394
+ ```
395
+
396
+ ## Modifiers
397
+
398
+ | Class | Description |
399
+ |-------|-------------|
400
+ | `fd-resizable-card-layout--md` | Style variant |
401
+
402
+ ## BEM Elements
403
+
404
+ This component uses the following BEM elements:
405
+
406
+ - `fd-resizable-card-layout__card`
407
+ - `fd-resizable-card-layout__icon`
408
+ - `fd-resizable-card-layout__icon--horizontal`
409
+ - `fd-resizable-card-layout__icon--vertical`
410
+ - `fd-resizable-card-layout__icon-wrapper`
411
+ - `fd-resizable-card-layout__indication-border`
412
+ - `fd-resizable-card-layout__item`
413
+ - `fd-resizable-card-layout__resize--horizontal`
414
+ - `fd-resizable-card-layout__resize--vertical`
415
+
416
+ ## Related Components
417
+
418
+ This component works with or depends on:
419
+
420
+ - `avatar`
421
+ - `badge`
422
+ - `button`
423
+ - `card`
424
+ - `checkbox`
425
+ - `icon`
426
+ - `link`
427
+ - `list`
428
+ - `numeric-content`
429
+ - `object-status`
430
+ - `resizable-card-layout`
431
+ - `table`
432
+
433
+ ## Design Tokens
434
+
435
+ Key CSS variables used by this component:
436
+
437
+ - `--horizontal`
438
+ - `--sapButton_Lite_TextColor`
439
+ - `--sapContent_DragAndDropActiveColor`
440
+ - `--vertical`
441
+
442
+ ## Examples
443
+
444
+ ### Resizable card layout
445
+
446
+ Resizable card layout with multiple cards.
447
+
448
+ ```html
449
+ <div id="layout1" class="fd-resizable-card-layout fd-resizable-card-layout--md fd-custom-resizable-card-layout-flex">
450
+ <div id="one" class="fd-resizable-card-layout__item card-one-dimensions">
451
+
452
+ <div class="fd-resizable-card-layout__card">
453
+ <div class="fd-card" role="region" aria-label="List Card Example">
454
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="resizable-list-card-title-5">
455
+ <div class="fd-card__header-main">
456
+ <div class="fd-card__header-main-container">
457
+ <div class="fd-card__header-text">
458
+ <div class="fd-card__title-area">
459
+ <div class="fd-card__title" id="resizable-list-card-title-5" role="heading" aria-level="3">Quick Links</div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ <div class="fd-card__header-main-actions">
464
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
469
+ <ul class="fd-list fd-list--no-border" role="list">
470
+ <li role="listitem" tabindex="0" class="fd-list__item">
471
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
472
+ <span class="fd-list__title">List item 1</span>
473
+ </li>
474
+ <li role="listitem" tabindex="0" class="fd-list__item">
475
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
476
+ <span class="fd-list__title">List item 2</span>
477
+ </li>
478
+ <li role="listitem" tabindex="0" class="fd-list__item">
479
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
480
+ <span class="fd-list__title">List item 3</span>
481
+ </li>
482
+ <li role="listitem" tabindex="0" class="fd-list__item">
483
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
484
+ <span class="fd-list__title">List item 4</span>
485
+ </li>
486
+ </ul>
487
+ </div>
488
+ </div>
489
+
490
+ </div>
491
+
492
+ </div>
493
+
494
+ <div id="two" class="fd-resizable-card-layout__item card-two-dimensions">
495
+
496
+ <div class="fd-resizable-card-layout__card">
497
+ <div class="fd-card" role="region" aria-label="Card Example 6">
498
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="card-title-6">
499
+ <div class="fd-card__header-main">
500
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
501
+ <span
502
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
503
+
504
+ role="img"
505
+ aria-label="John Doe">
506
+ </span>
507
+ <div class="fd-card__header-text">
508
+ <div class="fd-card__title-area">
509
+ <div class="fd-card__title" id="card-title-6" role="heading" aria-level="3">Card Title</div>
510
+ </div>
511
+ <div class="fd-card__subtitle-area">
512
+ <div class="fd-card__subtitle">Card Subtitle</div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ <div class="fd-card__header-main-actions">
517
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+
523
+ </div>
524
+
525
+ </div>
526
+
527
+ <div id="three" class="fd-resizable-card-layout__item card-three-dimensions">
528
+
529
+ <div class="fd-resizable-card-layout__card">
530
+ <div class="fd-card" role="region" aria-label="List Card Example">
531
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="resizable-list-card-title-6">
532
+ <div class="fd-card__header-main">
533
+ <div class="fd-card__header-main-container">
534
+ <div class="fd-card__header-text">
535
+ <div class="fd-card__title-area">
536
+ <div class="fd-card__title" id="resizable-list-card-title-6" role="heading" aria-level="3">Quick Links</div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ <div class="fd-card__header-main-actions">
541
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
546
+ <ul class="fd-list fd-list--no-border" role="list">
547
+ <li role="listitem" tabindex="0" class="fd-list__item">
548
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
549
+ <span class="fd-list__title">List item 1</span>
550
+ </li>
551
+ <li role="listitem" tabindex="0" class="fd-list__item">
552
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
553
+ <span class="fd-list__title">List item 2</span>
554
+ </li>
555
+ <li role="listitem" tabindex="0" class="fd-list__item">
556
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
557
+ <span class="fd-list__title">List item 3</span>
558
+ </li>
559
+ <li role="listitem" tabindex="0" class="fd-list__item">
560
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
561
+ <span class="fd-list__title">List item 4</span>
562
+ </li>
563
+ <li role="listitem" tabindex="0" class="fd-list__item">
564
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
565
+ <span class="fd-list__title">List item 5</span>
566
+ </li>
567
+ </ul>
568
+ </div>
569
+ </div>
570
+
571
+ </div>
572
+
573
+ </div>
574
+
575
+ <div id="six" class="fd-resizable-card-layout__item card-six-dimensions">
576
+
577
+ <div class="fd-resizable-card-layout__card">
578
+ <div class="fd-card" role="region" aria-label="List Card Example">
579
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="resizable-list-card-title-7">
580
+ <div class="fd-card__header-main">
581
+ <div class="fd-card__header-main-container">
582
+ <div class="fd-card__header-text">
583
+ <div class="fd-card__title-area">
584
+ <div class="fd-card__title" id="resizable-list-card-title-7" role="heading" aria-level="3">Quick Links</div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ <div class="fd-card__header-main-actions">
589
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
594
+ <ul class="fd-list fd-list--no-border" role="list">
595
+ <li role="listitem" tabindex="0" class="fd-list__item">
596
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
597
+ <span class="fd-list__title">List item 1</span>
598
+ </li>
599
+ <li role="listitem" tabindex="0" class="fd-list__item">
600
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
601
+ <span class="fd-list__title">List item 2</span>
602
+ </li>
603
+ <li role="listitem" tabindex="0" class="fd-list__item">
604
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
605
+ <span class="fd-list__title">List item 3</span>
606
+ </li>
607
+ <li role="listitem" tabindex="0" class="fd-list__item">
608
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
609
+ <span class="fd-list__title">List item 4</span>
610
+ </li>
611
+ </ul>
612
+ </div>
613
+ </div>
614
+
615
+ </div>
616
+
617
+ </div>
618
+
619
+ <div id="four" class="fd-resizable-card-layout__item card-four-dimensions">
620
+
621
+ <div class="fd-resizable-card-layout__card">
622
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 1">
623
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-1">
624
+ <div class="fd-card__header-main">
625
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
626
+ <span
627
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
628
+
629
+ role="img"
630
+ aria-label="John Doe">
631
+ </span>
632
+ <div class="fd-card__header-text">
633
+ <div class="fd-card__title-area">
634
+ <div class="fd-card__title" id="object-card-title-1" role="heading" aria-level="3">Card Title</div>
635
+ </div>
636
+ <div class="fd-card__subtitle-area">
637
+ <div class="fd-card__subtitle">Card Subtitle</div>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
644
+ <div class="fd-card__content-container">
645
+ <div class="fd-card__content-section">
646
+ <div class="fd-card__content-title-container">Group Title 1</div>
647
+ <div class="fd-card__content-group">
648
+ <div class="fd-card__content-group-text">
649
+ <span>Label</span>
650
+ <span>Text</span>
651
+ </div>
652
+ </div>
653
+ <div class="fd-card__content-group">
654
+ <div class="fd-card__content-group-text">
655
+ <span>Label</span>
656
+ <span>Text</span>
657
+ </div>
658
+ </div>
659
+ <div class="fd-card__content-group">
660
+ <div class="fd-card__content-group-text">
661
+ <span>Label</span>
662
+ <span>Text</span>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ <div class="fd-card__content-section">
667
+ <div class="fd-card__content-title-container">Group Title 2</div>
668
+ <div class="fd-card__content-group">
669
+ <div class="fd-card__content-group-text">
670
+ <span>Label</span>
671
+ <span>Text</span>
672
+ </div>
673
+ </div>
674
+ <div class="fd-card__content-group">
675
+ <div class="fd-card__content-group-text">
676
+ <span>Label</span>
677
+ <span>Text</span>
678
+ </div>
679
+ </div>
680
+ <div class="fd-card__content-group">
681
+ <div class="fd-card__content-group-text">
682
+ <span>Label Only</span>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </div>
689
+
690
+ </div>
691
+
692
+ </div>
693
+
694
+ <div id="five" class="fd-resizable-card-layout__item card-five-dimensions">
695
+
696
+ <div class="fd-resizable-card-layout__card">
697
+ <div class="fd-card fd-card--table" role="region" aria-label="Table Card Example 2">
698
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="table-card-title-2">
699
+ <div class="fd-card__header-main">
700
+ <div class="fd-card__header-main-container" role="button" tabindex="0">
701
+ <div class="fd-card__header-text">
702
+ <div class="fd-card__title-area">
703
+ <div class="fd-card__title" id="table-card-title-2" role="heading" aria-level="3">Table Card</div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ <div class="fd-card__header-main-actions">
708
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
713
+ <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--no-outer-border fd-table--top-border">
714
+ <thead class="fd-table__header">
715
+ <tr class="fd-table__row">
716
+ <th class="fd-table__cell" scope="col">Name</th>
717
+ <th class="fd-table__cell" scope="col">Status</th>
718
+ <th class="fd-table__cell" scope="col">Price</th>
719
+ <th class="fd-table__cell" scope="col">Country</th>
720
+ <th class="fd-table__cell"></th>
721
+ </tr>
722
+ </thead>
723
+ <tbody class="fd-table__body">
724
+ <tr class="fd-table__row">
725
+ <td class="fd-table__cell">Banana</td>
726
+ <td class="fd-table__cell">
727
+ <span class="fd-object-status fd-object-status--positive">
728
+ Available
729
+ </span>
730
+ </td>
731
+ <td class="fd-table__cell">5 EUR</td>
732
+ <td class="fd-table__cell">India</td>
733
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
734
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
735
+ </td>
736
+ </tr>
737
+ <tr class="fd-table__row">
738
+ <td class="fd-table__cell">Pineapple</td>
739
+ <td class="fd-table__cell">
740
+ <span class="fd-object-status fd-object-status--negative">
741
+ Out of stock
742
+ </span>
743
+ </td>
744
+ <td class="fd-table__cell">2 EUR</td>
745
+ <td class="fd-table__cell">Mexico</td>
746
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
747
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
748
+ </td>
749
+ </tr>
750
+ <tr class="fd-table__row">
751
+ <td class="fd-table__cell">Orange</td>
752
+ <td class="fd-table__cell">
753
+ <span class="fd-object-status fd-object-status--informative">
754
+ Temporary unavailable
755
+ </span>
756
+ </td>
757
+ <td class="fd-table__cell">6 EUR</td>
758
+ <td class="fd-table__cell">Spain</td>
759
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
760
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
761
+ </td>
762
+ </tr>
763
+ </tbody>
764
+ </table>
765
+ </div>
766
+ </div>
767
+
768
+ </div>
769
+
770
+ </div>
771
+ </div>
772
+ ```
773
+
774
+ ### Card resize in horizontal and vertical directions
775
+
776
+ Cards can be resized in horizontal direction as well as vertical direction. Resize handle will expand on right border for horizontal resize and bottom border for vertical resize.
777
+
778
+ ```html
779
+ <div id="grid1" class="fd-resizable-card-layout">
780
+ <div id="seven" class="fd-resizable-card-layout__item fd-resizable-card-layout__indication-border">
781
+
782
+ <div class="fd-resizable-card-layout__card">
783
+ <div class="fd-card" role="region" aria-label="List Card Example">
784
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="resizable-list-card-title-2">
785
+ <div class="fd-card__header-main">
786
+ <div class="fd-card__header-main-container">
787
+ <div class="fd-card__header-text">
788
+ <div class="fd-card__title-area">
789
+ <div class="fd-card__title" id="resizable-list-card-title-2" role="heading" aria-level="3">Quick Links</div>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ <div class="fd-card__header-main-actions">
794
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
795
+ </div>
796
+ </div>
797
+ </div>
798
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
799
+ <ul class="fd-list fd-list--no-border" role="list">
800
+ <li role="listitem" tabindex="0" class="fd-list__item">
801
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
802
+ <span class="fd-list__title">List item 1</span>
803
+ </li>
804
+ <li role="listitem" tabindex="0" class="fd-list__item">
805
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
806
+ <span class="fd-list__title">List item 2</span>
807
+ </li>
808
+ <li role="listitem" tabindex="0" class="fd-list__item">
809
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
810
+ <span class="fd-list__title">List item 3</span>
811
+ </li>
812
+ <li role="listitem" tabindex="0" class="fd-list__item">
813
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
814
+ <span class="fd-list__title">List item 4</span>
815
+ </li>
816
+ <li role="listitem" tabindex="0" class="fd-list__item">
817
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
818
+ <span class="fd-list__title">List item 5</span>
819
+ </li>
820
+ </ul>
821
+ </div>
822
+ </div>
823
+
824
+ </div>
825
+
826
+ </div>
827
+ </div>
828
+ ```
829
+
830
+ ### Card resize in horizontal directions
831
+
832
+ Cards can also be resized in horizontal direction only. Resize handle will expand on right border.
833
+
834
+ ```html
835
+ <div id="grid1" class="fd-resizable-card-layout">
836
+ <div id="eight" class="fd-resizable-card-layout__item">
837
+
838
+ <div class="fd-resizable-card-layout__card">
839
+ <div class="fd-card" role="region" aria-label="List Card Example">
840
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="resizable-list-card-title-1">
841
+ <div class="fd-card__header-main">
842
+ <div class="fd-card__header-main-container">
843
+ <div class="fd-card__header-text">
844
+ <div class="fd-card__title-area">
845
+ <div class="fd-card__title" id="resizable-list-card-title-1" role="heading" aria-level="3">Quick Links</div>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ <div class="fd-card__header-main-actions">
850
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
851
+ </div>
852
+ </div>
853
+ </div>
854
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
855
+ <ul class="fd-list fd-list--no-border" role="list">
856
+ <li role="listitem" tabindex="0" class="fd-list__item">
857
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
858
+ <span class="fd-list__title">List item 1</span>
859
+ </li>
860
+ <li role="listitem" tabindex="0" class="fd-list__item">
861
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
862
+ <span class="fd-list__title">List item 2</span>
863
+ </li>
864
+ <li role="listitem" tabindex="0" class="fd-list__item">
865
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
866
+ <span class="fd-list__title">List item 3</span>
867
+ </li>
868
+ <li role="listitem" tabindex="0" class="fd-list__item">
869
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
870
+ <span class="fd-list__title">List item 4</span>
871
+ </li>
872
+ <li role="listitem" tabindex="0" class="fd-list__item">
873
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
874
+ <span class="fd-list__title">List item 5</span>
875
+ </li>
876
+ </ul>
877
+ </div>
878
+ </div>
879
+
880
+ </div>
881
+ </div>
882
+ </div>
883
+ ```
884
+
885
+ ### Card resize in vertical directions
886
+
887
+ Cards can be resized in vertical direction only. Resize handle will expand on bottom border.
888
+
889
+ ```html
890
+ <div id="grid1" class="fd-resizable-card-layout">
891
+ <div id="nine" class="fd-resizable-card-layout__item">
892
+ <div class="fd-resizable-card-layout__card">
893
+ <div class="fd-card" role="region" aria-label="List Card Example">
894
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="resizable-list-card-title-3">
895
+ <div class="fd-card__header-main">
896
+ <div class="fd-card__header-main-container">
897
+ <div class="fd-card__header-text">
898
+ <div class="fd-card__title-area">
899
+ <div class="fd-card__title" id="resizable-list-card-title-3" role="heading" aria-level="3">Quick Links</div>
900
+ </div>
901
+ </div>
902
+ </div>
903
+ <div class="fd-card__header-main-actions">
904
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
909
+ <ul class="fd-list fd-list--no-border" role="list">
910
+ <li role="listitem" tabindex="0" class="fd-list__item">
911
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
912
+ <span class="fd-list__title">List item 1</span>
913
+ </li>
914
+ <li role="listitem" tabindex="0" class="fd-list__item">
915
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
916
+ <span class="fd-list__title">List item 2</span>
917
+ </li>
918
+ <li role="listitem" tabindex="0" class="fd-list__item">
919
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
920
+ <span class="fd-list__title">List item 3</span>
921
+ </li>
922
+ <li role="listitem" tabindex="0" class="fd-list__item">
923
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
924
+ <span class="fd-list__title">List item 4</span>
925
+ </li>
926
+ <li role="listitem" tabindex="0" class="fd-list__item">
927
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
928
+ <span class="fd-list__title">List item 5</span>
929
+ </li>
930
+ </ul>
931
+ </div>
932
+ </div>
933
+
934
+ </div>
935
+
936
+ </div>
937
+ </div>
938
+ ```
939
+
940
+ ## Accessibility
941
+
942
+ - Use semantic HTML elements where appropriate
943
+ - Include proper ARIA attributes for interactive elements
944
+ - Ensure keyboard navigation support
945
+ - Provide adequate color contrast
946
+
947
+ ## Source
948
+
949
+ This documentation was automatically generated from: `packages/styles/stories/Layouts/resizable-card-layout/resizable-card-layout.stories.js`
950
+
951
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).