@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/dynamic-page-dynamic-page.md ADDED
@@ -0,0 +1,1914 @@
1
+ ---
2
+ component: fd-dynamic-page
3
+ title: Layouts/Dynamic Page
4
+ category: Layouts
5
+ selector: fd-dynamic-page
6
+ cssFile: dynamic-page.css
7
+ sourcePath: packages/styles/stories/Layouts/dynamic-page/dynamic-page.stories.js
8
+ tags: []
9
+ dependencies: ["avatar","bar","breadcrumb","button","dynamic-page","facet","form-label","icon","link","margins","object-number","object-status","paddings","popover","rating-indicator","tabs","text","title","toolbar"]
10
+ relatedComponents: ["avatar","bar","breadcrumb","button","dynamic-page","facet","form-label","icon","link","margins","object-number","object-status","paddings","popover","rating-indicator","tabs","text","title","toolbar"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.713Z
13
+ ---
14
+
15
+ # Layouts/Dynamic Page
16
+
17
+ The dynamic page is the foundation for all pages in SAP. It is a generic layout designed to support various use cases; therefore, the content of both the header and page can vary.
18
+ The header of the dynamic page is collapsible, which helps the users focus on the actual page content but still ensures that important header information and actions are readily available.
19
+
20
+ ## Usage
21
+ **Use the dynamic page if:**
22
+
23
+ - You want to build a freestyle application that uses the foundation layout components for SAP pages, such as the dynamic page header and the footer toolbar.
24
+
25
+ **Do not use the dynamic page if:**
26
+
27
+ - You only need to display a small amount of information. In this case, use a **Dialog** instead. If you can’t avoid using the dynamic page, use letterboxing to mitigate the issue.
28
+
29
+
30
+ ## Structure
31
+ **Dynamic page consists of the following elements:**
32
+
33
+ - \
34
+
35
+ ## When Not To Use
36
+
37
+ - You only need to display a small amount of information. In this case, use a **Dialog** instead. If you can’t avoid using the dynamic page, use letterboxing to mitigate the issue.
38
+
39
+ ## Dependencies
40
+
41
+ This component depends on the following CSS files:
42
+
43
+ - `avatar.css`
44
+ - `bar.css`
45
+ - `breadcrumb.css`
46
+ - `button.css`
47
+ - `dynamic-page.css`
48
+ - `facet.css`
49
+ - `form-label.css`
50
+ - `icon.css`
51
+ - `link.css`
52
+ - `margins.css`
53
+ - `object-number.css`
54
+ - `object-status.css`
55
+ - `paddings.css`
56
+ - `popover.css`
57
+ - `rating-indicator.css`
58
+ - `tabs.css`
59
+ - `text.css`
60
+ - `title.css`
61
+ - `toolbar.css`
62
+
63
+ ## Installation
64
+
65
+ ```bash
66
+ npm install fundamental-styles
67
+ ```
68
+
69
+ ```html
70
+ <!-- Include theme -->
71
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
72
+
73
+ <!-- Include component CSS -->
74
+ <link href="node_modules/fundamental-styles/dist/dynamic-page.css" rel="stylesheet">
75
+
76
+ <!-- Include dependencies -->
77
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
78
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
79
+ <link href="node_modules/fundamental-styles/dist/breadcrumb.css" rel="stylesheet">
80
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
81
+ <link href="node_modules/fundamental-styles/dist/dynamic-page.css" rel="stylesheet">
82
+ <link href="node_modules/fundamental-styles/dist/facet.css" rel="stylesheet">
83
+ <link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
84
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
85
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
86
+ <link href="node_modules/fundamental-styles/dist/margins.css" rel="stylesheet">
87
+ <link href="node_modules/fundamental-styles/dist/object-number.css" rel="stylesheet">
88
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
89
+ <link href="node_modules/fundamental-styles/dist/paddings.css" rel="stylesheet">
90
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
91
+ <link href="node_modules/fundamental-styles/dist/rating-indicator.css" rel="stylesheet">
92
+ <link href="node_modules/fundamental-styles/dist/tabs.css" rel="stylesheet">
93
+ <link href="node_modules/fundamental-styles/dist/text.css" rel="stylesheet">
94
+ <link href="node_modules/fundamental-styles/dist/title.css" rel="stylesheet">
95
+ <link href="node_modules/fundamental-styles/dist/toolbar.css" rel="stylesheet">
96
+ ```
97
+
98
+ ## Basic Usage
99
+
100
+ ```html
101
+ <article class="fd-dynamic-page fd-dynamic-page--xl" aria-roledescription="Dynamic Page">
102
+ <header class="fd-dynamic-page__header">
103
+ <span
104
+ role="button"
105
+ aria-expanded="true"
106
+ aria-labelledby="fd-dynamic-page-title-1"
107
+ aria-label="Toggle header"
108
+ tabindex="0"
109
+ class="fd-dynamic-page__header-button">
110
+ </span>
111
+ <div class="fd-dynamic-page__title-area">
112
+ <div class="fd-dynamic-page__main-container">
113
+ <div class="fd-dynamic-page__breadcrumb-title-container">
114
+ <nav aria-label="Breadcrumbs">
115
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
116
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
117
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
118
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
119
+ </ul>
120
+ </nav>
121
+ <div class="fd-dynamic-page__title-container">
122
+ <div
123
+ id="fd-dynamic-page-title-1"
124
+ aria-level="2"
125
+ role="heading"
126
+ class="fd-title fd-dynamic-page__title"
127
+ title="Balenciaga Triple S Trainers">
128
+ Balenciaga Triple S Trainers
129
+ </div>
130
+ <div class="fd-dynamic-page__title-content" title="Some RANDOM things"> Some RANDOM things </div>
131
+ <div class="fd-dynamic-page__toolbar-container">
132
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
133
+ <button class="fd-button fd-button--positive">Accept</button>
134
+ <button class="fd-button fd-button--reject">Reject</button>
135
+ <span class="fd-toolbar__separator"></span>
136
+ </div>
137
+ <div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
138
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
139
+ <i class="sap-icon--resize"></i>
140
+ </button>
141
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
142
+ <i class="sap-icon--exitfullscreen"></i>
143
+ </button>
144
+ <button class="fd-button fd-button--transparent" aria-label="Close">
145
+ <i class="sap-icon--decline"></i>
146
+ </button>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
153
+ <div class="fd-dynamic-page__collapsible-header-container">
154
+ <section class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc6" aria-label="Expanded header" >
155
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
156
+ delectus necessitatibus incidunt numquam asperiores tenetur iure.
157
+ Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
158
+ </section>
159
+ <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
160
+
161
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
162
+ <button class="fd-dynamic-page__collapse-button fd-button"
163
+ aria-label="See More"
164
+ aria-expanded="true"
165
+ aria-haspopup="true"
166
+ aria-controls="fddplhvc6">
167
+ <i class="sap-icon--slim-arrow-up"></i>
168
+ </button>
169
+ <button class="fd-dynamic-page__pin-button fd-button"
170
+ aria-label="Pin this">
171
+ <i class="sap-icon--pushpin-off"></i>
172
+ </button>
173
+ </div>
174
+
175
+ </div>
176
+ </div>
177
+ <div class="fd-dynamic-page__tabs--overflow">
178
+ <ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
179
+ <li role="tab" class="fd-tabs__item">
180
+ <a class="fd-tabs__link" aria-controls="fuCwV550" href="#fuCwV550">
181
+ <span class="fd-tabs__tag">
182
+ Link
183
+ </span>
184
+ </a>
185
+ </li>
186
+ <li role="tab" class="fd-tabs__item" aria-selected="true">
187
+ <a class="fd-tabs__link" aria-controls="AiWfz165" href="#AiWfz165">
188
+ <span class="fd-tabs__tag">
189
+ Selected
190
+ </span>
191
+ </a>
192
+ </li>
193
+ </ul>
194
+ </div>
195
+ </header>
196
+ <div class="fd-dynamic-page__content">
197
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV550" role="tabpanel">
198
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
199
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
200
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
201
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
202
+ </div>
203
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz165" role="tabpanel" >
204
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
205
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
206
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
207
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
208
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
209
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
210
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
211
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
212
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
213
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
214
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
215
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
216
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
217
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
218
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
219
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
220
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
221
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
222
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
223
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
224
+ </div>
225
+ </div>
226
+ <footer class="fd-bar fd-bar--floating-footer">
227
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
228
+ <div class="fd-bar__element">
229
+ <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
230
+ </div>
231
+ <div class="fd-bar__element">
232
+ <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
233
+ </div>
234
+ </div>
235
+ </footer>
236
+ </article>
237
+ ```
238
+
239
+ ## Modifiers
240
+
241
+ | Class | Description |
242
+ |-------|-------------|
243
+ | `fd-dynamic-page--md` | Style variant |
244
+ | `fd-dynamic-page--sm` | Style variant |
245
+ | `fd-dynamic-page--xl` | Optimized for desktop screens (L, XL, and XXL sizes) |
246
+
247
+ ## BEM Elements
248
+
249
+ This component uses the following BEM elements:
250
+
251
+ - `fd-dynamic-page__breadcrumb`
252
+ - `fd-dynamic-page__breadcrumb-container`
253
+ - `fd-dynamic-page__breadcrumb-title-container`
254
+ - `fd-dynamic-page__collapse-button`
255
+ - `fd-dynamic-page__collapsible-header`
256
+ - `fd-dynamic-page__collapsible-header-container`
257
+ - `fd-dynamic-page__collapsible-header-visibility-container`
258
+ - `fd-dynamic-page__collapsible-header-visibility-container--button-group`
259
+ - `fd-dynamic-page__collapsible-header-visibility-container--left-gradient`
260
+ - `fd-dynamic-page__collapsible-header-visibility-container--no-shadow`
261
+ - `fd-dynamic-page__collapsible-header-visibility-container--right-gradient`
262
+ - `fd-dynamic-page__content`
263
+ - `fd-dynamic-page__header`
264
+ - `fd-dynamic-page__header-button`
265
+ - `fd-dynamic-page__main-container`
266
+ - `fd-dynamic-page__pin-button`
267
+ - `fd-dynamic-page__subtitle`
268
+ - `fd-dynamic-page__summarized-title`
269
+ - `fd-dynamic-page__summarized-title--collapsed`
270
+ - `fd-dynamic-page__summarized-title-area`
271
+ - `fd-dynamic-page__summarized-title-area--no-shadow`
272
+ - `fd-dynamic-page__tabs`
273
+ - `fd-dynamic-page__tabs--add-shadow`
274
+ - `fd-dynamic-page__tabs--overflow`
275
+ - `fd-dynamic-page__title`
276
+ - `fd-dynamic-page__title-area`
277
+ - `fd-dynamic-page__title-area--collapsed`
278
+ - `fd-dynamic-page__title-container`
279
+ - `fd-dynamic-page__title-content`
280
+ - `fd-dynamic-page__title-subtitle-container`
281
+ - `fd-dynamic-page__toolbar`
282
+ - `fd-dynamic-page__toolbar--actions`
283
+ - `fd-dynamic-page__toolbar--content`
284
+ - `fd-dynamic-page__toolbar-container`
285
+
286
+ ## Component Structure
287
+
288
+ **Dynamic page consists of the following elements:**
289
+
290
+ - \
291
+
292
+ ## Related Components
293
+
294
+ This component works with or depends on:
295
+
296
+ - `avatar`
297
+ - `bar`
298
+ - `breadcrumb`
299
+ - `button`
300
+ - `dynamic-page`
301
+ - `facet`
302
+ - `form-label`
303
+ - `icon`
304
+ - `link`
305
+ - `margins`
306
+ - `object-number`
307
+ - `object-status`
308
+ - `paddings`
309
+ - `popover`
310
+ - `rating-indicator`
311
+ - `tabs`
312
+ - `text`
313
+ - `title`
314
+ - `toolbar`
315
+
316
+ ## Design Tokens
317
+
318
+ Key CSS variables used by this component:
319
+
320
+ - `--actions`
321
+ - `--add-shadow`
322
+ - `--button-group`
323
+ - `--collapsed`
324
+ - `--content`
325
+ - `--fdButtonBackgroundColor`
326
+ - `--fdDynamicPage_Button_Group_Background`
327
+ - `--fdDynamicPage_Button_Left_Gradient`
328
+ - `--fdDynamicPage_Button_Pin_Background`
329
+ - `--fdDynamicPage_Button_Right_Gradient`
330
+ - `--fdDynamicPage_Content_List_Background`
331
+ - `--fdDynamicPage_Content_Transparent_Background`
332
+ - `--fdDynamicPage_Hover_Border_Bottom`
333
+ - `--fdDynamicPage_Subtitle_Color`
334
+ - `--fdDynamicPage_Title_Collapsed_Font_Size`
335
+
336
+ *...and 5 more*
337
+
338
+ ## Examples
339
+
340
+ ### Desktop
341
+
342
+ Optimized for desktop screens (L, XL, and XXL sizes). Apply the \
343
+
344
+ ```html
345
+ <article class="fd-dynamic-page fd-dynamic-page--xl" aria-roledescription="Dynamic Page">
346
+ <header class="fd-dynamic-page__header">
347
+ <span
348
+ role="button"
349
+ aria-expanded="true"
350
+ aria-labelledby="fd-dynamic-page-title-1"
351
+ aria-label="Toggle header"
352
+ tabindex="0"
353
+ class="fd-dynamic-page__header-button">
354
+ </span>
355
+ <div class="fd-dynamic-page__title-area">
356
+ <div class="fd-dynamic-page__main-container">
357
+ <div class="fd-dynamic-page__breadcrumb-title-container">
358
+ <nav aria-label="Breadcrumbs">
359
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
360
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
361
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
362
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
363
+ </ul>
364
+ </nav>
365
+ <div class="fd-dynamic-page__title-container">
366
+ <div
367
+ id="fd-dynamic-page-title-1"
368
+ aria-level="2"
369
+ role="heading"
370
+ class="fd-title fd-dynamic-page__title"
371
+ title="Balenciaga Triple S Trainers">
372
+ Balenciaga Triple S Trainers
373
+ </div>
374
+ <div class="fd-dynamic-page__title-content" title="Some RANDOM things"> Some RANDOM things </div>
375
+ <div class="fd-dynamic-page__toolbar-container">
376
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
377
+ <button class="fd-button fd-button--positive">Accept</button>
378
+ <button class="fd-button fd-button--reject">Reject</button>
379
+ <span class="fd-toolbar__separator"></span>
380
+ </div>
381
+ <div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
382
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
383
+ <i class="sap-icon--resize"></i>
384
+ </button>
385
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
386
+ <i class="sap-icon--exitfullscreen"></i>
387
+ </button>
388
+ <button class="fd-button fd-button--transparent" aria-label="Close">
389
+ <i class="sap-icon--decline"></i>
390
+ </button>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
397
+ <div class="fd-dynamic-page__collapsible-header-container">
398
+ <section class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc6" aria-label="Expanded header" >
399
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
400
+ delectus necessitatibus incidunt numquam asperiores tenetur iure.
401
+ Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
402
+ </section>
403
+ <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
404
+
405
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
406
+ <button class="fd-dynamic-page__collapse-button fd-button"
407
+ aria-label="See More"
408
+ aria-expanded="true"
409
+ aria-haspopup="true"
410
+ aria-controls="fddplhvc6">
411
+ <i class="sap-icon--slim-arrow-up"></i>
412
+ </button>
413
+ <button class="fd-dynamic-page__pin-button fd-button"
414
+ aria-label="Pin this">
415
+ <i class="sap-icon--pushpin-off"></i>
416
+ </button>
417
+ </div>
418
+
419
+ </div>
420
+ </div>
421
+ <div class="fd-dynamic-page__tabs--overflow">
422
+ <ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
423
+ <li role="tab" class="fd-tabs__item">
424
+ <a class="fd-tabs__link" aria-controls="fuCwV550" href="#fuCwV550">
425
+ <span class="fd-tabs__tag">
426
+ Link
427
+ </span>
428
+ </a>
429
+ </li>
430
+ <li role="tab" class="fd-tabs__item" aria-selected="true">
431
+ <a class="fd-tabs__link" aria-controls="AiWfz165" href="#AiWfz165">
432
+ <span class="fd-tabs__tag">
433
+ Selected
434
+ </span>
435
+ </a>
436
+ </li>
437
+ </ul>
438
+ </div>
439
+ </header>
440
+ <div class="fd-dynamic-page__content">
441
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV550" role="tabpanel">
442
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
443
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
444
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
445
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
446
+ </div>
447
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz165" role="tabpanel" >
448
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
449
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
450
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
451
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
452
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
453
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
454
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
455
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
456
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
457
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
458
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
459
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
460
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
461
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
462
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
463
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
464
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
465
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
466
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
467
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
468
+ </div>
469
+ </div>
470
+ <footer class="fd-bar fd-bar--floating-footer">
471
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
472
+ <div class="fd-bar__element">
473
+ <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
474
+ </div>
475
+ <div class="fd-bar__element">
476
+ <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
477
+ </div>
478
+ </div>
479
+ </footer>
480
+ </article>
481
+ ```
482
+
483
+ ### Tablet
484
+
485
+ Optimized for tablet screens (M size). Apply the \
486
+
487
+ ```html
488
+ <article class="fd-dynamic-page fd-dynamic-page--md" aria-roledescription="Dynamic Page">
489
+ <header class="fd-dynamic-page__header">
490
+ <span
491
+ role="button"
492
+ aria-expanded="true"
493
+ aria-labelledby="fd-dynamic-page-title-2"
494
+ aria-label="Toggle header"
495
+ tabindex="0"
496
+ class="fd-dynamic-page__header-button">
497
+ </span>
498
+ <div class="fd-dynamic-page__title-area">
499
+ <div class="fd-dynamic-page__main-container">
500
+ <div class="fd-dynamic-page__breadcrumb-title-container">
501
+ <div class="fd-dynamic-page__breadcrumb-container">
502
+ <nav aria-label="Breadcrumbs">
503
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
504
+ <li class="fd-breadcrumb__item">
505
+ <a class="fd-link" tabindex="0" href="#">
506
+ <span class="fd-link__content">Men</span>
507
+ </a>
508
+ <span class="fd-breadcrumb__separator" aria-hidden="true"></span>
509
+ </li>
510
+ <li class="fd-breadcrumb__item">
511
+ <a class="fd-link" tabindex="0" href="#">
512
+ <span class="fd-link__content">Shoes</span>
513
+ </a>
514
+ <span class="fd-breadcrumb__separator" aria-hidden="true"></span>
515
+ </li>
516
+ <li class="fd-breadcrumb__item">
517
+ <a aria-current="page" class="fd-link" tabindex="0" href="#">
518
+ <span class="fd-link__content">Running Shoes</span>
519
+ </a>
520
+ <span class="fd-breadcrumb__separator" aria-hidden="true"></span>
521
+ </li>
522
+ </ul>
523
+ </nav>
524
+ <div class="fd-dynamic-page__toolbar-container">
525
+ <div
526
+ role="toolbar"
527
+ aria-label="Product actions"
528
+ class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent"
529
+ >
530
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
531
+ <i class="sap-icon--resize"></i>
532
+ </button>
533
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
534
+ <i class="sap-icon--exitfullscreen"></i>
535
+ </button>
536
+ <button class="fd-button fd-button--transparent" aria-label="Close">
537
+ <i class="sap-icon--decline"></i>
538
+ </button>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ <div class="fd-dynamic-page__title-container">
543
+ <div
544
+ id="fd-dynamic-page-title-2"
545
+ aria-level="2"
546
+ role="heading"
547
+ class="fd-title fd-dynamic-page__title"
548
+ title="Balenciaga Triple S Trainers">
549
+ Balenciaga Triple S Trainers
550
+ </div>
551
+ <div class="fd-dynamic-page__title-content" title="Some RANDOM things">
552
+ {" "}
553
+ Some RANDOM things
554
+ </div>
555
+ <div class="fd-dynamic-page__toolbar-container">
556
+ <div
557
+ role="toolbar"
558
+ aria-label="Navigation actions"
559
+ class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent"
560
+ >
561
+ <button class="fd-button fd-button--positive">Accept</button>
562
+ <button class="fd-button fd-button--reject">Reject</button>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect</div>
567
+ <div class="fd-dynamic-page__collapsible-header-container">
568
+ <section class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="false" id="fddplhvc5" aria-label="Expanded header">
569
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, delectus
570
+ necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio
571
+ consequatur nobis?
572
+ </section>
573
+ <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
574
+
575
+ <div
576
+ role="toolbar"
577
+ aria-label="Header actions"
578
+ class="fd-dynamic-page__collapsible-header-visibility-container--button-group"
579
+ >
580
+ <button
581
+ class="fd-dynamic-page__collapse-button fd-button"
582
+ aria-label="See More"
583
+ aria-expanded="true"
584
+ aria-haspopup="true"
585
+ aria-controls="fddplhvc5"
586
+ >
587
+ <i class="sap-icon--slim-arrow-up"></i>
588
+ </button>
589
+ <button class="fd-dynamic-page__pin-button fd-button" aria-label="Pin this">
590
+ <i class="sap-icon--pushpin-off"></i>
591
+ </button>
592
+ </div>
593
+
594
+ </div>
595
+ <div class="fd-dynamic-page__tabs--overflow">
596
+ <ul class="fd-tabs fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
597
+ <li role="tab" class="fd-tabs__item" aria-controls="fuCwV551">
598
+ <a class="fd-tabs__link" href="#fuCwV551">
599
+ <span class="fd-tabs__tag">Link</span>
600
+ </a>
601
+ </li>
602
+ <li role="tab" class="fd-tabs__item" aria-selected="true" aria-controls="AiWfz166">
603
+ <a class="fd-tabs__link" href="#AiWfz166">
604
+ <span class="fd-tabs__tag">Selected</span>
605
+ </a>
606
+ </li>
607
+ </ul>
608
+ </div>
609
+ </header>
610
+ <div class="fd-dynamic-page__content">
611
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV551" role="tabpanel">
612
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
613
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? Lorem ipsum dolor, sit
614
+ amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam
615
+ perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
616
+ </div>
617
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz166" role="tabpanel">
618
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in
619
+ atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. Dolor sit Lorem ipsum dolor sit amet,
620
+ consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus
621
+ rerum incidunt unde quod fuga amet ea reprehenderit. Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius
622
+ assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea
623
+ reprehenderit. Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio
624
+ repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. Dolor sit
625
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis,
626
+ sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. Dolor sit Lorem ipsum dolor sit amet, consectetur
627
+ adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt
628
+ unde quod fuga amet ea reprehenderit. Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem
629
+ natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
630
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in
631
+ atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. Dolor sit Lorem ipsum dolor sit amet,
632
+ consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus
633
+ rerum incidunt unde quod fuga amet ea reprehenderit. Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius
634
+ assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea
635
+ reprehenderit.
636
+ </div>
637
+ </div>
638
+ <footer class="fd-bar fd-bar--floating-footer">
639
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
640
+ <div class="fd-bar__element">
641
+ <button aria-label="button" class="fd-button fd-button--emphasized">
642
+ Save
643
+ </button>
644
+ </div>
645
+ <div class="fd-bar__element">
646
+ <button aria-label="button" class="fd-button fd-button--transparent">
647
+ Cancel
648
+ </button>
649
+ </div>
650
+ </div>
651
+ </footer>
652
+ </article>
653
+ ```
654
+
655
+ ### With header facets (mobile)
656
+
657
+ Optimized for mobile screens (S size). Apply the \
658
+
659
+ ```html
660
+ <div class="mobile-container">
661
+ <article class="fd-dynamic-page fd-dynamic-page--sm" aria-roledescription="Dynamic Page">
662
+ <header class="fd-dynamic-page__header">
663
+ <span
664
+ role="button"
665
+ aria-expanded="true"
666
+ aria-labelledby="fd-dynamic-page-title-5"
667
+ aria-label="Toggle header"
668
+ tabindex="0"
669
+ class="fd-dynamic-page__header-button">
670
+ </span>
671
+ <div class="fd-dynamic-page__title-area">
672
+ <div class="fd-dynamic-page__main-container">
673
+ <div class="fd-dynamic-page__breadcrumb-title-container">
674
+ <div class="fd-dynamic-page__breadcrumb-container">
675
+ <nav aria-label="Breadcrumbs">
676
+ <ul class="fd-breadcrumb">
677
+ <li class="fd-breadcrumb__item"><a class="fd-link" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
678
+ <li class="fd-breadcrumb__item"><a class="fd-link" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
679
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
680
+ </ul>
681
+ </nav>
682
+ <div role="toolbar" aria-label="Close action" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
683
+ <button class="fd-button fd-button--transparent" aria-label="Close">
684
+ <i class="sap-icon--decline"></i>
685
+ </button>
686
+ </div>
687
+ </div>
688
+ <div class="fd-dynamic-page__title-container">
689
+ <div
690
+ id="fd-dynamic-page-title-5"
691
+ aria-level="2"
692
+ role="heading"
693
+ class="fd-title fd-dynamic-page__title"
694
+ title="Balenciaga Triple S Trainers">
695
+ Balenciaga Triple S Trainers
696
+ </div>
697
+ <div role="toolbar" aria-label="Header Content" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--content fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
698
+ <div class="fd-popover">
699
+ <div class="fd-popover__control">
700
+ <button
701
+ id="asfmiasudashd"
702
+ onclick="
703
+ toggleElAttrs('wgxzK85915', ['aria-hidden']);
704
+ toggleElAttrs('asfmiasudashd', ['aria-expanded']);
705
+ "
706
+ class="fd-button fd-button--transparent"
707
+ aria-controls="wgxzK85915"
708
+ aria-haspopup="true"
709
+ aria-expanded="true"
710
+ aria-label="More Header Content">
711
+ <i class="sap-icon--overflow"></i>
712
+ </button>
713
+ </div>
714
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
715
+ aria-hidden="false"
716
+ id="wgxzK85915">
717
+ <div class="fd-toolbar__overflow">
718
+ Overflowing title content
719
+ </div>
720
+ </div>
721
+ </div>
722
+ </div>
723
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
724
+ <div class="fd-popover">
725
+ <div class="fd-popover__control">
726
+ <button
727
+ id="maisodusakdnsma"
728
+ onclick="
729
+ toggleElAttrs('wgxzK85914', ['aria-hidden']);
730
+ toggleElAttrs('maisodusakdnsma', ['aria-expanded']);
731
+ "
732
+ class="fd-button fd-button--transparent"
733
+ aria-controls="wgxzK85914"
734
+ aria-haspopup="true"
735
+ aria-expanded="true"
736
+ aria-label="Header actions">
737
+ <i class="sap-icon--overflow"></i>
738
+ </button>
739
+ </div>
740
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
741
+ aria-hidden="false"
742
+ id="wgxzK85914">
743
+ <div class="fd-toolbar__overflow">
744
+ <button class="fd-button fd-button--transparent fd-toolbar__overflow-button">Accept</button>
745
+ <button class="fd-button fd-button--transparent fd-toolbar__overflow-button">Reject</button>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ </div>
751
+ </div>
752
+ <div class="fd-dynamic-page__subtitle"> Expanded header in mobile </div>
753
+ <div class="fd-dynamic-page__collapsible-header-container">
754
+ <section class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc4" aria-label="Expanded header">
755
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
756
+ delectus necessitatibus incidunt numquam asperiores tenetur iure.
757
+ Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
758
+ </section>
759
+ <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
760
+
761
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
762
+ <button class="fd-dynamic-page__collapse-button fd-button"
763
+ aria-label="See More"
764
+ aria-expanded="true"
765
+ aria-haspopup="true"
766
+ aria-controls="fddplhvc4">
767
+ <i class="sap-icon--slim-arrow-up"></i>
768
+ </button>
769
+ </div>
770
+
771
+ </div>
772
+ </div>
773
+ <div class="fd-dynamic-page__tabs--overflow">
774
+ <ul class="fd-tabs fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
775
+ <li class="fd-tabs__item" aria-controls="fuCwV552" role="tab">
776
+ <a class="fd-tabs__link" href="#fuCwV552">
777
+ <span class="fd-tabs__tag">
778
+ Link
779
+ </span>
780
+ </a>
781
+ </li>
782
+ <li class="fd-tabs__item" aria-selected="true" role="tab">
783
+ <a class="fd-tabs__link" aria-controls="AiWfz167" href="#AiWfz167">
784
+ <span class="fd-tabs__tag">
785
+ Selected
786
+ </span>
787
+ </a>
788
+ </li>
789
+ </ul>
790
+ </div>
791
+ </header>
792
+ <div class="fd-dynamic-page__content">
793
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV552" role="tabpanel">
794
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
795
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
796
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
797
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
798
+ </div>
799
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz167" role="tabpanel">
800
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
801
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
802
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
803
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
804
+ </div>
805
+ </div>
806
+ <footer class="fd-bar fd-bar--floating-footer">
807
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
808
+ <div class="fd-bar__element">
809
+ <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
810
+ </div>
811
+ <div class="fd-bar__element">
812
+ <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
813
+ </div>
814
+ </div>
815
+ </footer>
816
+ </article>
817
+ ```
818
+
819
+ ### Collapsed Header (mobile)
820
+
821
+ Displays the dynamic page with a collapsed header on mobile screens.
822
+
823
+ ```html
824
+ <div class="mobile-container">
825
+ <article class="fd-dynamic-page fd-dynamic-page--sm" aria-label="Dynamic Page Mobile Collapsed Example">
826
+ <header class="fd-dynamic-page__header">
827
+ <span
828
+ role="button"
829
+ aria-expanded="true"
830
+ aria-labelledby="fd-dynamic-page-title-8"
831
+ aria-label="Toggle header"
832
+ tabindex="0"
833
+ class="fd-dynamic-page__header-button">
834
+ </span>
835
+ <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed">
836
+ <div class="fd-dynamic-page__main-container">
837
+ <div class="fd-dynamic-page__breadcrumb-title-container">
838
+ <div class="fd-dynamic-page__breadcrumb-container">
839
+ <nav aria-label="Breadcrumbs">
840
+ <ul class="fd-breadcrumb">
841
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
842
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
843
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
844
+ </ul>
845
+ </nav>
846
+ <div role="toolbar" aria-label="Close action" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
847
+ <button class="fd-button fd-button--transparent" aria-label="Close">
848
+ <i class="sap-icon--decline"></i>
849
+ </button>
850
+ </div>
851
+ </div>
852
+ <div class="fd-dynamic-page__title-container">
853
+ <div
854
+ id="fd-dynamic-page-title-8"
855
+ aria-level="2"
856
+ role="heading"
857
+ class="fd-title fd-dynamic-page__title"
858
+ title="Balenciaga Triple S Trainers">
859
+ Balenciaga Triple S Trainers
860
+ </div>
861
+ <div role="toolbar" aria-label="Header Content" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--content fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
862
+ <div class="fd-popover">
863
+ <div class="fd-popover__control">
864
+ <button
865
+ id="ko9as8dajskdj"
866
+ onclick="
867
+ toggleElAttrs('wgxzK85913', ['aria-hidden']);
868
+ toggleElAttrs('ko9as8dajskdj', ['aria-expanded']);
869
+ "
870
+ class="fd-button fd-button--transparent"
871
+ aria-controls="wgxzK85913"
872
+ aria-haspopup="true"
873
+ aria-expanded="true"
874
+ aria-label="More Header Content">
875
+ <i class="sap-icon--overflow"></i>
876
+ </button>
877
+ </div>
878
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
879
+ aria-hidden="false"
880
+ id="wgxzK85913">
881
+ <div class="fd-toolbar__overflow">
882
+ Overflowing title content
883
+ </div>
884
+ </div>
885
+ </div>
886
+ </div>
887
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
888
+ <div class="fd-popover">
889
+ <div class="fd-popover__control">
890
+ <button
891
+ id="k9r0a8ioasjd"
892
+ onclick="
893
+ toggleElAttrs('wgxzK85912', ['aria-hidden']);
894
+ toggleElAttrs('k9r0a8ioasjd', ['aria-expanded']);
895
+ "
896
+ class="fd-button fd-button--transparent"
897
+ aria-controls="wgxzK85912"
898
+ aria-haspopup="true"
899
+ aria-expanded="false"
900
+ aria-label="Header actions">
901
+ <i class="sap-icon--overflow"></i>
902
+ </button>
903
+ </div>
904
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
905
+ aria-hidden="false"
906
+ id="wgxzK85912">
907
+ <div class="fd-toolbar__overflow">
908
+ <button class="fd-button fd-button--transparent fd-toolbar__overflow-button ">Accept</button>
909
+ <button class="fd-button fd-button--transparent fd-toolbar__overflow-button ">Reject</button>
910
+ </div>
911
+ </div>
912
+ </div>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ <div class="fd-dynamic-page__subtitle"> Collapsed header </div>
917
+ <div class="fd-dynamic-page__collapsible-header-container">
918
+ <section class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="true" id="fddplhvcm1" aria-label="Dynamic Page Mobile Collapsed Header" >
919
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
920
+ delectus necessitatibus incidunt numquam asperiores tenetur iure.
921
+ Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
922
+ </section>
923
+ <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
924
+
925
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
926
+ <button class="fd-dynamic-page__collapse-button fd-button"
927
+ aria-label="See More"
928
+ aria-expanded="false"
929
+ aria-haspopup="true"
930
+ aria-controls="fddplhvcm1">
931
+ <i class="sap-icon--slim-arrow-down"></i>
932
+ </button>
933
+ </div>
934
+
935
+ </div>
936
+ </div>
937
+ <div class="fd-dynamic-page__tabs--overflow">
938
+ <ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
939
+ <li role="tab" class="fd-tabs__item">
940
+ <a class="fd-tabs__link" aria-controls="fuCwV553" href="#fuCwV553">
941
+ <span class="fd-tabs__tag">
942
+ Link
943
+ </span>
944
+ </a>
945
+ </li>
946
+ <li role="tab" class="fd-tabs__item" aria-selected="true">
947
+ <a class="fd-tabs__link" aria-controls="AiWfz168" href="#AiWfz168">
948
+ <span class="fd-tabs__tag">
949
+ Selected
950
+ </span>
951
+ </a>
952
+ </li>
953
+ </ul>
954
+ </div>
955
+ </header>
956
+ <div class="fd-dynamic-page__content">
957
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV553" role="tabpanel">
958
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
959
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
960
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
961
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
962
+ </div>
963
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz168" role="tabpanel">
964
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
965
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
966
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
967
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
968
+ </div>
969
+ </div>
970
+ <footer class="fd-bar fd-bar--floating-footer">
971
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
972
+ <div class="fd-bar__element">
973
+ <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
974
+ </div>
975
+ <div class="fd-bar__element">
976
+ <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
977
+ </div>
978
+ </div>
979
+ </footer>
980
+ </article>
981
+ ```
982
+
983
+ ### Summary Line (mobile)
984
+
985
+ On mobile, a summary line can replace the expand/collapse header to help users focus on page content. Add \
986
+
987
+ ```html
988
+ <div class="mobile-container">
989
+ <article class="fd-dynamic-page fd-dynamic-page--sm" aria-roledescription="Dynamic Page">
990
+ <header class="fd-dynamic-page__header">
991
+ <div
992
+ class="fd-dynamic-page__summarized-title-area fd-dynamic-page__summarized-title-area--no-shadow">
993
+ <div
994
+ aria-level="2"
995
+ role="heading"
996
+ class="fd-dynamic-page__summarized-title fd-dynamic-page__summarized-title--collapsed"
997
+ title="Balenciaga Triple S Trainers">
998
+ Balenciaga Triple S Trainers
999
+ </div>
1000
+
1001
+ <div role="toolbar" aria-label="Expand summary line action"
1002
+ class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1003
+ <button class="fd-button fd-button--transparent" aria-label="Expand">
1004
+ <i class="sap-icon--slim-arrow-down"></i>
1005
+ </button>
1006
+ <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed"
1007
+ aria-hidden="true">
1008
+ <div class="fd-dynamic-page__breadcrumb-title-container">
1009
+ <nav aria-label="Breadcrumbs">
1010
+ <ul class="fd-breadcrumb">
1011
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="-1" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1012
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="-1" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1013
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="-1" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1014
+ </ul>
1015
+ </nav>
1016
+ <div role="toolbar" aria-label="Close action" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1017
+ <button tabindex="-1" class="fd-button fd-button--transparent" aria-label="Close">
1018
+ <i class="sap-icon--decline"></i>
1019
+ </button>
1020
+ </div>
1021
+ </div>
1022
+ <div class="fd-dynamic-page__title-container">
1023
+ <div
1024
+ aria-level="2"
1025
+ role="heading"
1026
+ class="fd-dynamic-page__summarized-title fd-dynamic-page__summarized-title--collapsed"
1027
+ title="Balenciaga Triple S Trainers">
1028
+ Balenciaga Triple S Trainers
1029
+ </div>
1030
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1031
+ <button tabindex="-1" class="fd-button fd-button--transparent" aria-label="More Header Content">
1032
+ <i class="sap-icon--overflow"></i>
1033
+ </button>
1034
+ <button tabindex="-1" class="fd-button fd-button--transparent" aria-label="Header actions">
1035
+ <i class="sap-icon--overflow"></i>
1036
+ </button>
1037
+ </div>
1038
+ <div class="fd-dynamic-page__subtitle"> Collapsed title area and header with summary line </div>
1039
+ <div class="fd-dynamic-page__collapsible-header-container">
1040
+ <section class="fd-dynamic-page__collapsible-header"
1041
+ role="region" aria-hidden="true" id="fddplhvcm2" aria-label="Dynamic Page Mobile Collapsed Header" >
1042
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
1043
+ delectus necessitatibus incidunt numquam asperiores tenetur iure.
1044
+ Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
1045
+ </section>
1046
+ <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow"
1047
+ aria-hidden="true">
1048
+
1049
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
1050
+ <button tabindex="-1" class="fd-dynamic-page__collapse-button fd-button"
1051
+ aria-label="See More"
1052
+ aria-expanded="false"
1053
+ aria-haspopup="true"
1054
+ aria-controls="fddplhvcm2">
1055
+ <i class="sap-icon--slim-arrow-down"></i>
1056
+ </button>
1057
+ </div>
1058
+
1059
+ </div>
1060
+ <div class="fd-dynamic-page__tabs--overflow">
1061
+ <ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
1062
+ <li role="tab" class="fd-tabs__item">
1063
+ <a class="fd-tabs__link" aria-controls="fuCwV554" href="#fuCwV554">
1064
+ <span class="fd-tabs__tag">
1065
+ Link
1066
+ </span>
1067
+ </a>
1068
+ </li>
1069
+ <li role="tab" class="fd-tabs__item" aria-selected="true">
1070
+ <a class="fd-tabs__link" aria-controls="AiWfz169" href="#AiWfz169">
1071
+ <span class="fd-tabs__tag">
1072
+ Selected
1073
+ </span>
1074
+ </a>
1075
+ </li>
1076
+ </ul>
1077
+ </div>
1078
+ </header>
1079
+ <div class="fd-dynamic-page__content">
1080
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV554" role="tabpanel">
1081
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
1082
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1083
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
1084
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1085
+ </div>
1086
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz169" role="tabpanel">
1087
+ <h2 class="fd-title fd-title--h6 fd-title--wrap"><b>This is an example of a summary line, without the expand/collapse feature.</b></h2>
1088
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1089
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1090
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1091
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1092
+ </div>
1093
+ </div>
1094
+ <footer class="fd-bar fd-bar--floating-footer">
1095
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
1096
+ <div class="fd-bar__element">
1097
+ <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
1098
+ </div>
1099
+ <div class="fd-bar__element">
1100
+ <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
1101
+ </div>
1102
+ </div>
1103
+ </footer>
1104
+ </article>
1105
+ ```
1106
+
1107
+ ### Expanded Header
1108
+
1109
+ The header can be expanded or collapsed using the toggle buttons. Users can pin the header to keep it visible while scrolling. To collapse the header, add the \
1110
+
1111
+ ```html
1112
+ <article class="fd-dynamic-page fd-dynamic-page--xl" aria-roledescription="Dynamic Page" xmlns="http://www.w3.org/1999/html">
1113
+ <header class="fd-dynamic-page__header">
1114
+ <span
1115
+ role="button"
1116
+ aria-expanded="true"
1117
+ aria-labelledby="fd-dynamic-page-title-9"
1118
+ aria-label="Toggle header"
1119
+ tabindex="0"
1120
+ class="fd-dynamic-page__header-button">
1121
+ </span>
1122
+ <div class="fd-dynamic-page__title-area">
1123
+ <div class="fd-dynamic-page__main-container">
1124
+ <div class="fd-dynamic-page__breadcrumb-title-container">
1125
+ <nav aria-label="Breadcrumbs">
1126
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
1127
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1128
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1129
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1130
+ </ul>
1131
+ </nav>
1132
+ <div class="fd-dynamic-page__title-container">
1133
+ <div
1134
+ id="fd-dynamic-page-title-9"
1135
+ aria-level="2"
1136
+ role="heading"
1137
+ class="fd-title fd-dynamic-page__title"
1138
+ title="Balenciaga Triple S Trainers">
1139
+ Balenciaga Triple S Trainers
1140
+ </div>
1141
+ <div class="fd-dynamic-page__title-content" title="Header with both collapse and pin buttons, expanded by default"> Header with both collapse and pin buttons, expanded by default</div>
1142
+ <div class="fd-dynamic-page__toolbar-container">
1143
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1144
+ <button class="fd-button fd-button--positive">Accept</button>
1145
+ <button class="fd-button fd-button--reject">Reject</button>
1146
+ <span class="fd-toolbar__separator"></span>
1147
+ </div>
1148
+ <div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1149
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
1150
+ <i class="sap-icon--resize"></i>
1151
+ </button>
1152
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
1153
+ <i class="sap-icon--exitfullscreen"></i>
1154
+ </button>
1155
+ <button class="fd-button fd-button--transparent" aria-label="Close">
1156
+ <i class="sap-icon--decline"></i>
1157
+ </button>
1158
+ </div>
1159
+ </div>
1160
+ </div>
1161
+ </div>
1162
+ </div>
1163
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
1164
+ <div class="fd-dynamic-page__collapsible-header-container">
1165
+ <section class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="false" id="fddplhvc1" aria-label="Default expanded header" >
1166
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
1167
+ delectus necessitatibus incidunt numquam asperiores tenetur iure.
1168
+ Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
1169
+ </section>
1170
+ <div class="fd-dynamic-page__collapsible-header-visibility-container">
1171
+
1172
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
1173
+ <button class="fd-dynamic-page__collapse-button fd-button"
1174
+ aria-label="See More"
1175
+ aria-expanded="true"
1176
+ aria-haspopup="true"
1177
+ aria-controls="fddplhvc1">
1178
+ <i class="sap-icon--slim-arrow-up"></i>
1179
+ </button>
1180
+ <button class="fd-dynamic-page__pin-button fd-button"
1181
+ aria-label="Pin this">
1182
+ <i class="sap-icon--pushpin-off"></i>
1183
+ </button>
1184
+ </div>
1185
+
1186
+ </div>
1187
+ </div>
1188
+ </header>
1189
+ <div class="fd-dynamic-page__content">
1190
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
1191
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1192
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
1193
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1194
+ </div>
1195
+ </article>
1196
+ ```
1197
+
1198
+ ### CollapsedHeader
1199
+
1200
+ Displays the dynamic page with a collapsed header on desktop screens.
1201
+
1202
+ ```html
1203
+ <article class="fd-dynamic-page fd-dynamic-page--xl" aria-roledescription="Dynamic Page">
1204
+ <header class="fd-dynamic-page__header">
1205
+ <span
1206
+ role="button"
1207
+ aria-expanded="true"
1208
+ aria-labelledby="fd-dynamic-page-title-10"
1209
+ aria-label="Toggle header"
1210
+ tabindex="0"
1211
+ class="fd-dynamic-page__header-button">
1212
+ </span>
1213
+ <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed">
1214
+ <div class="fd-dynamic-page__main-container">
1215
+ <div class="fd-dynamic-page__breadcrumb-title-container">
1216
+ <nav aria-label="Breadcrumbs">
1217
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
1218
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1219
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1220
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1221
+ </ul>
1222
+ </nav>
1223
+ <div class="fd-dynamic-page__title-container">
1224
+ <div
1225
+ id="fd-dynamic-page-title-10"
1226
+ aria-level="2"
1227
+ role="heading"
1228
+ class="fd-title fd-dynamic-page__title"
1229
+ title="Balenciaga Triple S Trainers">
1230
+ Balenciaga Triple S Trainers
1231
+ </div>
1232
+ <div class="fd-dynamic-page__title-content" title="Collapsed Header with both expand and pin buttons">Collapsed Header with both expand and pin buttons </div>
1233
+ <div class="fd-dynamic-page__toolbar-container">
1234
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1235
+ <button class="fd-button fd-button--positive">Accept</button>
1236
+ <button class="fd-button fd-button--reject">Reject</button>
1237
+ <span class="fd-toolbar__separator"></span>
1238
+ </div>
1239
+ <div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1240
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
1241
+ <i class="sap-icon--resize"></i>
1242
+ </button>
1243
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
1244
+ <i class="sap-icon--exitfullscreen"></i>
1245
+ </button>
1246
+ <button class="fd-button fd-button--transparent" aria-label="Close">
1247
+ <i class="sap-icon--decline"></i>
1248
+ </button>
1249
+ </div>
1250
+ </div>
1251
+ </div>
1252
+ </div>
1253
+ </div>
1254
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
1255
+ <div class="fd-dynamic-page__collapsible-header-container">
1256
+ <section class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="true" id="fddplhvc2" aria-label="Collapsed header">
1257
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
1258
+ delectus necessitatibus incidunt numquam asperiores tenetur iure.
1259
+ Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
1260
+ </section>
1261
+ <div class="fd-dynamic-page__collapsible-header-visibility-container">
1262
+
1263
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
1264
+ <button class="fd-dynamic-page__collapse-button fd-button"
1265
+ aria-label="See More"
1266
+ aria-expanded="false"
1267
+ aria-haspopup="true"
1268
+ aria-controls="fddplhvc2">
1269
+ <i class="sap-icon--slim-arrow-down"></i>
1270
+ </button>
1271
+ <button class="fd-dynamic-page__pin-button fd-button"
1272
+ aria-label="Pin this">
1273
+ <i class="sap-icon--pushpin-off"></i>
1274
+ </button>
1275
+ </div>
1276
+
1277
+ </div>
1278
+ </div>
1279
+ </header>
1280
+ <div class="fd-dynamic-page__content">
1281
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
1282
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1283
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
1284
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1285
+ </div>
1286
+ </article>
1287
+ ```
1288
+
1289
+ ### Without pin
1290
+
1291
+ The header can be configured without a pin button, allowing users to only expand or collapse the header area.
1292
+
1293
+ ```html
1294
+ <article class="fd-dynamic-page fd-dynamic-page--xl" aria-roledescription="Dynamic Page">
1295
+ <header class="fd-dynamic-page__header">
1296
+ <span
1297
+ role="button"
1298
+ aria-expanded="true"
1299
+ aria-labelledby="fd-dynamic-page-title-6"
1300
+ aria-label="Toggle header"
1301
+ tabindex="0"
1302
+ class="fd-dynamic-page__header-button">
1303
+ </span>
1304
+ <div class="fd-dynamic-page__title-area">
1305
+ <div class="fd-dynamic-page__main-container">
1306
+ <div class="fd-dynamic-page__breadcrumb-title-container">
1307
+ <nav aria-label="Breadcrumbs">
1308
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
1309
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1310
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1311
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1312
+ </ul>
1313
+ </nav>
1314
+ <div class="fd-dynamic-page__title-container">
1315
+ <div
1316
+ id="fd-dynamic-page-title-6"
1317
+ aria-level="2"
1318
+ role="heading"
1319
+ class="fd-title fd-dynamic-page__title"
1320
+ title="Balenciaga Triple S Trainers">
1321
+ Balenciaga Triple S Trainers
1322
+ </div>
1323
+ <div class="fd-dynamic-page__title-content" title="The header can only be expanded/collapsed, not pinned"> The header can only be expanded/collapsed, not pinned. </div>
1324
+ <div class="fd-dynamic-page__toolbar-container">
1325
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1326
+ <button class="fd-button fd-button--positive">Accept</button>
1327
+ <button class="fd-button fd-button--reject">Reject</button>
1328
+ <span class="fd-toolbar__separator"></span>
1329
+ </div>
1330
+ <div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1331
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
1332
+ <i class="sap-icon--resize"></i>
1333
+ </button>
1334
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
1335
+ <i class="sap-icon--exitfullscreen"></i>
1336
+ </button>
1337
+ <button class="fd-button fd-button--transparent" aria-label="Close">
1338
+ <i class="sap-icon--decline"></i>
1339
+ </button>
1340
+ </div>
1341
+ </div>
1342
+ </div>
1343
+ </div>
1344
+ </div>
1345
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
1346
+ <div class="fd-dynamic-page__collapsible-header-container">
1347
+ <section class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc3" aria-hidden="false" aria-label="Pinned header">
1348
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
1349
+ delectus necessitatibus incidunt numquam asperiores tenetur iure.
1350
+ Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
1351
+ </section>
1352
+ <div class="fd-dynamic-page__collapsible-header-visibility-container">
1353
+
1354
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
1355
+ <button class="fd-dynamic-page__collapse-button fd-button"
1356
+ aria-label="See More"
1357
+ aria-expanded="true"
1358
+ aria-haspopup="true"
1359
+ aria-controls="fddplhvc3">
1360
+ <i class="sap-icon--slim-arrow-up"></i>
1361
+ </button>
1362
+ </div>
1363
+
1364
+ </div>
1365
+ </div>
1366
+ </header>
1367
+ <div class="fd-dynamic-page__content">
1368
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
1369
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1370
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
1371
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1372
+ </div>
1373
+ </article>
1374
+ ```
1375
+
1376
+ ### With header facets
1377
+
1378
+ To position the image facet next to the title, add \
1379
+
1380
+ ```html
1381
+ <article class="fd-dynamic-page fd-dynamic-page--xl" aria-roledescription="Dynamic Page">
1382
+ <header class="fd-dynamic-page__header">
1383
+ <span
1384
+ role="button"
1385
+ aria-expanded="true"
1386
+ aria-labelledby="fd-dynamic-page-title-4"
1387
+ aria-label="Toggle header"
1388
+ tabindex="0"
1389
+ class="fd-dynamic-page__header-button">
1390
+ </span>
1391
+ <div class="fd-dynamic-page__title-area" aria-hidden="false" id="mainContainer">
1392
+ <div class="fd-dynamic-page__main-container">
1393
+ <div class="fd-dynamic-page__breadcrumb-title-container">
1394
+ <nav aria-label="Breadcrumbs">
1395
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
1396
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1397
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1398
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1399
+ </ul>
1400
+ </nav>
1401
+ <div class="fd-dynamic-page__title-container">
1402
+ <div
1403
+ id="fd-dynamic-page-title-4"
1404
+ aria-level="2"
1405
+ role="heading"
1406
+ class="fd-title fd-dynamic-page__title"
1407
+ title="Balenciaga Triple S Trainers">
1408
+ Balenciaga Triple S Trainers
1409
+ </div>
1410
+ <div class="fd-dynamic-page__toolbar-container">
1411
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1412
+ <button class="fd-button fd-button--positive">Accept</button>
1413
+ <button class="fd-button fd-button--reject">Reject</button>
1414
+ <span class="fd-toolbar__separator"></span>
1415
+ </div>
1416
+ <div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1417
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
1418
+ <i class="sap-icon--resize"></i>
1419
+ </button>
1420
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
1421
+ <i class="sap-icon--exitfullscreen"></i>
1422
+ </button>
1423
+ <button class="fd-button fd-button--transparent" aria-label="Close">
1424
+ <i class="sap-icon--decline"></i>
1425
+ </button>
1426
+ </div>
1427
+ </div>
1428
+ </div>
1429
+ </div>
1430
+ </div>
1431
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
1432
+ <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed" aria-hidden="true" id="mainImageContainer">
1433
+ <div class="fd-dynamic-page__main-container">
1434
+ <div class="fd-dynamic-page__breadcrumb-title-container">
1435
+ <nav aria-label="Breadcrumbs">
1436
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
1437
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a></li>
1438
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a></li>
1439
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a></li>
1440
+ </ul>
1441
+ </nav>
1442
+ <div class="fd-dynamic-page__title-container">
1443
+ <div class="fd-facet fd-facet--image fd-facet--image-header-title">
1444
+ <span class="fd-avatar fd-avatar--s" aria-label="Avatar">
1445
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
1446
+ </span>
1447
+ </div>
1448
+ <div class="fd-dynamic-page__title-subtitle-container">
1449
+ <h1 class="fd-title fd-dynamic-page__title" title="Balenciaga Triple S Trainers"> Balenciaga Triple S Trainers </h1>
1450
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
1451
+ </div>
1452
+ <div class="fd-dynamic-page__toolbar-container">
1453
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1454
+ <button class="fd-button fd-button--positive">Accept</button>
1455
+ <button class="fd-button fd-button--reject">Reject</button>
1456
+ <span class="fd-toolbar__separator"></span>
1457
+ </div>
1458
+ <div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1459
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
1460
+ <i class="sap-icon--resize"></i>
1461
+ </button>
1462
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
1463
+ <i class="sap-icon--exitfullscreen"></i>
1464
+ </button>
1465
+ <button class="fd-button fd-button--transparent" aria-label="Close">
1466
+ <i class="sap-icon--decline"></i>
1467
+ </button>
1468
+ </div>
1469
+ </div>
1470
+ </div>
1471
+ </div>
1472
+ </div>
1473
+ </div>
1474
+ <div class="fd-dynamic-page__collapsible-header-container">
1475
+ <section class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvx6" aria-hidden="false" aria-label="Expanded header">
1476
+ <div class="fd-facet-group">
1477
+ <div class="fd-facet fd-facet--image">
1478
+ <span class="fd-avatar fd-avatar--l" aria-label="Avatar">
1479
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
1480
+ </span>
1481
+ </div>
1482
+ <div class="fd-facet fd-facet--form" role="group" aria-labelledby="formFacetTitle4">
1483
+ <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="formFacetTitle4">Technical Data</div>
1484
+ <div class="fd-facet__container fd-margin-bottom--tiny">
1485
+ <label class="fd-form-label" for="form-value-10">Base unit:</label>
1486
+ <div class="fd-text" id="form-value-10">Each</div>
1487
+ </div>
1488
+ <div class="fd-facet__container fd-margin-bottom--tiny">
1489
+ <label class="fd-form-label" for="form-value-11">Length:</label>
1490
+ <div class="fd-text" id="form-value-11">23.24 Centimeter</div>
1491
+ </div>
1492
+ <div class="fd-facet__container fd-margin-bottom--tiny">
1493
+ <label class="fd-form-label" for="form-value-12">Width:</label>
1494
+ <div class="fd-text" id="form-value-12">86.1 Centimeter</div>
1495
+ </div>
1496
+ <div class="fd-facet__container">
1497
+ <label class="fd-form-label" for="form-value-13">Height:</label>
1498
+ <div class="fd-text" id="form-value-13">20.8 Centimeter</div>
1499
+ </div>
1500
+ </div>
1501
+ <div class="fd-facet fd-facet--key-value" role="group" aria-labelledby="kvFacetTitle9">
1502
+ <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle9">Status</h1>
1503
+ <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status">
1504
+ <span class="fd-object-status__text fd-facet__object-status-text">Delivery</span>
1505
+ </span>
1506
+ </div>
1507
+ <div class="fd-facet fd-facet--key-value" role="group" aria-labelledby="kvFacetTitle10">
1508
+ <div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="kvFacetTitle10">Delivery Time</div>
1509
+ <span class="fd-object-status fd-object-status--large fd-object-status--critical fd-facet__object-status">
1510
+ <i class="fd-object-status__icon sap-icon--shipping-status fd-padding--none fd-margin-end--tiny" role="presentation"></i>
1511
+ <span class="fd-object-status__text fd-facet__object-status-text">12 days</span>
1512
+ </span>
1513
+ </div>
1514
+ <div class="fd-facet fd-facet--key-value" role="group" aria-labelledby="kvFacetTitle11">
1515
+ <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle11">Assembly Option </h1>
1516
+ <span class="fd-object-status fd-object-status--negative fd-object-status--large fd-facet__object-status">
1517
+ <span class="fd-object-status__text fd-facet__object-status-text">To be selected</span>
1518
+ </span>
1519
+ </div>
1520
+ <div class="fd-facet fd-facet--key-value" role="group" aria-labelledby="kvFacetTitle12">
1521
+ <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle12">Pricing </h1>
1522
+ <span class="fd-object-number fd-object-number--large fd-object-number--informative">
1523
+ <span class="fd-object-number__text">579</span><span class="fd-object-number__unit">EUR</span>
1524
+ </span>
1525
+ </div>
1526
+
1527
+ <div class="fd-facet fd-facet--rating-indicator" role="group" aria-labelledby="ratingFacetTitle3">
1528
+ <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle3">Average User Rating</h1>
1529
+ <h2 class="fd-form-label">6 reviews</h2>
1530
+ <div class="fd-rating-indicator fd-facet__container">
1531
+ <div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
1532
+ <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-1" name="2-rating-max-value-5" value="1">
1533
+ <label class="fd-rating-indicator__label" for="2-rating-max-value-5-1"></label>
1534
+
1535
+ <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-2" name="2-rating-max-value-5" value="2" checked>
1536
+ <label class="fd-rating-indicator__label" for="2-rating-max-value-5-2"></label>
1537
+
1538
+ <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-3" name="2-rating-max-value-5" value="3">
1539
+ <label class="fd-rating-indicator__label" for="2-rating-max-value-5-3"></label>
1540
+
1541
+ <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-4" name="2-rating-max-value-5" value="4">
1542
+ <label class="fd-rating-indicator__label" for="2-rating-max-value-5-4"></label>
1543
+
1544
+ <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-5" name="2-rating-max-value-5" value="5">
1545
+ <label class="fd-rating-indicator__label" for="2-rating-max-value-5-5"></label>
1546
+ </div>
1547
+ <span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(2 of 5)</span>
1548
+ </div>
1549
+ </div>
1550
+ </div>
1551
+ </section>
1552
+ <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
1553
+
1554
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
1555
+ <button class="fd-dynamic-page__collapse-button fd-button"
1556
+ aria-label="Collapse"
1557
+ aria-expanded="true"
1558
+ aria-hidden="false"
1559
+ id="expandBtn"
1560
+ aria-haspopup="true"
1561
+ onclick="
1562
+ toggleElAttrs('fddplhvx6', ['aria-hidden']);
1563
+ toggleElAttrs('expandBtn', ['aria-hidden']);
1564
+ toggleElAttrs('collapseBtn', ['aria-hidden']);
1565
+ toggleElAttrs('mainContainer', ['aria-hidden']);
1566
+ toggleElAttrs('mainImageContainer', ['aria-hidden']);
1567
+ "
1568
+ >
1569
+ <i class="sap-icon--slim-arrow-up"></i>
1570
+ </button>
1571
+ <button class="fd-dynamic-page__collapse-button fd-button"
1572
+ aria-label="Collapse"
1573
+ aria-expanded="false"
1574
+ aria-hidden="true"
1575
+ id="collapseBtn"
1576
+ aria-haspopup="true"
1577
+ onclick="
1578
+ toggleElAttrs('fddplhvx6', ['aria-hidden']);
1579
+ toggleElAttrs('collapseBtn', ['aria-hidden']);
1580
+ toggleElAttrs('expandBtn', ['aria-hidden']);
1581
+ toggleElAttrs('mainContainer', ['aria-hidden']);
1582
+ toggleElAttrs('mainImageContainer', ['aria-hidden']);
1583
+ "
1584
+ >
1585
+ <i class="sap-icon--slim-arrow-down"></i>
1586
+ </button>
1587
+ <button class="fd-dynamic-page__pin-button fd-button"
1588
+ aria-label="Pin this">
1589
+ <i class="sap-icon--pushpin-off"></i>
1590
+ </button>
1591
+ </div>
1592
+
1593
+ </div>
1594
+ </div>
1595
+ <div class="fd-dynamic-page__tabs--overflow">
1596
+ <ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
1597
+ <li role="tab" class="fd-tabs__item">
1598
+ <a class="fd-tabs__link" aria-controls="fuCwV557" href="#fuCwV557">
1599
+ <span class="fd-tabs__tag">
1600
+ Link
1601
+ </span>
1602
+ </a>
1603
+ </li>
1604
+ <li role="tab" class="fd-tabs__item" aria-selected="true">
1605
+ <a class="fd-tabs__link" aria-controls="AiWfz155" href="#AiWfz155">
1606
+ <span class="fd-tabs__tag">
1607
+ Selected
1608
+ </span>
1609
+ </a>
1610
+ </li>
1611
+ </ul>
1612
+ </div>
1613
+ </header>
1614
+ <div class="fd-dynamic-page__content">
1615
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV557" role="tabpanel">
1616
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
1617
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1618
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
1619
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1620
+ </div>
1621
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz155" role="tabpanel" >
1622
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1623
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1624
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1625
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1626
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1627
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1628
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1629
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1630
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1631
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1632
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1633
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1634
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1635
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1636
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1637
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1638
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1639
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1640
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1641
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1642
+ </div>
1643
+ </div>
1644
+ <footer class="fd-bar fd-bar--floating-footer">
1645
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
1646
+ <div class="fd-bar__element">
1647
+ <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
1648
+ </div>
1649
+ <div class="fd-bar__element">
1650
+ <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
1651
+ </div>
1652
+ </div>
1653
+ </footer>
1654
+ </article>
1655
+ ```
1656
+
1657
+ ### With header facets (mobile)
1658
+
1659
+ ```html
1660
+ <div class="mobile-container">
1661
+ <article class="fd-dynamic-page fd-dynamic-page--sm" aria-roledescription="Dynamic Page">
1662
+ <header class="fd-dynamic-page__header">
1663
+ <span
1664
+ role="button"
1665
+ aria-expanded="true"
1666
+ aria-labelledby="fd-dynamic-page-title-3"
1667
+ aria-label="Toggle header"
1668
+ tabindex="0"
1669
+ class="fd-dynamic-page__header-button">
1670
+ </span>
1671
+ <div class="fd-dynamic-page__title-area" aria-hidden="false" id="mainContainerMobile">
1672
+ <div class="fd-dynamic-page__main-container">
1673
+ <div class="fd-dynamic-page__breadcrumb-title-container">
1674
+ <div class="fd-dynamic-page__breadcrumb-container">
1675
+ <nav aria-label="Breadcrumbs">
1676
+ <ul class="fd-breadcrumb">
1677
+ <li class="fd-breadcrumb__item"><a class="fd-link" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1678
+ <li class="fd-breadcrumb__item"><a class="fd-link" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1679
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
1680
+ </ul>
1681
+ </nav>
1682
+ <div role="toolbar" aria-label="Close action" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1683
+ <button class="fd-button fd-button--transparent" aria-label="Close">
1684
+ <i class="sap-icon--decline"></i>
1685
+ </button>
1686
+ </div>
1687
+ </div>
1688
+ <div class="fd-dynamic-page__title-container">
1689
+ <div
1690
+ id="fd-dynamic-page-title-3"
1691
+ aria-level="2"
1692
+ role="heading"
1693
+ class="fd-title fd-dynamic-page__title"
1694
+ title="Balenciaga Triple S Trainers">
1695
+ Balenciaga Triple S Trainers
1696
+ </div>
1697
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1698
+ <div class="fd-popover">
1699
+ <div class="fd-popover__control">
1700
+ <button
1701
+ id="maisodusakdnsmb"
1702
+ onclick="
1703
+ toggleElAttrs('wgxzK85901', ['aria-hidden']);
1704
+ toggleElAttrs('maisodusakdnsmb', ['aria-expanded']);
1705
+ "
1706
+ class="fd-button fd-button--transparent"
1707
+ aria-controls="wgxzK85901"
1708
+ aria-haspopup="true"
1709
+ aria-expanded="true"
1710
+ aria-label="Header actions">
1711
+ <i class="sap-icon--overflow"></i>
1712
+ </button>
1713
+ </div>
1714
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
1715
+ aria-hidden="false"
1716
+ id="wgxzK85901">
1717
+ <div class="fd-toolbar__overflow">
1718
+ <button class="fd-button fd-button--transparent fd-toolbar__overflow-button">Accept</button>
1719
+ <button class="fd-button fd-button--transparent fd-toolbar__overflow-button">Reject</button>
1720
+ </div>
1721
+ </div>
1722
+ </div>
1723
+ </div>
1724
+ </div>
1725
+ </div>
1726
+ </div>
1727
+ <div class="fd-dynamic-page__subtitle"> Expanded header in mobile </div>
1728
+ <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed" aria-hidden="true" id="mainImageContainerMobile">
1729
+ <div class="fd-dynamic-page__main-container">
1730
+ <div class="fd-dynamic-page__breadcrumb-title-container">
1731
+ <div class="fd-dynamic-page__breadcrumb-container">
1732
+ <nav aria-label="Breadcrumbs">
1733
+ <ul class="fd-breadcrumb">
1734
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a></li>
1735
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a></li>
1736
+ <li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a></li>
1737
+ </ul>
1738
+ </nav>
1739
+ <div role="toolbar" aria-label="Close action" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1740
+ <button class="fd-button fd-button--transparent" aria-label="Close">
1741
+ <i class="sap-icon--decline"></i>
1742
+ </button>
1743
+ </div>
1744
+ </div>
1745
+ <div class="fd-dynamic-page__title-container">
1746
+ <div class="fd-facet fd-facet--image fd-facet--image-header-title fd-margin-end--sm">
1747
+ <span class="fd-avatar fd-avatar--s" aria-label="Avatar">
1748
+ <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i>
1749
+ </span>
1750
+ </div>
1751
+ <div class="fd-dynamic-page__title-subtitle-container">
1752
+ <div
1753
+ id="fd-dynamic-page-title-3A"
1754
+ aria-level="2"
1755
+ role="heading"
1756
+ class="fd-title fd-dynamic-page__title"
1757
+ title="Balenciaga Triple S Trainers">
1758
+ Balenciaga Triple S Trainers
1759
+ </div>
1760
+ <div class="fd-dynamic-page__subtitle"> Collapsed header in mobile </div>
1761
+ </div>
1762
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1763
+ <div class="fd-popover">
1764
+ <div class="fd-popover__control">
1765
+ <button
1766
+ id="maisodusakdnsmag"
1767
+ onclick="
1768
+ toggleElAttrs('wgxzK85911', ['aria-hidden']);
1769
+ toggleElAttrs('maisodusakdnsmag', ['aria-expanded']);
1770
+ "
1771
+ class="fd-button fd-button--transparent"
1772
+ aria-controls="wgxzK85911"
1773
+ aria-haspopup="true"
1774
+ aria-expanded="true"
1775
+ aria-label="Header actions">
1776
+ <i class="sap-icon--overflow"></i>
1777
+ </button>
1778
+ </div>
1779
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
1780
+ aria-hidden="false"
1781
+ id="wgxzK85911">
1782
+ <div class="fd-toolbar__overflow">
1783
+ <button class="fd-button fd-button--transparent fd-toolbar__overflow-button">Accept</button>
1784
+ <button class="fd-button fd-button--transparent fd-toolbar__overflow-button">Reject</button>
1785
+ </div>
1786
+ </div>
1787
+ </div>
1788
+ </div>
1789
+ </div>
1790
+ </div>
1791
+ <div class="fd-dynamic-page__collapsible-header-container">
1792
+ <section class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc7" aria-hidden="false" aria-label="Expanded header">
1793
+ <div class="fd-facet-group">
1794
+ <div class="fd-facet fd-facet--image">
1795
+ <span class="fd-avatar fd-avatar--l" aria-label="Avatar">
1796
+ <i class="fd-avatar__icon sap-icon--camera" role="presentation"></i>
1797
+ </span>
1798
+ </div>
1799
+
1800
+ <div class="fd-facet fd-facet--key-value" role="group" aria-labelledby="kvFacetTitle13">
1801
+ <div aria-level="3" role="heading" class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle13">Availablity</div>
1802
+ <span class="fd-object-status fd-object-status--positive fd-object-status--large fd-facet__object-status">
1803
+ <span class="fd-object-status__text fd-facet__object-status-text">In Stock</span>
1804
+ </span>
1805
+ </div>
1806
+ <div class="fd-facet fd-facet--key-value" role="group" aria-labelledby="kvFacetTitle14">
1807
+ <div aria-level="3" role="heading" class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle14">Price </div>
1808
+ <span class="fd-object-number fd-object-number--large fd-object-number--informative">
1809
+ <span class="fd-object-number__text">750</span><span class="fd-object-number__unit">EUR</span>
1810
+ </span>
1811
+ </div>
1812
+ </div>
1813
+ </section>
1814
+ <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
1815
+
1816
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
1817
+ <button class="fd-dynamic-page__collapse-button fd-button"
1818
+ aria-label="Collapse header"
1819
+ aria-expanded="true"
1820
+ aria-hidden="false"
1821
+ id="expandBtnMobile"
1822
+ aria-haspopup="true"
1823
+ onclick="
1824
+ toggleElAttrs('fddplhvc7', ['aria-hidden']);
1825
+ toggleElAttrs('expandBtnMobile', ['aria-expanded']);
1826
+ toggleElAttrs('expandBtnMobile', ['aria-hidden']);
1827
+ toggleElAttrs('collapseBtnMobile', ['aria-expanded']);
1828
+ toggleElAttrs('collapseBtnMobile', ['aria-hidden']);
1829
+ toggleElAttrs('mainContainerMobile', ['aria-hidden']);
1830
+ toggleElAttrs('mainImageContainerMobile', ['aria-hidden']);
1831
+ "
1832
+ >
1833
+ <i class="sap-icon--slim-arrow-up"></i>
1834
+ </button>
1835
+ <button class="fd-dynamic-page__collapse-button fd-button"
1836
+ aria-label="Expand header"
1837
+ aria-expanded="false"
1838
+ aria-hidden="true"
1839
+ id="collapseBtnMobile"
1840
+ aria-haspopup="true"
1841
+ onclick="
1842
+ toggleElAttrs('fddplhvc7', ['aria-hidden']);
1843
+ toggleElAttrs('collapseBtnMobile', ['aria-expanded']);
1844
+ toggleElAttrs('collapseBtnMobile', ['aria-hidden']);
1845
+ toggleElAttrs('expandBtnMobile', ['aria-expanded']);
1846
+ toggleElAttrs('expandBtnMobile', ['aria-hidden']);
1847
+ toggleElAttrs('mainContainerMobile', ['aria-hidden']);
1848
+ toggleElAttrs('mainImageContainerMobile', ['aria-hidden']);
1849
+ "
1850
+ >
1851
+ <i class="sap-icon--slim-arrow-down"></i>
1852
+ </button>
1853
+ </div>
1854
+
1855
+ </div>
1856
+ </div>
1857
+ <div class="fd-dynamic-page__tabs--overflow">
1858
+ <ul class="fd-tabs fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
1859
+ <li class="fd-tabs__item" aria-controls="fuCwV559" role="tab">
1860
+ <a class="fd-tabs__link" href="#fuCwV559">
1861
+ <span class="fd-tabs__tag">
1862
+ Link
1863
+ </span>
1864
+ </a>
1865
+ </li>
1866
+ <li class="fd-tabs__item" aria-selected="true" role="tab">
1867
+ <a class="fd-tabs__link" aria-controls="AiWfz161" href="#AiWfz161">
1868
+ <span class="fd-tabs__tag">
1869
+ Selected
1870
+ </span>
1871
+ </a>
1872
+ </li>
1873
+ </ul>
1874
+ </div>
1875
+ </header>
1876
+ <div class="fd-dynamic-page__content">
1877
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV559" role="tabpanel">
1878
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
1879
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1880
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
1881
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1882
+ </div>
1883
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz161" role="tabpanel">
1884
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1885
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1886
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1887
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1888
+ </div>
1889
+ </div>
1890
+ <footer class="fd-bar fd-bar--floating-footer">
1891
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
1892
+ <div class="fd-bar__element">
1893
+ <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
1894
+ </div>
1895
+ <div class="fd-bar__element">
1896
+ <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
1897
+ </div>
1898
+ </div>
1899
+ </footer>
1900
+ </article>
1901
+ ```
1902
+
1903
+ ## Accessibility
1904
+
1905
+ - Use semantic HTML elements where appropriate
1906
+ - Include proper ARIA attributes for interactive elements
1907
+ - Ensure keyboard navigation support
1908
+ - Provide adequate color contrast
1909
+
1910
+ ## Source
1911
+
1912
+ This documentation was automatically generated from: `packages/styles/stories/Layouts/dynamic-page/dynamic-page.stories.js`
1913
+
1914
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).