@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/layouts-layout-grid.md ADDED
@@ -0,0 +1,608 @@
1
+ ---
2
+ component: layout-grid
3
+ title: Layouts/Layout Grid
4
+ category: Layouts
5
+ selector:
6
+ cssFile:
7
+ sourcePath: packages/styles/stories/Layouts/layout-grid/layout-grid.stories.js
8
+ tags: []
9
+ dependencies: ["layout-grid"]
10
+ relatedComponents: ["layout-grid"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.700Z
13
+ ---
14
+
15
+ # Layouts/Layout Grid
16
+
17
+ The layout grid is made to separate data into both columns and rows. If there is not enough space on the current line of the same row, the item will go to the next line.
18
+ To use the grid, the user must use all of the \
19
+
20
+ ## Dependencies
21
+
22
+ This component depends on the following CSS files:
23
+
24
+ - `layout-grid.css`
25
+
26
+ ## Basic Usage
27
+
28
+ ```html
29
+ <div class='fd-container'>
30
+ <div class='fd-row'>
31
+ <div class='fd-col'>
32
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>12 columns element</div>
33
+ </div>
34
+ </div>
35
+
36
+ <div class='fd-row'>
37
+ <div class='fd-col fd-col--11'>
38
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>11 columns element</div>
39
+ </div>
40
+ <div class='fd-col fd-col--1'>
41
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>1 column element</div>
42
+ </div>
43
+ </div>
44
+
45
+ <div class='fd-row'>
46
+ <div class='fd-col fd-col--10'>
47
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>10 columns element</div>
48
+ </div>
49
+ <div class='fd-col fd-col--2'>
50
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>2 columns element</div>
51
+ </div>
52
+ </div>
53
+
54
+ <div class='fd-row'>
55
+ <div class='fd-col fd-col--9'>
56
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>9 columns element</div>
57
+ </div>
58
+ <div class='fd-col fd-col--3'>
59
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>3 columns element</div>
60
+ </div>
61
+ </div>
62
+
63
+ <div class='fd-row'>
64
+ <div class='fd-col fd-col--8'>
65
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>8 columns element</div>
66
+ </div>
67
+ <div class='fd-col fd-col--4'>
68
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>4 columns element</div>
69
+ </div>
70
+ </div>
71
+
72
+ <div class='fd-row'>
73
+ <div class='fd-col fd-col--7'>
74
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-10'>7 columns element</div>
75
+ </div>
76
+ <div class='fd-col fd-col--5'>
77
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-11'>5 columns element</div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class='fd-row'>
82
+ <div class='fd-col fd-col--6'>
83
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>6 columns element</div>
84
+ </div>
85
+ <div class='fd-col fd-col--6'>
86
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>6 columns element</div>
87
+ </div>
88
+ </div>
89
+
90
+ <div class='fd-row'>
91
+ <div class='fd-col fd-col--5'>
92
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>5 columns element</div>
93
+ </div>
94
+ <div class='fd-col fd-col--7'>
95
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>7 columns element</div>
96
+ </div>
97
+ </div>
98
+
99
+ <div class='fd-row'>
100
+ <div class='fd-col fd-col--4'>
101
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>4 columns element</div>
102
+ </div>
103
+ <div class='fd-col fd-col--8'>
104
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>8 columns element</div>
105
+ </div>
106
+ </div>
107
+
108
+ <div class='fd-row'>
109
+ <div class='fd-col fd-col--3'>
110
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>3 columns element</div>
111
+ </div>
112
+ <div class='fd-col fd-col--9'>
113
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>9 columns element</div>
114
+ </div>
115
+ </div>
116
+
117
+ <div class='fd-row'>
118
+ <div class='fd-col fd-col--2'>
119
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>2 columns element</div>
120
+ </div>
121
+ <div class='fd-col fd-col--10'>
122
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>10 columns element</div>
123
+ </div>
124
+ </div>
125
+
126
+ <div class='fd-row'>
127
+ <div class='fd-col fd-col--1'>
128
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-10'>1 column element</div>
129
+ </div>
130
+ <div class='fd-col fd-col--11'>
131
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-11'>11 columns element</div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class='fd-row'>
136
+ <div class='fd-col'>
137
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>12 columns element</div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ ```
142
+
143
+ ## Related Components
144
+
145
+ This component works with or depends on:
146
+
147
+ - `layout-grid`
148
+
149
+ ## Design Tokens
150
+
151
+ Key CSS variables used by this component:
152
+
153
+ - `--full`
154
+ - `--no-gap`
155
+ - `--no-horizontal-gap`
156
+ - `--no-vertical-gap`
157
+ - `--offset-`
158
+ - `--offset-after-`
159
+ - `--wrap`
160
+
161
+ ## Examples
162
+
163
+ ### DifferentSizeColumns
164
+
165
+ To define the size of that column use the `fd-col--x` modifier, where `x` can go from 1-12
166
+
167
+ ```html
168
+ <div class='fd-container'>
169
+ <div class='fd-row'>
170
+ <div class='fd-col'>
171
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>12 columns element</div>
172
+ </div>
173
+ </div>
174
+
175
+ <div class='fd-row'>
176
+ <div class='fd-col fd-col--11'>
177
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>11 columns element</div>
178
+ </div>
179
+ <div class='fd-col fd-col--1'>
180
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>1 column element</div>
181
+ </div>
182
+ </div>
183
+
184
+ <div class='fd-row'>
185
+ <div class='fd-col fd-col--10'>
186
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>10 columns element</div>
187
+ </div>
188
+ <div class='fd-col fd-col--2'>
189
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>2 columns element</div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class='fd-row'>
194
+ <div class='fd-col fd-col--9'>
195
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>9 columns element</div>
196
+ </div>
197
+ <div class='fd-col fd-col--3'>
198
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>3 columns element</div>
199
+ </div>
200
+ </div>
201
+
202
+ <div class='fd-row'>
203
+ <div class='fd-col fd-col--8'>
204
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>8 columns element</div>
205
+ </div>
206
+ <div class='fd-col fd-col--4'>
207
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>4 columns element</div>
208
+ </div>
209
+ </div>
210
+
211
+ <div class='fd-row'>
212
+ <div class='fd-col fd-col--7'>
213
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-10'>7 columns element</div>
214
+ </div>
215
+ <div class='fd-col fd-col--5'>
216
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-11'>5 columns element</div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class='fd-row'>
221
+ <div class='fd-col fd-col--6'>
222
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>6 columns element</div>
223
+ </div>
224
+ <div class='fd-col fd-col--6'>
225
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>6 columns element</div>
226
+ </div>
227
+ </div>
228
+
229
+ <div class='fd-row'>
230
+ <div class='fd-col fd-col--5'>
231
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>5 columns element</div>
232
+ </div>
233
+ <div class='fd-col fd-col--7'>
234
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>7 columns element</div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class='fd-row'>
239
+ <div class='fd-col fd-col--4'>
240
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>4 columns element</div>
241
+ </div>
242
+ <div class='fd-col fd-col--8'>
243
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>8 columns element</div>
244
+ </div>
245
+ </div>
246
+
247
+ <div class='fd-row'>
248
+ <div class='fd-col fd-col--3'>
249
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>3 columns element</div>
250
+ </div>
251
+ <div class='fd-col fd-col--9'>
252
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>9 columns element</div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class='fd-row'>
257
+ <div class='fd-col fd-col--2'>
258
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>2 columns element</div>
259
+ </div>
260
+ <div class='fd-col fd-col--10'>
261
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>10 columns element</div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class='fd-row'>
266
+ <div class='fd-col fd-col--1'>
267
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-10'>1 column element</div>
268
+ </div>
269
+ <div class='fd-col fd-col--11'>
270
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-11'>11 columns element</div>
271
+ </div>
272
+ </div>
273
+
274
+ <div class='fd-row'>
275
+ <div class='fd-col'>
276
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>12 columns element</div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ ```
281
+
282
+ ### Responsiveness
283
+
284
+ You can define different column sizes for each inflection point. In this example for extra large the cells are taking 4 columns out of 12 `fd-col-xl--4`; 4 columns out of 12 in large `fd-col-lg--4`; 6 columns out of 12 in medium `fd-col-md--6`, and 12 out of 12 in small `fd-col--12`
285
+
286
+ ```html
287
+ <div class='fd-container'>
288
+ <div class='fd-row'>
289
+ <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'>
290
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>(1 cell)</div>
291
+ </div>
292
+
293
+ <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'>
294
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>(2 cell)</div>
295
+ </div>
296
+
297
+ <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'>
298
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>(3 cell)</div>
299
+ </div>
300
+
301
+ <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'>
302
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>(4 cell)</div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ ```
307
+
308
+ ### Nesting
309
+
310
+ Add an extra `fd-row` class in between inner rows when using nesting. It will add a gutter in between rows.
311
+
312
+ ```html
313
+ <div class='fd-container'>
314
+ <div class='fd-row'>
315
+ <div class='fd-col fd-col--2'>
316
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
317
+ 2 col (~17%)
318
+ </div>
319
+ </div>
320
+
321
+ <div class='fd-col fd-col--10'>
322
+ <div class='fd-row'">
323
+ <div class='fd-col fd-col--2'>
324
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
325
+ 2 col inner row 1 (~14%)
326
+ </div>
327
+ </div>
328
+
329
+ <div class='fd-col fd-col--10'>
330
+ <div class='fd-row'>
331
+ <div class='fd-col fd-col--6'>
332
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
333
+ 6 coll inner row 2 (~34%)
334
+ </div>
335
+ </div>
336
+
337
+ <div class='fd-col fd-col--6'>
338
+ <div class='fd-row'>
339
+ <div class='fd-col fd-col--4'>
340
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>
341
+ 4 coll inner row 3 (~10%)
342
+ </div>
343
+ </div>
344
+
345
+ <div class='fd-col fd-col--8'>
346
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
347
+ 8 coll inner row 3 (~23%)
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ ```
358
+
359
+ ### Offset
360
+
361
+ To add an offset to the left of the column for all sizes use the `--offset-x` modifier. X will be the size of your choice. If the column after the offset col no longer fits in parent container it will switch to the next line. To add an offset to the left of the column for certain sizes and above use the `--offset-x--size` modifier, where size is either s,m,l,xl. To make the offset after and not before use the `--offset-after-x--size` modifier.
362
+
363
+ ```html
364
+ <div class='fd-container'>
365
+ <div class='fd-row'>
366
+ <div class='fd-col'>
367
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
368
+ 12 columns
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <div class='fd-row'>
374
+ <div class='fd-col fd-col--6'>
375
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
376
+ 6 columns
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <div class='fd-row'>
382
+ <div class='fd-col fd-col--8 fd-col--offset-4 fd-col-md--6 fd-col-md--offset-2 fd-col-lg--4 fd-col-lg--offset-4 fd-col-lx--3 fd-col-lx--offset-6'>
383
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
384
+ Different column-width and offset in different inflection points
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class='fd-row'>
390
+ <div class='fd-col fd-col--6 fd-col--offset-6'>
391
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>
392
+ 6 columns with 6-column offset
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class='fd-row'>
398
+ <div class='fd-col fd-col--3 fd-col--offset-after-1 fd-col-md--offset-after-2 fd-col-lg--offset-after-2 fd-col-xl--offset-after-1'>
399
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>
400
+ 2 column-width and offset after in different inflection points
401
+ </div>
402
+ </div>
403
+
404
+ <div class='fd-col fd-col--4 fd-col--offset-after-1'>
405
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>
406
+ 4 columns with 2-column offset after
407
+ </div>
408
+ </div>
409
+
410
+ <div class='fd-col fd-col--2'>
411
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>
412
+ 2 column element
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ ```
418
+
419
+ ### NoHorizontalGap
420
+
421
+ To remove gutters between columns apply the `fd-container--no-horizontal-gap` modifier to the container.
422
+
423
+ ```html
424
+ <div class='fd-container fd-container--no-horizontal-gap'>
425
+ <div class='fd-row'>
426
+ <div class='fd-col fd-col--8'>
427
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
428
+ 8 col no gap
429
+ </div>
430
+ </div>
431
+
432
+ <div class='fd-col fd-col--4'>
433
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
434
+ 4 col no gap
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <div class='fd-row'>
440
+ <div class='fd-col fd-col--6'>
441
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
442
+ 6 col no gap
443
+ </div>
444
+ </div>
445
+
446
+ <div class='fd-col fd-col--6'>
447
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>
448
+ 6 col no gap
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <div class='fd-row'>
454
+ <div class='fd-col fd-col--4'>
455
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
456
+ 4 col no gap
457
+ </div>
458
+ </div>
459
+
460
+ <div class='fd-col fd-col--8'>
461
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>
462
+ 8 col no gap
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ ```
468
+
469
+ ### NoVerticalGap
470
+
471
+ To remove gutters between rows apply the `fd-container--no-vertical-gap` modifier to the container.
472
+
473
+ ```html
474
+ <div class='fd-container fd-container--no-vertical-gap'>
475
+ <div class='fd-row'>
476
+ <div class='fd-col fd-col--8'>
477
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
478
+ 8 col no gap
479
+ </div>
480
+ </div>
481
+
482
+ <div class='fd-col fd-col--4'>
483
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
484
+ 4 col no gap
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <div class='fd-row'>
490
+ <div class='fd-col fd-col--6'>
491
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
492
+ 6 col no gap
493
+ </div>
494
+ </div>
495
+
496
+ <div class='fd-col fd-col--6'>
497
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>
498
+ 6 col no gap
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <div class='fd-row'>
504
+ <div class='fd-col fd-col--4'>
505
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
506
+ 4 col no gap
507
+ </div>
508
+ </div>
509
+
510
+ <div class='fd-col fd-col--8'>
511
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>
512
+ 8 col no gap
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ ```
518
+
519
+ ### NoGap
520
+
521
+ To remove gutters between rows and columns apply both the `fd-container--no-vertical-gap` and `fd-container--no-horizontal-gap` modifiers to the container.
522
+
523
+ ```html
524
+ <div class='fd-container fd-container--no-horizontal-gap fd-container--no-vertical-gap'>
525
+ <div class='fd-row'>
526
+ <div class='fd-col fd-col--8'>
527
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
528
+ 8 col no gap
529
+ </div>
530
+ </div>
531
+
532
+ <div class='fd-col fd-col--4'>
533
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
534
+ 4 col no gap
535
+ </div>
536
+ </div>
537
+ </div>
538
+
539
+ <div class='fd-row'>
540
+ <div class='fd-col fd-col--6'>
541
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
542
+ 6 col no gap
543
+ </div>
544
+ </div>
545
+
546
+ <div class='fd-col fd-col--6'>
547
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>
548
+ 6 col no gap
549
+ </div>
550
+ </div>
551
+ </div>
552
+
553
+ <div class='fd-row'>
554
+ <div class='fd-col fd-col--4'>
555
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
556
+ 4 col no gap
557
+ </div>
558
+ </div>
559
+
560
+ <div class='fd-col fd-col--8'>
561
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>
562
+ 8 col no gap
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ ```
568
+
569
+ ### AutoAdjusting
570
+
571
+ To make the column auto adjust and occupy the remaining space of the row use the `--full` modifier. There is a minimum width of 1/12 columns
572
+
573
+ ```html
574
+ <div class='fd-container'>
575
+ <div class='fd-row'>
576
+ <div class='fd-col fd-col--full'>
577
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
578
+ Auto adjusting col before 7 col
579
+ </div>
580
+ </div>
581
+
582
+ <div class='fd-col fd-col--7'>
583
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
584
+ 7 col
585
+ </div>
586
+ </div>
587
+
588
+ <div class='fd-col fd-col--full'>
589
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
590
+ Auto adjusting col after 7 col
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ ```
596
+
597
+ ## Accessibility
598
+
599
+ - Use semantic HTML elements where appropriate
600
+ - Include proper ARIA attributes for interactive elements
601
+ - Ensure keyboard navigation support
602
+ - Provide adequate color contrast
603
+
604
+ ## Source
605
+
606
+ This documentation was automatically generated from: `packages/styles/stories/Layouts/layout-grid/layout-grid.stories.js`
607
+
608
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).