@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/form-label-layouts.md ADDED
@@ -0,0 +1,306 @@
1
+ ---
2
+ component: fd-form-label
3
+ title: Layouts/Page Footer
4
+ category: Layouts
5
+ selector: fd-form-label
6
+ cssFile: form-label.css
7
+ sourcePath: packages/styles/stories/Layouts/page-footer/page-footer.stories.js
8
+ tags: ["non-f3"]
9
+ dependencies: ["bar","form-label","icon","link","page-footer"]
10
+ relatedComponents: ["bar","form-label","icon","link","page-footer"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.703Z
13
+ ---
14
+
15
+ # Layouts/Page Footer
16
+
17
+ The Page Footer displays at the bottom of the page, and includes the links, icons and copy Right string.
18
+
19
+ ##Usage
20
+ **Use Page Footer if:**
21
+
22
+ - You want to add the page footer of the UI, which defines the bottom of the page.
23
+ - You want to display list of action at the bottom of the screen.
24
+
25
+ **Do not use Page footer if:**
26
+
27
+ - You want to display collection of links for menu listing actions at the bottom of the screen.
28
+
29
+ Note: You may want to display components from right to left on the screen for international purposes. To display them as such, add the \
30
+
31
+ ## Usage Guidelines
32
+
33
+ **Use Page Footer if:**
34
+
35
+ - You want to add the page footer of the UI, which defines the bottom of the page.
36
+ - You want to display list of action at the bottom of the screen.
37
+
38
+ ## When Not To Use
39
+
40
+ - You want to display collection of links for menu listing actions at the bottom of the screen.
41
+
42
+ Note: You may want to display components from right to left on the screen for international purposes. To display them as such, add the \
43
+
44
+ ## Dependencies
45
+
46
+ This component depends on the following CSS files:
47
+
48
+ - `bar.css`
49
+ - `form-label.css`
50
+ - `icon.css`
51
+ - `link.css`
52
+ - `page-footer.css`
53
+
54
+ ## Installation
55
+
56
+ ```bash
57
+ npm install fundamental-styles
58
+ ```
59
+
60
+ ```html
61
+ <!-- Include theme -->
62
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
63
+
64
+ <!-- Include component CSS -->
65
+ <link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
66
+
67
+ <!-- Include dependencies -->
68
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
69
+ <link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
70
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
71
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
72
+ <link href="node_modules/fundamental-styles/dist/page-footer.css" rel="stylesheet">
73
+ ```
74
+
75
+ ## Basic Usage
76
+
77
+ ```html
78
+ <div class="fd-page-footer fd-page-footer--xl">
79
+ <div class="fd-page-footer__logo">
80
+ <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo" />
81
+ </div>
82
+ <div class="fd-page-footer__container">
83
+ <div class="fd-page-footer__row">
84
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-1" href="/" title="Supported Browser"><span class="fd-link__content">Supported Browser</span></a>
85
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-2" href="/" title="Security Disclosure"><span class="fd-link__content">Security Disclosure</span></a>
86
+ <a class="fd-link fd-page-footer__row-item" id="fd-link-3" href="/" title="Privacy Statement"><span class="fd-link__content">Privacy Statement</span></a>
87
+ <a class="fd-link fd-page-footer__row-item" id="fd-link-4" href="/" title="Cookie Statement"><span class="fd-link__content">Cookie Statement</span></a>
88
+ <a class="fd-link fd-page-footer__row-item" id="fd-link-5" href="/" title="Participant Team"><span class="fd-link__content">Participant Team</span></a>
89
+ </div>
90
+ <div class="fd-page-footer__text">
91
+ <span class="fd-form-label"> 1992-2021 @copyright all right reserved.</span>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ ```
96
+
97
+ ## Related Components
98
+
99
+ This component works with or depends on:
100
+
101
+ - `bar`
102
+ - `form-label`
103
+ - `icon`
104
+ - `link`
105
+ - `page-footer`
106
+
107
+ ## Design Tokens
108
+
109
+ Key CSS variables used by this component:
110
+
111
+ - `--colon`
112
+ - `--disabled`
113
+ - `--inline-help`
114
+ - `--required`
115
+ - `--sapField_RequiredColor`
116
+ - `--sapField_TextColor`
117
+ - `--sapFontLargeSize`
118
+ - `--sapFontSize`
119
+ - `--stand-alone`
120
+ - `--unit-description`
121
+ - `--wrap`
122
+
123
+ ## Examples
124
+
125
+ ### SingleLineLink
126
+
127
+ The Page Footer contains Image/logo, And list of links in the footer. It is responsive to tablet and mobile screen sizes.
128
+
129
+ ```html
130
+ <div class="fd-page-footer fd-page-footer--xl">
131
+ <div class="fd-page-footer__logo">
132
+ <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo" />
133
+ </div>
134
+ <div class="fd-page-footer__container">
135
+ <div class="fd-page-footer__row">
136
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-1" href="/" title="Supported Browser"><span class="fd-link__content">Supported Browser</span></a>
137
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-2" href="/" title="Security Disclosure"><span class="fd-link__content">Security Disclosure</span></a>
138
+ <a class="fd-link fd-page-footer__row-item" id="fd-link-3" href="/" title="Privacy Statement"><span class="fd-link__content">Privacy Statement</span></a>
139
+ <a class="fd-link fd-page-footer__row-item" id="fd-link-4" href="/" title="Cookie Statement"><span class="fd-link__content">Cookie Statement</span></a>
140
+ <a class="fd-link fd-page-footer__row-item" id="fd-link-5" href="/" title="Participant Team"><span class="fd-link__content">Participant Team</span></a>
141
+ </div>
142
+ <div class="fd-page-footer__text">
143
+ <span class="fd-form-label"> 1992-2021 @copyright all right reserved.</span>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ ```
148
+
149
+ ### MultiLineLink
150
+
151
+ The Page Footer contains Image/logo, And list of links in the footer. To apply multiline link, add the `fd-page-footer__row` modifier class to the container element.
152
+
153
+ ```html
154
+ <div class="fd-page-footer fd-page-footer--xl">
155
+ <div class="fd-page-footer__logo">
156
+ <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"/>
157
+ </div>
158
+ <div class="fd-page-footer__container">
159
+ <div class="fd-page-footer__row">
160
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-6" href="/" title="Supported Browser"><span class="fd-link__content">Supported Browser</span></a>
161
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-7" href="/" title="Security Disclosure"><span class="fd-link__content">Security Disclosure</span></a>
162
+ </div>
163
+ <div class="fd-page-footer__row">
164
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-8" href="/" title="Supported Browser"><span class="fd-link__content">Supported Browser</span></a>
165
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-9" href="/" title="Security Disclosure"><span class="fd-link__content">Security Disclosure</span></a>
166
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-10" href="/" title="Privacy Statement"><span class="fd-link__content">Privacy Statement</span></a>
167
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-11" href="/" title="Cookie Statement"><span class="fd-link__content">Cookie Statement</span></a>
168
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-12" href="/" title="Participant Team"><span class="fd-link__content">Participant Team</span></a>
169
+ </div>
170
+ <div class="fd-page-footer__text">
171
+ <span class="fd-form-label"> 1992-2021 @copyright all right reserved.</span>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ ```
176
+
177
+ ### ImageAndIconLink
178
+
179
+ Example of The Page Footer representing multiline link,and adding images in the code to represent the clickable images and multiline is achived by adding the `fd-page-footer__row` modifier class to the container element.
180
+
181
+ ```html
182
+ <div class="fd-page-footer fd-page-footer--xl">
183
+ <div class="fd-page-footer__logo">
184
+ <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"/>
185
+ </div>
186
+ <div class="fd-page-footer__container">
187
+ <div class="fd-page-footer__row">
188
+ <a href="#" id="fd-link-13" class="fd-page-footer__row-item fd-link" tabindex="0">
189
+ <span class="sap-icon--download sap-icon--s"></span>
190
+ <span class="fd-link__content">icon and link</span>
191
+ </a>
192
+ </div>
193
+ <div class="fd-page-footer__row">
194
+ <a href="#" id="fd-link-14" class="fd-page-footer__row-item fd-link" tabindex="0">
195
+ <span class="fd-link__content">
196
+ <img class="fd-page-footer__row-image" src="/assets/images/landscape/L1_Cover.jpg" alt="page footer clickable image link"/>
197
+ image link
198
+ </span>
199
+ </a>
200
+ <a href="#" id="fd-link-15" class="fd-page-footer__row-item fd-link" tabindex="0">
201
+ <span class="fd-link__content">
202
+ <img class="fd-page-footer__row-image" src="/assets/images/landscape/L2_Cover.jpg" alt="page footer clickable image link" />
203
+ image link
204
+ </span>
205
+ </a>
206
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-16" href="/" title="Privacy Statement"><span class="fd-link__content">Privacy Statement</span></a>
207
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-17" href="/" title="Cookie Statement"><span class="fd-link__content">Cookie Statement</span></a>
208
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-18" href="/" title="Participant Team"><span class="fd-link__content">Participant Team</span></a>
209
+ </div>
210
+ <div class="fd-page-footer__text">
211
+ <span class="fd-form-label"> 1992-2021 @copyright all right reserved.</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ ```
216
+
217
+ ### FooterWithDiffrentSize
218
+
219
+ Example of The Page Footer representing multiline lin, add the `--xl` `--lg` `--md` `--sm` size modifier class to the container element.
220
+
221
+ ```html
222
+ <label class="fd-form-label">Page footer with 'xl' (Extra Large) size</label><div class="fd-page-footer fd-page-footer--xl">
223
+ <div class="fd-page-footer__logo">
224
+ <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"/>
225
+ </div>
226
+ <div class="fd-page-footer__container">
227
+ <div class="fd-page-footer__row">
228
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-19" href="/" title="Supported Browser"><span class="fd-link__content">Supported Browser</span></a>
229
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-20" href="/" title="Security Disclosure"><span class="fd-link__content">Security Disclosure</span></a>
230
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-21" href="/" title="Privacy Statement"><span class="fd-link__content">Privacy Statement</span></a>
231
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-22" href="/" title="Cookie Statement"><span class="fd-link__content">Cookie Statement</span></a>
232
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-23" href="/" title="Participant Team"><span class="fd-link__content">Participant Team</span></a>
233
+ </div>
234
+ <div class="fd-page-footer__text">
235
+ <span class="fd-form-label"> 1992-2021 @copyright all right reserved.</span>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <label class="fd-form-label">Page footer with 'lg' (Large) size</label><div class="fd-page-footer fd-page-footer--lg">
241
+ <div class="fd-page-footer__logo">
242
+ <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"/>
243
+ </div>
244
+ <div class="fd-page-footer__container">
245
+ <div class="fd-page-footer__row">
246
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-24" href="/" title="Supported Browser"><span class="fd-link__content">Supported Browser</span></a>
247
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-25" href="/" title="Security Disclosure"><span class="fd-link__content">Security Disclosure</span></a>
248
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-26" href="/" title="Privacy Statement"><span class="fd-link__content">Privacy Statement</span></a>
249
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-27" href="/" title="Cookie Statement"><span class="fd-link__content">Cookie Statement</span></a>
250
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-28" href="/" title="Participant Team"><span class="fd-link__content">Participant Team</span></a>
251
+ </div>
252
+ <div class="fd-page-footer__text">
253
+ <span class="fd-form-label"> 1992-2021 @copyright all right reserved.</span>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <label class="fd-form-label">Page footer with 'md' (Medium) size</label><div class="fd-page-footer fd-page-footer--md">
259
+ <div class="fd-page-footer__logo">
260
+ <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"/>
261
+ </div>
262
+ <div class="fd-page-footer__container">
263
+ <div class="fd-page-footer__row">
264
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-29" href="/" title="Supported Browser"><span class="fd-link__content">Supported Browser</span></a>
265
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-30" href="/" title="Security Disclosure"><span class="fd-link__content">Security Disclosure</span></a>
266
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-31" href="/" title="Privacy Statement"><span class="fd-link__content">Privacy Statement</span></a>
267
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-32" href="/" title="Cookie Statement"><span class="fd-link__content">Cookie Statement</span></a>
268
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-33" href="/" title="Participant Team"><span class="fd-link__content">Participant Team</span></a>
269
+ </div>
270
+ <div class="fd-page-footer__text">
271
+ <span class="fd-form-label"> 1992-2021 @copyright all right reserved.</span>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <label class="fd-form-label">Page footer with 'sm' (Small) size</label><div class="fd-page-footer fd-page-footer--sm">
277
+ <div class="fd-page-footer__logo">
278
+ <img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" alt="page footer logo"/>
279
+ </div>
280
+ <div class="fd-page-footer__container">
281
+ <div class="fd-page-footer__row">
282
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-34" href="/" title="Supported Browser"><span class="fd-link__content">Supported Browser</span></a>
283
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-35" href="/" title="Security Disclosure"><span class="fd-link__content">Security Disclosure</span></a>
284
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-36" href="/" title="Privacy Statement"><span>Privacy Statement</span></a>
285
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-37" href="/" title="Cookie Statement"><span>Cookie Statement</span></a>
286
+ <a class="fd-page-footer__row-item fd-link" id="fd-link-38" href="/" title="Participant Team"><span>Participant Team</span></a>
287
+ </div>
288
+ <div class="fd-page-footer__text">
289
+ <span class="fd-form-label"> 1992-2021 @copyright all right reserved.</span>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ ```
294
+
295
+ ## Accessibility
296
+
297
+ - Use semantic HTML elements where appropriate
298
+ - Include proper ARIA attributes for interactive elements
299
+ - Ensure keyboard navigation support
300
+ - Provide adequate color contrast
301
+
302
+ ## Source
303
+
304
+ This documentation was automatically generated from: `packages/styles/stories/Layouts/page-footer/page-footer.stories.js`
305
+
306
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).