npm - @rio-cloud/uikit-mcp - Versions diffs - 1.1.9 → 1.1.11 - Mend

@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

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 (211) hide show

package/README.md +2 -1
package/dist/doc-metadata.json +334 -94
package/dist/docs/components/accentBar.md +110 -116
package/dist/docs/components/activity.md +1 -1
package/dist/docs/components/analyticsAnalysisOverlay.md +630 -0
package/dist/docs/components/animatedNumber.md +2 -2
package/dist/docs/components/animatedTextReveal.md +53 -55
package/dist/docs/components/animations.md +21 -21
package/dist/docs/components/appHeader.md +27 -38
package/dist/docs/components/appLayout.md +23 -77
package/dist/docs/components/appNavigationBar.md +1 -1
package/dist/docs/components/areaCharts.md +57 -61
package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
package/dist/docs/components/assetTree.md +429 -342
package/dist/docs/components/autosuggests.md +1 -1
package/dist/docs/components/avatar.md +1 -1
package/dist/docs/components/banner.md +2 -2
package/dist/docs/components/barCharts.md +530 -414
package/dist/docs/components/barList.md +10 -10
package/dist/docs/components/basicMap.md +104 -39
package/dist/docs/components/bottomSheet.md +2 -2
package/dist/docs/components/button.md +8 -2
package/dist/docs/components/buttonToolbar.md +1 -1
package/dist/docs/components/calendarStripe.md +59 -63
package/dist/docs/components/card.md +1 -1
package/dist/docs/components/carousel.md +1 -1
package/dist/docs/components/chartColors.md +1 -1
package/dist/docs/components/chartsGettingStarted.md +1 -1
package/dist/docs/components/chat.md +2 -2
package/dist/docs/components/checkbox.md +15 -10
package/dist/docs/components/circularProgress.md +6 -6
package/dist/docs/components/clearableInput.md +1 -1
package/dist/docs/components/collapse.md +2 -2
package/dist/docs/components/composedCharts.md +63 -51
package/dist/docs/components/contentLoader.md +1 -1
package/dist/docs/components/dataTabs.md +33 -33
package/dist/docs/components/datepickers.md +693 -685
package/dist/docs/components/dayPicker.md +5624 -0
package/dist/docs/components/dayPickerCalendar.md +5289 -0
package/dist/docs/components/dialogs.md +17 -19
package/dist/docs/components/divider.md +1 -1
package/dist/docs/components/dropdowns.md +3264 -3276
package/dist/docs/components/editableContent.md +91 -91
package/dist/docs/components/expander.md +4 -1
package/dist/docs/components/fade.md +1 -1
package/dist/docs/components/fadeExpander.md +1 -1
package/dist/docs/components/fadeUp.md +32 -36
package/dist/docs/components/feedback.md +1 -1
package/dist/docs/components/filePickers.md +1 -1
package/dist/docs/components/formLabel.md +29 -31
package/dist/docs/components/groupedItemList.md +3 -7
package/dist/docs/components/htmlTable.md +5074 -0
package/dist/docs/components/iconList.md +4 -4
package/dist/docs/components/imagePreloader.md +1 -1
package/dist/docs/components/labeledElement.md +1 -1
package/dist/docs/components/licensePlate.md +1 -1
package/dist/docs/components/lineCharts.md +172 -170
package/dist/docs/components/listMenu.md +15 -12
package/dist/docs/components/loadMore.md +4 -2
package/dist/docs/components/mainNavigation.md +1 -1
package/dist/docs/components/mapCircle.md +10 -1
package/dist/docs/components/mapCluster.md +25 -1
package/dist/docs/components/mapContext.md +12 -4
package/dist/docs/components/mapDraggableMarker.md +12 -1
package/dist/docs/components/mapGettingStarted.md +39 -1
package/dist/docs/components/mapInfoBubble.md +129 -2
package/dist/docs/components/mapLayerGroup.md +10 -1
package/dist/docs/components/mapMarker.md +10 -1
package/dist/docs/components/mapPolygon.md +288 -85
package/dist/docs/components/mapRoute.md +262 -172
package/dist/docs/components/mapSettings.md +28 -1
package/dist/docs/components/mapUtils.md +1 -1
package/dist/docs/components/mapViewportHistory.md +287 -0
package/dist/docs/components/multiselects.md +217 -18
package/dist/docs/components/noData.md +1 -1
package/dist/docs/components/notifications.md +2 -2
package/dist/docs/components/numbercontrol.md +15 -15
package/dist/docs/components/onboarding.md +1 -1
package/dist/docs/components/page.md +1 -1
package/dist/docs/components/pager.md +1 -1
package/dist/docs/components/pieCharts.md +237 -211
package/dist/docs/components/popover.md +1 -1
package/dist/docs/components/position.md +1 -1
package/dist/docs/components/radialBarCharts.md +446 -398
package/dist/docs/components/radioCardGroup.md +1 -1
package/dist/docs/components/radiobutton.md +98 -98
package/dist/docs/components/releaseNotes.md +1 -1
package/dist/docs/components/resizer.md +1 -1
package/dist/docs/components/responsiveColumnStripe.md +1 -1
package/dist/docs/components/responsiveVideo.md +1 -1
package/dist/docs/components/rioglyph.md +1 -1
package/dist/docs/components/rules.md +41 -47
package/dist/docs/components/saveableInput.md +252 -252
package/dist/docs/components/selects.md +332 -161
package/dist/docs/components/sidebar.md +1 -1
package/dist/docs/components/sliders.md +1 -1
package/dist/docs/components/smoothScrollbars.md +19 -13
package/dist/docs/components/spinners.md +1 -1
package/dist/docs/components/states.md +15 -1
package/dist/docs/components/statsWidgets.md +1 -1
package/dist/docs/components/statusBar.md +3 -1
package/dist/docs/components/stepButton.md +1 -1
package/dist/docs/components/steppedProgressBars.md +9 -11
package/dist/docs/components/subNavigation.md +1 -1
package/dist/docs/components/supportMarker.md +1 -1
package/dist/docs/components/svgImage.md +1 -1
package/dist/docs/components/switch.md +5 -1
package/dist/docs/components/table.md +21361 -0
package/dist/docs/components/tableControls.md +982 -0
package/dist/docs/components/tagManager.md +1 -1
package/dist/docs/components/tags.md +1 -1
package/dist/docs/components/teaser.md +1 -1
package/dist/docs/components/textTruncateMiddle.md +1 -1
package/dist/docs/components/timeline.md +1 -1
package/dist/docs/components/timepicker.md +3 -1
package/dist/docs/components/toggleButton.md +3 -1
package/dist/docs/components/tooltip.md +8 -2
package/dist/docs/components/tracker.md +1 -1
package/dist/docs/components/virtualList.md +60 -60
package/dist/docs/foundations.md +761 -3077
package/dist/docs/start/changelog.md +73 -3
package/dist/docs/start/goodtoknow.md +5 -1
package/dist/docs/start/guidelines/color-combinations.md +5 -1
package/dist/docs/start/guidelines/custom-css.md +26 -2
package/dist/docs/start/guidelines/custom-rioglyph.md +20 -2
package/dist/docs/start/guidelines/formatting.md +2254 -249
package/dist/docs/start/guidelines/iframe.md +53 -19
package/dist/docs/start/guidelines/obfuscate-data.md +24 -2
package/dist/docs/start/guidelines/print-css.md +16 -2
package/dist/docs/start/guidelines/spinner.md +1 -1
package/dist/docs/start/guidelines/state-in-url.md +1138 -11
package/dist/docs/start/guidelines/supported-browsers.md +9 -2
package/dist/docs/start/guidelines/writing.md +228 -2
package/dist/docs/start/howto.md +155 -13
package/dist/docs/start/intro.md +40 -2
package/dist/docs/start/responsiveness.md +27 -1
package/dist/docs/templates/ai-assistant.md +311 -0
package/dist/docs/templates/common-table.md +814 -0
package/dist/docs/templates/detail-views.md +846 -0
package/dist/docs/templates/expandable-details.md +214 -0
package/dist/docs/templates/feature-cards.md +479 -0
package/dist/docs/templates/form-summary.md +179 -0
package/dist/docs/templates/form-toggle.md +329 -0
package/dist/docs/templates/list-blocks.md +872 -0
package/dist/docs/templates/loading-progress.md +100 -0
package/dist/docs/templates/options-panel.md +132 -0
package/dist/docs/templates/panel-variants.md +137 -0
package/dist/docs/templates/progress-cards.md +541 -0
package/dist/docs/templates/progress-success.md +125 -0
package/dist/docs/templates/settings-form.md +401 -0
package/dist/docs/templates/stats-blocks.md +1245 -0
package/dist/docs/templates/table-panel.md +310 -0
package/dist/docs/templates/usage-cards.md +199 -0
package/dist/docs/utilities/classNames.md +89 -1
package/dist/docs/utilities/deviceUtils.md +2 -2
package/dist/docs/utilities/featureToggles.md +182 -2
package/dist/docs/utilities/fuelTypeUtils.md +27 -29
package/dist/docs/utilities/getTrackingAttributes.md +322 -0
package/dist/docs/utilities/routeUtils.md +211 -3
package/dist/docs/utilities/useAfterMount.md +1 -1
package/dist/docs/utilities/useAutoAnimate.md +1 -1
package/dist/docs/utilities/useAverage.md +1 -1
package/dist/docs/utilities/useClickOutside.md +1 -1
package/dist/docs/utilities/useClipboard.md +2 -2
package/dist/docs/utilities/useCookies.md +1 -1
package/dist/docs/utilities/useCount.md +1 -1
package/dist/docs/utilities/useDarkMode.md +5 -4
package/dist/docs/utilities/useDebugInfo.md +3 -3
package/dist/docs/utilities/useDraggableElement.md +281 -0
package/dist/docs/utilities/useEffectOnce.md +1 -1
package/dist/docs/utilities/useElapsedTime.md +1 -1
package/dist/docs/utilities/useElementSize.md +1 -1
package/dist/docs/utilities/useEsc.md +1 -1
package/dist/docs/utilities/useEvent.md +1 -1
package/dist/docs/utilities/useFocusTrap.md +1 -1
package/dist/docs/utilities/useFullscreen.md +1 -1
package/dist/docs/utilities/useHover.md +1 -1
package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
package/dist/docs/utilities/useInterval.md +1 -1
package/dist/docs/utilities/useIsFocusWithin.md +1 -1
package/dist/docs/utilities/useKey.md +8 -10
package/dist/docs/utilities/useLocalStorage.md +1 -1
package/dist/docs/utilities/useLocationSuggestions.md +1 -1
package/dist/docs/utilities/useMax.md +1 -1
package/dist/docs/utilities/useMin.md +1 -1
package/dist/docs/utilities/useMutationObserver.md +1 -1
package/dist/docs/utilities/useOnScreen.md +1 -1
package/dist/docs/utilities/useOnlineStatus.md +1 -1
package/dist/docs/utilities/usePostMessage.md +2 -2
package/dist/docs/utilities/usePostMessageSender.md +1 -1
package/dist/docs/utilities/usePrevious.md +110 -2
package/dist/docs/utilities/useResizeObserver.md +35 -15
package/dist/docs/utilities/useRioCookieConsent.md +1 -1
package/dist/docs/utilities/useScrollPosition.md +3 -6
package/dist/docs/utilities/useSearch.md +1 -3
package/dist/docs/utilities/useSearchHighlight.md +1 -1
package/dist/docs/utilities/useSorting.md +370 -239
package/dist/docs/utilities/useStateWithValidation.md +1 -1
package/dist/docs/utilities/useSum.md +1 -1
package/dist/docs/utilities/useTableExport.md +364 -288
package/dist/docs/utilities/useTableSelection.md +88 -92
package/dist/docs/utilities/useTimeout.md +1 -1
package/dist/docs/utilities/useToggle.md +1 -1
package/dist/docs/utilities/useUrlState.md +1 -1
package/dist/docs/utilities/useWindowResize.md +1 -1
package/dist/index.mjs +173 -69
package/dist/search-synonyms.json +214 -76
package/dist/version.json +2 -2
package/package.json +4 -5
package/dist/docs/components/mapRouteGenerator.md +0 -6
package/dist/docs/components/tables.md +0 -8

package/dist/docs/start/howto.md CHANGED Viewed

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Welcome
 *Source:* https://uikit.developers.rio.cloud/#/start/howto
-*Captured:* 2026-03-06T10:39:52.572Z
+*Captured:* 2026-04-27T14:57:04.246Z
 Install the latest version of the UIKIT (that includes latest beta versions as well) via
@@ -26,18 +26,38 @@ Install the latest version of the UIKIT (that includes latest beta versions as w
 ## Install the npm package
+Install the npm package
 ```javascript
 npm install @rio-cloud/rio-uikit
 ```
+-
+/
+-
 Or install a dedicated version via
 ```javascript
-npm install @rio-cloud/rio-uikit@2.2.1
+npm install @rio-cloud/rio-uikit@2.4.0
 ```
+-
+/
+-
+2.4
+.0
 ## TypeScript
+TypeScript
 The UIKIT is built with TypeScript and defines the types inside the components.
 > Note: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.
@@ -48,6 +68,48 @@ import Select, { type SelectOption } from "@rio-cloud/rio-uikit/Select";
 import TableViewToggles, { type TableViewTogglesViewType } from "@rio-cloud/rio-uikit/TableViewToggles";
 ```
+import
+,
+{
+}
+from
+"@rio-cloud/rio-uikit/AutoSuggest"
+;
+import
+,
+{
+}
+from
+"@rio-cloud/rio-uikit/Select"
+;
+import
+,
+{
+}
+from
+"@rio-cloud/rio-uikit/TableViewToggles"
+;
 ## Document <head /> key meta tags
 **Mandatory**
@@ -60,6 +122,8 @@ This not only guarantees proper rendering of your content but also prevents comm
 <meta charset="utf-8" />
 ```
+&lt;meta charset="utf-8" /&gt;
 **Best practices**
 The viewport meta tag is a cornerstone of responsive web design. It configures the viewport settings to match the device’s screen width, ensuring that your webpage adapts seamlessly to different screen sizes. Without this tag, mobile devices often display pages as a scaled-down version of their desktop layout, requiring users to zoom or scroll horizontally.
@@ -70,9 +134,13 @@ By specifying the initial scale and width, this tag guarantees that your content
 <meta name="viewport" content="initial-scale=1.0, width=device-width" />
 ```
+&lt;meta name="viewport" content="initial-scale=1.0, width=device-width" /&gt;
 ## UIKIT CSS
-ManagedRecommended
+**Managed**
+> Recommended
 When utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.
@@ -80,18 +148,24 @@ You no longer need to manually add the CSS style tag to your index.html. Feel fr
 > Note: Please note that every application and every widget must be wrapped with the <ApplicationLayout />, as it executes our init function.
-ManualNot Recommended
+**Manual**
+Not Recommended
 Use the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/rio-uikit.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/rio-uikit.css">
 ```
+&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/rio-uikit.css"&gt;
 > Note: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.
 ## Brand themes
+Brand themes
 In addition to the RIO theme, the UIKIT offers other brand-specific themes.
 These other themes may only be used for applications or services who don't run on the RIO platform. All platform services have to use the RIO theme to achieve a distinct look and feel for the user when switching between services and applications.
@@ -99,18 +173,26 @@ These other themes may only be used for applications or services who don't run o
 In order to use such a brand theme, modify the URL in the &lt;link&gt; tag that loads the CSS
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/vw-uikit.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/vw-uikit.css">
 ```
+&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/vw-uikit.css"&gt;
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/man-uikit.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/man-uikit.css">
 ```
+&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/man-uikit.css"&gt;
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/scania-uikit.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/scania-uikit.css">
 ```
-ManagedRecommended
+&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/scania-uikit.css"&gt;
+**Managed**
+> Recommended
 You can simply omit the &lt;link&gt; tag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.
@@ -118,32 +200,46 @@ You can simply omit the &lt;link&gt; tag in your index.html altogether. The UIKI
 <html data-brand="vw">
 ```
+<html data-brand="vw">
 ```html
 <html data-brand="man">
 ```
+<html data-brand="man">
 ```html
 <html data-brand="scania">
 ```
+<html data-brand="scania">
 ## Print styles
+Print styles
 The UIKIT supports simple print stylings in order to have printable content. See Print CSS
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/rio-uikit-print-utilities.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/rio-uikit-print-utilities.css">
 ```
+&lt;link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.4.0/rio-uikit-print-utilities.css"&gt;
 ## Additional styling information
+Additional styling information
 In some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:
 ```html
-https://uikit.developers.rio.cloud/2.2.1/rio-uikit-colors.json
+https://uikit.developers.rio.cloud/2.4.0/rio-uikit-colors.json
 ```
 ## Dark mode
+Dark mode
 The UIKIT is fully dark mode ready.
 > Note: Please note that every application and every widget must be wrapped with the <ApplicationLayout /> as it executes our init function.
@@ -159,18 +255,52 @@ The UIKIT is fully dark mode ready.
 </ApplicationLayout>
 ```
+<ApplicationLayout>
+<ApplicationLayout.Header>
+<ApplicationHeader label='RIO Service' navItems={navItems} />
+</ApplicationLayout.Header>
+<ApplicationLayout.Body>
+<div>
+My application
+</div>
+</ApplicationLayout.Body>
+</ApplicationLayout>
 ```jsx
 <ApplicationLayout>
 <div>My widget</div>
 </ApplicationLayout>
 ```
+<ApplicationLayout>
+<div>
+My widget
+</div>
+</ApplicationLayout>
 In cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.
 ```html
-<script src="https://uikit.developers.rio.cloud/2.2.1/rio-darkmode.js"></script>
+<script src="https://uikit.developers.rio.cloud/2.4.0/rio-darkmode.js"></script>
 ```
+&lt;script src="https://uikit.developers.rio.cloud/2.4.0/rio-darkmode.js"&gt;
+&lt;/script&gt;
 If you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.
 To manually enable dark mode when testing your application locally, adddata-theme="dark" to the <html> tag.
@@ -184,4 +314,16 @@ peerDependencies
 ```javascript
 "react": ">=18.0.0"
 "react-dom": ">=18.0.0"
-```
+```
+"react"
+:
+">=18.0.0"
+"react-dom"
+:
+">=18.0.0"

package/dist/docs/start/intro.md CHANGED Viewed

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Welcome
 *Source:* https://uikit.developers.rio.cloud/#/start/intro
-*Captured:* 2026-03-06T10:39:52.425Z
+*Captured:* 2026-04-27T14:57:04.390Z
 Welcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:
@@ -24,14 +24,38 @@ justify-content: center;
 }
 ```
+.my-container
+{
+display
+:
+;
+justify-content
+:
+;
+}
 Simply apply the atomic classes:
 ```html
 <div class="display-flex justify-content-center">...</div>
 ```
+<div class="display-flex justify-content-center">
+</div>
 ## Use React components for structure
+Our library also includes a range of React components that serve as building blocks for your application. These components are designed to work seamlessly with the CSS classes, allowing you to:
 - Quickly build UIs using pre-built components like the buttons, selects, and dialogs
 - Combine React components with CSS classes to create complex layouts with minimal custom code
 - Extend your layouts by composing React components while using utility classes to tweak the design where necessary
@@ -40,4 +64,18 @@ Simply apply the atomic classes:
 - Efficiency Our library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.
 - Design flexibility When design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention
-- Better collaboration By sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches
+- Better collaboration By sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches
+EfficiencyOur library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.
+Design flexibilityWhen design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention
+Better collaborationBy sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches
+By combining atomic CSS classes and React components, you can create powerful, flexible user interfaces with ease, all while ensuring consistency and maintainability. Happy building!
+What is new?ChangelogRelease notes for each version of the UIKIT.How can I use it?How to use itInstructions on how to integrate it.Questions about the UIKIT?#rio-uikitPlease post your question on Slack.
+We welcome any feedback to improve the UIKIT further. Please send it to uxui@rio.cloud
+The RIO UIKIT is licensed under the Apache 2.0 license by TB Digital Services GmbH | version 2.4.0

package/dist/docs/start/responsiveness.md CHANGED Viewed

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/responsiveness
-*Captured:* 2026-03-06T10:39:52.288Z
+*Captured:* 2026-04-27T14:57:04.420Z
 The UIKIT considers all platforms — both desktop and mobile. We recognize that people work across many different products and often need to support multiple platforms and the UIKIT is a foundation for that with its many responsive building blocks and responsive components.
@@ -11,16 +11,32 @@ The UIKIT considers all platforms — both desktop and mobile. We recognize that
 ## Principal
+"We believe that people should have a high-quality experience that scales across all platforms."
 To build for all platforms, there are a lot of options and tools that can be used.
 ## Layout
 **Fluid container**
+The UIKIT used a fluid container by default that adapts to the various screen sizes. It also offers various fluid container sizes that shall suit your needs. Checkout the container documentation.
 **Responsive grid systems**
 A responsive grid system allows a layout to change dynamically based on the size of the screen or the surrounding element. This also guarantees consistent layouts across all products.
+Cols
+For that, the UIKIT offers the twelve-column col system that is derived from Bootstraps col system. The Col documentation also lists all responsive column classes ranging from xs to xl.Responsive col classes and their breakpoints:Responsive...-xs-......-ls-......-sm-......-md-......-lg-......-xl-...Range0to∞480pxto∞768pxto∞992pxto∞1200pxto∞1700pxto∞
+Grid
+Additionally, you can also use the responsive classes for the CSS grid that also uses a twelve-column system. GridResponsive grid classes and their breakpoints:Responsive...-xs...-ls...-sm...-md...-lg...-xlRange0to480px480pxto∞768pxto∞992pxto∞1200pxto∞1700pxto∞
+Flexbox
+Using Flexbox is pretty common and allows you to handle elements to respect their container size to either shrink or grow. Also pretty useful to wrap elements around onto the next row in tight spaces. Using gap along with flex helps to space the elements evenly. You also might want to switch from flex row to flex column at a certain breakpoint via a simple responsive flex class.Responsive flexbox classes and their breakpoints:Responsive...-xs...-ls...-sm...-md...-lg...-xlRange0to480px480pxto∞768pxto∞992pxto∞1200pxto∞1700pxto∞
 ## Spacings & sizing
 The UIKIT offers also responsive padding and margin classes that allow reducing or increasing the spacing around elements depending on a certain breakpoint. This for example enables to set a smaller margin on mobile devices than on desktops.
@@ -77,6 +93,16 @@ See the full list of container query utilities in the Container queries section.
 </div>
 ```
+<div className="cq-container">
+<div className="cq-300:flex-column cq-600:flex-row cq-300:padding-10">
+<!-- content -->
+</div>
+</div>
 In this example:
 - The inner element uses a column layout when its container is at least 300px wide.