@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.md ADDED
@@ -0,0 +1,2426 @@
1
+ ---
2
+ component: fd-card
3
+ title: Components/Card/Card
4
+ category: Components
5
+ selector: fd-card
6
+ cssFile: card.css
7
+ sourcePath: packages/styles/stories/Components/card/card.stories.js
8
+ generatedAt: 2026-05-28T16:01:41.641Z
9
+ ---
10
+
11
+ # Components/Card/Card
12
+
13
+ The Card is a container that consists of a <b>Header</b>, <b>Extended Header</b>, <b>Numeric Content</b>, <b>Content</b> and <b>Footer area</b>.
14
+ It takes the width of its parent. An additional Media Block is optional. The Header could be placed either above or below the Content and is not separated with a line. All building blocks are optional.
15
+
16
+ **Cards can display different types of content, such as:**
17
+
18
+ - a chart
19
+ - a list
20
+ - a table
21
+ - an object or group of objects
22
+ - informative text
23
+ - a combination of two elements
24
+
25
+ Card sizes vary depending on the layout, and they are not editable. A card can focus on either a single object or topic, or on a group of objects. Several cards can reference the same application, but the information should be distinct from one card to another.
26
+
27
+ ##Card anatomy
28
+
29
+ - <b>header</b> (optional): the card header is a flexible combination of 3 block areas: main header, numeric header and extended header. The header displays a mandatory title, indicating what the card is about and functions as a navigation control that directs the user to the parent app.
30
+ - <b>main header</b>: the main card header block shows the basic information of the card. It can contain <b>avatar</b> (optional), <b>title</b>, <b>subtitle</b> (optional), <b>counter</b> (optional), <b>button</b> (optional), timestamp (optional). If an additional action is part of the header, the timestamp is placed underneath. The timestamp doesn't wrap or truncate.
31
+ - <b>extended header</b>: the extended header is a flexible block to hold various other components, like time stamp, rating, tags, label/value, long text, numeric values, etc. The components can be arranged in left column or right column, each column is suggested to have maximum 3 lines for placing the components.
32
+ - <b>numeric header</b>: the numeric header block is designed for displaying numeric information. It consumes Numeric Content (Horizon) and can show additional qualifying information and side indicators, if required.
33
+
34
+ - <b>badge</b> (optional): The Badge for Cards can contain Icon and Text, Text only or Icon only. There are no interaction states on Badge for Cards. Badge on Cards consumes the <b>Inverted Object Status/Tag</b> with some modifications. A Badge can only expand to the max width of the card that it is applied to. Text on it will not wrap, but truncate. <b>There can be max 2 badges per Card.</b>
35
+ - <b>content</b> (main): the content area is reserved for application content.
36
+
37
+ - <b>footer</b> (optional): the footer displays a list of actions that can be performed on the card. When link is too long, or there is no more place for actions, overflow button should appear.
38
+
39
+ ## Installation
40
+
41
+ ```bash
42
+ npm install fundamental-styles
43
+ ```
44
+
45
+ ```html
46
+ <!-- Include theme -->
47
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
48
+
49
+ <!-- Include component CSS -->
50
+ <link href="node_modules/fundamental-styles/dist/card.css" rel="stylesheet">
51
+ ```
52
+
53
+ ## Basic Usage
54
+
55
+ ```html
56
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
57
+ <div style="width: 300px; height: 400px; margin: 1rem;">
58
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1a">
59
+
60
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
61
+ <div class="fd-card__header-main">
62
+ <div class="fd-card__header-main-container">
63
+ <span
64
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
65
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
66
+ role="img"
67
+ aria-label="John Doe">
68
+ </span>
69
+ <div class="fd-card__header-text">
70
+ <div class="fd-card__title-area">
71
+ <div class="fd-card__title" id="card-title-1a" role="heading" aria-level="3">Non-interactive header</div>
72
+ </div>
73
+ <div class="fd-card__subtitle-area">
74
+ <div class="fd-card__subtitle">Card Subtitle</div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ <div class="fd-card__header-main-actions">
79
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
80
+ <i class="sap-icon--overflow"></i>
81
+ </button>
82
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
88
+
89
+ <div class="fd-card__footer">
90
+ <div class="fd-card__footer-actions">
91
+ <button class="fd-button fd-button--positive">
92
+ Button
93
+ </button>
94
+ <button class="fd-button fd-button--negative">
95
+ Button
96
+ </button>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <div style="width: 300px; height: 400px; margin: 1rem;">
103
+ <div class="fd-card" role="region" aria-labelledby="card-title-2a">
104
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
105
+ <div class="fd-card__header-main">
106
+ <div class="fd-card__header-main-container"role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
107
+ <span
108
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
109
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
110
+ role="img"
111
+ aria-label="John Doe">
112
+ </span>
113
+ <div class="fd-card__header-text">
114
+ <div class="fd-card__title-area">
115
+ <div class="fd-card__title" id="card-title-2a" role="heading" aria-level="3">Interactive Header</div>
116
+ </div>
117
+ <div class="fd-card__subtitle-area">
118
+ <div class="fd-card__subtitle">Card Subtitle</div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ <div class="fd-card__header-main-actions">
123
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
124
+ <i class="sap-icon--overflow"></i>
125
+ </button>
126
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
127
+ <div class="fd-card__timestamp">
128
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
129
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
130
+ </button>
131
+ <span>2 hours ago</span>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
138
+
139
+ <div class="fd-card__footer">
140
+ <div class="fd-card__footer-actions">
141
+ <button class="fd-button fd-button--positive">
142
+ Button
143
+ </button>
144
+ <button class="fd-button fd-button--negative">
145
+ Button
146
+ </button>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <div style="width: 300px; height: 400px; margin: 1rem;">
153
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-3a">
154
+
155
+ <div class="fd-card__media" role="group" aria-roledescription="Card Media Block">
156
+ <div class="fd-card__media-image-container">
157
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg"
158
+ alt="image of a sunset over mountains" />
159
+ </div>
160
+ </div>
161
+
162
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
163
+ <div class="fd-card__header-main">
164
+ <div class="fd-card__header-main-container">
165
+ <span
166
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
167
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
168
+ role="img"
169
+ aria-label="John Doe">
170
+ </span>
171
+ <div class="fd-card__header-text">
172
+ <div class="fd-card__title-area">
173
+ <div class="fd-card__title" id="card-title-3a" role="heading" aria-level="3">Card with Media</div>
174
+ </div>
175
+ <div class="fd-card__subtitle-area">
176
+ <div class="fd-card__subtitle">Card Subtitle</div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ <div class="fd-card__header-main-actions">
181
+ <div class="fd-card__timestamp">
182
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
183
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
184
+ </button>
185
+ <span>2 hrs ago</span>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
192
+
193
+ <div class="fd-card__footer">
194
+ <div class="fd-card__footer-actions">
195
+ <button class="fd-button fd-button--positive">
196
+ Button
197
+ </button>
198
+ <button class="fd-button fd-button--negative">
199
+ Button
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <div style="width: 300px; height: fit-content; margin: 1rem;">
207
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-33a">
208
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
209
+ <div class="fd-card__header-main">
210
+ <div class="fd-card__header-main-container">
211
+ <span
212
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
213
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
214
+ role="img"
215
+ aria-label="John Doe">
216
+ </span>
217
+ <div class="fd-card__header-text">
218
+ <div class="fd-card__title-area">
219
+ <div class="fd-card__title" id="card-title-33a" role="heading" aria-level="3">Request Approval</div>
220
+ </div>
221
+ <div class="fd-card__subtitle-area">
222
+ <div class="fd-card__subtitle">Marie Johnson</div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ <div class="fd-card__header-main-actions">
227
+ <span class="fd-object-status fd-card__counter">2 of 5</span>
228
+ <div class="fd-card__timestamp">
229
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
230
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
231
+ </button>
232
+ <span>1h ago</span>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
237
+ <div class="fd-card__header-column">
238
+ <div class="fd-card__header-row">
239
+ Travel to <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Las Vegas</span></a>
240
+ </div>
241
+ <div class="fd-card__header-row">
242
+ May 3rd - 5th
243
+ </div>
244
+ </div>
245
+ </div>
246
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
247
+ <div class="fd-card__header-row">
248
+ <div class="fd-card__numeric-container">
249
+ <div class="fd-numeric-content fd-card__numeric-content">
250
+ <div class="fd-numeric-content__kpi-container">
251
+ <div class="fd-numeric-content__kpi">3,954.00</div>
252
+ </div>
253
+ <div class="fd-numeric-content__scale-container">
254
+ <div class="fd-numeric-content__scale">
255
+ <span class="fd-numeric-content__scale-text">EUR</span>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ <div class="fd-card__footer">
264
+ <div class="fd-card__footer-actions">
265
+ <button class="fd-button fd-button--positive">
266
+ Approve
267
+ </button>
268
+ <button class="fd-button fd-button--negative">
269
+ Send Back
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ ```
277
+
278
+ ## Modifiers
279
+
280
+ | Class | Description |
281
+ |-------|-------------|
282
+ | `fd-card--analytical` | The analytical card is used for data visualization. It can display a KPI header and various chart types in the content. The only difference between a KPI header and a standard header is that the former requires a subtitle, a KPI area and can display an optional second subtitle. To display an analytical card, add the \ |
283
+ | `fd-card--interactive` | Non-interactive cards have <code>role="region"</code>. In this case the card can be placed in any container. This role covers the interactive variants: |
284
+ | `fd-card--object` | The object card can display a single object or a group of objects. Contrary to other cards, object card has 1rem padding on all sides of the content area. To display an object card, add the \ |
285
+ | `fd-card--table` | Alternatively to an Avatar a Message Icon can be displayed within the Main Header. This will be available in three different sizes (this is only applicable for Message Icons not Avatar component on Card Header). The Message Icons are non-interactive. |
286
+
287
+ ## States
288
+
289
+ | Class | Description |
290
+ |-------|-------------|
291
+ | `is-active` | Active state |
292
+ | `is-focus` | Focus state |
293
+ | `is-hover` | Hover state |
294
+ | `is-selected` | Selected state |
295
+
296
+ ## Examples
297
+
298
+ ### Non-interactive card
299
+
300
+ Non-interactive cards have <code>role="region"</code>. In this case the card can be placed in any container. This role covers the interactive variants:
301
+ - no interactivity
302
+ - no interactivity with interactive elements inside (including interactive header).
303
+
304
+ ```html
305
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
306
+ <div style="width: 300px; height: 400px; margin: 1rem;">
307
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1a">
308
+
309
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
310
+ <div class="fd-card__header-main">
311
+ <div class="fd-card__header-main-container">
312
+ <span
313
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
314
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
315
+ role="img"
316
+ aria-label="John Doe">
317
+ </span>
318
+ <div class="fd-card__header-text">
319
+ <div class="fd-card__title-area">
320
+ <div class="fd-card__title" id="card-title-1a" role="heading" aria-level="3">Non-interactive header</div>
321
+ </div>
322
+ <div class="fd-card__subtitle-area">
323
+ <div class="fd-card__subtitle">Card Subtitle</div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ <div class="fd-card__header-main-actions">
328
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
329
+ <i class="sap-icon--overflow"></i>
330
+ </button>
331
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
337
+
338
+ <div class="fd-card__footer">
339
+ <div class="fd-card__footer-actions">
340
+ <button class="fd-button fd-button--positive">
341
+ Button
342
+ </button>
343
+ <button class="fd-button fd-button--negative">
344
+ Button
345
+ </button>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <div style="width: 300px; height: 400px; margin: 1rem;">
352
+ <div class="fd-card" role="region" aria-labelledby="card-title-2a">
353
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
354
+ <div class="fd-card__header-main">
355
+ <div class="fd-card__header-main-container"role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
356
+ <span
357
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
358
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
359
+ role="img"
360
+ aria-label="John Doe">
361
+ </span>
362
+ <div class="fd-card__header-text">
363
+ <div class="fd-card__title-area">
364
+ <div class="fd-card__title" id="card-title-2a" role="heading" aria-level="3">Interactive Header</div>
365
+ </div>
366
+ <div class="fd-card__subtitle-area">
367
+ <div class="fd-card__subtitle">Card Subtitle</div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ <div class="fd-card__header-main-actions">
372
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
373
+ <i class="sap-icon--overflow"></i>
374
+ </button>
375
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
376
+ <div class="fd-card__timestamp">
377
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
378
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
379
+ </button>
380
+ <span>2 hours ago</span>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
387
+
388
+ <div class="fd-card__footer">
389
+ <div class="fd-card__footer-actions">
390
+ <button class="fd-button fd-button--positive">
391
+ Button
392
+ </button>
393
+ <button class="fd-button fd-button--negative">
394
+ Button
395
+ </button>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <div style="width: 300px; height: 400px; margin: 1rem;">
402
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-3a">
403
+
404
+ <div class="fd-card__media" role="group" aria-roledescription="Card Media Block">
405
+ <div class="fd-card__media-image-container">
406
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg"
407
+ alt="image of a sunset over mountains" />
408
+ </div>
409
+ </div>
410
+
411
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
412
+ <div class="fd-card__header-main">
413
+ <div class="fd-card__header-main-container">
414
+ <span
415
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
416
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
417
+ role="img"
418
+ aria-label="John Doe">
419
+ </span>
420
+ <div class="fd-card__header-text">
421
+ <div class="fd-card__title-area">
422
+ <div class="fd-card__title" id="card-title-3a" role="heading" aria-level="3">Card with Media</div>
423
+ </div>
424
+ <div class="fd-card__subtitle-area">
425
+ <div class="fd-card__subtitle">Card Subtitle</div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ <div class="fd-card__header-main-actions">
430
+ <div class="fd-card__timestamp">
431
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
432
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
433
+ </button>
434
+ <span>2 hrs ago</span>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
441
+
442
+ <div class="fd-card__footer">
443
+ <div class="fd-card__footer-actions">
444
+ <button class="fd-button fd-button--positive">
445
+ Button
446
+ </button>
447
+ <button class="fd-button fd-button--negative">
448
+ Button
449
+ </button>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <div style="width: 300px; height: fit-content; margin: 1rem;">
456
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-33a">
457
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
458
+ <div class="fd-card__header-main">
459
+ <div class="fd-card__header-main-container">
460
+ <span
461
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
462
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
463
+ role="img"
464
+ aria-label="John Doe">
465
+ </span>
466
+ <div class="fd-card__header-text">
467
+ <div class="fd-card__title-area">
468
+ <div class="fd-card__title" id="card-title-33a" role="heading" aria-level="3">Request Approval</div>
469
+ </div>
470
+ <div class="fd-card__subtitle-area">
471
+ <div class="fd-card__subtitle">Marie Johnson</div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ <div class="fd-card__header-main-actions">
476
+ <span class="fd-object-status fd-card__counter">2 of 5</span>
477
+ <div class="fd-card__timestamp">
478
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
479
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
480
+ </button>
481
+ <span>1h ago</span>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
486
+ <div class="fd-card__header-column">
487
+ <div class="fd-card__header-row">
488
+ Travel to <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Las Vegas</span></a>
489
+ </div>
490
+ <div class="fd-card__header-row">
491
+ May 3rd - 5th
492
+ </div>
493
+ </div>
494
+ </div>
495
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
496
+ <div class="fd-card__header-row">
497
+ <div class="fd-card__numeric-container">
498
+ <div class="fd-numeric-content fd-card__numeric-content">
499
+ <div class="fd-numeric-content__kpi-container">
500
+ <div class="fd-numeric-content__kpi">3,954.00</div>
501
+ </div>
502
+ <div class="fd-numeric-content__scale-container">
503
+ <div class="fd-numeric-content__scale">
504
+ <span class="fd-numeric-content__scale-text">EUR</span>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ <div class="fd-card__footer">
513
+ <div class="fd-card__footer-actions">
514
+ <button class="fd-button fd-button--positive">
515
+ Approve
516
+ </button>
517
+ <button class="fd-button fd-button--negative">
518
+ Send Back
519
+ </button>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ ```
526
+
527
+ ### Header Interaction - non-interactive Cards
528
+
529
+ For interactive header use the modifier class <code>.fd-card__header--interactive</code> on <code>.fd-card__header</code>.
530
+
531
+ ```html
532
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
533
+ <div style="width: 300px; height: 400px; margin: 1rem;">
534
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4a">
535
+
536
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
537
+ <div class="fd-card__header-main">
538
+ <div class="fd-card__header-main-container"role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
539
+ <span
540
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
541
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
542
+ role="img"
543
+ aria-label="John Doe">
544
+ </span>
545
+ <div class="fd-card__header-text">
546
+ <div class="fd-card__title-area">
547
+ <div class="fd-card__title" id="card-title-4a" role="heading" aria-level="3">Normal state</div>
548
+ </div>
549
+ <div class="fd-card__subtitle-area">
550
+ <div class="fd-card__subtitle">Card Subtitle</div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
558
+
559
+ <div class="fd-card__footer">
560
+ <div class="fd-card__footer-actions">
561
+ <button class="fd-button fd-button--positive">
562
+ Button
563
+ </button>
564
+ <button class="fd-button fd-button--negative">
565
+ Button
566
+ </button>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+
572
+ <div style="width: 300px; height: 400px; margin: 1rem;">
573
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4aa">
574
+
575
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
576
+ <div class="fd-card__header-main is-hover">
577
+ <div class="fd-card__header-main-container"role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
578
+ <span
579
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
580
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
581
+ role="img"
582
+ aria-label="John Doe">
583
+ </span>
584
+ <div class="fd-card__header-text">
585
+ <div class="fd-card__title-area">
586
+ <div class="fd-card__title" id="card-title-4aa" role="heading" aria-level="3">Hover on header</div>
587
+ </div>
588
+ <div class="fd-card__subtitle-area">
589
+ <div class="fd-card__subtitle">Card Subtitle</div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
597
+
598
+ <div class="fd-card__footer">
599
+ <div class="fd-card__footer-actions">
600
+ <button class="fd-button fd-button--positive">
601
+ Button
602
+ </button>
603
+ <button class="fd-button fd-button--negative">
604
+ Button
605
+ </button>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <div style="width: 300px; height: 400px; margin: 1rem;">
612
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-5a">
613
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
614
+ <div class="fd-card__header-main">
615
+ <div class="fd-card__header-main-container is-active"role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
616
+ <span
617
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
618
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
619
+ role="img"
620
+ aria-label="John Doe">
621
+ </span>
622
+ <div class="fd-card__header-text">
623
+ <div class="fd-card__title-area">
624
+ <div class="fd-card__title" id="card-title-5a" role="heading" aria-level="3">Active Header</div>
625
+ </div>
626
+ <div class="fd-card__subtitle-area">
627
+ <div class="fd-card__subtitle">Card Subtitle</div>
628
+ </div>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+
634
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
635
+
636
+ <div class="fd-card__footer">
637
+ <div class="fd-card__footer-actions">
638
+ <button class="fd-button fd-button--positive">
639
+ Button
640
+ </button>
641
+ <button class="fd-button fd-button--negative">
642
+ Button
643
+ </button>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+
649
+ <div style="width: 300px; height: 400px; margin: 1rem;">
650
+ <div class="fd-card" role="region" aria-labelledby="card-title-6a" aria-roledescription="Card">
651
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
652
+ <div class="fd-card__header-main">
653
+ <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">
654
+ <span
655
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
656
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
657
+ role="img"
658
+ aria-label="John Doe">
659
+ </span>
660
+ <div class="fd-card__header-text">
661
+ <div class="fd-card__title-area">
662
+ <div class="fd-card__title" id="card-title-6a" role="heading" aria-level="3">Focus Header</div>
663
+ </div>
664
+ <div class="fd-card__subtitle-area">
665
+ <div class="fd-card__subtitle">Card Subtitle</div>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+ </div>
671
+
672
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
673
+
674
+ <div class="fd-card__footer">
675
+ <div class="fd-card__footer-actions">
676
+ <button class="fd-button fd-button--positive">
677
+ Button
678
+ </button>
679
+ <button class="fd-button fd-button--negative">
680
+ Button
681
+ </button>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+
687
+ <div style="width: 300px; height: 400px; margin: 1rem;">
688
+ <div class="fd-card" role="region" aria-labelledby="card-title-9a" aria-roledescription="Card">
689
+ <div class="fd-card__badge-container">
690
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-6 fd-card__badge">
691
+ <span class="fd-object-status__text">badge</span>
692
+ </span>
693
+ </div>
694
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
695
+ <div class="fd-card__header-main">
696
+ <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">
697
+ <span
698
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
699
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
700
+ role="img"
701
+ aria-label="John Doe">
702
+ </span>
703
+ <div class="fd-card__header-text">
704
+ <div class="fd-card__title-area">
705
+ <div class="fd-card__title" id="card-title-9a" role="heading" aria-level="3">Focus Header</div>
706
+ </div>
707
+ <div class="fd-card__subtitle-area">
708
+ <div class="fd-card__subtitle">Card Subtitle</div>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </div>
713
+ </div>
714
+
715
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
716
+
717
+ <div class="fd-card__footer">
718
+ <div class="fd-card__footer-actions">
719
+ <button class="fd-button fd-button--positive">
720
+ Button
721
+ </button>
722
+ <button class="fd-button fd-button--negative">
723
+ Button
724
+ </button>
725
+ </div>
726
+ </div>
727
+ </div>
728
+ </div>
729
+
730
+ <div style="width: 300px; height: 400px; margin: 1rem;">
731
+ <div class="fd-card" role="region" aria-labelledby="card-title-7a" aria-roledescription="Card">
732
+ <div class="fd-card__badge-container">
733
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-1 fd-card__badge">
734
+ <span class="fd-object-status__text">badge</span>
735
+ </span>
736
+ </div>
737
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
738
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
739
+ <div class="fd-card__header-main">
740
+ <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">
741
+ <span
742
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
743
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
744
+ role="img"
745
+ aria-label="John Doe">
746
+ </span>
747
+ <div class="fd-card__header-text">
748
+ <div class="fd-card__title-area">
749
+ <div class="fd-card__title" id="card-title-7a" role="heading" aria-level="3">Focus Header</div>
750
+ </div>
751
+ <div class="fd-card__subtitle-area">
752
+ <div class="fd-card__subtitle">Card Subtitle</div>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ </div>
758
+ </div>
759
+ </div>
760
+
761
+ <div style="width: 300px; height: 400px; margin: 1rem;">
762
+ <div class="fd-card" role="region" aria-labelledby="card-title-8a" aria-roledescription="Card">
763
+ <div class="fd-card__badge-container">
764
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-3 fd-card__badge">
765
+ <span class="fd-object-status__text">badge</span>
766
+ </span>
767
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-3 fd-card__badge">
768
+ <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
769
+ </span>
770
+ </div>
771
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
772
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
773
+ <div class="fd-card__header-main">
774
+ <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">
775
+ <span
776
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
777
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
778
+ role="img"
779
+ aria-label="John Doe">
780
+ </span>
781
+ <div class="fd-card__header-text">
782
+ <div class="fd-card__title-area">
783
+ <div class="fd-card__title" id="card-title-8a" role="heading" aria-level="3">Focus Header</div>
784
+ </div>
785
+ <div class="fd-card__subtitle-area">
786
+ <div class="fd-card__subtitle">Card Subtitle</div>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
792
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
793
+ <div class="fd-card__header-row">
794
+ <div class="fd-text">Timestamp</div>
795
+ </div>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ </div>
800
+ </div>
801
+ </div>
802
+ ```
803
+
804
+ ### Interactive card with role button
805
+
806
+ The role <b>button</b> can be assigned to an interactive card that has <b>NO</b> interactive element inside. In this case, the card could be placed in any container.
807
+
808
+ ```html
809
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
810
+ <div style="width: 300px; height: fit-content; margin: 1rem;">
811
+ <div class="fd-card">
812
+ <div
813
+ class="fd-card__header fd-card__header--interactive"
814
+ role="group"
815
+ title="Activate for action/navigation"
816
+ aria-label="Activate for action/navigation"
817
+ aria-roledescription="Card Header">
818
+
819
+ <div class="fd-card__header-main">
820
+ <div
821
+ tabindex="0"
822
+ role="button"
823
+ aria-labelledby="card-title-1b"
824
+ class="fd-card__header-main-container"
825
+ aria-description="Activate for action/navigation">
826
+
827
+ <span
828
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
829
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
830
+ role="img"
831
+ aria-label="John Doe">
832
+ </span>
833
+ <div class="fd-card__header-text">
834
+ <div class="fd-card__title-area">
835
+ <div class="fd-card__title" id="card-title-1b" role="heading" aria-level="3">Interactive header</div>
836
+ </div>
837
+ <div class="fd-card__subtitle-area">
838
+ <div class="fd-card__subtitle">Card Subtitle</div>
839
+ </div>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ </div>
844
+ </div>
845
+ </div>
846
+
847
+ <div style="width: 300px; height: fit-content; margin: 1rem;">
848
+ <div class="fd-card">
849
+
850
+ <div
851
+ class="fd-card__header fd-card__header--interactive"
852
+ role="group"
853
+ title="Activate for action/navigation"
854
+ aria-label="Activate for action/navigation"
855
+ aria-roledescription="Card Header">
856
+
857
+ <div class="fd-card__header-main">
858
+ <div
859
+ tabindex="0"
860
+ role="button"
861
+ aria-labelledby="card-title-2b"
862
+ class="fd-card__header-main-container"
863
+
864
+ aria-description="Activate for action/navigation">
865
+
866
+ <span
867
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
868
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
869
+ role="img"
870
+ aria-label="John Doe">
871
+ </span>
872
+ <div class="fd-card__header-text">
873
+ <div class="fd-card__title-area">
874
+ <div class="fd-card__title" id="card-title-2b" role="heading" aria-level="3">Interactive header</div>
875
+ </div>
876
+ <div class="fd-card__subtitle-area">
877
+ <div class="fd-card__subtitle">With nested button</div>
878
+ </div>
879
+ </div>
880
+ </div>
881
+
882
+ <div class="fd-card__header-main-actions">
883
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
884
+ <i class="sap-icon--overflow"></i>
885
+ </button>
886
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
887
+ </div>
888
+ </div>
889
+ </div>
890
+ </div>
891
+ </div>
892
+ </div>
893
+ ```
894
+
895
+ ### Interactive card with role listitem
896
+
897
+ The <b>listitem</b> is the recommended role for card. With this role, all interactive variants of the card can be covered:
898
+ - Non-interactive card
899
+ - Non-interactive card with interactive elements inside
900
+ - Interactive card
901
+ - Interactive card with interactive elements
902
+ <br><br>
903
+ Only the list item role allows nested interactions, which means: the card can be interactive itself while also having interactive elements inside. It is not recommended to use interactive cards outside list containers!<br>
904
+ The card container must be a list, even when there's only one card. The container of the list has role region and aria-label. If there's no container for the list, the label has to be placed on the card container list.
905
+
906
+ ```html
907
+ <div role="region" aria-label="Interactive Cards and States">
908
+ <h2>Interactive Cards and States</h2>
909
+ <div
910
+ role="list" aria-roledescription="Card Container"
911
+ style="display:flex; gap: 2rem; flex-wrap: wrap">
912
+
913
+ <div
914
+ class="fd-card fd-card--interactive"
915
+ style="width: 400px; min-width: 400px; max-width: 400px;"
916
+ role="listitem"
917
+ tabindex="0"
918
+ aria-posinset="1"
919
+ aria-setsize="5"
920
+ aria-roledescription="Card"
921
+ aria-description="Activate for action"
922
+ aria-labelledby="card-title-1c">
923
+
924
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
925
+ <div class="fd-card__header-main">
926
+ <div class="fd-card__header-main-container">
927
+ <span
928
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
929
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
930
+ role="img"
931
+ aria-label="John Doe">
932
+ </span>
933
+ <div class="fd-card__header-text">
934
+ <div class="fd-card__title-area">
935
+ <div class="fd-card__title" id="card-title-1c" role="heading" aria-level="3">Normal State</div>
936
+ </div>
937
+ <div class="fd-card__subtitle-area">
938
+ <div class="fd-card__subtitle">Card Subtitle</div>
939
+ </div>
940
+ </div>
941
+ </div>
942
+ </div>
943
+ </div>
944
+
945
+ <div class="fd-card__content" role="group" aria-roledescription="Card content" style="height: 100px;"></div>
946
+
947
+ <div class="fd-card__footer">
948
+ <div class="fd-card__footer-actions">
949
+ <button class="fd-button fd-button--positive">
950
+ Button
951
+ </button>
952
+ <button class="fd-button fd-button--negative">
953
+ Button
954
+ </button>
955
+ </div>
956
+ </div>
957
+ </div>
958
+
959
+ <div
960
+ class="fd-card fd-card--interactive is-hover"
961
+ style="width: 400px; min-width: 400px; max-width: 400px;"
962
+ role="listitem"
963
+ tabindex="0"
964
+ aria-posinset="2"
965
+ aria-setsize="5"
966
+ aria-roledescription="Card"
967
+ aria-description="Activate for action"
968
+ aria-labelledby="card-title-2c">
969
+
970
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
971
+ <div class="fd-card__header-main">
972
+ <div class="fd-card__header-main-container">
973
+ <span
974
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
975
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
976
+ role="img"
977
+ aria-label="John Doe">
978
+ </span>
979
+ <div class="fd-card__header-text">
980
+ <div class="fd-card__title-area">
981
+ <div class="fd-card__title" id="card-title-2c" role="heading" aria-level="3">Hover state</div>
982
+ </div>
983
+ <div class="fd-card__subtitle-area">
984
+ <div class="fd-card__subtitle">Card Subtitle</div>
985
+ </div>
986
+ </div>
987
+ </div>
988
+ </div>
989
+ </div>
990
+
991
+ <div class="fd-card__content" role="group" aria-roledescription="Card content" style="height: 100px;"></div>
992
+
993
+ <div class="fd-card__footer">
994
+ <div class="fd-card__footer-actions">
995
+ <button class="fd-button fd-button--positive">
996
+ Button
997
+ </button>
998
+ <button class="fd-button fd-button--negative">
999
+ Button
1000
+ </button>
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+
1005
+ <div
1006
+ class="fd-card fd-card--interactive is-active"
1007
+ style="width: 400px; min-width: 400px; max-width: 400px;"
1008
+ role="listitem"
1009
+ tabindex="0"
1010
+ aria-posinset="3"
1011
+ aria-setsize="5"
1012
+ aria-roledescription="Card"
1013
+ aria-description="Activate for action"
1014
+ aria-labelledby="card-title-3c">
1015
+
1016
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1017
+ <div class="fd-card__header-main">
1018
+ <div class="fd-card__header-main-container">
1019
+ <span
1020
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1021
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1022
+ role="img"
1023
+ aria-label="John Doe">
1024
+ </span>
1025
+ <div class="fd-card__header-text">
1026
+ <div class="fd-card__title-area">
1027
+ <div class="fd-card__title" id="card-title-3c" role="heading" aria-level="3">Active state</div>
1028
+ </div>
1029
+ <div class="fd-card__subtitle-area">
1030
+ <div class="fd-card__subtitle">Card Subtitle</div>
1031
+ </div>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+ </div>
1036
+
1037
+ <div class="fd-card__content" role="group" aria-roledescription="Card content" style="height: 100px;"></div>
1038
+
1039
+ <div class="fd-card__footer">
1040
+ <div class="fd-card__footer-actions">
1041
+ <button class="fd-button fd-button--positive">
1042
+ Button
1043
+ </button>
1044
+ <button class="fd-button fd-button--negative">
1045
+ Button
1046
+ </button>
1047
+ </div>
1048
+ </div>
1049
+ </div>
1050
+
1051
+ <div
1052
+ class="fd-card fd-card--interactive is-focus"
1053
+ style="width: 400px; min-width: 400px; max-width: 400px;"
1054
+ role="listitem"
1055
+ tabindex="0"
1056
+ aria-posinset="4"
1057
+ aria-setsize="5"
1058
+ aria-roledescription="Card"
1059
+ aria-description="Activate for action"
1060
+ aria-labelledby="card-title-4c">
1061
+
1062
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1063
+ <div class="fd-card__header-main">
1064
+ <div class="fd-card__header-main-container">
1065
+ <span
1066
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1067
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1068
+ role="img"
1069
+ aria-label="John Doe">
1070
+ </span>
1071
+ <div class="fd-card__header-text">
1072
+ <div class="fd-card__title-area">
1073
+ <div class="fd-card__title" id="card-title-4c" role="heading" aria-level="3">Focus state</div>
1074
+ </div>
1075
+ <div class="fd-card__subtitle-area">
1076
+ <div class="fd-card__subtitle">Card Subtitle</div>
1077
+ </div>
1078
+ </div>
1079
+ </div>
1080
+ </div>
1081
+ </div>
1082
+
1083
+ <div class="fd-card__content" role="group" aria-roledescription="Card content" style="height: 100px;"></div>
1084
+
1085
+ <div class="fd-card__footer">
1086
+ <div class="fd-card__footer-actions">
1087
+ <button class="fd-button fd-button--positive">
1088
+ Button
1089
+ </button>
1090
+ <button class="fd-button fd-button--negative">
1091
+ Button
1092
+ </button>
1093
+ </div>
1094
+ </div>
1095
+ </div>
1096
+
1097
+ <div
1098
+ class="fd-card fd-card--interactive is-selected"
1099
+ style="width: 400px; min-width: 400px; max-width: 400px;"
1100
+ role="listitem"
1101
+ tabindex="0"
1102
+ aria-posinset="5"
1103
+ aria-setsize="5"
1104
+ aria-roledescription="Card"
1105
+ aria-description="Activate for action"
1106
+ aria-labelledby="card-title-5c">
1107
+
1108
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1109
+ <div class="fd-card__header-main">
1110
+ <div class="fd-card__header-main-container">
1111
+ <span
1112
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1113
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1114
+ role="img"
1115
+ aria-label="John Doe">
1116
+ </span>
1117
+ <div class="fd-card__header-text">
1118
+ <div class="fd-card__title-area">
1119
+ <div class="fd-card__title" id="card-title-5c" role="heading" aria-level="3">Selected state</div>
1120
+ </div>
1121
+ <div class="fd-card__subtitle-area">
1122
+ <div class="fd-card__subtitle">Card Subtitle</div>
1123
+ </div>
1124
+ </div>
1125
+ </div>
1126
+ </div>
1127
+ </div>
1128
+
1129
+ <div class="fd-card__content" role="group" aria-roledescription="Card content" style="height: 100px;"></div>
1130
+
1131
+ <div class="fd-card__footer">
1132
+ <div class="fd-card__footer-actions">
1133
+ <button class="fd-button fd-button--positive">
1134
+ Button
1135
+ </button>
1136
+ <button class="fd-button fd-button--negative">
1137
+ Button
1138
+ </button>
1139
+ </div>
1140
+ </div>
1141
+ </div>
1142
+ </div>
1143
+ </div>
1144
+ ```
1145
+
1146
+ ### Standard card | Main Header
1147
+
1148
+ The main card header block shows the basic information of the card. It comes in two interactivity variants:
1149
+ - <b>non-interactive</b>: default
1150
+ - <b>interactive</b>: add the <code>.fd-card__header--interactive</code> modifier class to the <code>.fd-card__header</code> base class.
1151
+
1152
+ <br> Building blocks of the Main Header:
1153
+ - <b>title</b>: title is mandatory to explain what content is being displayed to the user. It wraps 3 lines.
1154
+ - <b>avatar</b> (optional): avatar should be displayed in a size S (3rem).
1155
+ - <b>subtitle</b> (optional): the subtitle provides additional context to the title or displays a status. Its usage depends on the card type. Subtitles that exceed one line are truncated with an ellipsis (it wraps 2 lines).
1156
+ - <b>counter</b> (optional): the counter indicates how many items are showing on the card in relation to the total number of relevant items. If all the relevant items are visible on the card, no counter is shown. There is also no counter if there is an issue loading a card, or if no items are found in the filter criteria. The counter is right-aligned and is never truncated.
1157
+ - <b>interactive element</b> (optional): like an icon button.
1158
+
1159
+ ```html
1160
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
1161
+ <div style="width: 300px; height: 400px; margin: 1rem;">
1162
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1d">
1163
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1164
+ <div class="fd-card__header-main">
1165
+ <div class="fd-card__header-main-container">
1166
+ <span
1167
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1168
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1169
+ role="img"
1170
+ aria-label="John Doe">
1171
+ </span>
1172
+ <div class="fd-card__header-text">
1173
+ <div class="fd-card__title-area">
1174
+ <div class="fd-card__title" id="card-title-1d" role="heading" aria-level="3">Non-interactive header</div>
1175
+ </div>
1176
+ <div class="fd-card__subtitle-area">
1177
+ <div class="fd-card__subtitle">Card Subtitle</div>
1178
+ </div>
1179
+ </div>
1180
+ </div>
1181
+ <div class="fd-card__header-main-actions">
1182
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1183
+ <i class="sap-icon--overflow"></i>
1184
+ </button>
1185
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1186
+ </div>
1187
+ </div>
1188
+ </div>
1189
+
1190
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1191
+
1192
+ <div class="fd-card__footer">
1193
+ <div class="fd-card__footer-actions">
1194
+ <button class="fd-button fd-button--positive">
1195
+ Button
1196
+ </button>
1197
+ <button class="fd-button fd-button--negative">
1198
+ Button
1199
+ </button>
1200
+ </div>
1201
+ </div>
1202
+ </div>
1203
+ </div>
1204
+
1205
+ <div style="width: 300px; height: 400px; margin: 1rem;">
1206
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-2d">
1207
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
1208
+ <div class="fd-card__header-main">
1209
+ <div class="fd-card__header-main-container" role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
1210
+ <span
1211
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1212
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1213
+ role="img"
1214
+ aria-label="John Doe">
1215
+ </span>
1216
+ <div class="fd-card__header-text">
1217
+ <div class="fd-card__title-area">
1218
+ <div class="fd-card__title" id="card-title-2d" role="heading" aria-level="3">Interactive header</div>
1219
+ </div>
1220
+ <div class="fd-card__subtitle-area">
1221
+ <div class="fd-card__subtitle">Card Subtitle</div>
1222
+ </div>
1223
+ </div>
1224
+ </div>
1225
+ <div class="fd-card__header-main-actions">
1226
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1227
+ <i class="sap-icon--overflow"></i>
1228
+ </button>
1229
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1230
+ </div>
1231
+ </div>
1232
+ </div>
1233
+
1234
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1235
+
1236
+ <div class="fd-card__footer">
1237
+ <div class="fd-card__footer-actions">
1238
+ <button class="fd-button fd-button--positive">
1239
+ Button
1240
+ </button>
1241
+ <button class="fd-button fd-button--negative">
1242
+ Button
1243
+ </button>
1244
+ </div>
1245
+ </div>
1246
+ </div>
1247
+ </div>
1248
+
1249
+ <div style="width: 300px; height: 400px; margin: 1rem;">
1250
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4d">
1251
+ <div class="fd-card__badge-container">
1252
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-6 fd-card__badge">
1253
+ <span class="fd-object-status__text">badge</span>
1254
+ </span>
1255
+ </div>
1256
+ <div class="fd-card__header fd-card__header--interactive" aria-roledescription="Card Header">
1257
+ <div class="fd-card__header-main">
1258
+ <div class="fd-card__header-main-container" role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
1259
+ <span
1260
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1261
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1262
+ role="img"
1263
+ aria-label="John Doe">
1264
+ </span>
1265
+ <div class="fd-card__header-text">
1266
+ <div class="fd-card__title-area">
1267
+ <div class="fd-card__title" id="card-title-4d" role="heading" aria-level="3">Card title that truncates lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, enim. Aliquam magnam vel culpa eos explicabo. Labore laboriosam omnis explicabo natus doloremque enim, voluptatum consequuntur excepturi, reprehenderit similique, repellendus commodi.</div>
1268
+ </div>
1269
+ <div class="fd-card__subtitle-area">
1270
+ <div class="fd-card__subtitle">Card subtitle that truncates lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, enim. Aliquam magnam vel culpa eos explicabo. Labore laboriosam omnis explicabo natus doloremque enim, voluptatum consequuntur excepturi, reprehenderit similique, repellendus commodi.</div>
1271
+ </div>
1272
+ </div>
1273
+ </div>
1274
+ <div class="fd-card__header-main-actions">
1275
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1276
+ </div>
1277
+ </div>
1278
+ </div>
1279
+
1280
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1281
+ <div class="fd-card__footer">
1282
+ <a class="fd-link fd-card__footer-link" href="#"><span class="fd-link__content">Footer with a link</span></a>
1283
+ </div>
1284
+ </div>
1285
+ </div>
1286
+
1287
+ <div style="width: 300px; height: 400px; margin: 1rem;">
1288
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-5d">
1289
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
1290
+ <div class="fd-card__header-main">
1291
+ <div class="fd-card__header-main-container" role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
1292
+ <span
1293
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1294
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1295
+ role="img"
1296
+ aria-label="John Doe">
1297
+ </span>
1298
+ <div class="fd-card__header-text">
1299
+ <div class="fd-card__title-area">
1300
+ <div class="fd-card__title" id="card-title-5d" role="heading" aria-level="3">Card with main, extended and numeric headers</div>
1301
+ </div>
1302
+ <div class="fd-card__subtitle-area">
1303
+ <div class="fd-card__subtitle">Card subtitle</div>
1304
+ </div>
1305
+ </div>
1306
+ </div>
1307
+ <div class="fd-card__header-main-actions">
1308
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1309
+ </div>
1310
+ </div>
1311
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1312
+ <div class="fd-card__header-column">
1313
+ <div class="fd-card__header-row">
1314
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--positive">
1315
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
1316
+ <span class="fd-object-status__text">Positive</span>
1317
+ </span>
1318
+ </div>
1319
+ </div>
1320
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
1321
+ <div class="fd-card__header-row">
1322
+ <div class="fd-text">Timestamp</div>
1323
+ </div>
1324
+ </div>
1325
+ </div>
1326
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
1327
+ <div class="fd-card__header-row">
1328
+ <div class="fd-card__numeric-container">
1329
+ <div class="fd-numeric-content fd-card__numeric-content">
1330
+ <div class="fd-numeric-content__kpi-container">
1331
+ <div class="fd-numeric-content__kpi">1Ñç</div>
1332
+ </div>
1333
+ <div class="fd-numeric-content__scale-container">
1334
+ <div class="fd-numeric-content__scale">
1335
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" role="presentation"></i>
1336
+ <span class="fd-numeric-content__scale-text">M</span>
1337
+ </div>
1338
+ </div>
1339
+ </div>
1340
+ </div>
1341
+ <div class="fd-card__indicator">
1342
+ <div class="fd-card__indicator-title">Indicator 1</div>
1343
+ <div class="fd-card__indicator-value">500k</div>
1344
+ </div>
1345
+ <div class="fd-card__indicator">
1346
+ <div class="fd-card__indicator-title">Indicator 2</div>
1347
+ <div class="fd-card__indicator-value">500k</div>
1348
+ </div>
1349
+ </div>
1350
+ <div class="fd-card__header-row">
1351
+ <label class="fd-form-label">Total value</label>
1352
+ </div>
1353
+ </div>
1354
+ </div>
1355
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1356
+ </div>
1357
+ </div>
1358
+
1359
+ <div style="width: 300px; height: 400px; margin: 1rem;">
1360
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-6d">
1361
+ <div class="fd-card__badge-container">
1362
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-3 fd-card__badge">
1363
+ <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
1364
+ <span class="fd-object-status__text">badge lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae distinctio natus aperiam doloremque beatae quas, fuga sequi iste officia similique sunt, iusto ad obcaecati voluptatum. Commodi perferendis assumenda modi laudantium.</span>
1365
+ </span>
1366
+ </div>
1367
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1368
+ <div class="fd-card__header-main">
1369
+ <div class="fd-card__header-main-container">
1370
+ <span
1371
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1372
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1373
+ role="img"
1374
+ aria-label="John Doe">
1375
+ </span>
1376
+ <div class="fd-card__header-text">
1377
+ <div class="fd-card__title-area">
1378
+ <div class="fd-card__title" id="card-title-6d" role="heading" aria-level="3">Card with Badge</div>
1379
+ </div>
1380
+ <div class="fd-card__subtitle-area">
1381
+ <div class="fd-card__subtitle">Badge text truncates</div>
1382
+ </div>
1383
+ </div>
1384
+ </div>
1385
+ </div>
1386
+ </div>
1387
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1388
+ </div>
1389
+ </div>
1390
+
1391
+ <div style="width: 300px; height: 400px; margin: 1rem;">
1392
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-7d">
1393
+ <div class="fd-card__badge-container">
1394
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-5b fd-card__badge">
1395
+ <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
1396
+ <span class="fd-object-status__text">badge</span>
1397
+ </span>
1398
+ </div>
1399
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1400
+ <div class="fd-card__header-main">
1401
+ <div class="fd-card__header-main-container">
1402
+ <span
1403
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1404
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1405
+ role="img"
1406
+ aria-label="John Doe">
1407
+ </span>
1408
+ <div class="fd-card__header-text">
1409
+ <div class="fd-card__title-area">
1410
+ <div class="fd-card__title" id="card-title-7d" role="heading" aria-level="3">Card with Badge</div>
1411
+ </div>
1412
+ <div class="fd-card__subtitle-area">
1413
+ <div class="fd-card__subtitle">Badge with icon</div>
1414
+ </div>
1415
+ </div>
1416
+ </div>
1417
+ </div>
1418
+ </div>
1419
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1420
+ </div>
1421
+ </div>
1422
+
1423
+ </div>
1424
+ ```
1425
+
1426
+ ### ExtendedHeader
1427
+
1428
+ The Extended header is a flexible block to hold various other components, like time stamp, rating, tags, label/value, long text, numeric values, etc. The components can be arranged in left column or right column, each column is suggested to have maximum 3 lines for placing the components.
1429
+
1430
+ - <code>.fd-card__header-extended--top-aligned</code> and <code>.fd-card__header-extended--bottom-aligned</code> modifier classes applied with the <code>.fd-card__header-extended</code> base class will align the content of the columns vertically to the top or the bottom (default is center).
1431
+ - <code>.fd-card__header-column--right-aligned</code> modifier class for <code>.fd-card__header-column</code> will align the content of the column to the right.
1432
+
1433
+ ```html
1434
+ <div style="display:flex; flex-wrap: wrap">
1435
+ <div style="width: 500px; height: 400px; margin: 1rem;">
1436
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1e">
1437
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1438
+ <div class="fd-card__header-main">
1439
+ <div class="fd-card__header-main-container">
1440
+ <span
1441
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1442
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1443
+ role="img"
1444
+ aria-label="John Doe">
1445
+ </span>
1446
+ <div class="fd-card__header-text">
1447
+ <div class="fd-card__title-area">
1448
+ <div class="fd-card__title" id="card-title-1e" role="heading" aria-level="3">Card Title</div>
1449
+ </div>
1450
+ <div class="fd-card__subtitle-area">
1451
+ <div class="fd-card__subtitle">Card Subtitle</div>
1452
+ </div>
1453
+ </div>
1454
+ </div>
1455
+ <div class="fd-card__header-main-actions">
1456
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1457
+ <i class="sap-icon--overflow"></i>
1458
+ </button>
1459
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1460
+ </div>
1461
+ </div>
1462
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1463
+ <div class="fd-card__header-column">
1464
+ <div class="fd-card__header-row">
1465
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--positive">
1466
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
1467
+ <span class="fd-object-status__text">Positive</span>
1468
+ </span>
1469
+
1470
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--informative">
1471
+ <i class="fd-object-status__icon sap-icon--information" role="presentation"></i>
1472
+ <span class="fd-object-status__text">Informative</span>
1473
+ </span>
1474
+ </div>
1475
+ </div>
1476
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
1477
+ <div class="fd-card__header-row">
1478
+ <div class="fd-text">Timestamp</div>
1479
+ </div>
1480
+ </div>
1481
+ </div>
1482
+ </div>
1483
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1484
+ </div>
1485
+ </div>
1486
+
1487
+ <div style="width: 500px; height: 400px; margin: 1rem;">
1488
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-2e">
1489
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1490
+ <div class="fd-card__header-main">
1491
+ <div class="fd-card__header-main-container">
1492
+ <span
1493
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1494
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1495
+ role="img"
1496
+ aria-label="John Doe">
1497
+ </span>
1498
+ <div class="fd-card__header-text">
1499
+ <div class="fd-card__title-area">
1500
+ <div class="fd-card__title" id="card-title-2e" role="heading" aria-level="3">Card Title</div>
1501
+ </div>
1502
+ <div class="fd-card__subtitle-area">
1503
+ <div class="fd-card__subtitle">Card Subtitle</div>
1504
+ </div>
1505
+ </div>
1506
+ </div>
1507
+ <div class="fd-card__header-main-actions">
1508
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1509
+ <i class="sap-icon--overflow"></i>
1510
+ </button>
1511
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1512
+ </div>
1513
+ </div>
1514
+ <div class="fd-card__header-extended fd-card__header-extended--bottom-aligned" role="group" aria-roledescription="Extended content">
1515
+ <div class="fd-card__header-column">
1516
+ <div class="fd-card__header-row">
1517
+ <span class="fd-object-status fd-object-status--positive">
1518
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
1519
+ <span class="fd-object-status__text">Approved</span>
1520
+ </span>
1521
+ </div>
1522
+ <div class="fd-card__header-row">
1523
+ <div class="fd-text"><b>Travel Request</b></div>
1524
+ </div>
1525
+ <div class="fd-card__header-row">
1526
+ <div class="fd-text">SAP Sapphire Barcelona</div>
1527
+ </div>
1528
+ </div>
1529
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
1530
+ <div class="fd-card__header-row"></div>
1531
+ <div class="fd-card__header-row">
1532
+ <div class="fd-text">Travel ID: 123456</div>
1533
+ </div>
1534
+ <div class="fd-card__header-row">
1535
+ <div class="fd-text">June 16, 2024</div>
1536
+ </div>
1537
+ </div>
1538
+ </div>
1539
+ </div>
1540
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1541
+ </div>
1542
+ </div>
1543
+
1544
+ <div style="width: 500px; height: 400px; margin: 1rem;">
1545
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-3e">
1546
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1547
+ <div class="fd-card__header-main">
1548
+ <div class="fd-card__header-main-container">
1549
+ <span
1550
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1551
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1552
+ role="img"
1553
+ aria-label="John Doe">
1554
+ </span>
1555
+ <div class="fd-card__header-text">
1556
+ <div class="fd-card__title-area">
1557
+ <div class="fd-card__title" id="card-title-3e" role="heading" aria-level="3">Card Title</div>
1558
+ </div>
1559
+ <div class="fd-card__subtitle-area">
1560
+ <div class="fd-card__subtitle">Card Subtitle</div>
1561
+ </div>
1562
+ </div>
1563
+ </div>
1564
+ <div class="fd-card__header-main-actions">
1565
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1566
+ <i class="sap-icon--overflow"></i>
1567
+ </button>
1568
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1569
+ </div>
1570
+ </div>
1571
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1572
+ <div class="fd-card__header-column">
1573
+ <div class="fd-card__header-row">
1574
+ <span class="fd-object-status fd-object-status--negative">
1575
+ <i class="fd-object-status__icon sap-icon--error" role="presentation"></i>
1576
+ <span class="fd-object-status__text">Overdue</span>
1577
+ </span>
1578
+ </div>
1579
+ <div class="fd-card__header-row">
1580
+ <div class="fd-text"><b>Invoice ID 987654321</b></div>
1581
+ </div>
1582
+ <div class="fd-card__header-row">
1583
+ <div class="fd-text">EUR 10,000.00, due 26/06/2024</div>
1584
+ </div>
1585
+ </div>
1586
+ </div>
1587
+ </div>
1588
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1589
+ </div>
1590
+ </div>
1591
+
1592
+ <div style="width: 500px; height: 400px; margin: 1rem;">
1593
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4e">
1594
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1595
+ <div class="fd-card__header-main">
1596
+ <div class="fd-card__header-main-container">
1597
+ <span
1598
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1599
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1600
+ role="img"
1601
+ aria-label="John Doe">
1602
+ </span>
1603
+ <div class="fd-card__header-text">
1604
+ <div class="fd-card__title-area">
1605
+ <div class="fd-card__title" id="card-title-4e" role="heading" aria-level="3">Card Title</div>
1606
+ </div>
1607
+ <div class="fd-card__subtitle-area">
1608
+ <div class="fd-card__subtitle">Card Subtitle</div>
1609
+ </div>
1610
+ </div>
1611
+ </div>
1612
+ <div class="fd-card__header-main-actions">
1613
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1614
+ <i class="sap-icon--overflow"></i>
1615
+ </button>
1616
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1617
+ </div>
1618
+ </div>
1619
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1620
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
1621
+ <div class="fd-card__header-row">
1622
+ <div class="fd-rating-indicator fd-rating-indicator--sm">
1623
+ <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
1624
+ <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-s-0" name="rating-s" value="0">
1625
+ <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-s-0" aria-hidden="true"></label>
1626
+
1627
+ <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-s-1" name="rating-s" value="1">
1628
+ <label class="fd-rating-indicator__label" for="rating-s-1"></label>
1629
+
1630
+ <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-s-2" name="rating-s" value="2" checked>
1631
+ <label class="fd-rating-indicator__label" for="rating-s-2"></label>
1632
+
1633
+ <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-s-3" name="rating-s" value="3">
1634
+ <label class="fd-rating-indicator__label" for="rating-s-3"></label>
1635
+
1636
+ <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-s-4" name="rating-s" value="4">
1637
+ <label class="fd-rating-indicator__label" for="rating-s-4"></label>
1638
+
1639
+ <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-s-5" name="rating-s" value="5">
1640
+ <label class="fd-rating-indicator__label" for="rating-s-5"></label>
1641
+ </div>
1642
+ <span class="fd-rating-indicator__dynamic-text">(205)</span>
1643
+ </div>
1644
+ </div>
1645
+ </div>
1646
+ </div>
1647
+ </div>
1648
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1649
+ </div>
1650
+ </div>
1651
+ </div>
1652
+ ```
1653
+
1654
+ ### NumericHeader
1655
+
1656
+ The numeric header block is designed for displaying numeric information.
1657
+
1658
+ ```html
1659
+ <div style="display:flex; flex-wrap: wrap">
1660
+ <div style="width: 500px; height: 400px; margin: 1rem;">
1661
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1f">
1662
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1663
+ <div class="fd-card__header-main">
1664
+ <div class="fd-card__header-main-container">
1665
+ <span
1666
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1667
+ style="background-image: url('/assets/images/backgrounds/city.jpg')"
1668
+ role="img"
1669
+ aria-label="John Doe">
1670
+ </span>
1671
+ <div class="fd-card__header-text">
1672
+ <div class="fd-card__title-area">
1673
+ <div class="fd-card__title" id="card-title-1f" role="heading" aria-level="3">Card Title</div>
1674
+ </div>
1675
+ <div class="fd-card__subtitle-area">
1676
+ <div class="fd-card__subtitle">Card Subtitle</div>
1677
+ </div>
1678
+ </div>
1679
+ </div>
1680
+ <div class="fd-card__header-main-actions">
1681
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1682
+ <i class="sap-icon--overflow"></i>
1683
+ </button>
1684
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1685
+ </div>
1686
+ </div>
1687
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
1688
+ <div class="fd-card__header-row">
1689
+ <div class="fd-card__numeric-container">
1690
+ <div class="fd-numeric-content fd-card__numeric-content">
1691
+ <div class="fd-numeric-content__kpi-container">
1692
+ <div class="fd-numeric-content__kpi">1Ñç</div>
1693
+ </div>
1694
+ <div class="fd-numeric-content__scale-container">
1695
+ <div class="fd-numeric-content__scale">
1696
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" role="presentation"></i>
1697
+ <span class="fd-numeric-content__scale-text">M</span>
1698
+ </div>
1699
+ </div>
1700
+ </div>
1701
+ </div>
1702
+ <div class="fd-card__indicator">
1703
+ <div class="fd-card__indicator-title">Indicator 1</div>
1704
+ <div class="fd-card__indicator-value">500k</div>
1705
+ </div>
1706
+ <div class="fd-card__indicator">
1707
+ <div class="fd-card__indicator-title">Indicator 2</div>
1708
+ <div class="fd-card__indicator-value">500k</div>
1709
+ </div>
1710
+ </div>
1711
+ <div class="fd-card__header-row">
1712
+ <label class="fd-form-label">Total value</label>
1713
+ </div>
1714
+ </div>
1715
+ </div>
1716
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1717
+ </div>
1718
+ </div>
1719
+ </div>
1720
+ ```
1721
+
1722
+ ### Alternative Icon on Card Header
1723
+
1724
+ Alternatively to an Avatar a Message Icon can be displayed within the Main Header. This will be available in three different sizes (this is only applicable for Message Icons not Avatar component on Card Header). The Message Icons are non-interactive.
1725
+
1726
+ <br><b>Icon Sizes</b>
1727
+
1728
+ <table>
1729
+ <thead>
1730
+ <tr>
1731
+ <th>Size</th>
1732
+ <th>font-size</th>
1733
+ <th>Icon Modifier Class</th>
1734
+ </tr>
1735
+ </thead>
1736
+ <tbody>
1737
+ <tr>
1738
+ <td>S</td>
1739
+ <td>1rem</td>
1740
+ <td><code>.sap-icon--sm</code></td>
1741
+ </tr>
1742
+ <tr>
1743
+ <td>M</td>
1744
+ <td>2rem</td>
1745
+ <td><code>.sap-icon--md</code></td>
1746
+ </tr>
1747
+ <tr>
1748
+ <td>L</td>
1749
+ <td>3rem</td>
1750
+ <td><code>.sap-icon--lg</code></td>
1751
+ </tr>
1752
+ </tbody>
1753
+ </table>
1754
+
1755
+ <br><br>
1756
+ <b>Semantic Notification / Message Icons</b>
1757
+
1758
+ <table>
1759
+ <thead>
1760
+ <tr>
1761
+ <th>Description</th>
1762
+ <th>Icon Name</th>
1763
+ <th>Icon Modifier Class</th>
1764
+ <th>Color Modifier Class</th>
1765
+ </tr>
1766
+ </thead>
1767
+ <tbody>
1768
+ <tr>
1769
+ <td>Negative Notification</td>
1770
+ <td>error</td>
1771
+ <td><code>.sap-icon--error</code></td>
1772
+ <td><code>.sap-icon--color-negative</code></td>
1773
+ </tr>
1774
+ <tr>
1775
+ <td>Critical Notification</td>
1776
+ <td>alert</td>
1777
+ <td><code>.sap-icon--alert</code></td>
1778
+ <td><code>.sap-icon--color-critical</code></td>
1779
+ </tr>
1780
+ <tr>
1781
+ <td>Positive Notification</td>
1782
+ <td>sys-enter-2</td>
1783
+ <td><code>.sap-icon--sys-enter-2</code></td>
1784
+ <td><code>.sap-icon--color-positive</code></td>
1785
+ </tr>
1786
+ <tr>
1787
+ <td>Information Notification</td>
1788
+ <td>information</td>
1789
+ <td><code>.sap-icon--information</code></td>
1790
+ <td><code>.sap-icon--color-information</code></td>
1791
+ </tr>
1792
+ <tr>
1793
+ <td>Neutral Notification</td>
1794
+ <td>sys-help-2</td>
1795
+ <td><code>.sap-icon--sys-help-2</code></td>
1796
+ <td><code>.sap-icon--color-neutral</code></td>
1797
+ </tr>
1798
+ </tbody>
1799
+ </table>
1800
+
1801
+ ```html
1802
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
1803
+ <div style="width: 300px; height: 400px; margin: 1rem;">
1804
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1a">
1805
+
1806
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1807
+ <div class="fd-card__header-main">
1808
+ <div class="fd-card__header-main-container">
1809
+ <span class="sap-icon sap-icon--error sap-icon--color-negative" role="presentation" aria-hidden="true" aria-label="negative notification"></span>
1810
+
1811
+ <div class="fd-card__header-text">
1812
+ <div class="fd-card__title-area">
1813
+ <div class="fd-card__title" id="card-title-1a" role="heading" aria-level="3">Non-interactive header</div>
1814
+ </div>
1815
+ <div class="fd-card__subtitle-area">
1816
+ <div class="fd-card__subtitle">Card Subtitle</div>
1817
+ </div>
1818
+ </div>
1819
+ </div>
1820
+ <div class="fd-card__header-main-actions">
1821
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1822
+ <i class="sap-icon--overflow"></i>
1823
+ </button>
1824
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1825
+ </div>
1826
+ </div>
1827
+ </div>
1828
+
1829
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1830
+
1831
+ <div class="fd-card__footer">
1832
+ <div class="fd-card__footer-actions">
1833
+ <button class="fd-button fd-button--positive">
1834
+ Button
1835
+ </button>
1836
+ <button class="fd-button fd-button--negative">
1837
+ Button
1838
+ </button>
1839
+ </div>
1840
+ </div>
1841
+ </div>
1842
+ </div>
1843
+
1844
+ <div style="width: 300px; height: 400px; margin: 1rem;">
1845
+ <div class="fd-card" role="region" aria-labelledby="card-title-2a">
1846
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
1847
+ <div class="fd-card__header-main">
1848
+ <div class="fd-card__header-main-container"role="button" tabindex="0" aria-description="Activate for action/navigation" aria-label="Activate for action/navigation" title="Activate for action/navigation">
1849
+ <span class="sap-icon sap-icon--alert sap-icon--color-critical sap-icon--md" role="presentation" aria-hidden="true" aria-label="critical notification"></span>
1850
+
1851
+ <div class="fd-card__header-text">
1852
+ <div class="fd-card__title-area">
1853
+ <div class="fd-card__title" id="card-title-2a" role="heading" aria-level="3">Interactive Header</div>
1854
+ </div>
1855
+ <div class="fd-card__subtitle-area">
1856
+ <div class="fd-card__subtitle">Card Subtitle</div>
1857
+ </div>
1858
+ </div>
1859
+ </div>
1860
+ <div class="fd-card__header-main-actions">
1861
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1862
+ <i class="sap-icon--overflow"></i>
1863
+ </button>
1864
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1865
+ </div>
1866
+ </div>
1867
+ </div>
1868
+
1869
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
1870
+
1871
+ <div class="fd-card__footer">
1872
+ <div class="fd-card__footer-actions">
1873
+ <button class="fd-button fd-button--positive">
1874
+ Button
1875
+ </button>
1876
+ <button class="fd-button fd-button--negative">
1877
+ Button
1878
+ </button>
1879
+ </div>
1880
+ </div>
1881
+ </div>
1882
+ </div>
1883
+
1884
+ <div style="width: 300px; height: fit-content; margin: 1rem;">
1885
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-33a">
1886
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1887
+ <div class="fd-card__header-main">
1888
+ <div class="fd-card__header-main-container">
1889
+ <span class="sap-icon sap-icon--sys-enter-2 sap-icon--color-positive sap-icon--lg" role="presentation" aria-hidden="true" aria-label="positive notification"></span>
1890
+
1891
+ <div class="fd-card__header-text">
1892
+ <div class="fd-card__title-area">
1893
+ <div class="fd-card__title" id="card-title-33a" role="heading" aria-level="3">Request Approval</div>
1894
+ </div>
1895
+ <div class="fd-card__subtitle-area">
1896
+ <div class="fd-card__subtitle">Marie Johnson</div>
1897
+ </div>
1898
+ </div>
1899
+ </div>
1900
+ <div class="fd-card__header-main-actions">
1901
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1902
+ <i class="sap-icon--overflow"></i>
1903
+ </button>
1904
+ <span class="fd-object-status fd-card__counter">2 of 5</span>
1905
+ </div>
1906
+ </div>
1907
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1908
+ <div class="fd-card__header-column">
1909
+ <div class="fd-card__header-row">
1910
+ Travel to <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Las Vegas</span></a>
1911
+ </div>
1912
+ <div class="fd-card__header-row">
1913
+ May 3rd - 5th
1914
+ </div>
1915
+ </div>
1916
+ </div>
1917
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
1918
+ <div class="fd-card__header-row">
1919
+ <div class="fd-card__numeric-container">
1920
+ <div class="fd-numeric-content fd-card__numeric-content">
1921
+ <div class="fd-numeric-content__kpi-container">
1922
+ <div class="fd-numeric-content__kpi">3,954.00</div>
1923
+ </div>
1924
+ <div class="fd-numeric-content__scale-container">
1925
+ <div class="fd-numeric-content__scale">
1926
+ <span class="fd-numeric-content__scale-text">EUR</span>
1927
+ </div>
1928
+ </div>
1929
+ </div>
1930
+ </div>
1931
+ </div>
1932
+ </div>
1933
+ </div>
1934
+ <div class="fd-card__footer">
1935
+ <div class="fd-card__footer-actions">
1936
+ <button class="fd-button fd-button--positive">
1937
+ Approve
1938
+ </button>
1939
+ <button class="fd-button fd-button--negative">
1940
+ Send Back
1941
+ </button>
1942
+ </div>
1943
+ </div>
1944
+ </div>
1945
+ </div>
1946
+ </div>
1947
+ ```
1948
+
1949
+ ### Empty State
1950
+
1951
+ Use Illustrated Messages component inside the Card content to represent an empty state. The content container has 1rem spacing.
1952
+
1953
+ ```html
1954
+ <div style="min-height: 600px;">
1955
+ <div style="width: 500px; height: 400px; margin: 1rem;">
1956
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1h">
1957
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1958
+ <div class="fd-card__header-main">
1959
+ <div class="fd-card__header-main-container">
1960
+ <div class="fd-card__header-text">
1961
+ <div class="fd-card__title-area">
1962
+ <div class="fd-card__title" id="card-title-1h" role="heading" aria-level="3">Card Title</div>
1963
+ </div>
1964
+ <div class="fd-card__subtitle-area">
1965
+ <div class="fd-card__subtitle">Card Subtitle</div>
1966
+ </div>
1967
+ </div>
1968
+ </div>
1969
+ </div>
1970
+ </div>
1971
+ <div class="fd-card__content" role="group" aria-roledescription="Card content">
1972
+ <div class="fd-illustrated-message-container">
1973
+ <figure class="fd-illustrated-message">
1974
+ <svg class="fd-illustrated-message__illustration" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="240" viewBox="0 0 320 240" id="sapIllus-Scene-NoMail">
1975
+ <path class="sapIllus_BackgroundColor" style="fill:var(--sapIllus_BackgroundColor)" d="M160.9349,25c-63.5127,0-117,45.65-117,111.0215,0,57.985,53.4873,102.9785,117,102.9785s115-45.0093,115-102.9944C275.9349,72.6147,224.4477,25,160.9349,25Z"/>
1976
+ <path class="sapIllus_ObjectFillColor" style="fill:var(--sapIllus_ObjectFillColor)" d="M154.41,88.5248l1.27-.8982c.083-.0588.1743-.0987.2588-.1543l.3369-.2319-.272.1933a8.7808,8.7808,0,0,1,9.8.18l4.4263,3.0712,68.4668,46.5077c9.1367-6.9,15.7255-11.8942,17.143-12.9688a8.2264,8.2264,0,0,0-2.6469-3.1792L165.47,58.5277a8.2316,8.2316,0,0,0-9.5674.0088L68.3763,121.1752a8.2141,8.2141,0,0,0-2.2954,2.5366c1.9439,1.5221,8.5494,6.6905,17.4517,13.62Z"/>
1977
+ <path class="sapIllus_ObjectFillColor" style="fill:var(--sapIllus_ObjectFillColor)" d="M108.8949,228.8754l39.0273-28.21,5.6529-4.1093L65.5863,124.6974a8.2081,8.2081,0,0,0-.6514,3.1721v67.3023A114.4593,114.4593,0,0,0,108.8949,228.8754Z"/>
1978
+ <path class="sapIllus_ObjectFillColor" style="fill:var(--sapIllus_ObjectFillColor)" d="M199.6752,219.5612l13.2217,9.5757a111.1492,111.1492,0,0,0,43.75-34.1394v-67.25a8.1879,8.1879,0,0,0-.4126-2.5244l-88.8384,70.9013Z"/>
1979
+ <path class="sapIllus_Layering2" style="fill:var(--sapIllus_Layering2)" d="M161.4076,239.8373A127.1611,127.1611,0,0,0,211.7054,229.66l-44.4179-33.449L165.6727,197.5a9.9255,9.9255,0,0,1-4.8164,2.0576v.11c-.2187,0-.436-.04-.6552-.0552-.2183.0151-.4356.0552-.6543.0552v-.11A9.918,9.918,0,0,1,154.73,197.5l-1.0645-.87-43.584,32.758A129.9029,129.9029,0,0,0,161.4076,239.8373Z"/>
1980
+ <path class="sapIllus_BrandColorSecondary" style="fill:var(--sapIllus_BrandColorSecondary)" d="M191.9257,105.94,165.16,87.24l5.07,3.4442-4.4263-3.0712a8.7806,8.7806,0,0,0-9.8-.18l-71.3877,50.74c8.7324,6.7949,19.4937,15.1414,30.1729,23.3565q2.7714,2.1324,5.5244,4.2441c13.5654,10.4028,26.395,20.1113,34.0459,25.582a12.7645,12.7645,0,0,0,3.7881,1.2576c.2309.0388.4731.0686.7182.0962a12.788,12.788,0,0,0,7.1792-1.3538c14.8945-10.6494,49.9448-37.0171,71.6738-53.425Z"/>
1981
+ <path class="sapIllus_PatternShadow" style="fill:var(--sapIllus_PatternShadow)" d="M114.7885,161.53c1.8476,1.4216,37.7428,28.9382,38.7428,29.2194s1,1.2812,4.6156,1.8643c.2309.0388.0521-.2245.7182.0962s3.6319-.1428,3.6319-.1428a12.786,12.786,0,0,0,3.5473-1.2109c14.8945-10.65,49.9448-37.0171,71.6738-53.4251L191.9257,105.94Q153.3571,133.7349,114.7885,161.53Z"/>
1982
+ <path class="sapIllus_StrokeDetailColor" style="fill:var(--sapIllus_StrokeDetailColor)" d="M253.7728,120.23,166.05,57.7133a9.2324,9.2324,0,0,0-10.73.0107L67.7943,120.3627a9.2487,9.2487,0,0,0-3.8594,7.5068v65.9968c.167.2205.3316.4422.5.6614q.2492.3229.5.6441V127.87a8.2081,8.2081,0,0,1,.6514-3.1721l87.9888,71.8586.0151.0125-5.668,4.0969-39.0273,28.21c.0464.02.0938.04.14.06.3472.1533.6978.3023,1.0469.4524l43.584-32.758,1.0644.87a9.9193,9.9193,0,0,0,4.8165,2.0576v.11c.2187,0,.436-.04.6543-.0552.2192.0151.4365.0552.6552.0552v-.11a9.9265,9.9265,0,0,0,4.8164-2.0576l1.6148-1.2891,44.4179,33.449c.3921-.1687.7813-.3413,1.1709-.5137l.0206-.0093-13.2217-9.5756-32.3184-23.4056.0391-.0312,88.8384-70.9014a8.1879,8.1879,0,0,1,.4126,2.5244v67.25c.1689-.2226.333-.448.5-.6718.1679-.2259.3339-.4532.5-.68v-65.898A9.2493,9.2493,0,0,0,253.7728,120.23Zm-15.0761,16.9624L170.23,90.6846,165.16,87.24,191.9257,105.94l45.7924,31.9915c-21.729,16.4079-56.7793,42.7756-71.6738,53.425a12.7821,12.7821,0,0,1-3.5473,1.211,10.993,10.993,0,0,1-3.6319.1428c-.2451-.0276-.4873-.0574-.7182-.0962l-.0522-.0089a12.1683,12.1683,0,0,1-5.0281-2.1773c-7.7549-5.599-19.9253-14.8157-32.7537-24.6534q-2.7474-2.1075-5.5244-4.2441c-10.6792-8.2151-21.44-16.5616-30.1729-23.3565l71.3877-50.74.272-.1933-.3369.2319L154.41,88.5248,83.5326,137.3314c-8.9023-6.9292-15.5078-12.0975-17.4517-13.62a8.2118,8.2118,0,0,1,2.2954-2.5366l87.5264-62.6387a8.2316,8.2316,0,0,1,9.5674-.0088l87.7227,62.5166a8.2257,8.2257,0,0,1,2.6469,3.1792C254.4222,125.2981,247.8334,130.2919,238.6967,137.1923Z"/>
1983
+ <path class="sapIllus_Layering2" style="fill:var(--sapIllus_Layering2)" d="M68.3383,196.2021a24.5594,24.5594,0,0,0-.6,3.6006c0,1.2.5,2,1.8994,2,3.6006,0,8.8008-4.6006,8.8008-15.4013,0-16.2012-11.1006-24.9014-26.501-24.9014s-27.7022,12.9014-27.7022,28.8018c0,17.8007,12.4,28.6015,28.6016,28.6015,15.001,0,18.1016-6.6,21.502-6.6a3.9528,3.9528,0,0,1,3.8,3.8994c0,5.4-15.2012,11.7012-25.3018,11.7012-21.6016,0-39.4024-15.6006-39.4024-37.6025C13.4349,168.7,30.8363,152.5,52.2377,152.5c19.1006,0,35.2021,11.9,35.2021,31.002,0,22.7011-19.3017,28.8017-25.3017,28.8017q-5.8506,0-6-5.1006h-.2a13.4712,13.4712,0,0,1-10.4,5.1006c-8.501,0-14.7012-7.7012-14.7012-17.6016,0-13.8007,9.1006-23.9013,19.001-23.9013,6.1006,0,9.501,2,12.4,6.2l.4-1.8c.7-3.1006,3-3.6006,4.8008-3.6006a4.1165,4.1165,0,0,1,4.3994,4.3008,14.5456,14.5456,0,0,1-.3994,2.8994Zm-18.7012,5.3008c5.7,0,9.7012-4.9,9.7012-11.3008,0-5.1005-2.7-8.6005-7.7012-8.6005-5.8,0-10,5.1005-10,11.0009C41.6371,198.3027,45.0375,201.5029,49.6371,201.5029Z"/>
1984
+ <path class="sapIllus_StrokeDetailColor" style="fill:var(--sapIllus_StrokeDetailColor)" d="M52.8373,228.4043c-22.7481,0-39.9024-16.3809-39.9024-38.1025C12.9349,168.8242,30.1986,152,52.2377,152c20.687,0,35.7021,13.248,35.7021,31.502,0,22.3574-18.9126,29.3017-25.8017,29.3017-4.5826,0-6.065-2.3262-6.4141-4.6142a13.61,13.61,0,0,1-10.1865,4.6142c-8.666,0-15.2012-7.7822-15.2012-18.1016,0-13.455,8.7481-24.4013,19.501-24.4013,5.5434,0,9.1435,1.6113,12.1523,5.5117l.16-.72c.5986-2.6494,2.3779-3.9922,5.289-3.9922a4.5926,4.5926,0,0,1,4.9,4.8008,15.1516,15.1516,0,0,1-.4107,3.0039l-3.1011,17.4052a22.28,22.28,0,0,0-.5878,3.4922c0,1.0655.4052,1.5,1.3994,1.5,3.4467,0,8.3007-4.623,8.3007-14.9013C77.9388,171.35,67.976,162,51.9379,162c-14.9995,0-27.2022,12.6963-27.2022,28.3018,0,16.8086,11.293,28.1015,28.1016,28.1015,10.0156,0,14.5947-2.95,17.625-4.9033,1.4712-.9473,2.6328-1.6963,3.8769-1.6963a4.4642,4.4642,0,0,1,4.3,4.3994C78.639,221.9775,63.26,228.4043,52.8373,228.4043ZM52.2377,153c-21.4781,0-38.3028,16.3848-38.3028,37.3018,0,21.1523,16.7246,37.1025,38.9024,37.1025,10.4306,0,24.8017-6.49,24.8017-11.2012a3.4387,3.4387,0,0,0-3.3-3.3994c-.95,0-1.95.6445-3.3354,1.5371-3.1284,2.0156-7.8569,5.0625-18.1665,5.0625-17.4068,0-29.1016-11.6953-29.1016-29.1015C23.7357,174.1445,36.3871,161,51.9379,161c16.6548,0,27.0009,9.7334,27.0009,25.4014,0,11.584-5.705,15.9013-9.3007,15.9013a2.2107,2.2107,0,0,1-2.3994-2.5,24.1368,24.1368,0,0,1,.6093-3.6982l3.0987-17.3916a14.6,14.6,0,0,0,.3916-2.8115,3.6225,3.6225,0,0,0-3.9-3.8008c-2.4477,0-3.8183,1.0205-4.3129,3.2109l-.649,2.916-.6508-.9423c-2.9727-4.3067-6.334-5.9844-11.9888-5.9844-10.2017,0-18.501,10.498-18.501,23.4013,0,9.7491,6.105,17.1016,14.2012,17.1016a12.869,12.869,0,0,0,10.021-4.9258l.1494-.1748h.9155l.0147.4854c.0908,3.1054,1.89,4.6152,5.5,4.6152,6.622,0,24.8017-6.707,24.8017-28.3017C86.94,165.8281,72.3456,153,52.2377,153Zm-2.6006,49.0029c-5.1636,0-8.5-3.6894-8.5-9.4,0-6.4492,4.6123-11.5009,10.5-11.5009,5.0586,0,8.2012,3.4873,8.2012,9.1005C59.8383,197.04,55.5482,202.0029,49.6371,202.0029Zm2-19.9013c-5.3272,0-9.5,4.6123-9.5,10.5009,0,5.1036,2.9438,8.4,7.5,8.4,5.3315,0,9.2012-4.542,9.2012-10.8008C58.8383,185.13,56.1464,182.1016,51.6371,182.1016Z"/>
1985
+ <path class="sapIllus_Layering1" style="fill:var(--sapIllus_Layering1)" d="M127.1881,21.5913a1.2161,1.2161,0,0,0-1.6672-.4183,1.2153,1.2153,0,0,0-.413,1.6638l10.5738,17.5713a1.1642,1.1642,0,0,0,.1321.1813,1.2124,1.2124,0,0,0,1.948-1.4272Z"/>
1986
+ <path class="sapIllus_Layering1" style="fill:var(--sapIllus_Layering1)" d="M163.7653,7a1.2586,1.2586,0,0,0-1.2387,1.2319l-.5914,21.4634a1.3089,1.3089,0,0,0,.3879.9665,1.1664,1.1664,0,0,0,.7824.3377l.0356,0a1.2378,1.2378,0,0,0,1.2031-1.2329l.59-21.463A1.2449,1.2449,0,0,0,163.7653,7Z"/>
1987
+ <path class="sapIllus_Layering1" style="fill:var(--sapIllus_Layering1)" d="M200.538,23.3206a1.1638,1.1638,0,0,0-.8642-.3184,1.1766,1.1766,0,0,0-.83.4062L185.2458,38.9322a1.265,1.265,0,0,0-.1431,1.4607l.001.0005a1.2829,1.2829,0,0,0,.2266.2877,1.174,1.174,0,0,0,1.693-.0878l13.5992-15.5244A1.26,1.26,0,0,0,200.538,23.3206Z"/>
1988
+ <path class="sapIllus_ObjectFillColor" style="fill:var(--sapIllus_ObjectFillColor)" d="M278.2066,200.7982a3.2452,3.2452,0,0,0,.1472-4.7278l-.1179-.118-5.2452-5.2452-2.6226,2.6226,3.8306,3.8307a1.8545,1.8545,0,0,1-.1029,2.718l-16.0489,13.7851a1.8475,1.8475,0,0,0-.07,2.68h0a1.8477,1.8477,0,0,0,2.5492.0607Z"/>
1989
+ <path class="sapIllus_StrokeDetailColor" style="fill:var(--sapIllus_StrokeDetailColor)" d="M259.2853,217.3867a2.3484,2.3484,0,0,1-1.5722-4.0947L273.77,199.5a1.3563,1.3563,0,0,0,.0752-1.9863l-4.1836-4.1836L272.99,190l5.7168,5.7168a3.7461,3.7461,0,0,1-.17,5.4561l-17.6807,15.6064A2.3308,2.3308,0,0,1,259.2853,217.3867Zm11.79-24.0566,3.4765,3.4765a2.3546,2.3546,0,0,1-.13,3.4512L258.3732,214.043a1.3462,1.3462,0,0,0-.0429,1.9463,1.3469,1.3469,0,0,0,1.8593.0449l17.6856-15.6113a2.7445,2.7445,0,0,0,.125-3.9991l-5.01-5.01Z"/>
1990
+ <path class="sapIllus_AccentColor" style="fill:var(--sapIllus_AccentColor)" d="M261.06,204.0018a18.8734,18.8734,0,0,1-5.7471-5.499l-1.1436-2.7383-7.9355,8.2285A147.597,147.597,0,0,0,231.615,221.68a34.39,34.39,0,0,1-3.4454,4.0341,2.3562,2.3562,0,0,0,.004,3.3252l1.623,1.6241a2.36,2.36,0,0,0,3.33,0,34.4573,34.4573,0,0,1,4.0664-3.4727,146.9584,146.9584,0,0,0,17.7012-14.6152l7.7587-7.4844Z"/>
1991
+ <path class="sapIllus_ObjectFillColor" style="fill:var(--sapIllus_ObjectFillColor)" d="M274.5829,184.262h0a6.0975,6.0975,0,0,0-8.719.0979l-11.788,12.2222.3755.6281a19.164,19.164,0,0,0,8.0081,7.3719h0l12.0255-11.601a6.0976,6.0976,0,0,0,.098-8.7191Z"/>
1992
+ <path class="sapIllus_StrokeDetailColor" style="fill:var(--sapIllus_StrokeDetailColor)" d="M262.5544,205.1854l-.3154-.1543a19.6264,19.6264,0,0,1-8.2168-7.5644l-.5713-.9571,12.0527-12.496a6.5485,6.5485,0,0,1,4.6934-2.0372,6.4371,6.4371,0,0,1,4.7392,1.9317h0a6.6,6.6,0,0,1-.1054,9.4346Zm-7.8535-8.5312.18.2988a18.6155,18.6155,0,0,0,7.4873,7.0234l11.77-11.3544a5.5987,5.5987,0,0,0-3.8652-9.6465c-.0215,0-.043,0-.0645.0009a5.55,5.55,0,0,0-3.9834,1.73Z"/>
1993
+ <path class="sapIllus_AccentColor" style="fill:var(--sapIllus_AccentColor)" d="M275.8942,178.3146h0a2.296,2.296,0,0,1,2.296,2.296v6.9763a0,0,0,0,1,0,0h-4.592a0,0,0,0,1,0,0v-6.9763A2.296,2.296,0,0,1,275.8942,178.3146Z" transform="translate(210.1732 -141.5016) rotate(45)"/>
1994
+ <path class="sapIllus_StrokeDetailColor" style="fill:var(--sapIllus_StrokeDetailColor)" d="M274.5954,188.2069c-.459,0-1.2246-.2676-2.39-1.4316-1.7891-1.7891-1.374-2.9473-1.3213-3.0733a.5.5,0,0,1,.9307.3662c-.0118.0489-.1495.753,1.0976,2,1.2051,1.2061,1.7031,1.1319,1.7041,1.1319a.46.46,0,0,1,.6436.2021.5327.5327,0,0,1-.2246.6983A.8706.8706,0,0,1,274.5954,188.2069Z"/>
1995
+ <path class="sapIllus_StrokeDetailColor" style="fill:var(--sapIllus_StrokeDetailColor)" d="M228.1736,229.0389a2.33,2.33,0,0,1-.5024-.7506l-2.6,4.11a1.01,1.01,0,0,0,1.3756,1.3756l4.1136-2.6023a2.3358,2.3358,0,0,1-.7639-.5083Z"/>
1996
+ </svg>
1997
+
1998
+ <figcaption class="fd-illustrated-message__figcaption">
1999
+ <h2 class="fd-illustrated-message__title">Unable to load data</h2>
2000
+ <p class="fd-illustrated-message__text">Try reloading, if that doesn't help check with your administratior.</p>
2001
+ </figcaption>
2002
+
2003
+ <div class="fd-illustrated-message__actions">
2004
+ <button class="fd-button">Reload</button>
2005
+ </div>
2006
+ </figure>
2007
+ </div>
2008
+ </div>
2009
+ </div>
2010
+ </div>
2011
+ </div>
2012
+ ```
2013
+
2014
+ ### Analytical card
2015
+
2016
+ The analytical card is used for data visualization. It can display a KPI header and various chart types in the content. The only difference between a KPI header and a standard header is that the former requires a subtitle, a KPI area and can display an optional second subtitle. To display an analytical card, add the \
2017
+
2018
+ ```html
2019
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
2020
+ <div style="width: 300px; height: 400px; margin: 1rem;">
2021
+ <div class="fd-card fd-card--analytical" role="region" aria-labelledby="analytical-card-title-1" aria-roledescription="Card">
2022
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
2023
+ <div class="fd-card__header-main">
2024
+ <div class="fd-card__header-main-container">
2025
+ <div class="fd-card__header-text">
2026
+ <div class="fd-card__title-area">
2027
+ <div class="fd-card__title" id="analytical-card-title-1" role="heading" aria-level="3">Card Title</div>
2028
+ <span class="fd-object-status fd-card__counter">Counter</span>
2029
+ </div>
2030
+ <div class="fd-card__subtitle-area">
2031
+ <div class="fd-card__subtitle">Card Subtitle</div>
2032
+ <div class="fd-card__currency">Currency</div>
2033
+ </div>
2034
+ <div class="fd-card__analytics-area">
2035
+ <div class="fd-numeric-content fd-card__numeric-content">
2036
+ <div class="fd-numeric-content__kpi-container">
2037
+ <div class="fd-numeric-content__kpi">1Ñç</div>
2038
+ </div>
2039
+ <div class="fd-numeric-content__scale-container">
2040
+ <div class="fd-numeric-content__scale">
2041
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
2042
+ <span class="fd-numeric-content__scale-text">M</span>
2043
+ </div>
2044
+ </div>
2045
+ </div>
2046
+ <div class="fd-card__analytics-container">
2047
+ <div class="fd-card__analytics">
2048
+ <div class="fd-card__analytics-text">Target</div>
2049
+ <div class="fd-card__analytics-content">110K</div>
2050
+ </div>
2051
+ <div class="fd-card__analytics">
2052
+ <div class="fd-card__analytics-text">Deviation</div>
2053
+ <div class="fd-card__analytics-content">-35.7%</div>
2054
+ </div>
2055
+ </div>
2056
+ </div>
2057
+ <div class="fd-card__second-subtitle">Second Subtitle</div>
2058
+ </div>
2059
+ </div>
2060
+ </div>
2061
+ </div>
2062
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
2063
+ </div>
2064
+ </div>
2065
+
2066
+ <div style="width: 700px; height: 400px; margin: 1rem;">
2067
+ <div class="fd-card fd-card--analytical" role="region" aria-labelledby="analytical-card-title-2" aria-roledescription="Card">
2068
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
2069
+ <div class="fd-card__header-main">
2070
+ <div class="fd-card__header-main-container">
2071
+ <div class="fd-card__header-text">
2072
+ <div class="fd-card__title-area">
2073
+ <div class="fd-card__title" id="analytical-card-title-2" role="heading" aria-level="3">Card Title With a Very Long Text ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
2074
+ <span class="fd-object-status fd-card__counter">Counter</span>
2075
+ </div>
2076
+ <div class="fd-card__subtitle-area">
2077
+ <div class="fd-card__subtitle">Card Subtitle With a Very Long Text ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
2078
+ <div class="fd-card__currency">Currency</div>
2079
+ </div>
2080
+ <div class="fd-card__analytics-area">
2081
+ <div class="fd-numeric-content fd-card__numeric-content">
2082
+ <div class="fd-numeric-content__kpi-container">
2083
+ <div class="fd-numeric-content__kpi">1Ñç</div>
2084
+ </div>
2085
+ <div class="fd-numeric-content__scale-container">
2086
+ <div class="fd-numeric-content__scale">
2087
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
2088
+ <span class="fd-numeric-content__scale-text">M</span>
2089
+ </div>
2090
+ </div>
2091
+ </div>
2092
+ <div class="fd-card__analytics-container">
2093
+ <div class="fd-card__analytics">
2094
+ <div class="fd-card__analytics-text">Target</div>
2095
+ <div class="fd-card__analytics-content">110K</div>
2096
+ </div>
2097
+ <div class="fd-card__analytics">
2098
+ <div class="fd-card__analytics-text">Deviation</div>
2099
+ <div class="fd-card__analytics-content">-35.7%</div>
2100
+ </div>
2101
+ </div>
2102
+ </div>
2103
+ <div class="fd-card__second-subtitle">Second Subtitle With a Very Long Text ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
2104
+ </div>
2105
+ </div>
2106
+ </div>
2107
+ <div class="fd-card__badge-container">
2108
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-5b fd-card__badge">
2109
+ <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
2110
+ <span class="fd-object-status__text">badge</span>
2111
+ </span>
2112
+ </div>
2113
+
2114
+ </div>
2115
+ <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
2116
+ </div>
2117
+ </div>
2118
+ </div>
2119
+ ```
2120
+
2121
+ ### List card
2122
+
2123
+ A card can display various types of lists. All components placed inside should behave natively. For this kind of card it is not recommended to keep header interactive, or navigable.
2124
+
2125
+ ```html
2126
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
2127
+ <div style="width: 300px; height: 100%; margin: 1rem;">
2128
+ <div class="fd-card" role="region" aria-label="List Card Example 1" aria-labelledby="list-card-title-1">
2129
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
2130
+ <div class="fd-card__header-main">
2131
+ <div class="fd-card__header-main-container">
2132
+ <div class="fd-card__header-text">
2133
+ <div class="fd-card__title-area">
2134
+ <div class="fd-card__title" id="list-card-title-1" role="heading" aria-level="3">Quick Links</div>
2135
+ </div>
2136
+ </div>
2137
+ </div>
2138
+ <div class="fd-card__header-main-actions">
2139
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
2140
+ </div>
2141
+ </div>
2142
+ </div>
2143
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
2144
+ <ul class="fd-list fd-list--no-border" role="list">
2145
+ <li role="listitem" tabindex="0" class="fd-list__item">
2146
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
2147
+ <span class="fd-list__title">List item 1</span>
2148
+ </li>
2149
+ <li role="listitem" tabindex="0" class="fd-list__item">
2150
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
2151
+ <span class="fd-list__title">List item 2</span>
2152
+ </li>
2153
+ <li role="listitem" tabindex="0" class="fd-list__item">
2154
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
2155
+ <span class="fd-list__title">List item 3</span>
2156
+ </li>
2157
+ <li role="listitem" tabindex="0" class="fd-list__item">
2158
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
2159
+ <span class="fd-list__title">List item 4</span>
2160
+ </li>
2161
+ <li role="listitem" tabindex="0" class="fd-list__item">
2162
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
2163
+ <span class="fd-list__title">List item 3</span>
2164
+ </li>
2165
+ <li role="listitem" tabindex="0" class="fd-list__item">
2166
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
2167
+ <span class="fd-list__title">List item 4</span>
2168
+ </li>
2169
+ </ul>
2170
+ </div>
2171
+ </div>
2172
+ </div>
2173
+ </div>
2174
+ ```
2175
+
2176
+ ### Table card
2177
+
2178
+ Cards can display tables within the content area. To display a table card, add the `fd-card--table` modifier class to the main element.
2179
+
2180
+ ```html
2181
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
2182
+ <div style="width: 500px; height: 100%; margin: 1rem;">
2183
+ <div class="fd-card fd-card--table" role="region" aria-label="Table Card Example 1">
2184
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="table-card-title-1">
2185
+ <div class="fd-card__header-main">
2186
+ <div class="fd-card__header-main-container">
2187
+ <div class="fd-card__header-text">
2188
+ <div class="fd-card__title-area">
2189
+ <div class="fd-card__title" id="table-card-title-1" role="heading" aria-level="3">Table Card</div>
2190
+ </div>
2191
+ </div>
2192
+ </div>
2193
+ <div class="fd-card__header-main-actions">
2194
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
2195
+ </div>
2196
+ </div>
2197
+ </div>
2198
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
2199
+ <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--no-outer-border fd-table--top-border">
2200
+ <thead class="fd-table__header">
2201
+ <tr class="fd-table__row">
2202
+ <th class="fd-table__cell" scope="col">Name</th>
2203
+ <th class="fd-table__cell" scope="col">Status</th>
2204
+ <th class="fd-table__cell" scope="col">Price</th>
2205
+ <th class="fd-table__cell" scope="col">Country</th>
2206
+ <th class="fd-table__cell"></th>
2207
+ </tr>
2208
+ </thead>
2209
+ <tbody class="fd-table__body">
2210
+ <tr class="fd-table__row">
2211
+ <td class="fd-table__cell">Banana</td>
2212
+ <td class="fd-table__cell">
2213
+ <span class="fd-object-status fd-object-status--positive">
2214
+ Available
2215
+ </span>
2216
+ </td>
2217
+ <td class="fd-table__cell">5 EUR</td>
2218
+ <td class="fd-table__cell">India</td>
2219
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
2220
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
2221
+ </td>
2222
+ </tr>
2223
+ <tr class="fd-table__row">
2224
+ <td class="fd-table__cell">Pineapple</td>
2225
+ <td class="fd-table__cell">
2226
+ <span class="fd-object-status fd-object-status--negative">
2227
+ Out of stock
2228
+ </span>
2229
+ </td>
2230
+ <td class="fd-table__cell">2 EUR</td>
2231
+ <td class="fd-table__cell">Mexico</td>
2232
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
2233
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
2234
+ </td>
2235
+ </tr>
2236
+ <tr class="fd-table__row">
2237
+ <td class="fd-table__cell">Orange</td>
2238
+ <td class="fd-table__cell">
2239
+ <span class="fd-object-status fd-object-status--informative">
2240
+ Temporary unavailable
2241
+ </span>
2242
+ </td>
2243
+ <td class="fd-table__cell">6 EUR</td>
2244
+ <td class="fd-table__cell">Spain</td>
2245
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
2246
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
2247
+ </td>
2248
+ </tr>
2249
+ </tbody>
2250
+ </table>
2251
+ </div>
2252
+ </div>
2253
+ </div>
2254
+ </div>
2255
+ ```
2256
+
2257
+ ### Object card
2258
+
2259
+ The object card can display a single object or a group of objects. Contrary to other cards, object card has 1rem padding on all sides of the content area. To display an object card, add the \
2260
+
2261
+ ```html
2262
+ <div style="display:flex; justify-content:space-around; flex-wrap: wrap">
2263
+ <div style="width: 14rem; height: 32rem; margin: 1rem;">
2264
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 1">
2265
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-1">
2266
+ <div class="fd-card__header-main">
2267
+ <div class="fd-card__header-main-container">
2268
+ <span
2269
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
2270
+ style="background-image: url('/assets/images/avatars/1.svg')"
2271
+ role="img"
2272
+ aria-label="John Doe">
2273
+ </span>
2274
+ <div class="fd-card__header-text">
2275
+ <div class="fd-card__title-area">
2276
+ <div class="fd-card__title" id="object-card-title-1" role="heading" aria-level="3">Card Title</div>
2277
+ </div>
2278
+ <div class="fd-card__subtitle-area">
2279
+ <div class="fd-card__subtitle">Card Subtitle</div>
2280
+ </div>
2281
+ </div>
2282
+ </div>
2283
+ </div>
2284
+ </div>
2285
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
2286
+ <div class="fd-card__content-container">
2287
+ <div class="fd-card__content-section">
2288
+ <div class="fd-card__content-title-container">Group Title 1</div>
2289
+ <div class="fd-card__content-group">
2290
+ <div class="fd-card__content-group-text">
2291
+ <span>Label</span>
2292
+ <span>Text</span>
2293
+ </div>
2294
+ </div>
2295
+ <div class="fd-card__content-group">
2296
+ <div class="fd-card__content-group-text">
2297
+ <span>Label</span>
2298
+ <span>Text</span>
2299
+ </div>
2300
+ </div>
2301
+ <div class="fd-card__content-group">
2302
+ <div class="fd-card__content-group-text">
2303
+ <span>Label</span>
2304
+ <span>Text</span>
2305
+ </div>
2306
+ </div>
2307
+ </div>
2308
+ <div class="fd-card__content-section">
2309
+ <div class="fd-card__content-title-container">Group Title 2</div>
2310
+ <div class="fd-card__content-group">
2311
+ <div class="fd-card__content-group-text">
2312
+ <span>Label</span>
2313
+ <span>Text</span>
2314
+ </div>
2315
+ </div>
2316
+ <div class="fd-card__content-group">
2317
+ <div class="fd-card__content-group-text">
2318
+ <span>Label</span>
2319
+ <span>Text</span>
2320
+ </div>
2321
+ </div>
2322
+ <div class="fd-card__content-group">
2323
+ <div class="fd-card__content-group-text">
2324
+ <span>Label Only</span>
2325
+ </div>
2326
+ </div>
2327
+ </div>
2328
+ </div>
2329
+ </div>
2330
+ </div>
2331
+ </div>
2332
+
2333
+ <div style="width: 40rem; height: 20rem; margin: 1rem;">
2334
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 2">
2335
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-2">
2336
+ <div class="fd-card__header-main">
2337
+ <div class="fd-card__header-main-container">
2338
+ <span
2339
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
2340
+ style="background-image: url('/assets/images/avatars/1.svg')"
2341
+ role="img"
2342
+ aria-label="John Doe">
2343
+ </span>
2344
+ <div class="fd-card__header-text">
2345
+ <div class="fd-card__title-area">
2346
+ <div class="fd-card__title" id="object-card-title-2" role="heading" aria-level="3">Card Title</div>
2347
+ </div>
2348
+ <div class="fd-card__subtitle-area">
2349
+ <div class="fd-card__subtitle">Card Subtitle</div>
2350
+ </div>
2351
+ </div>
2352
+ </div>
2353
+ </div>
2354
+ </div>
2355
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
2356
+ <div class="fd-card__content-container fd-card__content-container--horizontal">
2357
+ <div class="fd-card__content-section">
2358
+ <div class="fd-card__content-title-container">
2359
+ <h3 style="margin: 0;">Group Title 1</h3>
2360
+ </div>
2361
+ <div class="fd-card__content-group">
2362
+ <span class="fd-avatar fd-avatar--xs fd-avatar--circle" aria-label="Avatar">
2363
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
2364
+ </span>
2365
+ <div class="fd-card__content-group-text">
2366
+ <span style="color: green;">Label</span>
2367
+ <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Link Text</span></a>
2368
+ </div>
2369
+ </div>
2370
+ <div class="fd-card__content-group">
2371
+ <div class="fd-card__content-group-text">
2372
+ <span>Label</span>
2373
+ <span>Text</span>
2374
+ </div>
2375
+ </div>
2376
+ <div class="fd-card__content-group">
2377
+ <div class="fd-card__content-group-text">
2378
+ <span>Label</span>
2379
+ <span>Text</span>
2380
+ </div>
2381
+ </div>
2382
+ </div>
2383
+ <div class="fd-card__content-section">
2384
+ <div class="fd-card__content-title-container">
2385
+ <h3 style="margin: 0;">Group Title 2</h3>
2386
+ </div>
2387
+ <div class="fd-card__content-group">
2388
+ <span class="fd-avatar fd-avatar--xs fd-avatar--circle" aria-label="Avatar">
2389
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
2390
+ </span>
2391
+ <div class="fd-card__content-group-text">
2392
+ <span style="color: blue">Label</span>
2393
+ </div>
2394
+ </div>
2395
+ <div class="fd-card__content-group">
2396
+ <div class="fd-card__content-group-text">
2397
+ <span>Label</span>
2398
+ <span>Text</span>
2399
+ </div>
2400
+ </div>
2401
+ <div class="fd-card__content-group">
2402
+ <div class="fd-card__content-group-text">
2403
+ <span>Label</span>
2404
+ <span>Text</span>
2405
+ </div>
2406
+ </div>
2407
+ </div>
2408
+ </div>
2409
+ </div>
2410
+ </div>
2411
+ </div>
2412
+ </div>
2413
+ ```
2414
+
2415
+ ## Accessibility
2416
+
2417
+ - Use semantic HTML elements where appropriate
2418
+ - Include proper ARIA attributes for interactive elements
2419
+ - Ensure keyboard navigation support
2420
+ - Provide adequate color contrast
2421
+
2422
+ ## Source
2423
+
2424
+ This documentation was automatically generated from: `packages/styles/stories/Components/card/card.stories.js`
2425
+
2426
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).