@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/label.md ADDED
@@ -0,0 +1,66 @@
1
+ ---
2
+ component: label
3
+ title: Patterns/Label
4
+ category: patterns
5
+ selector:
6
+ cssFile:
7
+ sourcePath: packages/common-css/stories/patterns/label/label.stories.js
8
+ generatedAt: 2026-05-28T15:51:35.388Z
9
+ ---
10
+
11
+ # Patterns/Label
12
+
13
+ The following classes and mixin provide a way to style your labels per SAP design.
14
+ <br><br>
15
+ <b>CSS Classes: </b><br><br>
16
+ <code>.sap-label</code><br>
17
+ <code>.sap-label-required</code><br>
18
+ <code>.sap-label-colon</code><br>
19
+ <code>.sap-label-colon-required</code><br><br><br>
20
+ <b>SCSS Mixin: </b>
21
+ <code>@include sap-label(<i style="color: red;">$required, $colon</i>)</code><br>
22
+ where <i style="color: red;">$required</i> and <i style="color: red;">$colon</i> are optional and can be set individually. <br>
23
+ - <code>@include sap-label($required: true)</code>: to display a label with asterisk<br>
24
+ - <code>@include sap-label($colon: true)</code>: to display a label with colon<br>
25
+ - <code>@include sap-label($required: true, $colon: true)</code>: to display a label with asterisk and colon<br>
26
+
27
+ ## Basic Usage
28
+
29
+ ```html
30
+ <label class="sap-label">Default Label</label>
31
+ <br>
32
+ <label class="sap-label-required">Required Label</label>
33
+ <br>
34
+ <label class="sap-label-colon">Colon Label</label>
35
+ <br>
36
+ <label class="sap-label-colon-required">Required Colon Label</label>
37
+ <br>
38
+ ```
39
+
40
+ ## Examples
41
+
42
+ ### Examples
43
+
44
+ ```html
45
+ <label class="sap-label">Default Label</label>
46
+ <br>
47
+ <label class="sap-label-required">Required Label</label>
48
+ <br>
49
+ <label class="sap-label-colon">Colon Label</label>
50
+ <br>
51
+ <label class="sap-label-colon-required">Required Colon Label</label>
52
+ <br>
53
+ ```
54
+
55
+ ## Accessibility
56
+
57
+ - Use semantic HTML elements where appropriate
58
+ - Include proper ARIA attributes for interactive elements
59
+ - Ensure keyboard navigation support
60
+ - Provide adequate color contrast
61
+
62
+ ## Source
63
+
64
+ This documentation was automatically generated from: `packages/common-css/stories/patterns/label/label.stories.js`
65
+
66
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).
package/data/components/layout-grid.md ADDED
@@ -0,0 +1,447 @@
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
+ generatedAt: 2026-05-28T15:51:35.735Z
9
+ ---
10
+
11
+ # Layouts/Layout Grid
12
+
13
+ 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.
14
+ To use the grid, the user must use all of the \
15
+
16
+ ## Basic Usage
17
+
18
+ ```html
19
+ <div class='fd-container'>
20
+ <div class='fd-row'>
21
+ <div class='fd-col'>
22
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>12 columns element</div>
23
+ </div>
24
+ </div>
25
+ <div class='fd-row'>
26
+ <div class='fd-col fd-col--11'>
27
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>11 columns element</div>
28
+ </div>
29
+ ```
30
+
31
+ ## Modifiers
32
+
33
+ | Class | Description |
34
+ |-------|-------------|
35
+ | `--color-` | Style variant |
36
+ | `--full` | Style variant |
37
+ | `--no-horizontal-gap` | Style variant |
38
+ | `--no-vertical-gap` | Style variant |
39
+ | `--offset-` | Style variant |
40
+ | `--offset-after-` | Style variant |
41
+
42
+ ## Examples
43
+
44
+ ### DifferentSizeColumns
45
+
46
+ To define the size of that column use the
47
+
48
+ ```html
49
+ <div class='fd-container'>
50
+ <div class='fd-row'>
51
+ <div class='fd-col'>
52
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>12 columns element</div>
53
+ </div>
54
+ </div>
55
+ <div class='fd-row'>
56
+ <div class='fd-col fd-col--11'>
57
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>11 columns element</div>
58
+ </div>
59
+ <div class='fd-col fd-col--1'>
60
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>1 column element</div>
61
+ </div>
62
+ </div>
63
+ <div class='fd-row'>
64
+ <div class='fd-col fd-col--10'>
65
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>10 columns element</div>
66
+ </div>
67
+ <div class='fd-col fd-col--2'>
68
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>2 columns element</div>
69
+ </div>
70
+ </div>
71
+ <div class='fd-row'>
72
+ <div class='fd-col fd-col--9'>
73
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>9 columns element</div>
74
+ </div>
75
+ <div class='fd-col fd-col--3'>
76
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>3 columns element</div>
77
+ </div>
78
+ </div>
79
+ <div class='fd-row'>
80
+ <div class='fd-col fd-col--8'>
81
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>8 columns element</div>
82
+ </div>
83
+ <div class='fd-col fd-col--4'>
84
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>4 columns element</div>
85
+ </div>
86
+ </div>
87
+ <div class='fd-row'>
88
+ <div class='fd-col fd-col--7'>
89
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-10'>7 columns element</div>
90
+ </div>
91
+ <div class='fd-col fd-col--5'>
92
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-11'>5 columns element</div>
93
+ </div>
94
+ </div>
95
+ <div class='fd-row'>
96
+ <div class='fd-col fd-col--6'>
97
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>6 columns element</div>
98
+ </div>
99
+ <div class='fd-col fd-col--6'>
100
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>6 columns element</div>
101
+ </div>
102
+ </div>
103
+ <div class='fd-row'>
104
+ <div class='fd-col fd-col--5'>
105
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>5 columns element</div>
106
+ </div>
107
+ <div class='fd-col fd-col--7'>
108
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>7 columns element</div>
109
+ </div>
110
+ </div>
111
+ <div class='fd-row'>
112
+ <div class='fd-col fd-col--4'>
113
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>4 columns element</div>
114
+ </div>
115
+ <div class='fd-col fd-col--8'>
116
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>8 columns element</div>
117
+ </div>
118
+ </div>
119
+ <div class='fd-row'>
120
+ <div class='fd-col fd-col--3'>
121
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>3 columns element</div>
122
+ </div>
123
+ <div class='fd-col fd-col--9'>
124
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>9 columns element</div>
125
+ </div>
126
+ </div>
127
+ <div class='fd-row'>
128
+ <div class='fd-col fd-col--2'>
129
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>2 columns element</div>
130
+ </div>
131
+ <div class='fd-col fd-col--10'>
132
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>10 columns element</div>
133
+ </div>
134
+ </div>
135
+ <div class='fd-row'>
136
+ <div class='fd-col fd-col--1'>
137
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-10'>1 column element</div>
138
+ </div>
139
+ <div class='fd-col fd-col--11'>
140
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-11'>11 columns element</div>
141
+ </div>
142
+ </div>
143
+ <div class='fd-row'>
144
+ <div class='fd-col'>
145
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>12 columns element</div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ ```
150
+
151
+ ### Responsiveness
152
+
153
+ 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
154
+
155
+ ```html
156
+ <div class='fd-container'>
157
+ <div class='fd-row'>
158
+ <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'>
159
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>(1 cell)</div>
160
+ </div>
161
+ <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'>
162
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>(2 cell)</div>
163
+ </div>
164
+ <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'>
165
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>(3 cell)</div>
166
+ </div>
167
+ <div class='fd-col fd-col--12 fd-col-md--6 fd-col-lg--4 fd-col-xl--4'>
168
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>(4 cell)</div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ ```
173
+
174
+ ### Nesting
175
+
176
+ Add an extra
177
+
178
+ ```html
179
+ <div class='fd-container'>
180
+ <div class='fd-row'>
181
+ <div class='fd-col fd-col--2'>
182
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
183
+ 2 col (~17%)
184
+ </div>
185
+ </div>
186
+ <div class='fd-col fd-col--10'>
187
+ <div class='fd-row'">
188
+ <div class='fd-col fd-col--2'>
189
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
190
+ 2 col inner row 1 (~14%)
191
+ </div>
192
+ </div>
193
+ <div class='fd-col fd-col--10'>
194
+ <div class='fd-row'>
195
+ <div class='fd-col fd-col--6'>
196
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
197
+ 6 coll inner row 2 (~34%)
198
+ </div>
199
+ </div>
200
+ <div class='fd-col fd-col--6'>
201
+ <div class='fd-row'>
202
+ <div class='fd-col fd-col--4'>
203
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>
204
+ 4 coll inner row 3 (~10%)
205
+ </div>
206
+ </div>
207
+ <div class='fd-col fd-col--8'>
208
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
209
+ 8 coll inner row 3 (~23%)
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ ```
220
+
221
+ ### Offset
222
+
223
+ To add an offset to the left of the column for all sizes use the
224
+
225
+ ```html
226
+ <div class='fd-container'>
227
+ <div class='fd-row'>
228
+ <div class='fd-col'>
229
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
230
+ 12 columns
231
+ </div>
232
+ </div>
233
+ </div>
234
+ <div class='fd-row'>
235
+ <div class='fd-col fd-col--6'>
236
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
237
+ 6 columns
238
+ </div>
239
+ </div>
240
+ </div>
241
+ <div class='fd-row'>
242
+ <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'>
243
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
244
+ Different column-width and offset in different inflection points
245
+ </div>
246
+ </div>
247
+ </div>
248
+ <div class='fd-row'>
249
+ <div class='fd-col fd-col--6 fd-col--offset-6'>
250
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-7'>
251
+ 6 columns with 6-column offset
252
+ </div>
253
+ </div>
254
+ </div>
255
+ <div class='fd-row'>
256
+ <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'>
257
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-8'>
258
+ 2 column-width and offset after in different inflection points
259
+ </div>
260
+ </div>
261
+ <div class='fd-col fd-col--4 fd-col--offset-after-1'>
262
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-9'>
263
+ 4 columns with 2-column offset after
264
+ </div>
265
+ </div>
266
+ <div class='fd-col fd-col--2'>
267
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-12'>
268
+ 2 column element
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ ```
274
+
275
+ ### NoHorizontalGap
276
+
277
+ To remove gutters between columns apply the
278
+
279
+ ```html
280
+ <div class='fd-container fd-container--no-horizontal-gap'>
281
+ <div class='fd-row'>
282
+ <div class='fd-col fd-col--8'>
283
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
284
+ 8 col no gap
285
+ </div>
286
+ </div>
287
+ <div class='fd-col fd-col--4'>
288
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
289
+ 4 col no gap
290
+ </div>
291
+ </div>
292
+ </div>
293
+ <div class='fd-row'>
294
+ <div class='fd-col fd-col--6'>
295
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
296
+ 6 col no gap
297
+ </div>
298
+ </div>
299
+ <div class='fd-col fd-col--6'>
300
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>
301
+ 6 col no gap
302
+ </div>
303
+ </div>
304
+ </div>
305
+ <div class='fd-row'>
306
+ <div class='fd-col fd-col--4'>
307
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
308
+ 4 col no gap
309
+ </div>
310
+ </div>
311
+ <div class='fd-col fd-col--8'>
312
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>
313
+ 8 col no gap
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ ```
319
+
320
+ ### NoVerticalGap
321
+
322
+ To remove gutters between rows apply the
323
+
324
+ ```html
325
+ <div class='fd-container fd-container--no-vertical-gap'>
326
+ <div class='fd-row'>
327
+ <div class='fd-col fd-col--8'>
328
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
329
+ 8 col no gap
330
+ </div>
331
+ </div>
332
+ <div class='fd-col fd-col--4'>
333
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
334
+ 4 col no gap
335
+ </div>
336
+ </div>
337
+ </div>
338
+ <div class='fd-row'>
339
+ <div class='fd-col fd-col--6'>
340
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
341
+ 6 col no gap
342
+ </div>
343
+ </div>
344
+ <div class='fd-col fd-col--6'>
345
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>
346
+ 6 col no gap
347
+ </div>
348
+ </div>
349
+ </div>
350
+ <div class='fd-row'>
351
+ <div class='fd-col fd-col--4'>
352
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
353
+ 4 col no gap
354
+ </div>
355
+ </div>
356
+ <div class='fd-col fd-col--8'>
357
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>
358
+ 8 col no gap
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ ```
364
+
365
+ ### NoGap
366
+
367
+ To remove gutters between rows and columns apply both the
368
+
369
+ ```html
370
+ <div class='fd-container fd-container--no-horizontal-gap fd-container--no-vertical-gap'>
371
+ <div class='fd-row'>
372
+ <div class='fd-col fd-col--8'>
373
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
374
+ 8 col no gap
375
+ </div>
376
+ </div>
377
+ <div class='fd-col fd-col--4'>
378
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
379
+ 4 col no gap
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <div class='fd-row'>
384
+ <div class='fd-col fd-col--6'>
385
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-3'>
386
+ 6 col no gap
387
+ </div>
388
+ </div>
389
+ <div class='fd-col fd-col--6'>
390
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-4'>
391
+ 6 col no gap
392
+ </div>
393
+ </div>
394
+ </div>
395
+ <div class='fd-row'>
396
+ <div class='fd-col fd-col--4'>
397
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-5'>
398
+ 4 col no gap
399
+ </div>
400
+ </div>
401
+ <div class='fd-col fd-col--8'>
402
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-6'>
403
+ 8 col no gap
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ ```
409
+
410
+ ### AutoAdjusting
411
+
412
+ To make the column auto adjust and occupy the remaining space of the row use the
413
+
414
+ ```html
415
+ <div class='fd-container'>
416
+ <div class='fd-row'>
417
+ <div class='fd-col fd-col--full'>
418
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
419
+ Auto adjusting col before 7 col
420
+ </div>
421
+ </div>
422
+ <div class='fd-col fd-col--7'>
423
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-2'>
424
+ 7 col
425
+ </div>
426
+ </div>
427
+ <div class='fd-col fd-col--full'>
428
+ <div class='docs-layout-grid-bg docs-layout-grid-bg--color-1'>
429
+ Auto adjusting col after 7 col
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ ```
435
+
436
+ ## Accessibility
437
+
438
+ - Use semantic HTML elements where appropriate
439
+ - Include proper ARIA attributes for interactive elements
440
+ - Ensure keyboard navigation support
441
+ - Provide adequate color contrast
442
+
443
+ ## Source
444
+
445
+ This documentation was automatically generated from: `packages/styles/stories/Layouts/layout-grid/layout-grid.stories.js`
446
+
447
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).