@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/releasenotes.json

@@ -0,0 +1,44 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:54.253Z",
+    "source": "https://uikit.developers.rio.cloud/#components/releaseNotes",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/releasenotes",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "4757e73ac5886b92120ea4753e68c965133bece293010eebe7bc7f9a4404322f"
+  },
+  "title": "ReleaseNotes",
+  "lead": "Component to render release notes in a standardized manner.",
+  "content": [
+    {
+      "heading": "ReleaseNotes",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"panel panel-default\"><div class=\"panel-heading\"><div class=\"display-flex justify-content-between\"><span class=\"text-size-16 text-medium\">1.1.0</span><span class=\"text-thin\">23.07.2018</span></div></div><div class=\"panel-body white-space-pre-line\"><div><div class=\"padding-left-15\">Map view within the tour history table\n• Modern map design as used in the Beta of the fleet monitor\n• Works with all event types\n• Event specific map marker\n    • Map size adjustable via slider</div></div></div></div><div class=\"panel panel-default\"><div class=\"panel-heading\"><div class=\"display-flex justify-content-between\"><span class=\"text-size-16 text-medium\">1.0.0</span><span class=\"text-thin\">27.06.2018</span></div></div><div class=\"panel-body white-space-pre-line\"><ul class=\"margin-bottom-0 margin-left-5 padding-left-25\"><li><div>New feature XYZ has been added ...</div></li><li><div>fixed bugs in ...</div></li><li><div>Another feature has been added</div></li></ul></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ReleaseNotes from '@rio-cloud/rio-uikit/ReleaseNotes';\n\nconst releaseNotes = {\n    'en-GB': {\n        '1.1.0': {\n            date: '23.07.2018',\n            content: (\n                <div className='padding-left-15'>{`Map view within the tour history table\n• Modern map design as used in the Beta of the fleet monitor\n• Works with all event types\n• Event specific map marker\n    • Map size adjustable via slider`}</div>\n            ),\n        },\n        '1.0.0': {\n            date: '27.06.2018',\n            content: [\n                <div>New feature XYZ has been added ...</div>,\n                <div>fixed bugs in ...</div>,\n                <div>Another feature has been added</div>,\n            ],\n        },\n    },\n};\n\nconst translationKey = 'en-GB';\n\nexport default () => <ReleaseNotes releaseNotes={releaseNotes[translationKey]} />;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n            <div class=\"display-flex justify-content-between\">\n                <span class=\"text-size-16 text-medium\">1.1.0</span>\n                <span class=\"text-thin\">23.07.2018</span>\n            </div>\n        </div>\n        <div class=\"panel-body white-space-pre-line\">\n            <div>\n                <div class=\"padding-left-15\">Map view within the tour history table\n                    • Modern map design as used in the Beta of the fleet monitor\n                    • Works with all event types\n                    • Event specific map marker\n                    • Map size adjustable via slider</div>\n            </div>\n        </div>\n    </div>\n    <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n            <div class=\"display-flex justify-content-between\">\n                <span class=\"text-size-16 text-medium\">1.0.0</span>\n                <span class=\"text-thin\">27.06.2018</span>\n            </div>\n        </div>\n        <div class=\"panel-body white-space-pre-line\">\n            <ul class=\"margin-bottom-0 margin-left-5 padding-left-25\">\n                <li>\n                    <div>New feature XYZ has been added ...</div>\n                </li>\n                <li>\n                    <div>fixed bugs in ...</div>\n                </li>\n                <li>\n                    <div>Another feature has been added</div>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "{\n    \"0.1.2\": {\n        date: String,\n        content: arrayOf(nodes) or single node,\n    }\n}"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/resizer.json

@@ -0,0 +1,93 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:54.789Z",
+    "source": "https://uikit.developers.rio.cloud/#components/resizer",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/resizer",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "f7999fff932633e80a2bc10fa5d85f89c9ff5da1a94756c3042b32031e14fd0c"
+  },
+  "title": "Resizer",
+  "lead": "A helper component to allow elements to resize.",
+  "content": [
+    {
+      "heading": "Resizer",
+      "body": "> Note: When the resizer position is set to left or top you also need to position your elements on screen accordingly. Otherwise, the browser will set the height or width and expands in the opposite direction",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div>Horizontal (default): </div><div class=\"height-50 bg-light position-relative\" style=\"width: 50px;\"><div class=\"Resizer resize-horizontal resize-right\"></div></div><hr><div>Vertical (with child element as handle):</div><div class=\"width-50 bg-light position-relative\" style=\"height: 50px;\"><div class=\"Resizer resize-vertical resize-bottom\"><div class=\"height-5 width-100pct bg-dark\"></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { Component } from 'react';\n\nimport Resizer from '@rio-cloud/rio-uikit/Resizer';\n\nexport default class ResizeExample extends Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            box1width: 50,\n            box2height: 50,\n            minWidth: 25,\n            maxWidth: 500,\n            minHeight: 25,\n            maxHeight: 500,\n        };\n\n        this.onResizeHorizontal = this.onResizeHorizontal.bind(this);\n        this.onResizeVertical = this.onResizeVertical.bind(this);\n        this.onResizeStart = this.onResizeStart.bind(this);\n        this.onResizeEnd = this.onResizeEnd.bind(this);\n    }\n\n    getWidthInBoundaries(minWidth, maxWidth, width) {\n        if (width > 0 && width < minWidth) {\n            return minWidth;\n        }\n\n        if (width > 0 && width > maxWidth) {\n            return maxWidth;\n        }\n\n        if (width > 0 && width > maxWidth) {\n            return maxWidth;\n        }\n\n        return width;\n    }\n\n    getHeightInBoundaries(minHeight, maxHeight, height) {\n        if (height > 0 && height < minHeight) {\n            return minHeight;\n        }\n\n        if (height > 0 && height > maxHeight) {\n            return maxHeight;\n        }\n\n        if (height > 0 && height > maxHeight) {\n            return maxHeight;\n        }\n\n        return height;\n    }\n\n    onResizeHorizontal(diff) {\n        const { minWidth, maxWidth } = this.props;\n        const updatedWidth = this.state.box1width - diff;\n\n        this.setState({\n            box1width: this.getWidthInBoundaries(minWidth, maxWidth, updatedWidth),\n        });\n    }\n\n    onResizeVertical(diff) {\n        const { minHeight, maxHeight } = this.state;\n        const updatedHeight = this.state.box2height - diff;\n\n        this.setState({\n            box2height: this.getHeightInBoundaries(minHeight, maxHeight, updatedHeight),\n        });\n    }\n\n    onResizeStart(/* event*/) {}\n\n    onResizeEnd(/* event*/) {}\n\n    render() {\n        return (\n            <div>\n                <div>{'Horizontal (default): '}</div>\n                <div className='height-50 bg-light position-relative' style={{ width: this.state.box1width }}>\n                    <Resizer onResize={this.onResizeHorizontal} />\n                </div>\n                <hr />\n                <div>Vertical (with child element as handle):</div>\n                <div className='width-50 bg-light position-relative' style={{ height: this.state.box2height }}>\n                    <Resizer\n                        onResizeStart={this.onResizeStart}\n                        onResize={this.onResizeVertical}\n                        onResizeEnd={this.onResizeEnd}\n                        direction={Resizer.VERTICAL}\n                        position={Resizer.BOTTOM}\n                    >\n                        <div className='height-5 width-100pct bg-dark' />\n                    </Resizer>\n                </div>\n            </div>\n        );\n    }\n}"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div>Horizontal (default): </div>\n    <div class=\"height-50 bg-light position-relative\" style=\"width: 50px;\">\n        <div class=\"Resizer resize-horizontal resize-right\">\n        </div>\n    </div>\n    <hr>\n    <div>Vertical (with child element as handle):</div>\n    <div class=\"width-50 bg-light position-relative\" style=\"height: 50px;\">\n        <div class=\"Resizer resize-vertical resize-bottom\">\n            <div class=\"height-5 width-100pct bg-dark\">\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "direction",
+                      "type": "String",
+                      "default": "Resizer.HORIZONTAL",
+                      "description": "Defines on which axis to resize. Possible values are: Resizer.HORIZONTAL Resizer.VERTICAL or 'x' 'y'"
+                    },
+                    {
+                      "name": "position",
+                      "type": "String",
+                      "default": "Resizer.RIGHT",
+                      "description": "Defines where the resize handle is positioned relative to the element to resize. Possible values are: Resizer.LEFT Resizer.RIGHT Resizer.TOP Resizer.BOTTOM or 'left' 'right' 'top' 'bottom'"
+                    },
+                    {
+                      "name": "onResizeStart",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback when the resize starts, means when the handle is pressed. It returns the respective event."
+                    },
+                    {
+                      "name": "onResizeEnd",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback when the resize ends, means when the handle is released. It returns the respective event."
+                    },
+                    {
+                      "name": "onResize",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback when the resize handle is moved. The function returns the distant between the last position and the mouse movement. Means you can either subtract or add this diff to the elements width you want to change."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered inside the resizer handle."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/responsivecolumnstripe.json

@@ -0,0 +1,123 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:40.626Z",
+    "source": "https://uikit.developers.rio.cloud/#components/responsiveColumnStripe",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/responsivecolumnstripe",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "6d0f02a61c223053e2884fff260f32bf811f19dda218c738dfe297f4db2e471e"
+  },
+  "title": "ResponsiveColumnStripe",
+  "lead": "The ResponsiveColumnStripe component is designed to work with any list of items. The individual items are spread equally according to the available space. The component is totally customizable and does not style the individual items to give maximum flexibility.",
+  "content": [
+    {
+      "heading": "ResponsiveColumnStripe",
+      "body": "> Note: It is mandatory to set the key attribute for the individual items. If they are not set or when they are not unique the calculation of how many items to show on which page wont work. In case a custom component is used as item, wrap it in a native DOM element and set the key to the wrapping element.",
+      "examples": [
+        {
+          "caption": "Shipments",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-bottom-50\"><label>ResponsiveColumnStripe with minColumns 2 and maxColumns 5</label><div class=\"ResponsiveColumnStripe display-flex align-items-center overflow-hidden border rounded bg-white shadow-default\"><div class=\"PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 pointer-events-none opacity-30\"><span class=\"rioglyph rioglyph-chevron-left\"></span></div><div class=\"ColumnsArea flex-1-1 overflow-hidden\"><div class=\"ColumnWrapper flex-1-1 display-flex space-x--1\"><div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"1\">Item 1</div><div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"2\">Item 2</div><div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"3\">Item 3</div><div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"4\">Item 4</div><div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"5\">Item 5</div></div></div><div class=\"NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12\"><span class=\"rioglyph rioglyph-chevron-right\"></span></div></div></div><div class=\"margin-bottom-50\"><label>ResponsiveColumnStripe as \"ul\" with minColumns 1 and maxColumns 4</label><div class=\"ResponsiveColumnStripe display-flex align-items-center overflow-hidden rounded bg-lightest\"><div class=\"PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 pointer-events-none opacity-30\"><span class=\"rioglyph rioglyph-chevron-left\"></span></div><div class=\"ColumnsArea flex-1-1 overflow-hidden\"><ul class=\"ColumnWrapper flex-1-1 display-flex nav nav-pills nav-pills-filled nav-justified user-select-none\"><li class=\"ColumnItem flex-1-1 foobar\" data-key=\"1\" style=\"color: red;\"><span>Item 1</span></li><li class=\"ColumnItem flex-1-1 active\" data-key=\"2\"><span>Item 2</span></li><li class=\"ColumnItem flex-1-1 \" data-key=\"3\"><span>Item 3</span></li><li class=\"ColumnItem flex-1-1 \" data-key=\"4\"><span>Item 4</span></li></ul></div><div class=\"NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12\"><span class=\"rioglyph rioglyph-chevron-right\"></span></div></div></div><div class=\"margin-bottom-50\"><label>ResponsiveColumnStripe as \"ul\" with minColumns 1, maxColumns 5, and no animation</label><div class=\"ResponsiveColumnStripe display-flex align-items-center overflow-hidden bg-white\"><div class=\"PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12\"><span class=\"rioglyph rioglyph-chevron-left\"></span></div><div class=\"ColumnsArea flex-1-1 overflow-hidden\"><ul class=\"ColumnWrapper flex-1-1 display-flex margin-0 padding-0 space-x--1 user-select-none\"><div class=\"ColumnItem flex-1-1 \" data-key=\"5\"><div class=\"padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none \"><div class=\"flex-1-1 text-medium\"><div>Friday</div><div class=\"text-size-16\">14.01.2023</div></div><div class=\"flex-1-1 text-size-14\"><div class=\"display-flex flex-row justify-content-end-lg gap-10\"><span class=\"text-color-dark\">Shipments</span><span><strong>4</strong></span></div><div class=\"display-flex flex-row justify-content-end-lg gap-10\"><span class=\"text-color-dark\">Planned</span><span class=\"text-medium text-color-gray\">0</span></div></div></div></div><div class=\"ColumnItem flex-1-1 \" data-key=\"6\"><div class=\"padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none \"><div class=\"flex-1-1 text-medium\"><div>Monday</div><div class=\"text-size-16\">17.01.2023</div></div><div class=\"flex-1-1 text-size-14\"><div class=\"display-flex flex-row justify-content-end-lg gap-10\"><span class=\"text-color-dark\">Shipments</span><span><strong>4</strong></span></div><div class=\"display-flex flex-row justify-content-end-lg gap-10\"><span class=\"text-color-dark\">Planned</span><span class=\"text-medium text-color-gray\">0</span></div></div></div></div><div class=\"ColumnItem flex-1-1 \" data-key=\"7\"><div class=\"padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none \"><div class=\"flex-1-1 text-medium\"><div>Thuesday</div><div class=\"text-size-16\">18.01.2023</div></div><div class=\"flex-1-1 text-size-14\"><div class=\"display-flex flex-row justify-content-end-lg gap-10\"><span class=\"text-color-dark\">Shipments</span><span><strong>4</strong></span></div><div class=\"display-flex flex-row justify-content-end-lg gap-10\"><span class=\"text-color-dark\">Planned</span><span class=\"text-medium text-color-gray\">0</span></div></div></div></div><div class=\"ColumnItem flex-1-1 \" data-key=\"8\"><div class=\"padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none bg-highlight\"><div class=\"flex-1-1 text-medium\"><div>Wednesday</div><div class=\"text-size-16\">19.01.2023</div></div><div class=\"flex-1-1 text-size-14\"><div class=\"display-flex flex-row justify-content-end-lg gap-10\"><span class=\"text-color-white\">Shipments</span><span><strong>4</strong></span></div><div class=\"display-flex flex-row justify-content-end-lg gap-10\"><span class=\"text-color-white\">Planned</span><span class=\"text-medium text-color-white\">0</span></div></div></div></div></ul></div><div class=\"NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12\"><span class=\"rioglyph rioglyph-chevron-right\"></span></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport ResponsiveColumnStripe from '@rio-cloud/rio-uikit/ResponsiveColumnStripe';\n\nexport default () => {\n    const demoContentOneClasses =\n        'border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer';\n\n    return (\n        <>\n            <div className='margin-bottom-50'>\n                <label>ResponsiveColumnStripe with minColumns 2 and maxColumns 5</label>\n                <ResponsiveColumnStripe\n                    className='border rounded bg-white shadow-default'\n                    columnsWrapperClassName='space-x--1'\n                    minColumnWith={150}\n                    minColumns={2}\n                    maxColumns={5}\n                    stretchLastItems={false}\n                    onNextClick={pageNumber => console.log(`show page: ${pageNumber}`)}\n                    onPreviousClick={pageNumber => console.log(`show page: ${pageNumber}`)}\n                >\n                    <div key='1' className={demoContentOneClasses}>\n                        Item 1\n                    </div>\n                    <div key='2' className={demoContentOneClasses}>\n                        Item 2\n                    </div>\n                    <div key='3' className={demoContentOneClasses}>\n                        Item 3\n                    </div>\n                    <div key='4' className={demoContentOneClasses}>\n                        Item 4\n                    </div>\n                    <div key='5' className={demoContentOneClasses}>\n                        Item 5\n                    </div>\n                    <div key='6' className={demoContentOneClasses}>\n                        Item 6\n                    </div>\n                    <div key='7' className={demoContentOneClasses}>\n                        Item 7\n                    </div>\n                </ResponsiveColumnStripe>\n            </div>\n            <div className='margin-bottom-50'>\n                <label>ResponsiveColumnStripe as \"ul\" with minColumns 1 and maxColumns 4</label>\n                <ResponsiveColumnStripe\n                    className='rounded bg-lightest'\n                    columnsWrapperClassName='nav nav-pills nav-pills-filled nav-justified user-select-none'\n                    buttonClassName='bg-none'\n                    minColumnWith={100}\n                    minColumns={1}\n                    maxColumns={4}\n                    asType='ul'\n                >\n                    <li key='1' className='foobar' style={{ color: 'red' }}>\n                        <span>Item 1</span>\n                    </li>\n                    <li key='2' className='active'>\n                        <span>Item 2</span>\n                    </li>\n                    <li key='3'>\n                        <span>Item 3</span>\n                    </li>\n                    <li key='4'>\n                        <span>Item 4</span>\n                    </li>\n                    <li key='5'>\n                        <span>Item 5</span>\n                    </li>\n                    <li key='6'>\n                        <span>Item 6</span>\n                    </li>\n                    <li key='7'>\n                        <span>Item 7</span>\n                    </li>\n                    <li key='8'>\n                        <span>Item 8</span>\n                    </li>\n                    <li key='9'>\n                        <span>Item 9</span>\n                    </li>\n                    <li key='10'>\n                        <span>Item 10</span>\n                    </li>\n                    <li key='11'>\n                        <span>Item 11</span>\n                    </li>\n                </ResponsiveColumnStripe>\n            </div>\n            <div className='margin-bottom-50'>\n                <label>ResponsiveColumnStripe as \"ul\" with minColumns 1, maxColumns 5, and no animation</label>\n                <ResponsiveColumnStripe\n                    className='bg-white'\n                    columnsWrapperClassName='margin-0 padding-0 space-x--1 user-select-none'\n                    buttonClassName='hover-bg-highlight-decent'\n                    minColumnWith={220}\n                    minColumns={1}\n                    maxColumns={5}\n                    asType='ul'\n                    activePage={1}\n                    disableAnimation\n                >\n                    <div key='1'>\n                        <ComplexDemoContent day='Monday' date='10.01.2023' />\n                    </div>\n                    <div key='2'>\n                        <ComplexDemoContent day='Thuesday' date='11.01.2023' />\n                    </div>\n                    <div key='3'>\n                        <ComplexDemoContent day='Wednesday' date='12.01.2023' />\n                    </div>\n                    <div key='4'>\n                        <ComplexDemoContent day='Thursday' date='13.01.2023' />\n                    </div>\n                    <div key='5'>\n                        <ComplexDemoContent day='Friday' date='14.01.2023' />\n                    </div>\n                    <div key='6'>\n                        <ComplexDemoContent day='Monday' date='17.01.2023' />\n                    </div>\n                    <div key='7'>\n                        <ComplexDemoContent day='Thuesday' date='18.01.2023' />\n                    </div>\n                    <div key='8'>\n                        <ComplexDemoContent day='Wednesday' date='19.01.2023' active />\n                    </div>\n                    <div key='9'>\n                        <ComplexDemoContent day='Thursday' date='20.01.2023' />\n                    </div>\n                    <div key='10'>\n                        <ComplexDemoContent day='Friday' date='21.01.2023' />\n                    </div>\n                </ResponsiveColumnStripe>\n            </div>\n        </>\n    );\n};\n\ntype ComplexDemoContentProps = {\n    day: string;\n    date: string;\n    active?: boolean;\n};\n\nconst ComplexDemoContent = ({ day, date, active }: ComplexDemoContentProps) => (\n    <div\n        className={`padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none ${\n            active ? 'bg-highlight' : ''\n        }`}\n    >\n        <div className='flex-1-1 text-medium'>\n            <div>{day}</div>\n            <div className='text-size-16'>{date}</div>\n        </div>\n        <div className='flex-1-1 text-size-14'>\n            <div className='display-flex flex-row justify-content-end-lg gap-10'>\n                <span className={active ? 'text-color-white' : 'text-color-dark'}>Shipments</span>\n                <span>\n                    <strong>4</strong>\n                </span>\n            </div>\n            <div className='display-flex flex-row justify-content-end-lg gap-10'>\n                <span className={active ? 'text-color-white' : 'text-color-dark'}>Planned</span>\n                <span className={`text-medium ${active ? 'text-color-white' : 'text-color-gray'}`}>0</span>\n            </div>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-bottom-50\">\n    <label>ResponsiveColumnStripe with minColumns 2 and maxColumns 5</label>\n    <div class=\"ResponsiveColumnStripe display-flex align-items-center overflow-hidden border rounded bg-white shadow-default\">\n        <div class=\"PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 pointer-events-none opacity-30\">\n            <span class=\"rioglyph rioglyph-chevron-left\">\n            </span>\n        </div>\n        <div class=\"ColumnsArea flex-1-1 overflow-hidden\">\n            <div class=\"ColumnWrapper flex-1-1 display-flex space-x--1\">\n                <div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"1\">Item 1</div>\n                <div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"2\">Item 2</div>\n                <div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"3\">Item 3</div>\n                <div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"4\">Item 4</div>\n                <div class=\"ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer\" data-key=\"5\">Item 5</div>\n            </div>\n        </div>\n        <div class=\"NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12\">\n            <span class=\"rioglyph rioglyph-chevron-right\">\n            </span>\n        </div>\n    </div>\n</div>\n<div class=\"margin-bottom-50\">\n    <label>ResponsiveColumnStripe as \"ul\" with minColumns 1 and maxColumns 4</label>\n    <div class=\"ResponsiveColumnStripe display-flex align-items-center overflow-hidden rounded bg-lightest\">\n        <div class=\"PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 pointer-events-none opacity-30\">\n            <span class=\"rioglyph rioglyph-chevron-left\">\n            </span>\n        </div>\n        <div class=\"ColumnsArea flex-1-1 overflow-hidden\">\n            <ul class=\"ColumnWrapper flex-1-1 display-flex nav nav-pills nav-pills-filled nav-justified user-select-none\">\n                <li class=\"ColumnItem flex-1-1 foobar\" data-key=\"1\" style=\"color: red;\">\n                    <span>Item 1</span>\n                </li>\n                <li class=\"ColumnItem flex-1-1 active\" data-key=\"2\">\n                    <span>Item 2</span>\n                </li>\n                <li class=\"ColumnItem flex-1-1 \" data-key=\"3\">\n                    <span>Item 3</span>\n                </li>\n                <li class=\"ColumnItem flex-1-1 \" data-key=\"4\">\n                    <span>Item 4</span>\n                </li>\n            </ul>\n        </div>\n        <div class=\"NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12\">\n            <span class=\"rioglyph rioglyph-chevron-right\">\n            </span>\n        </div>\n    </div>\n</div>\n<div class=\"margin-bottom-50\">\n    <label>ResponsiveColumnStripe as \"ul\" with minColumns 1, maxColumns 5, and no animation</label>\n    <div class=\"ResponsiveColumnStripe display-flex align-items-center overflow-hidden bg-white\">\n        <div class=\"PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12\">\n            <span class=\"rioglyph rioglyph-chevron-left\">\n            </span>\n        </div>\n        <div class=\"ColumnsArea flex-1-1 overflow-hidden\">\n            <ul class=\"ColumnWrapper flex-1-1 display-flex margin-0 padding-0 space-x--1 user-select-none\">\n                <div class=\"ColumnItem flex-1-1 \" data-key=\"5\">\n                    <div class=\"padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none \">\n                        <div class=\"flex-1-1 text-medium\">\n                            <div>Friday</div>\n                            <div class=\"text-size-16\">14.01.2023</div>\n                        </div>\n                        <div class=\"flex-1-1 text-size-14\">\n                            <div class=\"display-flex flex-row justify-content-end-lg gap-10\">\n                                <span class=\"text-color-dark\">Shipments</span>\n                                <span>\n                                    <strong>4</strong>\n                                </span>\n                            </div>\n                            <div class=\"display-flex flex-row justify-content-end-lg gap-10\">\n                                <span class=\"text-color-dark\">Planned</span>\n                                <span class=\"text-medium text-color-gray\">0</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ColumnItem flex-1-1 \" data-key=\"6\">\n                    <div class=\"padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none \">\n                        <div class=\"flex-1-1 text-medium\">\n                            <div>Monday</div>\n                            <div class=\"text-size-16\">17.01.2023</div>\n                        </div>\n                        <div class=\"flex-1-1 text-size-14\">\n                            <div class=\"display-flex flex-row justify-content-end-lg gap-10\">\n                                <span class=\"text-color-dark\">Shipments</span>\n                                <span>\n                                    <strong>4</strong>\n                                </span>\n                            </div>\n                            <div class=\"display-flex flex-row justify-content-end-lg gap-10\">\n                                <span class=\"text-color-dark\">Planned</span>\n                                <span class=\"text-medium text-color-gray\">0</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ColumnItem flex-1-1 \" data-key=\"7\">\n                    <div class=\"padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none \">\n                        <div class=\"flex-1-1 text-medium\">\n                            <div>Thuesday</div>\n                            <div class=\"text-size-16\">18.01.2023</div>\n                        </div>\n                        <div class=\"flex-1-1 text-size-14\">\n                            <div class=\"display-flex flex-row justify-content-end-lg gap-10\">\n                                <span class=\"text-color-dark\">Shipments</span>\n                                <span>\n                                    <strong>4</strong>\n                                </span>\n                            </div>\n                            <div class=\"display-flex flex-row justify-content-end-lg gap-10\">\n                                <span class=\"text-color-dark\">Planned</span>\n                                <span class=\"text-medium text-color-gray\">0</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ColumnItem flex-1-1 \" data-key=\"8\">\n                    <div class=\"padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none bg-highlight\">\n                        <div class=\"flex-1-1 text-medium\">\n                            <div>Wednesday</div>\n                            <div class=\"text-size-16\">19.01.2023</div>\n                        </div>\n                        <div class=\"flex-1-1 text-size-14\">\n                            <div class=\"display-flex flex-row justify-content-end-lg gap-10\">\n                                <span class=\"text-color-white\">Shipments</span>\n                                <span>\n                                    <strong>4</strong>\n                                </span>\n                            </div>\n                            <div class=\"display-flex flex-row justify-content-end-lg gap-10\">\n                                <span class=\"text-color-white\">Planned</span>\n                                <span class=\"text-medium text-color-white\">0</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ul>\n        </div>\n        <div class=\"NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12\">\n            <span class=\"rioglyph rioglyph-chevron-right\">\n            </span>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "minColumnWith",
+                      "type": "Number",
+                      "default": "300",
+                      "description": "The minimum width in pixel of a single column. This value determines how many columns are shown per page depending on the parent width."
+                    },
+                    {
+                      "name": "minColumns",
+                      "type": "Number",
+                      "default": "1",
+                      "description": "The minimum amount of columns that should be shown per page."
+                    },
+                    {
+                      "name": "maxColumns",
+                      "type": "Number",
+                      "default": "5",
+                      "description": "The maximum amount of columns that should be shown per page."
+                    },
+                    {
+                      "name": "stretchLastItems",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the items on the last page are stretched out to fill the space."
+                    },
+                    {
+                      "name": "activePage",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The page that shall be shown. This can be used to control the pages from outside."
+                    },
+                    {
+                      "name": "asType",
+                      "type": "String",
+                      "default": "div",
+                      "description": "The DOM element type of the wrapping column element. If you need a list, this might be set to \"ul\"."
+                    },
+                    {
+                      "name": "disableAnimation",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set to true to skip animating pages."
+                    },
+                    {
+                      "name": "onPreviousClick",
+                      "type": "(pageNumber: number, columnsPerPage: number) => void",
+                      "default": "",
+                      "description": "Callback function for when the previous page is clicked."
+                    },
+                    {
+                      "name": "onNextClick",
+                      "type": "(pageNumber: number, columnsPerPage: number) => void",
+                      "default": "",
+                      "description": "Callback function for when the next page is clicked."
+                    },
+                    {
+                      "name": "buttonClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the navigation buttons."
+                    },
+                    {
+                      "name": "columnsWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the component wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the column wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/responsivevideo.json

@@ -0,0 +1,75 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:55.621Z",
+    "source": "https://uikit.developers.rio.cloud/#components/responsiveVideo",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/responsivevideo",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "5ed782df4ed0e4b6206b3726286267e1440a5a8f4c0f92a63afd0755c2552ac2"
+  },
+  "title": "Responsive Video",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Responsive Video",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"padding-left-15pct padding-right-15pct\"><div class=\"h3\">Responsive Video 16x9</div><div class=\"video-responsive video-responsive-16by9\"><iframe src=\"https://www.youtube.com/embed/znckWdXTbTk\" allowfullscreen=\"\"></iframe></div><hr><div class=\"h3\">Responsive Video 4x3</div><div class=\"video-responsive video-responsive-4by3\"><iframe src=\"https://www.youtube.com/embed/znckWdXTbTk\" allowfullscreen=\"\"></iframe></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport ResponsiveVideo from '@rio-cloud/rio-uikit/ResponsiveVideo';\n\nexport default () => (\n    <div className='padding-left-15pct padding-right-15pct'>\n        <div className='h3'>Responsive Video 16x9</div>\n        <ResponsiveVideo\n            src='https://www.youtube.com/embed/znckWdXTbTk'\n            aspectRatio={ResponsiveVideo.ASPECT_RATIO_16_BY_9}\n            allowFullScreen\n        />\n        <hr />\n        <div className='h3'>Responsive Video 4x3</div>\n        <ResponsiveVideo\n            src='https://www.youtube.com/embed/znckWdXTbTk'\n            aspectRatio={ResponsiveVideo.ASPECT_RATIO_4_BY_3}\n            allowFullScreen\n        />\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"padding-left-15pct padding-right-15pct\">\n    <div class=\"h3\">Responsive Video 16x9</div>\n    <div class=\"video-responsive video-responsive-16by9\">\n        <iframe src=\"https://www.youtube.com/embed/znckWdXTbTk\" allowfullscreen=\"\">\n        </iframe>\n    </div>\n    <hr>\n    <div class=\"h3\">Responsive Video 4x3</div>\n    <div class=\"video-responsive video-responsive-4by3\">\n        <iframe src=\"https://www.youtube.com/embed/znckWdXTbTk\" allowfullscreen=\"\">\n        </iframe>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "src",
+                      "type": "String",
+                      "default": "",
+                      "description": "The link to the source of the video file."
+                    },
+                    {
+                      "name": "aspectRatio",
+                      "type": "String",
+                      "default": "ResponsiveVideo.ASPECT_RATIO_16_BY_9",
+                      "description": "Defined the aspect ratio of the video. Possible values are: ResponsiveVideo.ASPECT_RATIO_4_BY_3, ResponsiveVideo.ASPECT_RATIO_16_BY_9 or '4by3', '16by9'"
+                    },
+                    {
+                      "name": "allowFullScreen",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Allows the fullscreen feature of the underlying embedded iframe."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/rioglyph.json

@@ -0,0 +1,93 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:55.322Z",
+    "source": "https://uikit.developers.rio.cloud/#components/rioglyph",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/rioglyph",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "77e0a14189d1175b66f149cd3ce2799295438f6e9c5b71c05b7eb2fc497b9c99"
+  },
+  "title": "Rioglyph",
+  "lead": "The Rioglyph component is a React wrapper for the Rioglyph icon set. It provides a convenient and type-safe way to render icons without directly dealing with the utility classnames.",
+  "content": [
+    {
+      "heading": "Rioglyph",
+      "body": "In addition to rendering a single icon, the component supports built-in features such as spinning and pulsing animations, as well as paired icons for combining multiple glyphs into one semantic symbol.\n\nThe complete list of available icons and their names can be found in the icon library.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column gap-15\"><div><label>Single rioglyph icon</label><div class=\"display-flex gap-5 align-items-center text-size-18\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-bus\"></span><span class=\"rioglyph rioglyph-van\"></span><span class=\"rioglyph rioglyph-car\"></span></div></div><div><label>Single rioglyph icon with custom styles</label><div class=\"display-flex gap-5 align-items-center\"><span class=\"rioglyph rioglyph-truck text-size-h2 text-color-gray\"></span><span class=\"rioglyph rioglyph-bus text-size-h2 text-color-gray\"></span><span class=\"rioglyph rioglyph-van text-size-h2 text-color-gray\"></span><span class=\"rioglyph rioglyph-car text-size-h2 text-color-gray\"></span></div></div><div><label>Single rioglyph icon with spinning animation</label><div class=\"display-flex gap-5 align-items-center\"><span class=\"rioglyph rioglyph-refresh text-size-h2 spinning\"></span><span class=\"rioglyph rioglyph-climate-control text-size-h2 spinning\"></span><span class=\"rioglyph rioglyph-cog text-size-h2 spinning\"></span><span class=\"rioglyph rioglyph-spinner text-size-h2 spinning\"></span><span class=\"rioglyph rioglyph-tire text-size-h2 spinning\"></span></div></div><div><label>Single rioglyph icon with pulsing animation</label><div class=\"display-flex gap-5 align-items-center\"><span class=\"rioglyph rioglyph-battery-level-empty text-size-h2 text-color-danger pulsing\"></span><span class=\"rioglyph rioglyph-battery-level-low text-size-h2 text-color-warning\"></span><span class=\"rioglyph rioglyph-battery-level-full text-size-h2 text-color-success\"></span></div></div><div><label>Paired rioglyph icon</label><div class=\"display-flex gap-5 align-items-center\"><span class=\"rioglyph-icon-pair text-size-h1\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-fuel-hydrogen text-color-info\"></span></span><span class=\"rioglyph-icon-pair text-size-h1\"><span class=\"rioglyph rioglyph-bus\"></span><span class=\"rioglyph rioglyph-fuel-electric text-color-success\"></span></span><span class=\"rioglyph-icon-pair text-size-h1\"><span class=\"rioglyph rioglyph-van\"></span><span class=\"rioglyph rioglyph-fuel-diesel text-color-black\"></span></span><span class=\"rioglyph-icon-pair text-size-h1\"><span class=\"rioglyph rioglyph-car\"></span><span class=\"rioglyph rioglyph-fuel-gas text-color-black\"></span></span></div></div><div><label>Custom external svg icon</label><div class=\"display-flex gap-5 align-items-center\"><span class=\"rioglyph text-size-h1 text-color-info\" style=\"--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);\"></span><span class=\"rioglyph-icon-pair text-size-h1\"><span class=\"rioglyph\" style=\"--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);\"></span><span class=\"rioglyph text-color-danger\" style=\"--i: url(https://cdn.rio.cloud/images/uikit/number_19.svg);\"></span></span></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Rioglyph, { type IconType } from '@rio-cloud/rio-uikit/Rioglyph';\n\n// Keep color classes typed to avoid typos when passing classNames.\nexport type ColorClass =\n    | 'text-color-warning'\n    | 'text-color-danger'\n    | 'text-color-success'\n    | 'text-color-info'\n    | 'text-color-black'\n    | 'text-color-gray';\n\n// Single vehicle icons used across examples.\nconst vehicleIcons: IconType[] = ['rioglyph-truck', 'rioglyph-bus', 'rioglyph-van', 'rioglyph-car'] as const;\n\n// Icons that visually make sense to spin.\nconst spinnableIcons: IconType[] = [\n    'rioglyph-refresh',\n    'rioglyph-climate-control',\n    'rioglyph-cog',\n    'rioglyph-spinner',\n    'rioglyph-tire',\n] as const;\n\n/**\n * Icons that pulse in color to indicate a status.\n */\ntype Icon = { icon: IconType; color: ColorClass };\n\nconst pulsingIcons: Icon[] = [\n    { icon: 'rioglyph-battery-level-empty', color: 'text-color-danger' },\n    { icon: 'rioglyph-battery-level-low', color: 'text-color-warning' },\n    { icon: 'rioglyph-battery-level-full', color: 'text-color-success' },\n];\n\n/**\n * Paired icons that combine a vehicle with its fuel type.\n */\ntype PairedIcon = Icon & { pairIcon: IconType };\n\nconst pairedIcons: PairedIcon[] = [\n    { icon: 'rioglyph-truck', pairIcon: 'rioglyph-fuel-hydrogen', color: 'text-color-info' },\n    { icon: 'rioglyph-bus', pairIcon: 'rioglyph-fuel-electric', color: 'text-color-success' },\n    { icon: 'rioglyph-van', pairIcon: 'rioglyph-fuel-diesel', color: 'text-color-black' },\n    { icon: 'rioglyph-car', pairIcon: 'rioglyph-fuel-gas', color: 'text-color-black' },\n];\n\nexport default () => (\n    <div className='display-flex flex-column gap-15'>\n        {/* Basic glyphs */}\n        <div>\n            <label>Single rioglyph icon</label>\n            <div className='display-flex gap-5 align-items-center text-size-18'>\n                {vehicleIcons.map(icon => (\n                    <Rioglyph icon={icon} key={icon} />\n                ))}\n            </div>\n        </div>\n\n        {/* Custom styling via className */}\n        <div>\n            <label>Single rioglyph icon with custom styles</label>\n            <div className='display-flex gap-5 align-items-center'>\n                {vehicleIcons.map(icon => (\n                    <Rioglyph icon={icon} size='h2' iconClassName='text-color-gray' key={icon} />\n                ))}\n            </div>\n        </div>\n\n        {/* Built-in spinning animation */}\n        <div>\n            <label>Single rioglyph icon with spinning animation</label>\n            <div className='display-flex gap-5 align-items-center'>\n                {spinnableIcons.map(icon => (\n                    <Rioglyph icon={icon} size='h2' spinning key={icon} />\n                ))}\n            </div>\n        </div>\n\n        {/* Pulsing animation + color */}\n        <div>\n            <label>Single rioglyph icon with pulsing animation</label>\n            <div className='display-flex gap-5 align-items-center'>\n                {pulsingIcons.map(({ icon, color }) => (\n                    <Rioglyph\n                        icon={icon}\n                        size='h2'\n                        pulsing={icon === 'rioglyph-battery-level-empty'}\n                        iconClassName={color}\n                        key={`${icon}-${color}`}\n                    />\n                ))}\n            </div>\n        </div>\n\n        {/* Main glyph paired with a secondary glyph (e.g., fuel type) */}\n        <div>\n            <label>Paired rioglyph icon</label>\n            <div className='display-flex gap-5 align-items-center'>\n                {pairedIcons.map(({ icon, pairIcon, color }) => (\n                    <Rioglyph\n                        icon={icon}\n                        size='h1'\n                        pairIcon={pairIcon}\n                        pairIconClassName={color}\n                        key={`${icon}-${pairIcon}`}\n                    />\n                ))}\n            </div>\n        </div>\n\n        {/* Custom external svg icon */}\n        <div>\n            <label>Custom external svg icon</label>\n            <div className='display-flex gap-5 align-items-center'>\n                <Rioglyph\n                    icon={'https://cdn.rio.cloud/images/uikit/react_logo.svg'}\n                    size='h1'\n                    iconClassName='text-color-info'\n                />\n                <Rioglyph\n                    icon={'https://cdn.rio.cloud/images/uikit/react_logo.svg'}\n                    size='h1'\n                    pairIcon={'https://cdn.rio.cloud/images/uikit/number_19.svg'}\n                    pairIconClassName={'text-color-danger'}\n                />\n            </div>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column gap-15\">\n    <div>\n        <label>Single rioglyph icon</label>\n        <div class=\"display-flex gap-5 align-items-center text-size-18\">\n            <span class=\"rioglyph rioglyph-truck\">\n            </span>\n            <span class=\"rioglyph rioglyph-bus\">\n            </span>\n            <span class=\"rioglyph rioglyph-van\">\n            </span>\n            <span class=\"rioglyph rioglyph-car\">\n            </span>\n        </div>\n    </div>\n    <div>\n        <label>Single rioglyph icon with custom styles</label>\n        <div class=\"display-flex gap-5 align-items-center\">\n            <span class=\"rioglyph rioglyph-truck text-size-h2 text-color-gray\">\n            </span>\n            <span class=\"rioglyph rioglyph-bus text-size-h2 text-color-gray\">\n            </span>\n            <span class=\"rioglyph rioglyph-van text-size-h2 text-color-gray\">\n            </span>\n            <span class=\"rioglyph rioglyph-car text-size-h2 text-color-gray\">\n            </span>\n        </div>\n    </div>\n    <div>\n        <label>Single rioglyph icon with spinning animation</label>\n        <div class=\"display-flex gap-5 align-items-center\">\n            <span class=\"rioglyph rioglyph-refresh text-size-h2 spinning\">\n            </span>\n            <span class=\"rioglyph rioglyph-climate-control text-size-h2 spinning\">\n            </span>\n            <span class=\"rioglyph rioglyph-cog text-size-h2 spinning\">\n            </span>\n            <span class=\"rioglyph rioglyph-spinner text-size-h2 spinning\">\n            </span>\n            <span class=\"rioglyph rioglyph-tire text-size-h2 spinning\">\n            </span>\n        </div>\n    </div>\n    <div>\n        <label>Single rioglyph icon with pulsing animation</label>\n        <div class=\"display-flex gap-5 align-items-center\">\n            <span class=\"rioglyph rioglyph-battery-level-empty text-size-h2 text-color-danger pulsing\">\n            </span>\n            <span class=\"rioglyph rioglyph-battery-level-low text-size-h2 text-color-warning\">\n            </span>\n            <span class=\"rioglyph rioglyph-battery-level-full text-size-h2 text-color-success\">\n            </span>\n        </div>\n    </div>\n    <div>\n        <label>Paired rioglyph icon</label>\n        <div class=\"display-flex gap-5 align-items-center\">\n            <span class=\"rioglyph-icon-pair text-size-h1\">\n                <span class=\"rioglyph rioglyph-truck\">\n                </span>\n                <span class=\"rioglyph rioglyph-fuel-hydrogen text-color-info\">\n                </span>\n            </span>\n            <span class=\"rioglyph-icon-pair text-size-h1\">\n                <span class=\"rioglyph rioglyph-bus\">\n                </span>\n                <span class=\"rioglyph rioglyph-fuel-electric text-color-success\">\n                </span>\n            </span>\n            <span class=\"rioglyph-icon-pair text-size-h1\">\n                <span class=\"rioglyph rioglyph-van\">\n                </span>\n                <span class=\"rioglyph rioglyph-fuel-diesel text-color-black\">\n                </span>\n            </span>\n            <span class=\"rioglyph-icon-pair text-size-h1\">\n                <span class=\"rioglyph rioglyph-car\">\n                </span>\n                <span class=\"rioglyph rioglyph-fuel-gas text-color-black\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div>\n        <label>Custom external svg icon</label>\n        <div class=\"display-flex gap-5 align-items-center\">\n            <span class=\"rioglyph text-size-h1 text-color-info\" style=\"--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);\">\n            </span>\n            <span class=\"rioglyph-icon-pair text-size-h1\">\n                <span class=\"rioglyph\" style=\"--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);\">\n                </span>\n                <span class=\"rioglyph text-color-danger\" style=\"--i: url(https://cdn.rio.cloud/images/uikit/number_19.svg);\">\n                </span>\n            </span>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The rioglyph icon string OR an external .svg link"
+                    },
+                    {
+                      "name": "iconClassName",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes set to the icon."
+                    },
+                    {
+                      "name": "size",
+                      "type": "string",
+                      "default": "",
+                      "description": "The possible values are: h1, h2, h3, h4, h5, h6 as well as the following size values 10, 11, 12, 14, 16, 18, 20"
+                    },
+                    {
+                      "name": "spinning",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Uses the spinning animation."
+                    },
+                    {
+                      "name": "pulsing",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Uses the pulsing animation."
+                    },
+                    {
+                      "name": "pairIcon",
+                      "type": "string",
+                      "default": "",
+                      "description": "The rioglyph icon string OR an external .svg link"
+                    },
+                    {
+                      "name": "pairIconClassName",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes set to the pairIcon."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}