@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-card-media.md ADDED
@@ -0,0 +1,707 @@
1
+ ---
2
+ component: fd-card
3
+ title: Components/Card/Media Card
4
+ category: Components
5
+ selector: fd-card
6
+ cssFile: card.css
7
+ sourcePath: packages/styles/stories/Components/card-media/card-media.stories.js
8
+ tags: ["development"]
9
+ dependencies: ["avatar","badge","button","card","icon","link","object-status"]
10
+ relatedComponents: ["avatar","badge","button","card","icon","link","object-status"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.494Z
13
+ ---
14
+
15
+ # Components/Card/Media Card
16
+
17
+ The Media Block is optional and can be hidden if is not desired to be shown. The Media Block feature enables cards to spotlight special content for the user. Adding an image or colored background in combination with bold text, the Media Block can also work as stand-alone banner.
18
+
19
+ ## Dependencies
20
+
21
+ This component depends on the following CSS files:
22
+
23
+ - `avatar.css`
24
+ - `badge.css`
25
+ - `button.css`
26
+ - `card.css`
27
+ - `icon.css`
28
+ - `link.css`
29
+ - `object-status.css`
30
+
31
+ ## Installation
32
+
33
+ ```bash
34
+ npm install fundamental-styles
35
+ ```
36
+
37
+ ```html
38
+ <!-- Include theme -->
39
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
40
+
41
+ <!-- Include component CSS -->
42
+ <link href="node_modules/fundamental-styles/dist/card.css" rel="stylesheet">
43
+
44
+ <!-- Include dependencies -->
45
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
46
+ <link href="node_modules/fundamental-styles/dist/badge.css" rel="stylesheet">
47
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
48
+ <link href="node_modules/fundamental-styles/dist/card.css" rel="stylesheet">
49
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
50
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
51
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
52
+ ```
53
+
54
+ ## Basic Usage
55
+
56
+ ```html
57
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-2m">
58
+ <div class="fd-card__media fd-card__media--with-padding" role="group" aria-roledescription="Card Media Block">
59
+ <div class="fd-card__media-image-container">
60
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg" role="presentation" />
61
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
62
+ <div class="fd-card__header-main">
63
+ <div class="fd-card__header-main-container">
64
+ <span
65
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
66
+
67
+ role="img"
68
+ aria-label="John Doe">
69
+ </span>
70
+ <div class="fd-card__header-text">
71
+ <div class="fd-card__title-area">
72
+ <div class="fd-card__title" id="card-title-2m" role="heading" aria-level="3">Card Title</div>
73
+ </div>
74
+ <div class="fd-card__subtitle-area">
75
+ <div class="fd-card__subtitle">Card Subtitle</div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="fd-card__footer">
83
+ <div class="fd-card__footer-actions">
84
+ <button class="fd-button fd-button--positive">
85
+ Button
86
+ </button>
87
+ <button class="fd-button fd-button--negative">
88
+ Button
89
+ </button>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-3m">
96
+ <div class="fd-card__media" role="group" aria-roledescription="Card Media Block">
97
+ <div class="fd-card__media-image-container">
98
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg" role="presentation" />
99
+ </div>
100
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
101
+ <div class="fd-card__header-main">
102
+ <div class="fd-card__header-main-container is-focus" role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
103
+ <span
104
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
105
+
106
+ role="img"
107
+ aria-label="John Doe">
108
+ </span>
109
+ <div class="fd-card__header-text">
110
+ <div class="fd-card__title-area">
111
+ <div class="fd-card__title" id="card-title-3m" role="heading" aria-level="3">Card Title</div>
112
+ </div>
113
+ <div class="fd-card__subtitle-area">
114
+ <div class="fd-card__subtitle">Card Subtitle</div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="fd-card__footer">
122
+ <div class="fd-card__footer-actions">
123
+ <button class="fd-button fd-button--positive">
124
+ Button
125
+ </button>
126
+ <button class="fd-button fd-button--negative">
127
+ Button
128
+ </button>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4m">
135
+ <div class="fd-card__media" role="group" aria-roledescription="Card Media Block">
136
+ <div class="fd-card__media-image-container">
137
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg" role="presentation" />
138
+ </div>
139
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
140
+ <div class="fd-card__header-main">
141
+ <div class="fd-card__header-main-container is-focus" role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
142
+ <span
143
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
144
+
145
+ role="img"
146
+ aria-label="John Doe">
147
+ </span>
148
+ <div class="fd-card__header-text">
149
+ <div class="fd-card__title-area">
150
+ <div class="fd-card__title" id="card-title-4m" role="heading" aria-level="3">Card Title</div>
151
+ </div>
152
+ <div class="fd-card__subtitle-area">
153
+ <div class="fd-card__subtitle">Card Subtitle</div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ ```
163
+
164
+ ## Modifiers
165
+
166
+ | Class | Description |
167
+ |-------|-------------|
168
+ | `fd-card--banner` | A title on Media Block is possible if using a solid colored background an NO image |
169
+
170
+ ## States
171
+
172
+ | Class | Description |
173
+ |-------|-------------|
174
+ | `is-focus` | Focus state |
175
+
176
+ ## BEM Elements
177
+
178
+ This component uses the following BEM elements:
179
+
180
+ - `fd-card__avatar`
181
+ - `fd-card__content`
182
+ - `fd-card__footer`
183
+ - `fd-card__footer-actions`
184
+ - `fd-card__header`
185
+ - `fd-card__header--interactive`
186
+ - `fd-card__header-main`
187
+ - `fd-card__header-main-container`
188
+ - `fd-card__header-text`
189
+ - `fd-card__media`
190
+ - `fd-card__media--bg-legend-`
191
+ - `fd-card__media--bg-shell-`
192
+ - `fd-card__media--with-padding`
193
+ - `fd-card__media-content-container`
194
+ - `fd-card__media-content-container--bg-legend-`
195
+ - `fd-card__media-content-container--bg-shell-`
196
+ - `fd-card__media-content-container--overlay`
197
+ - `fd-card__media-heading`
198
+ - `fd-card__media-image`
199
+ - `fd-card__media-image-container`
200
+ - `fd-card__media-text`
201
+ - `fd-card__subtitle`
202
+ - `fd-card__subtitle-area`
203
+ - `fd-card__title`
204
+ - `fd-card__title-area`
205
+
206
+ ## Related Components
207
+
208
+ This component works with or depends on:
209
+
210
+ - `avatar`
211
+ - `badge`
212
+ - `button`
213
+ - `card`
214
+ - `icon`
215
+ - `link`
216
+ - `object-status`
217
+
218
+ ## Design Tokens
219
+
220
+ Key CSS variables used by this component:
221
+
222
+ - `--analytical`
223
+ - `--banner`
224
+ - `--bg-legend-`
225
+ - `--bg-shell-`
226
+ - `--bottom-aligned`
227
+ - `--fdCard_Background`
228
+ - `--fdCard_Border`
229
+ - `--fdCard_Border_Corner_Radius`
230
+ - `--fdCard_Box_Shadow`
231
+ - `--fdCard_Box_Shadow_Hover`
232
+ - `--fdCard_Box_Shadow_Regular`
233
+ - `--fdCard_Content_Border_Radius`
234
+ - `--fdCard_Counter_Margin`
235
+ - `--fdCard_Focus_Outline_Offset`
236
+ - `--fdCard_Focus_Outline_Radius`
237
+
238
+ *...and 5 more*
239
+
240
+ ## Examples
241
+
242
+ ### Media on Cards
243
+
244
+ The Media Block is flexible in height but fixed in width to the card size. The media can only contain an image / graphic OR solid color plus text.
245
+ The Image can fill the media container or can come with a padding of 1rem (results in 16px) top, left and right. Corner radius 0.5rem (results in 8px). For this option add the modifier class <code>.fd-card__media--with-padding</code> to <code>.fd-card__media</code> base class. <br><br>
246
+
247
+ ```html
248
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-2m">
249
+ <div class="fd-card__media fd-card__media--with-padding" role="group" aria-roledescription="Card Media Block">
250
+ <div class="fd-card__media-image-container">
251
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg" role="presentation" />
252
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
253
+ <div class="fd-card__header-main">
254
+ <div class="fd-card__header-main-container">
255
+ <span
256
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
257
+
258
+ role="img"
259
+ aria-label="John Doe">
260
+ </span>
261
+ <div class="fd-card__header-text">
262
+ <div class="fd-card__title-area">
263
+ <div class="fd-card__title" id="card-title-2m" role="heading" aria-level="3">Card Title</div>
264
+ </div>
265
+ <div class="fd-card__subtitle-area">
266
+ <div class="fd-card__subtitle">Card Subtitle</div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="fd-card__footer">
274
+ <div class="fd-card__footer-actions">
275
+ <button class="fd-button fd-button--positive">
276
+ Button
277
+ </button>
278
+ <button class="fd-button fd-button--negative">
279
+ Button
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-3m">
287
+ <div class="fd-card__media" role="group" aria-roledescription="Card Media Block">
288
+ <div class="fd-card__media-image-container">
289
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg" role="presentation" />
290
+ </div>
291
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
292
+ <div class="fd-card__header-main">
293
+ <div class="fd-card__header-main-container is-focus" role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
294
+ <span
295
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
296
+
297
+ role="img"
298
+ aria-label="John Doe">
299
+ </span>
300
+ <div class="fd-card__header-text">
301
+ <div class="fd-card__title-area">
302
+ <div class="fd-card__title" id="card-title-3m" role="heading" aria-level="3">Card Title</div>
303
+ </div>
304
+ <div class="fd-card__subtitle-area">
305
+ <div class="fd-card__subtitle">Card Subtitle</div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <div class="fd-card__footer">
313
+ <div class="fd-card__footer-actions">
314
+ <button class="fd-button fd-button--positive">
315
+ Button
316
+ </button>
317
+ <button class="fd-button fd-button--negative">
318
+ Button
319
+ </button>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4m">
326
+ <div class="fd-card__media" role="group" aria-roledescription="Card Media Block">
327
+ <div class="fd-card__media-image-container">
328
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg" role="presentation" />
329
+ </div>
330
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
331
+ <div class="fd-card__header-main">
332
+ <div class="fd-card__header-main-container is-focus" role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
333
+ <span
334
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
335
+
336
+ role="img"
337
+ aria-label="John Doe">
338
+ </span>
339
+ <div class="fd-card__header-text">
340
+ <div class="fd-card__title-area">
341
+ <div class="fd-card__title" id="card-title-4m" role="heading" aria-level="3">Card Title</div>
342
+ </div>
343
+ <div class="fd-card__subtitle-area">
344
+ <div class="fd-card__subtitle">Card Subtitle</div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ ```
354
+
355
+ ### Title on Media
356
+
357
+ A title on Media Block is possible if using a solid colored background an NO image! To ensure legibility and ACC standards in the Media Block / Banner, always make sure a sufficient contrast ratio is achieved.
358
+ Solid background colors can be bright <b>Shell Category Colors</b> or the lighter <b>Legend Background Colors</b>.
359
+
360
+ - For <b>Shell Category Colors</b> add the <code>.fd-card__media--bg-shell-*</code> modifier to the <code>.fd-card__media</code> base class, where * can be a number from 1 to 16. For example: <code>fd-card__media--bg-shell-5</code>
361
+ - For <b>Legend Background Colors</b> add the <code>.fd-card__media--bg-legend-*</code> modifier to the <code>.fd-card__media</code> base class, where * can be a number from 1 to 20. For example: <code>fd-card__media--bg-legend-7</code>
362
+
363
+ ```html
364
+ <h3>Title on Media, Shell Category background colors </h3>
365
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-5m">
366
+ <div class="fd-card__media fd-card__media--bg-shell-1" role="group" aria-roledescription="Card Media Block">
367
+ <div class="fd-card__media-content-container">
368
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Incoming Applications</div>
369
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
370
+ <div class="fd-card__header-main">
371
+ <div class="fd-card__header-main-container">
372
+ <span
373
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
374
+
375
+ role="img"
376
+ aria-label="John Doe">
377
+ </span>
378
+ <div class="fd-card__header-text">
379
+ <div class="fd-card__title-area">
380
+ <div class="fd-card__title" id="card-title-5m" role="heading" aria-level="3">Card Title</div>
381
+ </div>
382
+ <div class="fd-card__subtitle-area">
383
+ <div class="fd-card__subtitle">Card Subtitle</div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="fd-card__footer">
391
+ <div class="fd-card__footer-actions">
392
+ <button class="fd-button fd-button--positive">
393
+ Button
394
+ </button>
395
+ <button class="fd-button fd-button--negative">
396
+ Button
397
+ </button>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+
403
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1m">
404
+ <div class="fd-card__media fd-card__media--bg-shell-2" role="group" aria-roledescription="Card Media Block">
405
+ <div class="fd-card__media-content-container">
406
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Incoming Applications</div>
407
+ </div>
408
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="card-title-6a">
409
+ <div class="fd-card__header-main">
410
+ <div class="fd-card__header-main-container">
411
+ <span
412
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
413
+
414
+ role="img"
415
+ aria-label="John Doe">
416
+ </span>
417
+ <div class="fd-card__header-text">
418
+ <div class="fd-card__title-area">
419
+ <div class="fd-card__title" id="card-title-6a" role="heading" aria-level="3">Card Title</div>
420
+ </div>
421
+ <div class="fd-card__subtitle-area">
422
+ <div class="fd-card__subtitle">Card Subtitle</div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="fd-card__footer">
430
+ <div class="fd-card__footer-actions">
431
+ <button class="fd-button fd-button--positive">
432
+ Button
433
+ </button>
434
+ <button class="fd-button fd-button--negative">
435
+ Button
436
+ </button>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1m">
443
+ <div class="fd-card__media fd-card__media--bg-shell-3" role="group" aria-roledescription="Card Media Block">
444
+ <div class="fd-card__media-content-container">
445
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Incoming Applications</div>
446
+ </div>
447
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="card-title-7a">
448
+ <div class="fd-card__header-main">
449
+ <div class="fd-card__header-main-container">
450
+ <span
451
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
452
+
453
+ role="img"
454
+ aria-label="John Doe">
455
+ </span>
456
+ <div class="fd-card__header-text">
457
+ <div class="fd-card__title-area">
458
+ <div class="fd-card__title" id="card-title-7a" role="heading" aria-level="3">Card Title</div>
459
+ </div>
460
+ <div class="fd-card__subtitle-area">
461
+ <div class="fd-card__subtitle">Card Subtitle</div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="fd-card__footer">
469
+ <div class="fd-card__footer-actions">
470
+ <button class="fd-button fd-button--positive">
471
+ Button
472
+ </button>
473
+ <button class="fd-button fd-button--negative">
474
+ Button
475
+ </button>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <h3>Title on Media, Legend background colors </h3>
483
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-6m">
484
+ <div class="fd-card__media fd-card__media--bg-legend-1" role="group" aria-roledescription="Card Media Block">
485
+ <div class="fd-card__media-content-container">
486
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Incoming Applications</div>
487
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
488
+ <div class="fd-card__header-main">
489
+ <div class="fd-card__header-main-container">
490
+ <span
491
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
492
+
493
+ role="img"
494
+ aria-label="John Doe">
495
+ </span>
496
+ <div class="fd-card__header-text">
497
+ <div class="fd-card__title-area">
498
+ <div class="fd-card__title" id="card-title-6m" role="heading" aria-level="3">Card Title</div>
499
+ </div>
500
+ <div class="fd-card__subtitle-area">
501
+ <div class="fd-card__subtitle">Card Subtitle</div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+
508
+ <div class="fd-card__footer">
509
+ <div class="fd-card__footer-actions">
510
+ <button class="fd-button fd-button--positive">
511
+ Button
512
+ </button>
513
+ <button class="fd-button fd-button--negative">
514
+ Button
515
+ </button>
516
+ </div>
517
+ </div>
518
+ </div>
519
+ </div>
520
+
521
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-7m">
522
+ <div class="fd-card__media fd-card__media--bg-legend-2" role="group" aria-roledescription="Card Media Block">
523
+ <div class="fd-card__media-content-container">
524
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Incoming Applications</div>
525
+ </div>
526
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
527
+ <div class="fd-card__header-main">
528
+ <div class="fd-card__header-main-container">
529
+ <span
530
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
531
+
532
+ role="img"
533
+ aria-label="John Doe">
534
+ </span>
535
+ <div class="fd-card__header-text">
536
+ <div class="fd-card__title-area">
537
+ <div class="fd-card__title" id="card-title-7m" role="heading" aria-level="3">Card Title</div>
538
+ </div>
539
+ <div class="fd-card__subtitle-area">
540
+ <div class="fd-card__subtitle">Card Subtitle</div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+
547
+ <div class="fd-card__footer">
548
+ <div class="fd-card__footer-actions">
549
+ <button class="fd-button fd-button--positive">
550
+ Button
551
+ </button>
552
+ <button class="fd-button fd-button--negative">
553
+ Button
554
+ </button>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-8m">
561
+ <div class="fd-card__media fd-card__media--bg-legend-3" role="group" aria-roledescription="Card Media Block">
562
+ <div class="fd-card__media-content-container">
563
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Incoming Applications</div>
564
+ </div>
565
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
566
+ <div class="fd-card__header-main">
567
+ <div class="fd-card__header-main-container">
568
+ <span
569
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
570
+
571
+ role="img"
572
+ aria-label="John Doe">
573
+ </span>
574
+ <div class="fd-card__header-text">
575
+ <div class="fd-card__title-area">
576
+ <div class="fd-card__title" id="card-title-8m" role="heading" aria-level="3">Card Title</div>
577
+ </div>
578
+ <div class="fd-card__subtitle-area">
579
+ <div class="fd-card__subtitle">Card Subtitle</div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+
586
+ <div class="fd-card__footer">
587
+ <div class="fd-card__footer-actions">
588
+ <button class="fd-button fd-button--positive">
589
+ Button
590
+ </button>
591
+ <button class="fd-button fd-button--negative">
592
+ Button
593
+ </button>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ ```
600
+
601
+ ### Media as Banner
602
+
603
+ To highlight certain content in a crisp and highly visual way, the Media Block offers the flexibility to be designed as a stand-alone banner. Use the <code>.fd-card--banner</code> modifier class to achieve this type of Card. <br>
604
+ When the Card is used as a banner, the solid background can be applied on the whole media container or on the content container, in cases where it's used together with an image or as an overlay.
605
+
606
+ To achieve a banner with a solid background with no image use the <code>.fd-card__media--bg-shell-*</code> or <code>.fd-card__media--bg-legend-*</code> modifer with the <code>.fd-card__media</code> base class.
607
+
608
+ If you want to apply background on the content container when it's used with an image, use the <code>.fd-card__media-content-container--bg-shell-*</code> or <code>.fd-card__media-content-container--bg-legend-*</code> modifer with the <code>.fd-card__media-content-container</code> base class.
609
+
610
+ The content container can be displayed as an overlay in case of using an image / a graphic behind. Use the modifier class <code>.fd-card__media-content-container--overlay</code> with the <code>.fd-card__media-content-container</code> base class.
611
+
612
+ ```html
613
+ <div class="fd-card fd-card--banner" aria-label="Get Ready for the AI Learning Days!">
614
+ <div class="fd-card__media fd-card__media--bg-shell-13" role="group" aria-roledescription="Card Media Block">
615
+ <div class="fd-card__media-content-container">
616
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Get Ready for the AI Learning Days!</div>
617
+ <p class="fd-card__media-text">
618
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quo delectus deleniti excepturi tempora impedit nobis nulla sint qui quae consequuntur reprehenderit, accusamus amet nihil esse quia doloribus praesentium quidem?
619
+ </p>
620
+ <button class="fd-button">
621
+ <span class="fd-button__text">Register</span>
622
+ </button>
623
+ </div>
624
+ </div>
625
+ </div>
626
+
627
+ <div class="fd-card fd-card--banner" role="region" aria-label="Get Ready for the AI Learning Days!">
628
+ <div class="fd-card__media fd-card__media--bg-legend-13" role="group" aria-roledescription="Card Media Block">
629
+ <div class="fd-card__media-content-container">
630
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Get Ready for the AI Learning Days!</div>
631
+ <p class="fd-card__media-text">
632
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quo delectus deleniti excepturi tempora impedit nobis nulla sint qui quae consequuntur reprehenderit, accusamus amet nihil esse quia doloribus praesentium quidem?
633
+ </p>
634
+ <button class="fd-button fd-button--emphasized">
635
+ <span class="fd-button__text">Register</span>
636
+ </button>
637
+ </div>
638
+ </div>
639
+ </div>
640
+
641
+ <div class="fd-card fd-card--banner" role="region" aria-label="Get Ready for the AI Learning Days!">
642
+ <div class="fd-card__media">
643
+ <div class="fd-card__media-content-container fd-card__media-content-container--bg-shell-13">
644
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Get Ready for the AI Learning Days!</div>
645
+ <p class="fd-card__media-text">
646
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quo delectus deleniti excepturi tempora impedit nobis nulla sint qui quae consequuntur reprehenderit, accusamus amet nihil esse quia doloribus praesentium quidem?
647
+ </p>
648
+ <button class="fd-button">
649
+ <span class="fd-button__text">Register</span>
650
+ </button>
651
+
652
+ <div class="fd-card__media-image-container">
653
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg" role="presentation" />
654
+ </div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+
659
+ <h3>Media as Banner with content overlay</h3>
660
+ <div class="fd-card fd-card--banner" role="region" aria-label="Get Ready for the AI Learning Days!">
661
+ <div class="fd-card__media">
662
+ <div class="fd-card__media-content-container fd-card__media-content-container--overlay">
663
+ <div class="fd-card__media-heading" role="heading" aria-level="2">Get Ready for the AI Learning Days!</div>
664
+ <p class="fd-card__media-text">
665
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quo delectus deleniti excepturi tempora impedit nobis nulla sint qui quae consequuntur reprehenderit, accusamus amet nihil esse quia doloribus praesentium quidem?
666
+ </p>
667
+ <button class="fd-button">
668
+ <span class="fd-button__text">Register</span>
669
+ </button>
670
+
671
+ <div class="fd-card__media-image-container">
672
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg" role="presentation" />
673
+ </div>
674
+ </div>
675
+ </div>
676
+ </div>
677
+
678
+ <div class="fd-card fd-card--banner" role="region" aria-label="Get Ready for the AI Learning Days!">
679
+ <div class="fd-card__media">
680
+ <div class="fd-card__media-content-container fd-card__media-content-container--overlay fd-card__media-content-container--bg-legend-1">
681
+ <p class="fd-card__media-text">
682
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quo delectus deleniti excepturi tempora impedit nobis nulla sint qui quae consequuntur reprehenderit, accusamus amet nihil esse quia doloribus praesentium quidem?
683
+ </p>
684
+ <button class="fd-button fd-button--emphasized" title="Register">
685
+ <span class="fd-button__text">Register</span>
686
+ </button>
687
+
688
+ <div class="fd-card__media-image-container">
689
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg" role="presentation" />
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ ```
695
+
696
+ ## Accessibility
697
+
698
+ - Use semantic HTML elements where appropriate
699
+ - Include proper ARIA attributes for interactive elements
700
+ - Ensure keyboard navigation support
701
+ - Provide adequate color contrast
702
+
703
+ ## Source
704
+
705
+ This documentation was automatically generated from: `packages/styles/stories/Components/card-media/card-media.stories.js`
706
+
707
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).