@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.md ADDED
@@ -0,0 +1,2404 @@
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
+ tags: ["development"]
9
+ dependencies: ["avatar","badge","button","card","checkbox","form-label","icon","illustrated-message","link","list","numeric-content","object-status","rating-indicator","table"]
10
+ relatedComponents: ["avatar","badge","button","card","checkbox","form-label","icon","illustrated-message","link","list","numeric-content","object-status","rating-indicator","table"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.320Z
13
+ ---
14
+
15
+ # Components/Card/Card
16
+
17
+ 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>.
18
+ 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.
19
+
20
+ **Cards can display different types of content, such as:**
21
+
22
+ - a chart
23
+ - a list
24
+ - a table
25
+ - an object or group of objects
26
+ - informative text
27
+ - a combination of two elements
28
+
29
+ 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.
30
+
31
+ ##Card anatomy
32
+
33
+ - <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.
34
+ - <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.
35
+ - <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.
36
+ - <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.
37
+
38
+ - <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>
39
+ - <b>content</b> (main): the content area is reserved for application content.
40
+
41
+ - <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.
42
+
43
+ ## Dependencies
44
+
45
+ This component depends on the following CSS files:
46
+
47
+ - `avatar.css`
48
+ - `badge.css`
49
+ - `button.css`
50
+ - `card.css`
51
+ - `checkbox.css`
52
+ - `form-label.css`
53
+ - `icon.css`
54
+ - `illustrated-message.css`
55
+ - `link.css`
56
+ - `list.css`
57
+ - `numeric-content.css`
58
+ - `object-status.css`
59
+ - `rating-indicator.css`
60
+ - `table.css`
61
+
62
+ ## Installation
63
+
64
+ ```bash
65
+ npm install fundamental-styles
66
+ ```
67
+
68
+ ```html
69
+ <!-- Include theme -->
70
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
71
+
72
+ <!-- Include component CSS -->
73
+ <link href="node_modules/fundamental-styles/dist/card.css" rel="stylesheet">
74
+
75
+ <!-- Include dependencies -->
76
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
77
+ <link href="node_modules/fundamental-styles/dist/badge.css" rel="stylesheet">
78
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
79
+ <link href="node_modules/fundamental-styles/dist/card.css" rel="stylesheet">
80
+ <link href="node_modules/fundamental-styles/dist/checkbox.css" rel="stylesheet">
81
+ <link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
82
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
83
+ <link href="node_modules/fundamental-styles/dist/illustrated-message.css" rel="stylesheet">
84
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
85
+ <link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
86
+ <link href="node_modules/fundamental-styles/dist/numeric-content.css" rel="stylesheet">
87
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
88
+ <link href="node_modules/fundamental-styles/dist/rating-indicator.css" rel="stylesheet">
89
+ <link href="node_modules/fundamental-styles/dist/table.css" rel="stylesheet">
90
+ ```
91
+
92
+ ## Basic Usage
93
+
94
+ ```html
95
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1a">
96
+
97
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
98
+ <div class="fd-card__header-main">
99
+ <div class="fd-card__header-main-container">
100
+ <span
101
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
102
+
103
+ role="img"
104
+ aria-label="John Doe">
105
+ </span>
106
+ <div class="fd-card__header-text">
107
+ <div class="fd-card__title-area">
108
+ <div class="fd-card__title" id="card-title-1a" role="heading" aria-level="3">Non-interactive header</div>
109
+ <div class="fd-card__subtitle-area">
110
+ <div class="fd-card__subtitle">Card Subtitle</div>
111
+ </div>
112
+ </div>
113
+ <div class="fd-card__header-main-actions">
114
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
115
+ <i class="sap-icon--overflow"></i>
116
+ </button>
117
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="fd-card__footer">
123
+ <div class="fd-card__footer-actions">
124
+ <button class="fd-button fd-button--positive">
125
+ Button
126
+ </button>
127
+ <button class="fd-button fd-button--negative">
128
+ Button
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="fd-card" role="region" aria-labelledby="card-title-2a">
136
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
137
+ <div class="fd-card__header-main">
138
+ <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">
139
+ <span
140
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
141
+
142
+ role="img"
143
+ aria-label="John Doe">
144
+ </span>
145
+ <div class="fd-card__header-text">
146
+ <div class="fd-card__title-area">
147
+ <div class="fd-card__title" id="card-title-2a" role="heading" aria-level="3">Interactive Header</div>
148
+ <div class="fd-card__subtitle-area">
149
+ <div class="fd-card__subtitle">Card Subtitle</div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <div class="fd-card__header-main-actions">
154
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
155
+ <i class="sap-icon--overflow"></i>
156
+ </button>
157
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
158
+ <div class="fd-card__timestamp">
159
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
160
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
161
+ </button>
162
+ <span>2 hours ago</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="fd-card__footer">
169
+ <div class="fd-card__footer-actions">
170
+ <button class="fd-button fd-button--positive">
171
+ Button
172
+ </button>
173
+ <button class="fd-button fd-button--negative">
174
+ Button
175
+ </button>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-3a">
182
+
183
+ <div class="fd-card__media" role="group" aria-roledescription="Card Media Block">
184
+ <div class="fd-card__media-image-container">
185
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg"
186
+ alt="image of a sunset over mountains" />
187
+ </div>
188
+
189
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
190
+ <div class="fd-card__header-main">
191
+ <div class="fd-card__header-main-container">
192
+ <span
193
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
194
+
195
+ role="img"
196
+ aria-label="John Doe">
197
+ </span>
198
+ <div class="fd-card__header-text">
199
+ <div class="fd-card__title-area">
200
+ <div class="fd-card__title" id="card-title-3a" role="heading" aria-level="3">Card with Media</div>
201
+ </div>
202
+ <div class="fd-card__subtitle-area">
203
+ <div class="fd-card__subtitle">Card Subtitle</div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <div class="fd-card__header-main-actions">
208
+ <div class="fd-card__timestamp">
209
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
210
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
211
+ </button>
212
+ <span>2 hrs ago</span>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="fd-card__footer">
219
+ <div class="fd-card__footer-actions">
220
+ <button class="fd-button fd-button--positive">
221
+ Button
222
+ </button>
223
+ <button class="fd-button fd-button--negative">
224
+ Button
225
+ </button>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-33a">
232
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
233
+ <div class="fd-card__header-main">
234
+ <div class="fd-card__header-main-container">
235
+ <span
236
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
237
+
238
+ role="img"
239
+ aria-label="John Doe">
240
+ </span>
241
+ <div class="fd-card__header-text">
242
+ <div class="fd-card__title-area">
243
+ <div class="fd-card__title" id="card-title-33a" role="heading" aria-level="3">Request Approval</div>
244
+ <div class="fd-card__subtitle-area">
245
+ <div class="fd-card__subtitle">Marie Johnson</div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ <div class="fd-card__header-main-actions">
250
+ <span class="fd-object-status fd-card__counter">2 of 5</span>
251
+ <div class="fd-card__timestamp">
252
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
253
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
254
+ </button>
255
+ <span>1h ago</span>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
260
+ <div class="fd-card__header-column">
261
+ <div class="fd-card__header-row">
262
+ Travel to <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Las Vegas</span></a>
263
+ </div>
264
+ <div class="fd-card__header-row">
265
+ May 3rd - 5th
266
+ </div>
267
+ </div>
268
+ </div>
269
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
270
+ <div class="fd-card__header-row">
271
+ <div class="fd-card__numeric-container">
272
+ <div class="fd-numeric-content fd-card__numeric-content">
273
+ <div class="fd-numeric-content__kpi-container">
274
+ <div class="fd-numeric-content__kpi">3,954.00</div>
275
+ </div>
276
+ <div class="fd-numeric-content__scale-container">
277
+ <div class="fd-numeric-content__scale">
278
+ <span class="fd-numeric-content__scale-text">EUR</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ <div class="fd-card__footer">
287
+ <div class="fd-card__footer-actions">
288
+ <button class="fd-button fd-button--positive">
289
+ Approve
290
+ </button>
291
+ <button class="fd-button fd-button--negative">
292
+ Send Back
293
+ </button>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ ```
300
+
301
+ ## Modifiers
302
+
303
+ | Class | Description |
304
+ |-------|-------------|
305
+ | `fd-card--analytical` | The analytical card is used for data visualization |
306
+ | `fd-card--interactive` | Non-interactive cards have <code>role="region"</code> |
307
+ | `fd-card--object` | The object card can display a single object or a group of objects |
308
+ | `fd-card--table` | Alternatively to an Avatar a Message Icon can be displayed within the Main Header |
309
+
310
+ ## States
311
+
312
+ | Class | Description |
313
+ |-------|-------------|
314
+ | `is-active` | Active state |
315
+ | `is-focus` | Focus state |
316
+ | `is-hover` | Hover state |
317
+ | `is-selected` | Selected state |
318
+
319
+ ## BEM Elements
320
+
321
+ This component uses the following BEM elements:
322
+
323
+ - `fd-card__analytics`
324
+ - `fd-card__analytics-area`
325
+ - `fd-card__analytics-container`
326
+ - `fd-card__analytics-content`
327
+ - `fd-card__analytics-text`
328
+ - `fd-card__avatar`
329
+ - `fd-card__badge`
330
+ - `fd-card__badge-container`
331
+ - `fd-card__content`
332
+ - `fd-card__content-container`
333
+ - `fd-card__content-container--horizontal`
334
+ - `fd-card__content-group`
335
+ - `fd-card__content-group-text`
336
+ - `fd-card__content-section`
337
+ - `fd-card__content-title-container`
338
+ - `fd-card__counter`
339
+ - `fd-card__currency`
340
+ - `fd-card__footer`
341
+ - `fd-card__footer-actions`
342
+ - `fd-card__footer-link`
343
+ - `fd-card__header`
344
+ - `fd-card__header--interactive`
345
+ - `fd-card__header-column`
346
+ - `fd-card__header-column--right-aligned`
347
+ - `fd-card__header-extended`
348
+ - `fd-card__header-extended--bottom-aligned`
349
+ - `fd-card__header-main`
350
+ - `fd-card__header-main-actions`
351
+ - `fd-card__header-main-container`
352
+ - `fd-card__header-numeric`
353
+ - `fd-card__header-row`
354
+ - `fd-card__header-text`
355
+ - `fd-card__indicator`
356
+ - `fd-card__indicator-title`
357
+ - `fd-card__indicator-value`
358
+ - `fd-card__media`
359
+ - `fd-card__media-image`
360
+ - `fd-card__media-image-container`
361
+ - `fd-card__numeric-container`
362
+ - `fd-card__numeric-content`
363
+ - `fd-card__second-subtitle`
364
+ - `fd-card__subtitle`
365
+ - `fd-card__subtitle-area`
366
+ - `fd-card__timestamp`
367
+ - `fd-card__title`
368
+ - `fd-card__title-area`
369
+
370
+ ## Related Components
371
+
372
+ This component works with or depends on:
373
+
374
+ - `avatar`
375
+ - `badge`
376
+ - `button`
377
+ - `card`
378
+ - `checkbox`
379
+ - `form-label`
380
+ - `icon`
381
+ - `illustrated-message`
382
+ - `link`
383
+ - `list`
384
+ - `numeric-content`
385
+ - `object-status`
386
+ - `rating-indicator`
387
+ - `table`
388
+
389
+ ## Design Tokens
390
+
391
+ Key CSS variables used by this component:
392
+
393
+ - `--analytical`
394
+ - `--banner`
395
+ - `--bg-legend-`
396
+ - `--bg-shell-`
397
+ - `--bottom-aligned`
398
+ - `--fdCard_Background`
399
+ - `--fdCard_Border`
400
+ - `--fdCard_Border_Corner_Radius`
401
+ - `--fdCard_Box_Shadow`
402
+ - `--fdCard_Box_Shadow_Hover`
403
+ - `--fdCard_Box_Shadow_Regular`
404
+ - `--fdCard_Content_Border_Radius`
405
+ - `--fdCard_Counter_Margin`
406
+ - `--fdCard_Focus_Outline_Offset`
407
+ - `--fdCard_Focus_Outline_Radius`
408
+
409
+ *...and 5 more*
410
+
411
+ ## Examples
412
+
413
+ ### Non-interactive card
414
+
415
+ 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:
416
+ - no interactivity
417
+ - no interactivity with interactive elements inside (including interactive header).
418
+
419
+ ```html
420
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1a">
421
+
422
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
423
+ <div class="fd-card__header-main">
424
+ <div class="fd-card__header-main-container">
425
+ <span
426
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
427
+
428
+ role="img"
429
+ aria-label="John Doe">
430
+ </span>
431
+ <div class="fd-card__header-text">
432
+ <div class="fd-card__title-area">
433
+ <div class="fd-card__title" id="card-title-1a" role="heading" aria-level="3">Non-interactive header</div>
434
+ <div class="fd-card__subtitle-area">
435
+ <div class="fd-card__subtitle">Card Subtitle</div>
436
+ </div>
437
+ </div>
438
+ <div class="fd-card__header-main-actions">
439
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
440
+ <i class="sap-icon--overflow"></i>
441
+ </button>
442
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="fd-card__footer">
448
+ <div class="fd-card__footer-actions">
449
+ <button class="fd-button fd-button--positive">
450
+ Button
451
+ </button>
452
+ <button class="fd-button fd-button--negative">
453
+ Button
454
+ </button>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="fd-card" role="region" aria-labelledby="card-title-2a">
461
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
462
+ <div class="fd-card__header-main">
463
+ <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">
464
+ <span
465
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
466
+
467
+ role="img"
468
+ aria-label="John Doe">
469
+ </span>
470
+ <div class="fd-card__header-text">
471
+ <div class="fd-card__title-area">
472
+ <div class="fd-card__title" id="card-title-2a" role="heading" aria-level="3">Interactive Header</div>
473
+ <div class="fd-card__subtitle-area">
474
+ <div class="fd-card__subtitle">Card Subtitle</div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ <div class="fd-card__header-main-actions">
479
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
480
+ <i class="sap-icon--overflow"></i>
481
+ </button>
482
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
483
+ <div class="fd-card__timestamp">
484
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
485
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
486
+ </button>
487
+ <span>2 hours ago</span>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="fd-card__footer">
494
+ <div class="fd-card__footer-actions">
495
+ <button class="fd-button fd-button--positive">
496
+ Button
497
+ </button>
498
+ <button class="fd-button fd-button--negative">
499
+ Button
500
+ </button>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-3a">
507
+
508
+ <div class="fd-card__media" role="group" aria-roledescription="Card Media Block">
509
+ <div class="fd-card__media-image-container">
510
+ <img class="fd-card__media-image" src="/assets/images/landscape/L1.jpg"
511
+ alt="image of a sunset over mountains" />
512
+ </div>
513
+
514
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
515
+ <div class="fd-card__header-main">
516
+ <div class="fd-card__header-main-container">
517
+ <span
518
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
519
+
520
+ role="img"
521
+ aria-label="John Doe">
522
+ </span>
523
+ <div class="fd-card__header-text">
524
+ <div class="fd-card__title-area">
525
+ <div class="fd-card__title" id="card-title-3a" role="heading" aria-level="3">Card with Media</div>
526
+ </div>
527
+ <div class="fd-card__subtitle-area">
528
+ <div class="fd-card__subtitle">Card Subtitle</div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ <div class="fd-card__header-main-actions">
533
+ <div class="fd-card__timestamp">
534
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
535
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
536
+ </button>
537
+ <span>2 hrs ago</span>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="fd-card__footer">
544
+ <div class="fd-card__footer-actions">
545
+ <button class="fd-button fd-button--positive">
546
+ Button
547
+ </button>
548
+ <button class="fd-button fd-button--negative">
549
+ Button
550
+ </button>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-33a">
557
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
558
+ <div class="fd-card__header-main">
559
+ <div class="fd-card__header-main-container">
560
+ <span
561
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
562
+
563
+ role="img"
564
+ aria-label="John Doe">
565
+ </span>
566
+ <div class="fd-card__header-text">
567
+ <div class="fd-card__title-area">
568
+ <div class="fd-card__title" id="card-title-33a" role="heading" aria-level="3">Request Approval</div>
569
+ <div class="fd-card__subtitle-area">
570
+ <div class="fd-card__subtitle">Marie Johnson</div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ <div class="fd-card__header-main-actions">
575
+ <span class="fd-object-status fd-card__counter">2 of 5</span>
576
+ <div class="fd-card__timestamp">
577
+ <button role="button" title="Refresh" class="fd-button fd-button--transparent">
578
+ <i class="sap-icon--refresh" role="presentation" aria-hidden="true"></i>
579
+ </button>
580
+ <span>1h ago</span>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
585
+ <div class="fd-card__header-column">
586
+ <div class="fd-card__header-row">
587
+ Travel to <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Las Vegas</span></a>
588
+ </div>
589
+ <div class="fd-card__header-row">
590
+ May 3rd - 5th
591
+ </div>
592
+ </div>
593
+ </div>
594
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
595
+ <div class="fd-card__header-row">
596
+ <div class="fd-card__numeric-container">
597
+ <div class="fd-numeric-content fd-card__numeric-content">
598
+ <div class="fd-numeric-content__kpi-container">
599
+ <div class="fd-numeric-content__kpi">3,954.00</div>
600
+ </div>
601
+ <div class="fd-numeric-content__scale-container">
602
+ <div class="fd-numeric-content__scale">
603
+ <span class="fd-numeric-content__scale-text">EUR</span>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ <div class="fd-card__footer">
612
+ <div class="fd-card__footer-actions">
613
+ <button class="fd-button fd-button--positive">
614
+ Approve
615
+ </button>
616
+ <button class="fd-button fd-button--negative">
617
+ Send Back
618
+ </button>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ ```
625
+
626
+ ### Header Interaction - non-interactive Cards
627
+
628
+ For interactive header use the modifier class <code>.fd-card__header--interactive</code> on <code>.fd-card__header</code>.
629
+
630
+ ```html
631
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4a">
632
+
633
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
634
+ <div class="fd-card__header-main">
635
+ <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">
636
+ <span
637
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
638
+
639
+ role="img"
640
+ aria-label="John Doe">
641
+ </span>
642
+ <div class="fd-card__header-text">
643
+ <div class="fd-card__title-area">
644
+ <div class="fd-card__title" id="card-title-4a" role="heading" aria-level="3">Normal state</div>
645
+ <div class="fd-card__subtitle-area">
646
+ <div class="fd-card__subtitle">Card Subtitle</div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <div class="fd-card__footer">
653
+ <div class="fd-card__footer-actions">
654
+ <button class="fd-button fd-button--positive">
655
+ Button
656
+ </button>
657
+ <button class="fd-button fd-button--negative">
658
+ Button
659
+ </button>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+
665
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4aa">
666
+
667
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
668
+ <div class="fd-card__header-main is-hover">
669
+ <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">
670
+ <span
671
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
672
+
673
+ role="img"
674
+ aria-label="John Doe">
675
+ </span>
676
+ <div class="fd-card__header-text">
677
+ <div class="fd-card__title-area">
678
+ <div class="fd-card__title" id="card-title-4aa" role="heading" aria-level="3">Hover on header</div>
679
+ <div class="fd-card__subtitle-area">
680
+ <div class="fd-card__subtitle">Card Subtitle</div>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+
687
+ <div class="fd-card__footer">
688
+ <div class="fd-card__footer-actions">
689
+ <button class="fd-button fd-button--positive">
690
+ Button
691
+ </button>
692
+ <button class="fd-button fd-button--negative">
693
+ Button
694
+ </button>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-5a">
701
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
702
+ <div class="fd-card__header-main">
703
+ <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">
704
+ <span
705
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
706
+
707
+ role="img"
708
+ aria-label="John Doe">
709
+ </span>
710
+ <div class="fd-card__header-text">
711
+ <div class="fd-card__title-area">
712
+ <div class="fd-card__title" id="card-title-5a" role="heading" aria-level="3">Active Header</div>
713
+ <div class="fd-card__subtitle-area">
714
+ <div class="fd-card__subtitle">Card Subtitle</div>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+
721
+ <div class="fd-card__footer">
722
+ <div class="fd-card__footer-actions">
723
+ <button class="fd-button fd-button--positive">
724
+ Button
725
+ </button>
726
+ <button class="fd-button fd-button--negative">
727
+ Button
728
+ </button>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <div class="fd-card" role="region" aria-labelledby="card-title-6a" aria-roledescription="Card">
735
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
736
+ <div class="fd-card__header-main">
737
+ <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">
738
+ <span
739
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
740
+
741
+ role="img"
742
+ aria-label="John Doe">
743
+ </span>
744
+ <div class="fd-card__header-text">
745
+ <div class="fd-card__title-area">
746
+ <div class="fd-card__title" id="card-title-6a" role="heading" aria-level="3">Focus Header</div>
747
+ <div class="fd-card__subtitle-area">
748
+ <div class="fd-card__subtitle">Card Subtitle</div>
749
+ </div>
750
+ </div>
751
+ </div>
752
+ </div>
753
+ </div>
754
+
755
+ <div class="fd-card__footer">
756
+ <div class="fd-card__footer-actions">
757
+ <button class="fd-button fd-button--positive">
758
+ Button
759
+ </button>
760
+ <button class="fd-button fd-button--negative">
761
+ Button
762
+ </button>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+
768
+ <div class="fd-card" role="region" aria-labelledby="card-title-9a" aria-roledescription="Card">
769
+ <div class="fd-card__badge-container">
770
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-6 fd-card__badge">
771
+ <span class="fd-object-status__text">badge</span>
772
+ </span>
773
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
774
+ <div class="fd-card__header-main">
775
+ <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">
776
+ <span
777
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
778
+
779
+ role="img"
780
+ aria-label="John Doe">
781
+ </span>
782
+ <div class="fd-card__header-text">
783
+ <div class="fd-card__title-area">
784
+ <div class="fd-card__title" id="card-title-9a" role="heading" aria-level="3">Focus Header</div>
785
+ </div>
786
+ <div class="fd-card__subtitle-area">
787
+ <div class="fd-card__subtitle">Card Subtitle</div>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ </div>
792
+ </div>
793
+
794
+ <div class="fd-card__footer">
795
+ <div class="fd-card__footer-actions">
796
+ <button class="fd-button fd-button--positive">
797
+ Button
798
+ </button>
799
+ <button class="fd-button fd-button--negative">
800
+ Button
801
+ </button>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </div>
806
+
807
+ <div class="fd-card" role="region" aria-labelledby="card-title-7a" aria-roledescription="Card">
808
+ <div class="fd-card__badge-container">
809
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-1 fd-card__badge">
810
+ <span class="fd-object-status__text">badge</span>
811
+ </span>
812
+
813
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
814
+ <div class="fd-card__header-main">
815
+ <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">
816
+ <span
817
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
818
+
819
+ role="img"
820
+ aria-label="John Doe">
821
+ </span>
822
+ <div class="fd-card__header-text">
823
+ <div class="fd-card__title-area">
824
+ <div class="fd-card__title" id="card-title-7a" role="heading" aria-level="3">Focus Header</div>
825
+ </div>
826
+ <div class="fd-card__subtitle-area">
827
+ <div class="fd-card__subtitle">Card Subtitle</div>
828
+ </div>
829
+ </div>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ </div>
835
+
836
+ <div class="fd-card" role="region" aria-labelledby="card-title-8a" aria-roledescription="Card">
837
+ <div class="fd-card__badge-container">
838
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-3 fd-card__badge">
839
+ <span class="fd-object-status__text">badge</span>
840
+ </span>
841
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-3 fd-card__badge">
842
+ <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
843
+ </span>
844
+
845
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
846
+ <div class="fd-card__header-main">
847
+ <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">
848
+ <span
849
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
850
+
851
+ role="img"
852
+ aria-label="John Doe">
853
+ </span>
854
+ <div class="fd-card__header-text">
855
+ <div class="fd-card__title-area">
856
+ <div class="fd-card__title" id="card-title-8a" role="heading" aria-level="3">Focus Header</div>
857
+ </div>
858
+ <div class="fd-card__subtitle-area">
859
+ <div class="fd-card__subtitle">Card Subtitle</div>
860
+ </div>
861
+ </div>
862
+ </div>
863
+ </div>
864
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
865
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
866
+ <div class="fd-card__header-row">
867
+ <div class="fd-text">Timestamp</div>
868
+ </div>
869
+ </div>
870
+ </div>
871
+ </div>
872
+ </div>
873
+ </div>
874
+ </div>
875
+ ```
876
+
877
+ ### Interactive card with role button
878
+
879
+ 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.
880
+
881
+ ```html
882
+ <div class="fd-card">
883
+ <div
884
+ class="fd-card__header fd-card__header--interactive"
885
+ role="group"
886
+ title="Activate for action/navigation"
887
+ aria-label="Activate for action/navigation"
888
+ aria-roledescription="Card Header">
889
+
890
+ <div class="fd-card__header-main">
891
+ <div
892
+ tabindex="0"
893
+ role="button"
894
+ aria-labelledby="card-title-1b"
895
+ class="fd-card__header-main-container"
896
+ aria-description="Activate for action/navigation">
897
+
898
+ <span
899
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
900
+
901
+ role="img"
902
+ aria-label="John Doe">
903
+ </span>
904
+ <div class="fd-card__header-text">
905
+ <div class="fd-card__title-area">
906
+ <div class="fd-card__title" id="card-title-1b" role="heading" aria-level="3">Interactive header</div>
907
+ <div class="fd-card__subtitle-area">
908
+ <div class="fd-card__subtitle">Card Subtitle</div>
909
+ </div>
910
+ </div>
911
+ </div>
912
+ </div>
913
+ </div>
914
+
915
+ <div class="fd-card">
916
+
917
+ <div
918
+ class="fd-card__header fd-card__header--interactive"
919
+ role="group"
920
+ title="Activate for action/navigation"
921
+ aria-label="Activate for action/navigation"
922
+ aria-roledescription="Card Header">
923
+
924
+ <div class="fd-card__header-main">
925
+ <div
926
+ tabindex="0"
927
+ role="button"
928
+ aria-labelledby="card-title-2b"
929
+ class="fd-card__header-main-container"
930
+
931
+ aria-description="Activate for action/navigation">
932
+
933
+ <span
934
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
935
+
936
+ role="img"
937
+ aria-label="John Doe">
938
+ </span>
939
+ <div class="fd-card__header-text">
940
+ <div class="fd-card__title-area">
941
+ <div class="fd-card__title" id="card-title-2b" role="heading" aria-level="3">Interactive header</div>
942
+ <div class="fd-card__subtitle-area">
943
+ <div class="fd-card__subtitle">With nested button</div>
944
+ </div>
945
+ </div>
946
+ </div>
947
+
948
+ <div class="fd-card__header-main-actions">
949
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
950
+ <i class="sap-icon--overflow"></i>
951
+ </button>
952
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
953
+ </div>
954
+ </div>
955
+ </div>
956
+ ```
957
+
958
+ ### Interactive card with role listitem
959
+
960
+ The <b>listitem</b> is the recommended role for card. With this role, all interactive variants of the card can be covered:
961
+ - Non-interactive card
962
+ - Non-interactive card with interactive elements inside
963
+ - Interactive card
964
+ - Interactive card with interactive elements
965
+ <br><br>
966
+ 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>
967
+ 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.
968
+
969
+ ```html
970
+ <div role="region" aria-label="Interactive Cards and States">
971
+ <h2>Interactive Cards and States</h2>
972
+ <div
973
+ role="list" aria-roledescription="Card Container"
974
+ >
975
+
976
+ <div
977
+ class="fd-card fd-card--interactive"
978
+
979
+ role="listitem"
980
+ tabindex="0"
981
+ aria-posinset="1"
982
+ aria-setsize="5"
983
+ aria-roledescription="Card"
984
+ aria-description="Activate for action"
985
+ aria-labelledby="card-title-1c">
986
+
987
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
988
+ <div class="fd-card__header-main">
989
+ <div class="fd-card__header-main-container">
990
+ <span
991
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
992
+
993
+ role="img"
994
+ aria-label="John Doe">
995
+ </span>
996
+ <div class="fd-card__header-text">
997
+ <div class="fd-card__title-area">
998
+ <div class="fd-card__title" id="card-title-1c" role="heading" aria-level="3">Normal State</div>
999
+ </div>
1000
+ <div class="fd-card__subtitle-area">
1001
+ <div class="fd-card__subtitle">Card Subtitle</div>
1002
+ </div>
1003
+ </div>
1004
+ </div>
1005
+ </div>
1006
+ </div>
1007
+
1008
+ <div class="fd-card__footer">
1009
+ <div class="fd-card__footer-actions">
1010
+ <button class="fd-button fd-button--positive">
1011
+ Button
1012
+ </button>
1013
+ <button class="fd-button fd-button--negative">
1014
+ Button
1015
+ </button>
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+
1020
+ <div
1021
+ class="fd-card fd-card--interactive is-hover"
1022
+
1023
+ role="listitem"
1024
+ tabindex="0"
1025
+ aria-posinset="2"
1026
+ aria-setsize="5"
1027
+ aria-roledescription="Card"
1028
+ aria-description="Activate for action"
1029
+ aria-labelledby="card-title-2c">
1030
+
1031
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1032
+ <div class="fd-card__header-main">
1033
+ <div class="fd-card__header-main-container">
1034
+ <span
1035
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1036
+
1037
+ role="img"
1038
+ aria-label="John Doe">
1039
+ </span>
1040
+ <div class="fd-card__header-text">
1041
+ <div class="fd-card__title-area">
1042
+ <div class="fd-card__title" id="card-title-2c" role="heading" aria-level="3">Hover state</div>
1043
+ </div>
1044
+ <div class="fd-card__subtitle-area">
1045
+ <div class="fd-card__subtitle">Card Subtitle</div>
1046
+ </div>
1047
+ </div>
1048
+ </div>
1049
+ </div>
1050
+ </div>
1051
+
1052
+ <div class="fd-card__footer">
1053
+ <div class="fd-card__footer-actions">
1054
+ <button class="fd-button fd-button--positive">
1055
+ Button
1056
+ </button>
1057
+ <button class="fd-button fd-button--negative">
1058
+ Button
1059
+ </button>
1060
+ </div>
1061
+ </div>
1062
+
1063
+ <div
1064
+ class="fd-card fd-card--interactive is-active"
1065
+
1066
+ role="listitem"
1067
+ tabindex="0"
1068
+ aria-posinset="3"
1069
+ aria-setsize="5"
1070
+ aria-roledescription="Card"
1071
+ aria-description="Activate for action"
1072
+ aria-labelledby="card-title-3c">
1073
+
1074
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1075
+ <div class="fd-card__header-main">
1076
+ <div class="fd-card__header-main-container">
1077
+ <span
1078
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1079
+
1080
+ role="img"
1081
+ aria-label="John Doe">
1082
+ </span>
1083
+ <div class="fd-card__header-text">
1084
+ <div class="fd-card__title-area">
1085
+ <div class="fd-card__title" id="card-title-3c" role="heading" aria-level="3">Active state</div>
1086
+ </div>
1087
+ <div class="fd-card__subtitle-area">
1088
+ <div class="fd-card__subtitle">Card Subtitle</div>
1089
+ </div>
1090
+ </div>
1091
+ </div>
1092
+ </div>
1093
+ </div>
1094
+
1095
+ <div class="fd-card__footer">
1096
+ <div class="fd-card__footer-actions">
1097
+ <button class="fd-button fd-button--positive">
1098
+ Button
1099
+ </button>
1100
+ <button class="fd-button fd-button--negative">
1101
+ Button
1102
+ </button>
1103
+ </div>
1104
+ </div>
1105
+
1106
+ <div
1107
+ class="fd-card fd-card--interactive is-focus"
1108
+
1109
+ role="listitem"
1110
+ tabindex="0"
1111
+ aria-posinset="4"
1112
+ aria-setsize="5"
1113
+ aria-roledescription="Card"
1114
+ aria-description="Activate for action"
1115
+ aria-labelledby="card-title-4c">
1116
+
1117
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1118
+ <div class="fd-card__header-main">
1119
+ <div class="fd-card__header-main-container">
1120
+ <span
1121
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1122
+
1123
+ role="img"
1124
+ aria-label="John Doe">
1125
+ </span>
1126
+ <div class="fd-card__header-text">
1127
+ <div class="fd-card__title-area">
1128
+ <div class="fd-card__title" id="card-title-4c" role="heading" aria-level="3">Focus state</div>
1129
+ </div>
1130
+ <div class="fd-card__subtitle-area">
1131
+ <div class="fd-card__subtitle">Card Subtitle</div>
1132
+ </div>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ </div>
1137
+
1138
+ <div class="fd-card__footer">
1139
+ <div class="fd-card__footer-actions">
1140
+ <button class="fd-button fd-button--positive">
1141
+ Button
1142
+ </button>
1143
+ <button class="fd-button fd-button--negative">
1144
+ Button
1145
+ </button>
1146
+ </div>
1147
+ </div>
1148
+
1149
+ <div
1150
+ class="fd-card fd-card--interactive is-selected"
1151
+
1152
+ role="listitem"
1153
+ tabindex="0"
1154
+ aria-posinset="5"
1155
+ aria-setsize="5"
1156
+ aria-roledescription="Card"
1157
+ aria-description="Activate for action"
1158
+ aria-labelledby="card-title-5c">
1159
+
1160
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1161
+ <div class="fd-card__header-main">
1162
+ <div class="fd-card__header-main-container">
1163
+ <span
1164
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1165
+
1166
+ role="img"
1167
+ aria-label="John Doe">
1168
+ </span>
1169
+ <div class="fd-card__header-text">
1170
+ <div class="fd-card__title-area">
1171
+ <div class="fd-card__title" id="card-title-5c" role="heading" aria-level="3">Selected state</div>
1172
+ </div>
1173
+ <div class="fd-card__subtitle-area">
1174
+ <div class="fd-card__subtitle">Card Subtitle</div>
1175
+ </div>
1176
+ </div>
1177
+ </div>
1178
+ </div>
1179
+ </div>
1180
+
1181
+ <div class="fd-card__footer">
1182
+ <div class="fd-card__footer-actions">
1183
+ <button class="fd-button fd-button--positive">
1184
+ Button
1185
+ </button>
1186
+ <button class="fd-button fd-button--negative">
1187
+ Button
1188
+ </button>
1189
+ </div>
1190
+ </div>
1191
+ ```
1192
+
1193
+ ### Standard card | Main Header
1194
+
1195
+ The main card header block shows the basic information of the card. It comes in two interactivity variants:
1196
+ - <b>non-interactive</b>: default
1197
+ - <b>interactive</b>: add the <code>.fd-card__header--interactive</code> modifier class to the <code>.fd-card__header</code> base class.
1198
+
1199
+ <br> Building blocks of the Main Header:
1200
+ - <b>title</b>: title is mandatory to explain what content is being displayed to the user. It wraps 3 lines.
1201
+ - <b>avatar</b> (optional): avatar should be displayed in a size S (3rem).
1202
+ - <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).
1203
+ - <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.
1204
+ - <b>interactive element</b> (optional): like an icon button.
1205
+
1206
+ ```html
1207
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1d">
1208
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1209
+ <div class="fd-card__header-main">
1210
+ <div class="fd-card__header-main-container">
1211
+ <span
1212
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1213
+
1214
+ role="img"
1215
+ aria-label="John Doe">
1216
+ </span>
1217
+ <div class="fd-card__header-text">
1218
+ <div class="fd-card__title-area">
1219
+ <div class="fd-card__title" id="card-title-1d" role="heading" aria-level="3">Non-interactive header</div>
1220
+ <div class="fd-card__subtitle-area">
1221
+ <div class="fd-card__subtitle">Card Subtitle</div>
1222
+ </div>
1223
+ </div>
1224
+ <div class="fd-card__header-main-actions">
1225
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1226
+ <i class="sap-icon--overflow"></i>
1227
+ </button>
1228
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1229
+ </div>
1230
+ </div>
1231
+ </div>
1232
+
1233
+ <div class="fd-card__footer">
1234
+ <div class="fd-card__footer-actions">
1235
+ <button class="fd-button fd-button--positive">
1236
+ Button
1237
+ </button>
1238
+ <button class="fd-button fd-button--negative">
1239
+ Button
1240
+ </button>
1241
+ </div>
1242
+ </div>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-2d">
1247
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
1248
+ <div class="fd-card__header-main">
1249
+ <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">
1250
+ <span
1251
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1252
+
1253
+ role="img"
1254
+ aria-label="John Doe">
1255
+ </span>
1256
+ <div class="fd-card__header-text">
1257
+ <div class="fd-card__title-area">
1258
+ <div class="fd-card__title" id="card-title-2d" role="heading" aria-level="3">Interactive header</div>
1259
+ <div class="fd-card__subtitle-area">
1260
+ <div class="fd-card__subtitle">Card Subtitle</div>
1261
+ </div>
1262
+ </div>
1263
+ </div>
1264
+ <div class="fd-card__header-main-actions">
1265
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1266
+ <i class="sap-icon--overflow"></i>
1267
+ </button>
1268
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1269
+ </div>
1270
+ </div>
1271
+ </div>
1272
+
1273
+ <div class="fd-card__footer">
1274
+ <div class="fd-card__footer-actions">
1275
+ <button class="fd-button fd-button--positive">
1276
+ Button
1277
+ </button>
1278
+ <button class="fd-button fd-button--negative">
1279
+ Button
1280
+ </button>
1281
+ </div>
1282
+ </div>
1283
+ </div>
1284
+ </div>
1285
+
1286
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4d">
1287
+ <div class="fd-card__badge-container">
1288
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-6 fd-card__badge">
1289
+ <span class="fd-object-status__text">badge</span>
1290
+ </span>
1291
+ <div class="fd-card__header fd-card__header--interactive" aria-roledescription="Card Header">
1292
+ <div class="fd-card__header-main">
1293
+ <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">
1294
+ <span
1295
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1296
+
1297
+ role="img"
1298
+ aria-label="John Doe">
1299
+ </span>
1300
+ <div class="fd-card__header-text">
1301
+ <div class="fd-card__title-area">
1302
+ <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>
1303
+ </div>
1304
+ <div class="fd-card__subtitle-area">
1305
+ <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>
1306
+ </div>
1307
+ </div>
1308
+ </div>
1309
+ <div class="fd-card__header-main-actions">
1310
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1311
+ </div>
1312
+ </div>
1313
+ </div>
1314
+
1315
+ <div class="fd-card__footer">
1316
+ <a class="fd-link fd-card__footer-link" href="#"><span class="fd-link__content">Footer with a link</span></a>
1317
+ </div>
1318
+ </div>
1319
+ </div>
1320
+
1321
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-5d">
1322
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
1323
+ <div class="fd-card__header-main">
1324
+ <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">
1325
+ <span
1326
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1327
+
1328
+ role="img"
1329
+ aria-label="John Doe">
1330
+ </span>
1331
+ <div class="fd-card__header-text">
1332
+ <div class="fd-card__title-area">
1333
+ <div class="fd-card__title" id="card-title-5d" role="heading" aria-level="3">Card with main, extended and numeric headers</div>
1334
+ <div class="fd-card__subtitle-area">
1335
+ <div class="fd-card__subtitle">Card subtitle</div>
1336
+ </div>
1337
+ </div>
1338
+ </div>
1339
+ <div class="fd-card__header-main-actions">
1340
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1341
+ </div>
1342
+ </div>
1343
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1344
+ <div class="fd-card__header-column">
1345
+ <div class="fd-card__header-row">
1346
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--positive">
1347
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
1348
+ <span class="fd-object-status__text">Positive</span>
1349
+ </span>
1350
+ </div>
1351
+ </div>
1352
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
1353
+ <div class="fd-card__header-row">
1354
+ <div class="fd-text">Timestamp</div>
1355
+ </div>
1356
+ </div>
1357
+ </div>
1358
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
1359
+ <div class="fd-card__header-row">
1360
+ <div class="fd-card__numeric-container">
1361
+ <div class="fd-numeric-content fd-card__numeric-content">
1362
+ <div class="fd-numeric-content__kpi-container">
1363
+ <div class="fd-numeric-content__kpi">1Ñç</div>
1364
+ </div>
1365
+ <div class="fd-numeric-content__scale-container">
1366
+ <div class="fd-numeric-content__scale">
1367
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" role="presentation"></i>
1368
+ <span class="fd-numeric-content__scale-text">M</span>
1369
+ </div>
1370
+ </div>
1371
+ </div>
1372
+ </div>
1373
+ <div class="fd-card__indicator">
1374
+ <div class="fd-card__indicator-title">Indicator 1</div>
1375
+ <div class="fd-card__indicator-value">500k</div>
1376
+ </div>
1377
+ <div class="fd-card__indicator">
1378
+ <div class="fd-card__indicator-title">Indicator 2</div>
1379
+ <div class="fd-card__indicator-value">500k</div>
1380
+ </div>
1381
+ </div>
1382
+ <div class="fd-card__header-row">
1383
+ <label class="fd-form-label">Total value</label>
1384
+ </div>
1385
+ </div>
1386
+ </div>
1387
+
1388
+ </div>
1389
+ </div>
1390
+
1391
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-6d">
1392
+ <div class="fd-card__badge-container">
1393
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-3 fd-card__badge">
1394
+ <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
1395
+ <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>
1396
+ </span>
1397
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1398
+ <div class="fd-card__header-main">
1399
+ <div class="fd-card__header-main-container">
1400
+ <span
1401
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1402
+
1403
+ role="img"
1404
+ aria-label="John Doe">
1405
+ </span>
1406
+ <div class="fd-card__header-text">
1407
+ <div class="fd-card__title-area">
1408
+ <div class="fd-card__title" id="card-title-6d" role="heading" aria-level="3">Card with Badge</div>
1409
+ </div>
1410
+ <div class="fd-card__subtitle-area">
1411
+ <div class="fd-card__subtitle">Badge text truncates</div>
1412
+ </div>
1413
+ </div>
1414
+ </div>
1415
+ </div>
1416
+ </div>
1417
+
1418
+ </div>
1419
+ </div>
1420
+
1421
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-7d">
1422
+ <div class="fd-card__badge-container">
1423
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-5b fd-card__badge">
1424
+ <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
1425
+ <span class="fd-object-status__text">badge</span>
1426
+ </span>
1427
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1428
+ <div class="fd-card__header-main">
1429
+ <div class="fd-card__header-main-container">
1430
+ <span
1431
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1432
+
1433
+ role="img"
1434
+ aria-label="John Doe">
1435
+ </span>
1436
+ <div class="fd-card__header-text">
1437
+ <div class="fd-card__title-area">
1438
+ <div class="fd-card__title" id="card-title-7d" role="heading" aria-level="3">Card with Badge</div>
1439
+ </div>
1440
+ <div class="fd-card__subtitle-area">
1441
+ <div class="fd-card__subtitle">Badge with icon</div>
1442
+ </div>
1443
+ </div>
1444
+ </div>
1445
+ </div>
1446
+ </div>
1447
+
1448
+ </div>
1449
+ </div>
1450
+
1451
+ </div>
1452
+ ```
1453
+
1454
+ ### ExtendedHeader
1455
+
1456
+ 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.
1457
+
1458
+ - <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).
1459
+ - <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.
1460
+
1461
+ ```html
1462
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1e">
1463
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1464
+ <div class="fd-card__header-main">
1465
+ <div class="fd-card__header-main-container">
1466
+ <span
1467
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1468
+
1469
+ role="img"
1470
+ aria-label="John Doe">
1471
+ </span>
1472
+ <div class="fd-card__header-text">
1473
+ <div class="fd-card__title-area">
1474
+ <div class="fd-card__title" id="card-title-1e" role="heading" aria-level="3">Card Title</div>
1475
+ <div class="fd-card__subtitle-area">
1476
+ <div class="fd-card__subtitle">Card Subtitle</div>
1477
+ </div>
1478
+ </div>
1479
+ <div class="fd-card__header-main-actions">
1480
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1481
+ <i class="sap-icon--overflow"></i>
1482
+ </button>
1483
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1484
+ </div>
1485
+ </div>
1486
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1487
+ <div class="fd-card__header-column">
1488
+ <div class="fd-card__header-row">
1489
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--positive">
1490
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
1491
+ <span class="fd-object-status__text">Positive</span>
1492
+ </span>
1493
+
1494
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--informative">
1495
+ <i class="fd-object-status__icon sap-icon--information" role="presentation"></i>
1496
+ <span class="fd-object-status__text">Informative</span>
1497
+ </span>
1498
+ </div>
1499
+ </div>
1500
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
1501
+ <div class="fd-card__header-row">
1502
+ <div class="fd-text">Timestamp</div>
1503
+ </div>
1504
+ </div>
1505
+ </div>
1506
+ </div>
1507
+
1508
+ </div>
1509
+ </div>
1510
+
1511
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-2e">
1512
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1513
+ <div class="fd-card__header-main">
1514
+ <div class="fd-card__header-main-container">
1515
+ <span
1516
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1517
+
1518
+ role="img"
1519
+ aria-label="John Doe">
1520
+ </span>
1521
+ <div class="fd-card__header-text">
1522
+ <div class="fd-card__title-area">
1523
+ <div class="fd-card__title" id="card-title-2e" role="heading" aria-level="3">Card Title</div>
1524
+ <div class="fd-card__subtitle-area">
1525
+ <div class="fd-card__subtitle">Card Subtitle</div>
1526
+ </div>
1527
+ </div>
1528
+ </div>
1529
+ <div class="fd-card__header-main-actions">
1530
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1531
+ <i class="sap-icon--overflow"></i>
1532
+ </button>
1533
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1534
+ </div>
1535
+ </div>
1536
+ <div class="fd-card__header-extended fd-card__header-extended--bottom-aligned" role="group" aria-roledescription="Extended content">
1537
+ <div class="fd-card__header-column">
1538
+ <div class="fd-card__header-row">
1539
+ <span class="fd-object-status fd-object-status--positive">
1540
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
1541
+ <span class="fd-object-status__text">Approved</span>
1542
+ </span>
1543
+ </div>
1544
+ <div class="fd-card__header-row">
1545
+ <div class="fd-text"><b>Travel Request</b></div>
1546
+ </div>
1547
+ <div class="fd-card__header-row">
1548
+ <div class="fd-text">SAP Sapphire Barcelona</div>
1549
+ </div>
1550
+ </div>
1551
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
1552
+
1553
+ <div class="fd-card__header-row">
1554
+ <div class="fd-text">Travel ID: 123456</div>
1555
+ </div>
1556
+ <div class="fd-card__header-row">
1557
+ <div class="fd-text">June 16, 2024</div>
1558
+ </div>
1559
+ </div>
1560
+ </div>
1561
+ </div>
1562
+
1563
+ </div>
1564
+ </div>
1565
+
1566
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-3e">
1567
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1568
+ <div class="fd-card__header-main">
1569
+ <div class="fd-card__header-main-container">
1570
+ <span
1571
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1572
+
1573
+ role="img"
1574
+ aria-label="John Doe">
1575
+ </span>
1576
+ <div class="fd-card__header-text">
1577
+ <div class="fd-card__title-area">
1578
+ <div class="fd-card__title" id="card-title-3e" role="heading" aria-level="3">Card Title</div>
1579
+ <div class="fd-card__subtitle-area">
1580
+ <div class="fd-card__subtitle">Card Subtitle</div>
1581
+ </div>
1582
+ </div>
1583
+ </div>
1584
+ <div class="fd-card__header-main-actions">
1585
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1586
+ <i class="sap-icon--overflow"></i>
1587
+ </button>
1588
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1589
+ </div>
1590
+ </div>
1591
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1592
+ <div class="fd-card__header-column">
1593
+ <div class="fd-card__header-row">
1594
+ <span class="fd-object-status fd-object-status--negative">
1595
+ <i class="fd-object-status__icon sap-icon--error" role="presentation"></i>
1596
+ <span class="fd-object-status__text">Overdue</span>
1597
+ </span>
1598
+ </div>
1599
+ <div class="fd-card__header-row">
1600
+ <div class="fd-text"><b>Invoice ID 987654321</b></div>
1601
+ </div>
1602
+ <div class="fd-card__header-row">
1603
+ <div class="fd-text">EUR 10,000.00, due 26/06/2024</div>
1604
+ </div>
1605
+ </div>
1606
+ </div>
1607
+ </div>
1608
+
1609
+ </div>
1610
+ </div>
1611
+
1612
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-4e">
1613
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1614
+ <div class="fd-card__header-main">
1615
+ <div class="fd-card__header-main-container">
1616
+ <span
1617
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1618
+
1619
+ role="img"
1620
+ aria-label="John Doe">
1621
+ </span>
1622
+ <div class="fd-card__header-text">
1623
+ <div class="fd-card__title-area">
1624
+ <div class="fd-card__title" id="card-title-4e" role="heading" aria-level="3">Card Title</div>
1625
+ <div class="fd-card__subtitle-area">
1626
+ <div class="fd-card__subtitle">Card Subtitle</div>
1627
+ </div>
1628
+ </div>
1629
+ </div>
1630
+ <div class="fd-card__header-main-actions">
1631
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1632
+ <i class="sap-icon--overflow"></i>
1633
+ </button>
1634
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1635
+ </div>
1636
+ </div>
1637
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1638
+ <div class="fd-card__header-column fd-card__header-column--right-aligned">
1639
+ <div class="fd-card__header-row">
1640
+ <div class="fd-rating-indicator fd-rating-indicator--sm">
1641
+ <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
1642
+ <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">
1643
+ <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-s-0" aria-hidden="true"></label>
1644
+
1645
+ <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-s-1" name="rating-s" value="1">
1646
+ <label class="fd-rating-indicator__label" for="rating-s-1"></label>
1647
+
1648
+ <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-s-2" name="rating-s" value="2" checked>
1649
+ <label class="fd-rating-indicator__label" for="rating-s-2"></label>
1650
+
1651
+ <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-s-3" name="rating-s" value="3">
1652
+ <label class="fd-rating-indicator__label" for="rating-s-3"></label>
1653
+
1654
+ <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-s-4" name="rating-s" value="4">
1655
+ <label class="fd-rating-indicator__label" for="rating-s-4"></label>
1656
+
1657
+ <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-s-5" name="rating-s" value="5">
1658
+ <label class="fd-rating-indicator__label" for="rating-s-5"></label>
1659
+ </div>
1660
+ <span class="fd-rating-indicator__dynamic-text">(205)</span>
1661
+ </div>
1662
+ </div>
1663
+ </div>
1664
+ </div>
1665
+ </div>
1666
+
1667
+ </div>
1668
+ </div>
1669
+ </div>
1670
+ ```
1671
+
1672
+ ### NumericHeader
1673
+
1674
+ The numeric header block is designed for displaying numeric information.
1675
+
1676
+ ```html
1677
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1f">
1678
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1679
+ <div class="fd-card__header-main">
1680
+ <div class="fd-card__header-main-container">
1681
+ <span
1682
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
1683
+
1684
+ role="img"
1685
+ aria-label="John Doe">
1686
+ </span>
1687
+ <div class="fd-card__header-text">
1688
+ <div class="fd-card__title-area">
1689
+ <div class="fd-card__title" id="card-title-1f" role="heading" aria-level="3">Card Title</div>
1690
+ <div class="fd-card__subtitle-area">
1691
+ <div class="fd-card__subtitle">Card Subtitle</div>
1692
+ </div>
1693
+ </div>
1694
+ <div class="fd-card__header-main-actions">
1695
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1696
+ <i class="sap-icon--overflow"></i>
1697
+ </button>
1698
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1699
+ </div>
1700
+ </div>
1701
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
1702
+ <div class="fd-card__header-row">
1703
+ <div class="fd-card__numeric-container">
1704
+ <div class="fd-numeric-content fd-card__numeric-content">
1705
+ <div class="fd-numeric-content__kpi-container">
1706
+ <div class="fd-numeric-content__kpi">1Ñç</div>
1707
+ </div>
1708
+ <div class="fd-numeric-content__scale-container">
1709
+ <div class="fd-numeric-content__scale">
1710
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" role="presentation"></i>
1711
+ <span class="fd-numeric-content__scale-text">M</span>
1712
+ </div>
1713
+ </div>
1714
+ </div>
1715
+ </div>
1716
+ <div class="fd-card__indicator">
1717
+ <div class="fd-card__indicator-title">Indicator 1</div>
1718
+ <div class="fd-card__indicator-value">500k</div>
1719
+ </div>
1720
+ <div class="fd-card__indicator">
1721
+ <div class="fd-card__indicator-title">Indicator 2</div>
1722
+ <div class="fd-card__indicator-value">500k</div>
1723
+ </div>
1724
+ </div>
1725
+ <div class="fd-card__header-row">
1726
+ <label class="fd-form-label">Total value</label>
1727
+ </div>
1728
+ </div>
1729
+ </div>
1730
+
1731
+ </div>
1732
+ </div>
1733
+ </div>
1734
+ ```
1735
+
1736
+ ### Alternative Icon on Card Header
1737
+
1738
+ 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.
1739
+
1740
+ <br><b>Icon Sizes</b>
1741
+
1742
+ <table>
1743
+ <thead>
1744
+ <tr>
1745
+ <th>Size</th>
1746
+ <th>font-size</th>
1747
+ <th>Icon Modifier Class</th>
1748
+ </tr>
1749
+ </thead>
1750
+ <tbody>
1751
+ <tr>
1752
+ <td>S</td>
1753
+ <td>1rem</td>
1754
+ <td><code>.sap-icon--sm</code></td>
1755
+ </tr>
1756
+ <tr>
1757
+ <td>M</td>
1758
+ <td>2rem</td>
1759
+ <td><code>.sap-icon--md</code></td>
1760
+ </tr>
1761
+ <tr>
1762
+ <td>L</td>
1763
+ <td>3rem</td>
1764
+ <td><code>.sap-icon--lg</code></td>
1765
+ </tr>
1766
+ </tbody>
1767
+ </table>
1768
+
1769
+ <br><br>
1770
+ <b>Semantic Notification / Message Icons</b>
1771
+
1772
+ <table>
1773
+ <thead>
1774
+ <tr>
1775
+ <th>Description</th>
1776
+ <th>Icon Name</th>
1777
+ <th>Icon Modifier Class</th>
1778
+ <th>Color Modifier Class</th>
1779
+ </tr>
1780
+ </thead>
1781
+ <tbody>
1782
+ <tr>
1783
+ <td>Negative Notification</td>
1784
+ <td>error</td>
1785
+ <td><code>.sap-icon--error</code></td>
1786
+ <td><code>.sap-icon--color-negative</code></td>
1787
+ </tr>
1788
+ <tr>
1789
+ <td>Critical Notification</td>
1790
+ <td>alert</td>
1791
+ <td><code>.sap-icon--alert</code></td>
1792
+ <td><code>.sap-icon--color-critical</code></td>
1793
+ </tr>
1794
+ <tr>
1795
+ <td>Positive Notification</td>
1796
+ <td>sys-enter-2</td>
1797
+ <td><code>.sap-icon--sys-enter-2</code></td>
1798
+ <td><code>.sap-icon--color-positive</code></td>
1799
+ </tr>
1800
+ <tr>
1801
+ <td>Information Notification</td>
1802
+ <td>information</td>
1803
+ <td><code>.sap-icon--information</code></td>
1804
+ <td><code>.sap-icon--color-information</code></td>
1805
+ </tr>
1806
+ <tr>
1807
+ <td>Neutral Notification</td>
1808
+ <td>sys-help-2</td>
1809
+ <td><code>.sap-icon--sys-help-2</code></td>
1810
+ <td><code>.sap-icon--color-neutral</code></td>
1811
+ </tr>
1812
+ </tbody>
1813
+ </table>
1814
+
1815
+ ```html
1816
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-1a">
1817
+
1818
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1819
+ <div class="fd-card__header-main">
1820
+ <div class="fd-card__header-main-container">
1821
+ <span class="sap-icon sap-icon--error sap-icon--color-negative" role="presentation" aria-hidden="true" aria-label="negative notification"></span>
1822
+
1823
+ <div class="fd-card__header-text">
1824
+ <div class="fd-card__title-area">
1825
+ <div class="fd-card__title" id="card-title-1a" role="heading" aria-level="3">Non-interactive header</div>
1826
+ <div class="fd-card__subtitle-area">
1827
+ <div class="fd-card__subtitle">Card Subtitle</div>
1828
+ </div>
1829
+ </div>
1830
+ <div class="fd-card__header-main-actions">
1831
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1832
+ <i class="sap-icon--overflow"></i>
1833
+ </button>
1834
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1835
+ </div>
1836
+ </div>
1837
+ </div>
1838
+
1839
+ <div class="fd-card__footer">
1840
+ <div class="fd-card__footer-actions">
1841
+ <button class="fd-button fd-button--positive">
1842
+ Button
1843
+ </button>
1844
+ <button class="fd-button fd-button--negative">
1845
+ Button
1846
+ </button>
1847
+ </div>
1848
+ </div>
1849
+ </div>
1850
+ </div>
1851
+
1852
+ <div class="fd-card" role="region" aria-labelledby="card-title-2a">
1853
+ <div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header">
1854
+ <div class="fd-card__header-main">
1855
+ <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">
1856
+ <span class="sap-icon sap-icon--alert sap-icon--color-critical sap-icon--md" role="presentation" aria-hidden="true" aria-label="critical notification"></span>
1857
+
1858
+ <div class="fd-card__header-text">
1859
+ <div class="fd-card__title-area">
1860
+ <div class="fd-card__title" id="card-title-2a" role="heading" aria-level="3">Interactive Header</div>
1861
+ <div class="fd-card__subtitle-area">
1862
+ <div class="fd-card__subtitle">Card Subtitle</div>
1863
+ </div>
1864
+ </div>
1865
+ </div>
1866
+ <div class="fd-card__header-main-actions">
1867
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1868
+ <i class="sap-icon--overflow"></i>
1869
+ </button>
1870
+ <span class="fd-object-status fd-card__counter">1 of 3</span>
1871
+ </div>
1872
+ </div>
1873
+ </div>
1874
+
1875
+ <div class="fd-card__footer">
1876
+ <div class="fd-card__footer-actions">
1877
+ <button class="fd-button fd-button--positive">
1878
+ Button
1879
+ </button>
1880
+ <button class="fd-button fd-button--negative">
1881
+ Button
1882
+ </button>
1883
+ </div>
1884
+ </div>
1885
+ </div>
1886
+ </div>
1887
+
1888
+ <div class="fd-card" role="region" aria-roledescription="Card" aria-labelledby="card-title-33a">
1889
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
1890
+ <div class="fd-card__header-main">
1891
+ <div class="fd-card__header-main-container">
1892
+ <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>
1893
+
1894
+ <div class="fd-card__header-text">
1895
+ <div class="fd-card__title-area">
1896
+ <div class="fd-card__title" id="card-title-33a" role="heading" aria-level="3">Request Approval</div>
1897
+ <div class="fd-card__subtitle-area">
1898
+ <div class="fd-card__subtitle">Marie Johnson</div>
1899
+ </div>
1900
+ </div>
1901
+ </div>
1902
+ <div class="fd-card__header-main-actions">
1903
+ <button class="fd-button fd-button--transparent" aria-label="overflow">
1904
+ <i class="sap-icon--overflow"></i>
1905
+ </button>
1906
+ <span class="fd-object-status fd-card__counter">2 of 5</span>
1907
+ </div>
1908
+ </div>
1909
+ <div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
1910
+ <div class="fd-card__header-column">
1911
+ <div class="fd-card__header-row">
1912
+ Travel to <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Las Vegas</span></a>
1913
+ </div>
1914
+ <div class="fd-card__header-row">
1915
+ May 3rd - 5th
1916
+ </div>
1917
+ </div>
1918
+ </div>
1919
+ <div class="fd-card__header-numeric" role="group" aria-roledescription="Numeric content">
1920
+ <div class="fd-card__header-row">
1921
+ <div class="fd-card__numeric-container">
1922
+ <div class="fd-numeric-content fd-card__numeric-content">
1923
+ <div class="fd-numeric-content__kpi-container">
1924
+ <div class="fd-numeric-content__kpi">3,954.00</div>
1925
+ </div>
1926
+ <div class="fd-numeric-content__scale-container">
1927
+ <div class="fd-numeric-content__scale">
1928
+ <span class="fd-numeric-content__scale-text">EUR</span>
1929
+ </div>
1930
+ </div>
1931
+ </div>
1932
+ </div>
1933
+ </div>
1934
+ </div>
1935
+ </div>
1936
+ <div class="fd-card__footer">
1937
+ <div class="fd-card__footer-actions">
1938
+ <button class="fd-button fd-button--positive">
1939
+ Approve
1940
+ </button>
1941
+ <button class="fd-button fd-button--negative">
1942
+ Send Back
1943
+ </button>
1944
+ </div>
1945
+ </div>
1946
+ </div>
1947
+ </div>
1948
+ </div>
1949
+ ```
1950
+
1951
+ ### Empty State
1952
+
1953
+ Use Illustrated Messages component inside the Card content to represent an empty state. The content container has 1rem spacing.
1954
+
1955
+ ```html
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 class="fd-card__subtitle-area">
1964
+ <div class="fd-card__subtitle">Card Subtitle</div>
1965
+ </div>
1966
+ </div>
1967
+ </div>
1968
+ </div>
1969
+ <div class="fd-card__content" role="group" aria-roledescription="Card content">
1970
+ <div class="fd-illustrated-message-container">
1971
+ <figure class="fd-illustrated-message">
1972
+ <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">
1973
+ <path class="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"/>
1974
+ <path class="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"/>
1975
+ <path class="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"/>
1976
+ <path class="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"/>
1977
+ <path class="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"/>
1978
+ <path class="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"/>
1979
+ <path class="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"/>
1980
+ <path class="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"/>
1981
+ <path class="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"/>
1982
+ <path class="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"/>
1983
+ <path class="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"/>
1984
+ <path class="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"/>
1985
+ <path class="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"/>
1986
+ <path class="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"/>
1987
+ <path class="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"/>
1988
+ <path class="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"/>
1989
+ <path class="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"/>
1990
+ <path class="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"/>
1991
+ <path class="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)"/>
1992
+ <path class="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"/>
1993
+ <path class="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"/>
1994
+ </svg>
1995
+
1996
+ <figcaption class="fd-illustrated-message__figcaption">
1997
+ <h2 class="fd-illustrated-message__title">Unable to load data</h2>
1998
+ <p class="fd-illustrated-message__text">Try reloading, if that doesn't help check with your administratior.</p>
1999
+ </figcaption>
2000
+
2001
+ <div class="fd-illustrated-message__actions">
2002
+ <button class="fd-button">Reload</button>
2003
+ </div>
2004
+ </figure>
2005
+ </div>
2006
+ </div>
2007
+ </div>
2008
+ </div>
2009
+ </div>
2010
+ ```
2011
+
2012
+ ### Analytical card
2013
+
2014
+ 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 \
2015
+
2016
+ ```html
2017
+ <div class="fd-card fd-card--analytical" role="region" aria-labelledby="analytical-card-title-1" aria-roledescription="Card">
2018
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
2019
+ <div class="fd-card__header-main">
2020
+ <div class="fd-card__header-main-container">
2021
+ <div class="fd-card__header-text">
2022
+ <div class="fd-card__title-area">
2023
+ <div class="fd-card__title" id="analytical-card-title-1" role="heading" aria-level="3">Card Title</div>
2024
+ <span class="fd-object-status fd-card__counter">Counter</span>
2025
+ <div class="fd-card__subtitle-area">
2026
+ <div class="fd-card__subtitle">Card Subtitle</div>
2027
+ <div class="fd-card__currency">Currency</div>
2028
+ <div class="fd-card__analytics-area">
2029
+ <div class="fd-numeric-content fd-card__numeric-content">
2030
+ <div class="fd-numeric-content__kpi-container">
2031
+ <div class="fd-numeric-content__kpi">1Ñç</div>
2032
+ </div>
2033
+ <div class="fd-numeric-content__scale-container">
2034
+ <div class="fd-numeric-content__scale">
2035
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
2036
+ <span class="fd-numeric-content__scale-text">M</span>
2037
+ </div>
2038
+ </div>
2039
+ </div>
2040
+ <div class="fd-card__analytics-container">
2041
+ <div class="fd-card__analytics">
2042
+ <div class="fd-card__analytics-text">Target</div>
2043
+ <div class="fd-card__analytics-content">110K</div>
2044
+ </div>
2045
+ <div class="fd-card__analytics">
2046
+ <div class="fd-card__analytics-text">Deviation</div>
2047
+ <div class="fd-card__analytics-content">-35.7%</div>
2048
+ </div>
2049
+ </div>
2050
+ </div>
2051
+ <div class="fd-card__second-subtitle">Second Subtitle</div>
2052
+ </div>
2053
+ </div>
2054
+ </div>
2055
+ </div>
2056
+
2057
+ </div>
2058
+ </div>
2059
+
2060
+ <div class="fd-card fd-card--analytical" role="region" aria-labelledby="analytical-card-title-2" aria-roledescription="Card">
2061
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
2062
+ <div class="fd-card__header-main">
2063
+ <div class="fd-card__header-main-container">
2064
+ <div class="fd-card__header-text">
2065
+ <div class="fd-card__title-area">
2066
+ <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>
2067
+ <span class="fd-object-status fd-card__counter">Counter</span>
2068
+ <div class="fd-card__subtitle-area">
2069
+ <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>
2070
+ <div class="fd-card__currency">Currency</div>
2071
+ </div>
2072
+ <div class="fd-card__analytics-area">
2073
+ <div class="fd-numeric-content fd-card__numeric-content">
2074
+ <div class="fd-numeric-content__kpi-container">
2075
+ <div class="fd-numeric-content__kpi">1Ñç</div>
2076
+ </div>
2077
+ <div class="fd-numeric-content__scale-container">
2078
+ <div class="fd-numeric-content__scale">
2079
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
2080
+ <span class="fd-numeric-content__scale-text">M</span>
2081
+ </div>
2082
+ </div>
2083
+ </div>
2084
+ <div class="fd-card__analytics-container">
2085
+ <div class="fd-card__analytics">
2086
+ <div class="fd-card__analytics-text">Target</div>
2087
+ <div class="fd-card__analytics-content">110K</div>
2088
+ </div>
2089
+ <div class="fd-card__analytics">
2090
+ <div class="fd-card__analytics-text">Deviation</div>
2091
+ <div class="fd-card__analytics-content">-35.7%</div>
2092
+ </div>
2093
+ </div>
2094
+ </div>
2095
+ <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>
2096
+ </div>
2097
+ </div>
2098
+ </div>
2099
+ <div class="fd-card__badge-container">
2100
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-5b fd-card__badge">
2101
+ <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
2102
+ <span class="fd-object-status__text">badge</span>
2103
+ </span>
2104
+ </div>
2105
+
2106
+ </div>
2107
+
2108
+ </div>
2109
+ </div>
2110
+ </div>
2111
+ ```
2112
+
2113
+ ### List card
2114
+
2115
+ 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.
2116
+
2117
+ ```html
2118
+ <div class="fd-card" role="region" aria-label="List Card Example 1" aria-labelledby="list-card-title-1">
2119
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header">
2120
+ <div class="fd-card__header-main">
2121
+ <div class="fd-card__header-main-container">
2122
+ <div class="fd-card__header-text">
2123
+ <div class="fd-card__title-area">
2124
+ <div class="fd-card__title" id="list-card-title-1" role="heading" aria-level="3">Quick Links</div>
2125
+ </div>
2126
+ <div class="fd-card__header-main-actions">
2127
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
2128
+ </div>
2129
+ </div>
2130
+ </div>
2131
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
2132
+ <ul class="fd-list fd-list--no-border" role="list">
2133
+ <li role="listitem" tabindex="0" class="fd-list__item">
2134
+ <i role="presentation" class="fd-list__icon sap-icon--cart"></i>
2135
+ <span class="fd-list__title">List item 1</span>
2136
+ </li>
2137
+ <li role="listitem" tabindex="0" class="fd-list__item">
2138
+ <i role="presentation" class="fd-list__icon sap-icon--wrench"></i>
2139
+ <span class="fd-list__title">List item 2</span>
2140
+ </li>
2141
+ <li role="listitem" tabindex="0" class="fd-list__item">
2142
+ <i role="presentation" class="fd-list__icon sap-icon--leads"></i>
2143
+ <span class="fd-list__title">List item 3</span>
2144
+ </li>
2145
+ <li role="listitem" tabindex="0" class="fd-list__item">
2146
+ <i role="presentation" class="fd-list__icon sap-icon--batch-payments"></i>
2147
+ <span class="fd-list__title">List item 4</span>
2148
+ </li>
2149
+ <li role="listitem" tabindex="0" class="fd-list__item">
2150
+ <i role="presentation" class="fd-list__icon sap-icon--retail-store"></i>
2151
+ <span class="fd-list__title">List item 3</span>
2152
+ </li>
2153
+ <li role="listitem" tabindex="0" class="fd-list__item">
2154
+ <i role="presentation" class="fd-list__icon sap-icon--travel-expense"></i>
2155
+ <span class="fd-list__title">List item 4</span>
2156
+ </li>
2157
+ </ul>
2158
+ </div>
2159
+ </div>
2160
+ </div>
2161
+ </div>
2162
+ ```
2163
+
2164
+ ### Table card
2165
+
2166
+ Cards can display tables within the content area. To display a table card, add the `fd-card--table` modifier class to the main element.
2167
+
2168
+ ```html
2169
+ <div class="fd-card fd-card--table" role="region" aria-label="Table Card Example 1">
2170
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="table-card-title-1">
2171
+ <div class="fd-card__header-main">
2172
+ <div class="fd-card__header-main-container">
2173
+ <div class="fd-card__header-text">
2174
+ <div class="fd-card__title-area">
2175
+ <div class="fd-card__title" id="table-card-title-1" role="heading" aria-level="3">Table Card</div>
2176
+ </div>
2177
+ <div class="fd-card__header-main-actions">
2178
+ <span class="fd-object-status fd-card__counter">2 of 20</span>
2179
+ </div>
2180
+ </div>
2181
+ </div>
2182
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
2183
+ <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--no-outer-border fd-table--top-border">
2184
+ <thead class="fd-table__header">
2185
+ <tr class="fd-table__row">
2186
+ <th class="fd-table__cell" scope="col">Name</th>
2187
+ <th class="fd-table__cell" scope="col">Status</th>
2188
+ <th class="fd-table__cell" scope="col">Price</th>
2189
+ <th class="fd-table__cell" scope="col">Country</th>
2190
+ <th class="fd-table__cell"></th>
2191
+ </tr>
2192
+ </thead>
2193
+ <tbody class="fd-table__body">
2194
+ <tr class="fd-table__row">
2195
+ <td class="fd-table__cell">Banana</td>
2196
+ <td class="fd-table__cell">
2197
+ <span class="fd-object-status fd-object-status--positive">
2198
+ Available
2199
+ </span>
2200
+ </td>
2201
+ <td class="fd-table__cell">5 EUR</td>
2202
+ <td class="fd-table__cell">India</td>
2203
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
2204
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
2205
+ </td>
2206
+ </tr>
2207
+ <tr class="fd-table__row">
2208
+ <td class="fd-table__cell">Pineapple</td>
2209
+ <td class="fd-table__cell">
2210
+ <span class="fd-object-status fd-object-status--negative">
2211
+ Out of stock
2212
+ </span>
2213
+ </td>
2214
+ <td class="fd-table__cell">2 EUR</td>
2215
+ <td class="fd-table__cell">Mexico</td>
2216
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
2217
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
2218
+ </td>
2219
+ </tr>
2220
+ <tr class="fd-table__row">
2221
+ <td class="fd-table__cell">Orange</td>
2222
+ <td class="fd-table__cell">
2223
+ <span class="fd-object-status fd-object-status--informative">
2224
+ Temporary unavailable
2225
+ </span>
2226
+ </td>
2227
+ <td class="fd-table__cell">6 EUR</td>
2228
+ <td class="fd-table__cell">Spain</td>
2229
+ <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
2230
+ <i role="presentation" class="fd-table__icon fd-table__icon--navigation sap-icon--navigation-right-arrow"></i>
2231
+ </td>
2232
+ </tr>
2233
+ </tbody>
2234
+ </table>
2235
+ </div>
2236
+ </div>
2237
+ </div>
2238
+ </div>
2239
+ ```
2240
+
2241
+ ### Object card
2242
+
2243
+ 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 \
2244
+
2245
+ ```html
2246
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 1">
2247
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-1">
2248
+ <div class="fd-card__header-main">
2249
+ <div class="fd-card__header-main-container">
2250
+ <span
2251
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
2252
+
2253
+ role="img"
2254
+ aria-label="John Doe">
2255
+ </span>
2256
+ <div class="fd-card__header-text">
2257
+ <div class="fd-card__title-area">
2258
+ <div class="fd-card__title" id="object-card-title-1" role="heading" aria-level="3">Card Title</div>
2259
+ <div class="fd-card__subtitle-area">
2260
+ <div class="fd-card__subtitle">Card Subtitle</div>
2261
+ </div>
2262
+ </div>
2263
+ </div>
2264
+ </div>
2265
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
2266
+ <div class="fd-card__content-container">
2267
+ <div class="fd-card__content-section">
2268
+ <div class="fd-card__content-title-container">Group Title 1</div>
2269
+ <div class="fd-card__content-group">
2270
+ <div class="fd-card__content-group-text">
2271
+ <span>Label</span>
2272
+ <span>Text</span>
2273
+ </div>
2274
+ </div>
2275
+ <div class="fd-card__content-group">
2276
+ <div class="fd-card__content-group-text">
2277
+ <span>Label</span>
2278
+ <span>Text</span>
2279
+ </div>
2280
+ </div>
2281
+ <div class="fd-card__content-group">
2282
+ <div class="fd-card__content-group-text">
2283
+ <span>Label</span>
2284
+ <span>Text</span>
2285
+ </div>
2286
+ </div>
2287
+ </div>
2288
+ <div class="fd-card__content-section">
2289
+ <div class="fd-card__content-title-container">Group Title 2</div>
2290
+ <div class="fd-card__content-group">
2291
+ <div class="fd-card__content-group-text">
2292
+ <span>Label</span>
2293
+ <span>Text</span>
2294
+ </div>
2295
+ </div>
2296
+ <div class="fd-card__content-group">
2297
+ <div class="fd-card__content-group-text">
2298
+ <span>Label</span>
2299
+ <span>Text</span>
2300
+ </div>
2301
+ </div>
2302
+ <div class="fd-card__content-group">
2303
+ <div class="fd-card__content-group-text">
2304
+ <span>Label Only</span>
2305
+ </div>
2306
+ </div>
2307
+ </div>
2308
+ </div>
2309
+ </div>
2310
+ </div>
2311
+ </div>
2312
+
2313
+ <div class="fd-card fd-card--object" role="region" aria-label="Object Card Example 2">
2314
+ <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="object-card-title-2">
2315
+ <div class="fd-card__header-main">
2316
+ <div class="fd-card__header-main-container">
2317
+ <span
2318
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail fd-card__avatar"
2319
+
2320
+ role="img"
2321
+ aria-label="John Doe">
2322
+ </span>
2323
+ <div class="fd-card__header-text">
2324
+ <div class="fd-card__title-area">
2325
+ <div class="fd-card__title" id="object-card-title-2" role="heading" aria-level="3">Card Title</div>
2326
+ <div class="fd-card__subtitle-area">
2327
+ <div class="fd-card__subtitle">Card Subtitle</div>
2328
+ </div>
2329
+ </div>
2330
+ </div>
2331
+ </div>
2332
+ </div>
2333
+ <div class="fd-card__content" role="group" aria-roledescription="Card Content">
2334
+ <div class="fd-card__content-container fd-card__content-container--horizontal">
2335
+ <div class="fd-card__content-section">
2336
+ <div class="fd-card__content-title-container">
2337
+ <h3>Group Title 1</h3>
2338
+ </div>
2339
+ <div class="fd-card__content-group">
2340
+ <span class="fd-avatar fd-avatar--xs fd-avatar--circle" aria-label="Avatar">
2341
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
2342
+ </span>
2343
+ <div class="fd-card__content-group-text">
2344
+ <span>Label</span>
2345
+ <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Link Text</span></a>
2346
+ </div>
2347
+ </div>
2348
+ <div class="fd-card__content-group">
2349
+ <div class="fd-card__content-group-text">
2350
+ <span>Label</span>
2351
+ <span>Text</span>
2352
+ </div>
2353
+ </div>
2354
+ <div class="fd-card__content-group">
2355
+ <div class="fd-card__content-group-text">
2356
+ <span>Label</span>
2357
+ <span>Text</span>
2358
+ </div>
2359
+ </div>
2360
+ </div>
2361
+ <div class="fd-card__content-section">
2362
+ <div class="fd-card__content-title-container">
2363
+ <h3>Group Title 2</h3>
2364
+ </div>
2365
+ <div class="fd-card__content-group">
2366
+ <span class="fd-avatar fd-avatar--xs fd-avatar--circle" aria-label="Avatar">
2367
+ <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation"></i>
2368
+ </span>
2369
+ <div class="fd-card__content-group-text">
2370
+ <span>Label</span>
2371
+ </div>
2372
+ </div>
2373
+ <div class="fd-card__content-group">
2374
+ <div class="fd-card__content-group-text">
2375
+ <span>Label</span>
2376
+ <span>Text</span>
2377
+ </div>
2378
+ </div>
2379
+ <div class="fd-card__content-group">
2380
+ <div class="fd-card__content-group-text">
2381
+ <span>Label</span>
2382
+ <span>Text</span>
2383
+ </div>
2384
+ </div>
2385
+ </div>
2386
+ </div>
2387
+ </div>
2388
+ </div>
2389
+ </div>
2390
+ </div>
2391
+ ```
2392
+
2393
+ ## Accessibility
2394
+
2395
+ - Use semantic HTML elements where appropriate
2396
+ - Include proper ARIA attributes for interactive elements
2397
+ - Ensure keyboard navigation support
2398
+ - Provide adequate color contrast
2399
+
2400
+ ## Source
2401
+
2402
+ This documentation was automatically generated from: `packages/styles/stories/Components/card/card.stories.js`
2403
+
2404
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).