@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Templates/templates/stats-blocks.json

@@ -0,0 +1,135 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:32.547Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/stats-blocks",
+    "category": "Templates",
+    "section": "Content",
+    "slug": "templates/stats-blocks",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "48d3e01096ad7f8f74e75a62b48cd5f98d0b3e9d165589f30fc065dd85335e58"
+  },
+  "title": "Stats blocks",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Stats blocks",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Total inventory",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><div class=\"text-size-h2 text-bold text-color-darkest\">Stats page</div><p class=\"text-color-darker margin-top-0\">Overview of your supply chain operations</p><div class=\"StatsWidget-wrapper display-grid grid-auto-fit-250\"><div class=\"StatsWidget shadow-default display-flex flex-column\"><div class=\"flex-1-1 display-flex gap-15 padding-20\"><div class=\"height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-parcel text-size-200pct text-color-darker\"></span></div><div><div class=\"text-color-dark\">Total inventory</div><div class=\"text-size-h3 text-color-darkest line-height-125rel\">971 units</div></div></div><div class=\"text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5\"><span class=\"text-medium text-color-success display-flex gap-2 align-items-center\"><span class=\"rioglyph rioglyph-arrow-up\"></span>12%</span><span class=\"text-color-dark\">from last month</span></div></div><div class=\"StatsWidget shadow-default display-flex flex-column\"><div class=\"flex-1-1 display-flex gap-15 padding-20\"><div class=\"height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-order text-size-200pct text-color-darker\"></span></div><div><div class=\"text-color-dark\">Open orders</div><div class=\"text-size-h3 text-color-darkest line-height-125rel\">63</div></div></div><div class=\"text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5\"><span class=\"text-medium text-color-success display-flex gap-2 align-items-center\"><span class=\"rioglyph rioglyph-arrow-up\"></span>5%</span><span class=\"text-color-dark\">from last month</span></div></div><div class=\"StatsWidget shadow-default display-flex flex-column\"><div class=\"flex-1-1 display-flex gap-15 padding-20\"><div class=\"height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-delivery text-size-200pct text-color-darker\"></span></div><div><div class=\"text-color-dark\">In transit</div><div class=\"text-size-h3 text-color-darkest line-height-125rel\">21</div></div></div><div class=\"text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5\"><span class=\"text-medium text-color-danger display-flex gap-2 align-items-center\"><span class=\"rioglyph rioglyph-arrow-down\"></span>-3%</span><span class=\"text-color-dark\">from last month</span></div></div><div class=\"StatsWidget shadow-default display-flex flex-column\"><div class=\"flex-1-1 display-flex gap-15 padding-20\"><div class=\"height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14\"><span class=\"rioglyph rioglyph-warning-sign text-size-200pct text-color-warning\"></span></div><div><div class=\"text-color-dark\">Issues</div><div class=\"text-size-h3 text-color-darkest line-height-125rel\">10</div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\nimport StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';\nimport StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';\n\nexport default () => {\n    const data = {\n        inventory: faker.number.int({ min: 800, max: 1600 }),\n        inventoryChange: 12,\n        orders: faker.number.int({ min: 20, max: 80 }),\n        ordersChange: 5,\n        inTransit: faker.number.int({ min: 5, max: 25 }),\n        inTransitChange: -3,\n        issues: faker.number.int({ min: 0, max: 10 }),\n    };\n\n    return (\n        <div className='margin-25-md'>\n            <div className='text-size-h2 text-bold text-color-darkest'>Stats page</div>\n            <p className='text-color-darker margin-top-0'>Overview of your supply chain operations</p>\n\n            <StatsWidgets className='display-grid grid-auto-fit-250'>\n                <StatsWidget className='shadow-default display-flex flex-column'>\n                    <div className='flex-1-1 display-flex gap-15 padding-20'>\n                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>\n                            <span className='rioglyph rioglyph-parcel text-size-200pct text-color-darker' />\n                        </div>\n                        <div>\n                            <div className='text-color-dark'>Total inventory</div>\n                            <div className='text-size-h3 text-color-darkest line-height-125rel'>\n                                {data.inventory} units\n                            </div>\n                        </div>\n                    </div>\n                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>\n                        <span className='text-medium text-color-success display-flex gap-2 align-items-center'>\n                            <span className='rioglyph rioglyph-arrow-up' />\n                            {data.inventoryChange}%\n                        </span>\n                        <span className='text-color-dark'>from last month</span>\n                    </div>\n                </StatsWidget>\n\n                <StatsWidget className='shadow-default display-flex flex-column'>\n                    <div className='flex-1-1 display-flex gap-15 padding-20'>\n                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>\n                            <span className='rioglyph rioglyph-order text-size-200pct text-color-darker' />\n                        </div>\n                        <div>\n                            <div className='text-color-dark'>Open orders</div>\n                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.orders}</div>\n                        </div>\n                    </div>\n                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>\n                        <span className='text-medium text-color-success display-flex gap-2 align-items-center'>\n                            <span className='rioglyph rioglyph-arrow-up' />\n                            {data.ordersChange}%\n                        </span>\n                        <span className='text-color-dark'>from last month</span>\n                    </div>\n                </StatsWidget>\n\n                <StatsWidget className='shadow-default display-flex flex-column'>\n                    <div className='flex-1-1 display-flex gap-15 padding-20'>\n                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>\n                            <span className='rioglyph rioglyph-delivery text-size-200pct text-color-darker' />\n                        </div>\n                        <div>\n                            <div className='text-color-dark'>In transit</div>\n                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.inTransit}</div>\n                        </div>\n                    </div>\n                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>\n                        <span className='text-medium text-color-danger display-flex gap-2 align-items-center'>\n                            <span className='rioglyph rioglyph-arrow-down' />\n                            {data.inTransitChange}%\n                        </span>\n                        <span className='text-color-dark'>from last month</span>\n                    </div>\n                </StatsWidget>\n\n                <StatsWidget className='shadow-default display-flex flex-column'>\n                    <div className='flex-1-1 display-flex gap-15 padding-20'>\n                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>\n                            <span className='rioglyph rioglyph-warning-sign text-size-200pct text-color-warning' />\n                        </div>\n                        <div>\n                            <div className='text-color-dark'>Issues</div>\n                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.issues}</div>\n                        </div>\n                    </div>\n                </StatsWidget>\n            </StatsWidgets>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <div class=\"text-size-h2 text-bold text-color-darkest\">Stats page</div>\n    <p class=\"text-color-darker margin-top-0\">Overview of your supply chain operations</p>\n    <div class=\"StatsWidget-wrapper display-grid grid-auto-fit-250\">\n        <div class=\"StatsWidget shadow-default display-flex flex-column\">\n            <div class=\"flex-1-1 display-flex gap-15 padding-20\">\n                <div class=\"height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-parcel text-size-200pct text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-color-dark\">Total inventory</div>\n                    <div class=\"text-size-h3 text-color-darkest line-height-125rel\">971 units</div>\n                </div>\n            </div>\n            <div class=\"text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5\">\n                <span class=\"text-medium text-color-success display-flex gap-2 align-items-center\">\n                    <span class=\"rioglyph rioglyph-arrow-up\">\n                    </span>12%</span>\n                <span class=\"text-color-dark\">from last month</span>\n            </div>\n        </div>\n        <div class=\"StatsWidget shadow-default display-flex flex-column\">\n            <div class=\"flex-1-1 display-flex gap-15 padding-20\">\n                <div class=\"height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-order text-size-200pct text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-color-dark\">Open orders</div>\n                    <div class=\"text-size-h3 text-color-darkest line-height-125rel\">63</div>\n                </div>\n            </div>\n            <div class=\"text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5\">\n                <span class=\"text-medium text-color-success display-flex gap-2 align-items-center\">\n                    <span class=\"rioglyph rioglyph-arrow-up\">\n                    </span>5%</span>\n                <span class=\"text-color-dark\">from last month</span>\n            </div>\n        </div>\n        <div class=\"StatsWidget shadow-default display-flex flex-column\">\n            <div class=\"flex-1-1 display-flex gap-15 padding-20\">\n                <div class=\"height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-delivery text-size-200pct text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-color-dark\">In transit</div>\n                    <div class=\"text-size-h3 text-color-darkest line-height-125rel\">21</div>\n                </div>\n            </div>\n            <div class=\"text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5\">\n                <span class=\"text-medium text-color-danger display-flex gap-2 align-items-center\">\n                    <span class=\"rioglyph rioglyph-arrow-down\">\n                    </span>-3%</span>\n                <span class=\"text-color-dark\">from last month</span>\n            </div>\n        </div>\n        <div class=\"StatsWidget shadow-default display-flex flex-column\">\n            <div class=\"flex-1-1 display-flex gap-15 padding-20\">\n                <div class=\"height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-warning-sign text-size-200pct text-color-warning\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-color-dark\">Issues</div>\n                    <div class=\"text-size-h3 text-color-darkest line-height-125rel\">10</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Orders delivered",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><div class=\"StatsWidget-wrapper display-grid grid-auto-fit-150\"><div class=\"StatsWidget padding-20\"><div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">25M +</div><div class=\"text-color-dark padding-top-5\">Orders delivered</div></div><div class=\"StatsWidget padding-20\"><div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">99.99%</div><div class=\"text-color-dark padding-top-5\">Total uptime</div></div><div class=\"StatsWidget padding-20\"><div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">4.8</div><div class=\"text-color-dark padding-top-5\">Customer score</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { FormattedNumber } from 'react-intl';\n\nimport StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';\nimport StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';\n\nexport default () => {\n    return (\n        <div className='margin-25-md'>\n            <StatsWidgets className='display-grid grid-auto-fit-150'>\n                <StatsWidget className='padding-20'>\n                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>\n                    <div className='text-color-dark padding-top-5'>Orders delivered</div>\n                </StatsWidget>\n                <StatsWidget className='padding-20'>\n                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>\n                        <FormattedNumber value={99.99} style='unit' unit='percent' />\n                    </div>\n                    <div className='text-color-dark padding-top-5'>Total uptime</div>\n                </StatsWidget>\n                <StatsWidget className='padding-20'>\n                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>\n                        <FormattedNumber value={4.8} />\n                    </div>\n                    <div className='text-color-dark padding-top-5'>Customer score</div>\n                </StatsWidget>\n            </StatsWidgets>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <div class=\"StatsWidget-wrapper display-grid grid-auto-fit-150\">\n        <div class=\"StatsWidget padding-20\">\n            <div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">25M +</div>\n            <div class=\"text-color-dark padding-top-5\">Orders delivered</div>\n        </div>\n        <div class=\"StatsWidget padding-20\">\n            <div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">99.99%</div>\n            <div class=\"text-color-dark padding-top-5\">Total uptime</div>\n        </div>\n        <div class=\"StatsWidget padding-20\">\n            <div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">4.8</div>\n            <div class=\"text-color-dark padding-top-5\">Customer score</div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Total uptime",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md margin-auto\"><div class=\"StatsWidget-wrapper\"><div class=\"padding-20\"><div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">25M +</div><div class=\"text-color-dar padding-y-5\">Orders delivered</div></div><div class=\"Divider position-relative hidden-xs\" style=\"padding-left: 15px; padding-right: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 1px; height: 100%;\"></div></div><div class=\"padding-20\"><div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">99.99%</div><div class=\"text-color-dark padding-y-5\">Total uptime</div></div><div class=\"Divider position-relative hidden-xs\" style=\"padding-left: 15px; padding-right: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 1px; height: 100%;\"></div></div><div class=\"padding-20\"><div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">4.8</div><div class=\"text-color-dark padding-y-5\">Customer score</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { FormattedNumber } from 'react-intl';\n\nimport StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\n\nexport default () => {\n    return (\n        <div className='margin-25-md margin-auto'>\n            <StatsWidgets>\n                <div className='padding-20'>\n                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>\n                    <div className='text-color-dar padding-y-5'>Orders delivered</div>\n                </div>\n                <Divider vertical className='hidden-xs' />\n                <div className='padding-20'>\n                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>\n                        <FormattedNumber value={99.99} style='unit' unit='percent' />\n                    </div>\n                    <div className='text-color-dark padding-y-5'>Total uptime</div>\n                </div>\n                <Divider vertical className='hidden-xs' />\n                <div className='padding-20'>\n                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>\n                        <FormattedNumber value={4.8} />\n                    </div>\n                    <div className='text-color-dark padding-y-5'>Customer score</div>\n                </div>\n            </StatsWidgets>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md margin-auto\">\n    <div class=\"StatsWidget-wrapper\">\n        <div class=\"padding-20\">\n            <div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">25M +</div>\n            <div class=\"text-color-dar padding-y-5\">Orders delivered</div>\n        </div>\n        <div class=\"Divider position-relative hidden-xs\" style=\"padding-left: 15px; padding-right: 15px;\">\n            <div class=\"divider-line bg-light\" style=\"width: 1px; height: 100%;\">\n            </div>\n        </div>\n        <div class=\"padding-20\">\n            <div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">99.99%</div>\n            <div class=\"text-color-dark padding-y-5\">Total uptime</div>\n        </div>\n        <div class=\"Divider position-relative hidden-xs\" style=\"padding-left: 15px; padding-right: 15px;\">\n            <div class=\"divider-line bg-light\" style=\"width: 1px; height: 100%;\">\n            </div>\n        </div>\n        <div class=\"padding-20\">\n            <div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">4.8</div>\n            <div class=\"text-color-dark padding-y-5\">Customer score</div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Orders delivered",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><div class=\"StatsWidget-wrapper border rounded bg-white flex-nowrap gap-5 gap-10-ls gap-20-sm\"><div class=\"StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only\"><div class=\"text-color-dark padding-bottom-5\">Orders delivered</div><div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">25M +</div></div><div class=\"StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only\"><div class=\"text-color-dark padding-bottom-5\">Total uptime</div><div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">99.99%</div></div><div class=\"StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-none\"><div class=\"text-color-dark padding-bottom-5\">Customer score</div><div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">4.8</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { FormattedNumber } from 'react-intl';\n\nimport StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';\nimport StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';\n\nexport default () => {\n    return (\n        <div className='margin-25-md'>\n            <StatsWidgets className='border rounded bg-white flex-nowrap gap-5 gap-10-ls gap-20-sm'>\n                <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only'>\n                    <div className='text-color-dark padding-bottom-5'>Orders delivered</div>\n                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>\n                </StatsWidget>\n                <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only'>\n                    <div className='text-color-dark padding-bottom-5'>Total uptime</div>\n                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>\n                        <FormattedNumber value={99.99} style='unit' unit='percent' />\n                    </div>\n                </StatsWidget>\n                <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-none'>\n                    <div className='text-color-dark padding-bottom-5'>Customer score</div>\n                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>\n                        <FormattedNumber value={4.8} />\n                    </div>\n                </StatsWidget>\n            </StatsWidgets>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <div class=\"StatsWidget-wrapper border rounded bg-white flex-nowrap gap-5 gap-10-ls gap-20-sm\">\n        <div class=\"StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only\">\n            <div class=\"text-color-dark padding-bottom-5\">Orders delivered</div>\n            <div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">25M +</div>\n        </div>\n        <div class=\"StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only\">\n            <div class=\"text-color-dark padding-bottom-5\">Total uptime</div>\n            <div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">99.99%</div>\n        </div>\n        <div class=\"StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-none\">\n            <div class=\"text-color-dark padding-bottom-5\">Customer score</div>\n            <div class=\"text-size-h2 line-height-h2 text-medium text-color-darkest\">4.8</div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "from 68,345",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><div class=\"bg-white border rounded overflow-hidden\"><div class=\"StatsWidget-wrapper display-grid grid-auto-fit-250 gap-1\"><div class=\"StatsWidget padding-20 bg-white rounded-none border-none\" style=\"box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);\"><div class=\"text-size-16 text-color-darkest padding-bottom-5\">Orders processed</div><div class=\"display-flex align-items-end justify-content-between gap-10 flex-wrap\"><div class=\"display-flex align-items-end gap-10\"><div class=\"text-size-h2 line-height-h2 text-medium text-color-primary\">72,678</div><div class=\"text-size-16 text-color-dark\">from 68,345</div></div><div class=\"label label-success padding-x-5\"><span class=\"rioglyph rioglyph-arrow-up\"></span>11.5%</div></div></div><div class=\"StatsWidget padding-20 bg-white rounded-none border-none\" style=\"box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);\"><div class=\"text-size-16 text-color-darkest padding-bottom-5\">Open rate</div><div class=\"display-flex align-items-end justify-content-between gap-10 flex-wrap\"><div class=\"display-flex align-items-end gap-10\"><div class=\"text-size-h2 line-height-h2 text-medium text-color-primary\">43.6</div><div class=\"text-size-16 text-color-dark\">from 41.6</div></div><div class=\"label label-success padding-x-5\"><span class=\"rioglyph rioglyph-arrow-up\"></span>3.1%</div></div></div><div class=\"StatsWidget padding-20 bg-white rounded-none border-none\" style=\"box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);\"><div class=\"text-size-16 text-color-darkest padding-bottom-5\">Error rate</div><div class=\"display-flex align-items-end justify-content-between gap-10 flex-wrap\"><div class=\"display-flex align-items-end gap-10\"><div class=\"text-size-h2 line-height-h2 text-medium text-color-primary\">3.6</div><div class=\"text-size-16 text-color-dark\">from 2.4</div></div><div class=\"label label-danger padding-x-5\"><span class=\"rioglyph rioglyph-arrow-up\"></span>2.01%</div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { FormattedNumber } from 'react-intl';\n\nimport StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';\nimport StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';\n\nexport default () => {\n    // Workaround to create a inner border that is also visible when items wrap onto the next line\n    const widgetBorderStyle = {\n        boxShadow: '1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light)',\n    };\n\n    return (\n        <div className='margin-25-md'>\n            <div className='bg-white border rounded overflow-hidden'>\n                <StatsWidgets className='display-grid grid-auto-fit-250 gap-1'>\n                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>\n                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Orders processed</div>\n                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>\n                            <div className='display-flex align-items-end gap-10'>\n                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>\n                                    <FormattedNumber value={72_678} />\n                                </div>\n                                <div className='text-size-16 text-color-dark'>\n                                    from <FormattedNumber value={68_345} />\n                                </div>\n                            </div>\n                            <div className='label label-success padding-x-5'>\n                                <span className='rioglyph rioglyph-arrow-up' />\n                                <FormattedNumber value={11.5} style='unit' unit='percent' />\n                            </div>\n                        </div>\n                    </StatsWidget>\n                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>\n                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Open rate</div>\n                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>\n                            <div className='display-flex align-items-end gap-10'>\n                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>\n                                    <FormattedNumber value={43.6} />\n                                </div>\n                                <div className='text-size-16 text-color-dark'>\n                                    from <FormattedNumber value={41.6} />\n                                </div>\n                            </div>\n                            <div className='label label-success padding-x-5'>\n                                <span className='rioglyph rioglyph-arrow-up' />\n                                <FormattedNumber value={3.1} style='unit' unit='percent' />\n                            </div>\n                        </div>\n                    </StatsWidget>\n                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>\n                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Error rate</div>\n                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>\n                            <div className='display-flex align-items-end gap-10'>\n                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>\n                                    <FormattedNumber value={3.6} />\n                                </div>\n                                <div className='text-size-16 text-color-dark'>\n                                    from <FormattedNumber value={2.4} />\n                                </div>\n                            </div>\n                            <div className='label label-danger padding-x-5'>\n                                <span className='rioglyph rioglyph-arrow-up' />\n                                <FormattedNumber value={2.01} style='unit' unit='percent' />\n                            </div>\n                        </div>\n                    </StatsWidget>\n                </StatsWidgets>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <div class=\"bg-white border rounded overflow-hidden\">\n        <div class=\"StatsWidget-wrapper display-grid grid-auto-fit-250 gap-1\">\n            <div class=\"StatsWidget padding-20 bg-white rounded-none border-none\" style=\"box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);\">\n                <div class=\"text-size-16 text-color-darkest padding-bottom-5\">Orders processed</div>\n                <div class=\"display-flex align-items-end justify-content-between gap-10 flex-wrap\">\n                    <div class=\"display-flex align-items-end gap-10\">\n                        <div class=\"text-size-h2 line-height-h2 text-medium text-color-primary\">72,678</div>\n                        <div class=\"text-size-16 text-color-dark\">from 68,345</div>\n                    </div>\n                    <div class=\"label label-success padding-x-5\">\n                        <span class=\"rioglyph rioglyph-arrow-up\">\n                        </span>11.5%\n                    </div>\n                </div>\n            </div>\n            <div class=\"StatsWidget padding-20 bg-white rounded-none border-none\" style=\"box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);\">\n                <div class=\"text-size-16 text-color-darkest padding-bottom-5\">Open rate</div>\n                <div class=\"display-flex align-items-end justify-content-between gap-10 flex-wrap\">\n                    <div class=\"display-flex align-items-end gap-10\">\n                        <div class=\"text-size-h2 line-height-h2 text-medium text-color-primary\">43.6</div>\n                        <div class=\"text-size-16 text-color-dark\">from 41.6</div>\n                    </div>\n                    <div class=\"label label-success padding-x-5\">\n                        <span class=\"rioglyph rioglyph-arrow-up\">\n                        </span>3.1%\n                    </div>\n                </div>\n            </div>\n            <div class=\"StatsWidget padding-20 bg-white rounded-none border-none\" style=\"box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);\">\n                <div class=\"text-size-16 text-color-darkest padding-bottom-5\">Error rate</div>\n                <div class=\"display-flex align-items-end justify-content-between gap-10 flex-wrap\">\n                    <div class=\"display-flex align-items-end gap-10\">\n                        <div class=\"text-size-h2 line-height-h2 text-medium text-color-primary\">3.6</div>\n                        <div class=\"text-size-16 text-color-dark\">from 2.4</div>\n                    </div>\n                    <div class=\"label label-danger padding-x-5\">\n                        <span class=\"rioglyph rioglyph-arrow-up\">\n                        </span>2.01%\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Number of data brokers removal requests have been sent to.",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><div class=\"padding-20 cq-container\"><h2 class=\"margin-top-0 margin-bottom-25\">September, 2025</h2><div class=\"display-grid grid-cols-1 cq-400:grid-cols-2 cq-700:grid-cols-3 gap-25\"><div class=\"bg-white rounded border shadow-default padding-15 padding-20\"><div class=\"text-color-darker text-size-18 text-medium margin-bottom-5\">Requests sent</div><div class=\"text-size-h1 text-bold text-color-darkest\">185</div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"text-color-dark text-size-12\">Number of data brokers removal requests have been sent to.</div></div><div class=\"bg-white rounded border shadow-default padding-15 padding-20\"><div class=\"text-color-darker text-size-18 text-medium margin-bottom-5\">Requests in progress</div><div class=\"text-size-h1 text-bold text-color-darkest\">185</div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"text-color-dark text-size-12\">Number of data brokers that have started processing our removal requests.</div></div><div class=\"bg-white rounded border shadow-default padding-15 padding-20\"><div class=\"text-color-darker text-size-18 text-medium margin-bottom-5\">Requests completed</div><div class=\"text-size-h1 text-bold text-color-darkest\">0</div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"text-color-dark text-size-12\">Number of data brokers that checked and confirmed that they are now not holding your data.</div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Divider from '@rio-cloud/rio-uikit/Divider';\nimport Card from '@rio-cloud/rio-uikit/Card';\n\nexport default () => {\n    return (\n        <div className='margin-25-md'>\n            <div className='padding-20 cq-container'>\n                <h2 className='margin-top-0 margin-bottom-25'>September, 2025</h2>\n                <div className='display-grid grid-cols-1 cq-400:grid-cols-2 cq-700:grid-cols-3 gap-25'>\n                    <Card className='padding-20'>\n                        <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>Requests sent</div>\n                        <div className='text-size-h1 text-bold text-color-darkest'>185</div>\n                        <Divider dividerColor='lighter' />\n                        <div className='text-color-dark text-size-12'>\n                            Number of data brokers removal requests have been sent to.\n                        </div>\n                    </Card>\n\n                    <Card className='padding-20'>\n                        <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>\n                            Requests in progress\n                        </div>\n                        <div className='text-size-h1 text-bold text-color-darkest'>185</div>\n                        <Divider dividerColor='lighter' />\n                        <div className='text-color-dark text-size-12'>\n                            Number of data brokers that have started processing our removal requests.\n                        </div>\n                    </Card>\n\n                    <Card className='padding-20'>\n                        <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>\n                            Requests completed\n                        </div>\n                        <div className='text-size-h1 text-bold text-color-darkest'>0</div>\n                        <Divider dividerColor='lighter' />\n                        <div className='text-color-dark text-size-12'>\n                            Number of data brokers that checked and confirmed that they are now not holding your data.\n                        </div>\n                    </Card>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <div class=\"padding-20 cq-container\">\n        <h2 class=\"margin-top-0 margin-bottom-25\">September, 2025</h2>\n        <div class=\"display-grid grid-cols-1 cq-400:grid-cols-2 cq-700:grid-cols-3 gap-25\">\n            <div class=\"bg-white rounded border shadow-default padding-15 padding-20\">\n                <div class=\"text-color-darker text-size-18 text-medium margin-bottom-5\">Requests sent</div>\n                <div class=\"text-size-h1 text-bold text-color-darkest\">185</div>\n                <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                    <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n                    </div>\n                </div>\n                <div class=\"text-color-dark text-size-12\">Number of data brokers removal requests have been sent to.</div>\n            </div>\n            <div class=\"bg-white rounded border shadow-default padding-15 padding-20\">\n                <div class=\"text-color-darker text-size-18 text-medium margin-bottom-5\">Requests in progress</div>\n                <div class=\"text-size-h1 text-bold text-color-darkest\">185</div>\n                <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                    <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n                    </div>\n                </div>\n                <div class=\"text-color-dark text-size-12\">Number of data brokers that have started processing our removal requests.</div>\n            </div>\n            <div class=\"bg-white rounded border shadow-default padding-15 padding-20\">\n                <div class=\"text-color-darker text-size-18 text-medium margin-bottom-5\">Requests completed</div>\n                <div class=\"text-size-h1 text-bold text-color-darkest\">0</div>\n                <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                    <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n                    </div>\n                </div>\n                <div class=\"text-color-dark text-size-12\">Number of data brokers that checked and confirmed that they are now not holding your data.</div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md\"><div class=\"display-grid grid-cols-1 grid-cols-2-sm gap-25\"><div class=\"panel panel-default shadow-default min-width-200\"><div class=\"panel-heading display-flex align-items-center justify-content-between padding-left-20\"><div class=\"text-medium text-size-16\">Lorem ipsum dolor</div><div><div class=\"dropdown btn-group\"><button type=\"button\" id=\"2osbfu44doa\" class=\"btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\"></span></button></div></div></div><div class=\"panel-body padding-15 padding-25-sm height-300 overflow-auto\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 250px; max-width: 365px;\"><svg class=\"recharts-surface\" width=\"365\" height=\"250\" viewBox=\"0 0 365 250\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts1-clip\"><rect x=\"0\" y=\"0\" height=\"205\" width=\"365\"></rect></clipPath></defs><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"0\" y1=\"205\" x2=\"365\" y2=\"205\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"30.416666666666668\" y1=\"211\" x2=\"30.416666666666668\" y2=\"205\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"30.416666666666668\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"30.416666666666668\" dy=\"0.71em\">January</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"91.25\" y1=\"211\" x2=\"91.25\" y2=\"205\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"91.25\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"91.25\" dy=\"0.71em\">February</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"152.08333333333334\" y1=\"211\" x2=\"152.08333333333334\" y2=\"205\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"152.08333333333334\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"152.08333333333334\" dy=\"0.71em\">March</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"212.91666666666666\" y1=\"211\" x2=\"212.91666666666666\" y2=\"205\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"212.91666666666666\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"212.91666666666666\" dy=\"0.71em\">April</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"273.75\" y1=\"211\" x2=\"273.75\" y2=\"205\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"273.75\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"273.75\" dy=\"0.71em\">May</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"334.58333333333337\" y1=\"211\" x2=\"334.58333333333337\" y2=\"205\"></line><text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"334.58333333333337\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"334.58333333333337\" dy=\"0.71em\">June</tspan></text></g></g></g><g class=\"recharts-layer recharts-bar\"><g class=\"recharts-layer recharts-bar-rectangles\"><g class=\"recharts-layer\"><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g><g class=\"recharts-layer recharts-bar-rectangle\"></g></g></g></g></svg><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\"><div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\"><p class=\"recharts-tooltip-label\" style=\"margin: 0px;\"></p></div></div></div></div></div></div><div class=\"panel panel-default shadow-default min-width-200\"><div class=\"panel-heading display-flex align-items-center justify-content-between padding-left-20\"><div class=\"text-medium text-size-16 display-flex gap-5 align-items-center\"><span>Lorem ipsum dolor</span><span class=\"rioglyph rioglyph-question-sign text-color-dark cursor-pointer\"></span></div><div><div class=\"dropdown btn-group\"><button type=\"button\" id=\"l85es348u7i\" class=\"btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\"></span></button></div></div></div><div class=\"panel-body padding-15 padding-25-sm overflow-auto\"><table class=\"table\"><thead><tr><th>Status</th><th>Location</th><th>ETA</th></tr></thead><tbody><tr><td><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-warning\"></div>In transit</div></td><td>Hamburg, DE</td><td>2024-02-02</td></tr><tr><td><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-success\"></div>Delivered</div></td><td>Rotterdam, NL</td><td>2024-01-29</td></tr><tr><td><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-info\"></div>Awaiting pickup</div></td><td>Warsaw, PL</td><td>2024-02-05</td></tr><tr><td><div class=\"display-flex align-items-stretch\"><div class=\"AccentBar bg-danger\"></div>Customs clearance</div></td><td>Antwerp, BE</td><td>2024-02-03</td></tr></tbody></table></div></div><div class=\"panel panel-default shadow-default min-width-200\"><div class=\"panel-heading display-flex align-items-center justify-content-between padding-left-20\"><div class=\"text-medium text-size-16 display-flex gap-5 align-items-center\"><span>Transport ipsum dolor</span></div><div><div class=\"dropdown btn-group\"><button type=\"button\" id=\"dh9a32vkmt6\" class=\"btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\"></span></button></div></div></div><div class=\"panel-body padding-15 padding-25-sm overflow-auto\"><div class=\"display-flex justify-content-between gap-15\"><div class=\"width-100pct space-y-5\"><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 3.7934%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">On-time delivery</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Warehouse efficiency</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Truck utilization</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Freight cost/km</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Fuel consumption index</div></div></div></div><div class=\"space-y-5\"><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">92%</div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">84%</div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">78%</div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">65%</div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">15%</div></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Bar from '@rio-cloud/rio-uikit/Bar';\nimport BarChart from '@rio-cloud/rio-uikit/BarChart';\nimport ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';\nimport AccentBar from '@rio-cloud/rio-uikit/AccentBar';\nimport SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';\nimport BarList from '@rio-cloud/rio-uikit/BarList';\n\nexport default () => {\n    const optionsButton = (\n        <ButtonDropdown\n            bsStyle='muted'\n            title={<span className='rioglyph rioglyph-option-horizontal' aria-hidden='true' />}\n            items={[\n                {\n                    value: 'Edit',\n                },\n                {\n                    value: 'Share',\n                },\n                {\n                    value: 'Report issue',\n                },\n            ]}\n            iconOnly\n            pullRight\n        />\n    );\n\n    return (\n        <div className='margin-25-md'>\n            <div className='display-grid grid-cols-1 grid-cols-2-sm gap-25'>\n                <div className='panel panel-default shadow-default min-width-200'>\n                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>\n                        <div className='text-medium text-size-16'>Lorem ipsum dolor</div>\n                        <div>{optionsButton}</div>\n                    </div>\n                    <div className='panel-body padding-15 padding-25-sm height-300 overflow-auto'>\n                        <BarChart\n                            data={data}\n                            dataKey='label'\n                            xAxisOptions={{ dataKey: 'label' }}\n                            showYAxis={false}\n                            margin={{ bottom: 15 }}\n                            bars={[\n                                <Bar\n                                    key='myBar'\n                                    dataKey='costs'\n                                    unit='€'\n                                    color='brand-primary'\n                                    radius={[3, 3, 0, 0]}\n                                    label={{\n                                        position: 'top',\n                                        formatter: (value: number) => `${value} €`,\n                                    }}\n                                />,\n                            ]}\n                        />\n                    </div>\n                </div>\n\n                <div className='panel panel-default shadow-default min-width-200'>\n                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>\n                        <div className='text-medium text-size-16 display-flex gap-5 align-items-center'>\n                            <span>Lorem ipsum dolor</span>\n                            <SimpleTooltip content='Some helper text' placement='top'>\n                                <span className='rioglyph rioglyph-question-sign text-color-dark cursor-pointer' />\n                            </SimpleTooltip>\n                        </div>\n                        <div>{optionsButton}</div>\n                    </div>\n                    <div className='panel-body padding-15 padding-25-sm overflow-auto'>\n                        <table className='table'>\n                            <thead>\n                                <tr>\n                                    <th>Status</th>\n                                    <th>Location</th>\n                                    <th>ETA</th>\n                                </tr>\n                            </thead>\n                            <tbody>\n                                {tableData.map(row => (\n                                    <tr key={row.id}>\n                                        <td>\n                                            <AccentBar color={getStatusColor(row.status)}>{row.status}</AccentBar>\n                                        </td>\n                                        <td>{row.location}</td>\n                                        <td>{row.eta}</td>\n                                    </tr>\n                                ))}\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n\n                <div className='panel panel-default shadow-default min-width-200'>\n                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>\n                        <div className='text-medium text-size-16 display-flex gap-5 align-items-center'>\n                            <span>Transport ipsum dolor</span>\n                        </div>\n                        <div>{optionsButton}</div>\n                    </div>\n                    <div className='panel-body padding-15 padding-25-sm overflow-auto'>\n                        <BarList\n                            data={barListData}\n                            valueFormatter={value => `${value}%`}\n                            referenceValue={100}\n                            showAnimation\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nconst data = [\n    {\n        label: 'January',\n        costs: 46.8,\n    },\n    {\n        label: 'February',\n        costs: 22.0,\n    },\n    {\n        label: 'March',\n        costs: 12.4,\n    },\n    {\n        label: 'April',\n        costs: 3.88,\n    },\n    {\n        label: 'May',\n        costs: 3.23,\n    },\n    {\n        label: 'June',\n        costs: 4.67,\n    },\n];\n\nconst tableData = [\n    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },\n    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },\n    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },\n    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },\n];\n\nconst barListData = [\n    {\n        key: 'truck_utilization',\n        name: 'Truck utilization',\n        value: 78,\n    },\n    {\n        key: 'on_time_delivery',\n        name: 'On-time delivery',\n        value: 92,\n    },\n    {\n        key: 'freight_cost_per_km',\n        name: 'Freight cost/km',\n        value: 65,\n    },\n    {\n        key: 'warehouse_efficiency',\n        name: 'Warehouse efficiency',\n        value: 84,\n    },\n    {\n        key: 'fuel_consumption',\n        name: 'Fuel consumption index',\n        value: 15,\n    },\n];\n\nconst getStatusColor = (status: string) => {\n    switch (status) {\n        case 'In transit':\n            return 'bg-warning';\n        case 'Delivered':\n            return 'bg-success';\n        case 'Awaiting pickup':\n            return 'bg-info';\n        case 'Customs clearance':\n            return 'bg-danger';\n        default:\n            return 'bg-primary';\n    }\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md\">\n    <div class=\"display-grid grid-cols-1 grid-cols-2-sm gap-25\">\n        <div class=\"panel panel-default shadow-default min-width-200\">\n            <div class=\"panel-heading display-flex align-items-center justify-content-between padding-left-20\">\n                <div class=\"text-medium text-size-16\">Lorem ipsum dolor</div>\n                <div>\n                    <div class=\"dropdown btn-group\">\n                        <button type=\"button\" id=\"2osbfu44doa\" class=\"btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"panel-body padding-15 padding-25-sm height-300 overflow-auto\">\n                <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n                    <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 250px; max-width: 365px;\">\n                        <svg class=\"recharts-surface\" width=\"365\" height=\"250\" viewBox=\"0 0 365 250\" style=\"width: 100%; height: 100%;\">\n                            <title>\n                            </title>\n                            <desc>\n                            </desc>\n                            <defs>\n                                <clipPath id=\"recharts1-clip\">\n                                    <rect x=\"0\" y=\"0\" height=\"205\" width=\"365\">\n                                    </rect>\n                                </clipPath>\n                            </defs>\n                            <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                                <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"0\" y1=\"205\" x2=\"365\" y2=\"205\">\n                                </line>\n                                <g class=\"recharts-cartesian-axis-ticks\">\n                                    <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                        <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"30.416666666666668\" y1=\"211\" x2=\"30.416666666666668\" y2=\"205\">\n                                        </line>\n                                        <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"30.416666666666668\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                            <tspan x=\"30.416666666666668\" dy=\"0.71em\">January</tspan>\n                                        </text>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                        <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"91.25\" y1=\"211\" x2=\"91.25\" y2=\"205\">\n                                        </line>\n                                        <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"91.25\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                            <tspan x=\"91.25\" dy=\"0.71em\">February</tspan>\n                                        </text>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                        <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"152.08333333333334\" y1=\"211\" x2=\"152.08333333333334\" y2=\"205\">\n                                        </line>\n                                        <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"152.08333333333334\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                            <tspan x=\"152.08333333333334\" dy=\"0.71em\">March</tspan>\n                                        </text>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                        <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"212.91666666666666\" y1=\"211\" x2=\"212.91666666666666\" y2=\"205\">\n                                        </line>\n                                        <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"212.91666666666666\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                            <tspan x=\"212.91666666666666\" dy=\"0.71em\">April</tspan>\n                                        </text>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                        <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"273.75\" y1=\"211\" x2=\"273.75\" y2=\"205\">\n                                        </line>\n                                        <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"273.75\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                            <tspan x=\"273.75\" dy=\"0.71em\">May</tspan>\n                                        </text>\n                                    </g>\n                                    <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                        <line orientation=\"bottom\" width=\"365\" height=\"30\" x=\"0\" y=\"205\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"334.58333333333337\" y1=\"211\" x2=\"334.58333333333337\" y2=\"205\">\n                                        </line>\n                                        <text orientation=\"bottom\" width=\"365\" height=\"30\" stroke=\"none\" x=\"334.58333333333337\" y=\"213\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                            <tspan x=\"334.58333333333337\" dy=\"0.71em\">June</tspan>\n                                        </text>\n                                    </g>\n                                </g>\n                            </g>\n                            <g class=\"recharts-layer recharts-bar\">\n                                <g class=\"recharts-layer recharts-bar-rectangles\">\n                                    <g class=\"recharts-layer\">\n                                        <g class=\"recharts-layer recharts-bar-rectangle\">\n                                            <path x=\"6.083333333333334\" y=\"45.10000000000002\" width=\"48\" height=\"159.89999999999998\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M6.083333333333334,48.10000000000002A 3,3,0,0,1,9.083333333333334,45.10000000000002L 51.083333333333336,45.10000000000002A 3,3,0,0,1,\n        54.083333333333336,48.10000000000002L 54.083333333333336,205L 6.083333333333334,205Z\">\n                                            </path>\n                                        </g>\n                                        <g class=\"recharts-layer recharts-bar-rectangle\">\n                                            <path x=\"66.91666666666667\" y=\"129.83333333333331\" width=\"48\" height=\"75.16666666666669\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M66.91666666666667,132.83333333333331A 3,3,0,0,1,69.91666666666667,129.83333333333331L 111.91666666666667,129.83333333333331A 3,3,0,0,1,\n        114.91666666666667,132.83333333333331L 114.91666666666667,205L 66.91666666666667,205Z\">\n                                            </path>\n                                        </g>\n                                        <g class=\"recharts-layer recharts-bar-rectangle\">\n                                            <path x=\"127.75\" y=\"162.63333333333333\" width=\"48\" height=\"42.366666666666674\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M127.75,165.63333333333333A 3,3,0,0,1,130.75,162.63333333333333L 172.75,162.63333333333333A 3,3,0,0,1,\n        175.75,165.63333333333333L 175.75,205L 127.75,205Z\">\n                                            </path>\n                                        </g>\n                                        <g class=\"recharts-layer recharts-bar-rectangle\">\n                                            <path x=\"188.58333333333334\" y=\"191.74333333333334\" width=\"48\" height=\"13.25666666666666\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M188.58333333333334,194.74333333333334A 3,3,0,0,1,191.58333333333334,191.74333333333334L 233.58333333333334,191.74333333333334A 3,3,0,0,1,\n        236.58333333333334,194.74333333333334L 236.58333333333334,205L 188.58333333333334,205Z\">\n                                            </path>\n                                        </g>\n                                        <g class=\"recharts-layer recharts-bar-rectangle\">\n                                            <path x=\"249.41666666666669\" y=\"193.96416666666667\" width=\"48\" height=\"11.03583333333333\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M249.41666666666669,196.96416666666667A 3,3,0,0,1,252.41666666666669,193.96416666666667L 294.4166666666667,193.96416666666667A 3,3,0,0,1,\n        297.4166666666667,196.96416666666667L 297.4166666666667,205L 249.41666666666669,205Z\">\n                                            </path>\n                                        </g>\n                                        <g class=\"recharts-layer recharts-bar-rectangle\">\n                                            <path x=\"310.25\" y=\"189.04416666666668\" width=\"48\" height=\"15.955833333333317\" radius=\"3,3,0,0\" fill=\"#30b4c0 \" class=\"recharts-rectangle\" d=\"M310.25,192.04416666666668A 3,3,0,0,1,313.25,189.04416666666668L 355.25,189.04416666666668A 3,3,0,0,1,\n        358.25,192.04416666666668L 358.25,205L 310.25,205Z\">\n                                            </path>\n                                        </g>\n                                    </g>\n                                </g>\n                                <g class=\"recharts-layer\">\n                                </g>\n                                <g class=\"recharts-layer recharts-label-list\">\n                                    <text offset=\"5\" width=\"48\" height=\"159.89999999999998\" x=\"30.083333333333336\" y=\"40.100000000000016\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n                                        <tspan x=\"30.083333333333336\" dy=\"0em\">46.8 €</tspan>\n                                    </text>\n                                    <text offset=\"5\" width=\"48\" height=\"75.16666666666669\" x=\"90.91666666666667\" y=\"124.83333333333331\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n                                        <tspan x=\"90.91666666666667\" dy=\"0em\">22 €</tspan>\n                                    </text>\n                                    <text offset=\"5\" width=\"48\" height=\"42.366666666666674\" x=\"151.75\" y=\"157.63333333333333\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n                                        <tspan x=\"151.75\" dy=\"0em\">12.4 €</tspan>\n                                    </text>\n                                    <text offset=\"5\" width=\"48\" height=\"13.25666666666666\" x=\"212.58333333333334\" y=\"186.74333333333334\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n                                        <tspan x=\"212.58333333333334\" dy=\"0em\">3.88 €</tspan>\n                                    </text>\n                                    <text offset=\"5\" width=\"48\" height=\"11.03583333333333\" x=\"273.4166666666667\" y=\"188.96416666666667\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n                                        <tspan x=\"273.4166666666667\" dy=\"0em\">3.23 €</tspan>\n                                    </text>\n                                    <text offset=\"5\" width=\"48\" height=\"15.955833333333317\" x=\"334.25\" y=\"184.04416666666668\" class=\"recharts-text recharts-label\" text-anchor=\"middle\" fill=\"#808080\">\n                                        <tspan x=\"334.25\" dy=\"0em\">4.67 €</tspan>\n                                    </text>\n                                </g>\n                            </g>\n                        </svg>\n                        <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);\">\n                            <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n                                <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n                                </p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"panel panel-default shadow-default min-width-200\">\n            <div class=\"panel-heading display-flex align-items-center justify-content-between padding-left-20\">\n                <div class=\"text-medium text-size-16 display-flex gap-5 align-items-center\">\n                    <span>Lorem ipsum dolor</span>\n                    <span class=\"rioglyph rioglyph-question-sign text-color-dark cursor-pointer\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"dropdown btn-group\">\n                        <button type=\"button\" id=\"l85es348u7i\" class=\"btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"panel-body padding-15 padding-25-sm overflow-auto\">\n                <table class=\"table\">\n                    <thead>\n                        <tr>\n                            <th>Status</th>\n                            <th>Location</th>\n                            <th>ETA</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        <tr>\n                            <td>\n                                <div class=\"display-flex align-items-stretch\">\n                                    <div class=\"AccentBar bg-warning\">\n                                    </div>In transit\n                                </div>\n                            </td>\n                            <td>Hamburg, DE</td>\n                            <td>2024-02-02</td>\n                        </tr>\n                        <tr>\n                            <td>\n                                <div class=\"display-flex align-items-stretch\">\n                                    <div class=\"AccentBar bg-success\">\n                                    </div>Delivered\n                                </div>\n                            </td>\n                            <td>Rotterdam, NL</td>\n                            <td>2024-01-29</td>\n                        </tr>\n                        <tr>\n                            <td>\n                                <div class=\"display-flex align-items-stretch\">\n                                    <div class=\"AccentBar bg-info\">\n                                    </div>Awaiting pickup\n                                </div>\n                            </td>\n                            <td>Warsaw, PL</td>\n                            <td>2024-02-05</td>\n                        </tr>\n                        <tr>\n                            <td>\n                                <div class=\"display-flex align-items-stretch\">\n                                    <div class=\"AccentBar bg-danger\">\n                                    </div>Customs clearance\n                                </div>\n                            </td>\n                            <td>Antwerp, BE</td>\n                            <td>2024-02-03</td>\n                        </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n        <div class=\"panel panel-default shadow-default min-width-200\">\n            <div class=\"panel-heading display-flex align-items-center justify-content-between padding-left-20\">\n                <div class=\"text-medium text-size-16 display-flex gap-5 align-items-center\">\n                    <span>Transport ipsum dolor</span>\n                </div>\n                <div>\n                    <div class=\"dropdown btn-group\">\n                        <button type=\"button\" id=\"dh9a32vkmt6\" class=\"btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"panel-body padding-15 padding-25-sm overflow-auto\">\n                <div class=\"display-flex justify-content-between gap-15\">\n                    <div class=\"width-100pct space-y-5\">\n                        <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\">\n                            <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 92%;\">\n                            </div>\n                            <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                                <div class=\"text-color-darker\">On-time delivery</div>\n                            </div>\n                        </div>\n                        <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\">\n                            <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 84%;\">\n                            </div>\n                            <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                                <div class=\"text-color-darker\">Warehouse efficiency</div>\n                            </div>\n                        </div>\n                        <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\">\n                            <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 78%;\">\n                            </div>\n                            <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                                <div class=\"text-color-darker\">Truck utilization</div>\n                            </div>\n                        </div>\n                        <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\">\n                            <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 65%;\">\n                            </div>\n                            <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                                <div class=\"text-color-darker\">Freight cost/km</div>\n                            </div>\n                        </div>\n                        <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent\">\n                            <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 15%;\">\n                            </div>\n                            <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                                <div class=\"text-color-darker\">Fuel consumption index</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"space-y-5\">\n                        <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                            <div class=\"text-color-darkest\">92%</div>\n                        </div>\n                        <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                            <div class=\"text-color-darkest\">84%</div>\n                        </div>\n                        <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                            <div class=\"text-color-darkest\">78%</div>\n                        </div>\n                        <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                            <div class=\"text-color-darkest\">65%</div>\n                        </div>\n                        <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                            <div class=\"text-color-darkest\">15%</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/table-panel.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:33.693Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/table-panel",
+    "category": "Templates",
+    "section": "Tables",
+    "slug": "templates/table-panel",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "49ffe15a11bbde9286306248e5ff26512f1f180886ac612671a72fae73a147c0"
+  },
+  "title": "Combined tables in ExpandablePanel",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Combined tables in ExpandablePanel",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"expander-panel panel panel-blank shadow-default overflow-hidden\" aria-label=\"expander panel\"><div class=\"panel-heading open padding-0 position-relative\" aria-label=\"panel heading\"><span class=\"title width-100pct margin-0 overflow-hidden\"><table class=\"table table-layout-fixed width-100pct\"><thead><tr><td colspan=\"2\"><b>Panel header table</b></td><td><div><span class=\"rioglyph rioglyph-volume margin-right-3\"></span><span>Lorem ipsum dolor</span></div></td><td>Dolor sit</td><td>Amet</td></tr></thead></table></span><span class=\"expander-icon position-absolute top-0 right-15 height-100pct display-flex align-items-center rioglyph rioglyph-chevron-down\"></span></div><div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\"><div><div class=\"panel-body padding-0\"><table class=\"table table-head-filled table-layout-fixed\"><thead><tr><th class=\"ellipsis-1\">Head column</th><th class=\"ellipsis-1\">Head column</th><th class=\"ellipsis-1\">Head column</th><th class=\"ellipsis-1\">Head column</th><th class=\"ellipsis-1\">Head column</th></tr></thead><tbody><tr><td colspan=\"2\">Lorem ipsum</td><td><div><span class=\"rioglyph rioglyph-volume margin-right-3\"></span><span>2 Lorems</span></div></td><td></td><td></td></tr><tr><td colspan=\"2\">Dolor sit amet</td><td><div><span class=\"rioglyph rioglyph-volume margin-right-3\"></span><span>1 Lorem</span></div></td><td></td><td></td></tr></tbody></table></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';\n\nconst TablePanelExample = () => {\n    return (\n        <ExpanderPanel\n            open\n            title={\n                <table className='table table-layout-fixed width-100pct'>\n                    <thead>\n                        <tr>\n                            <td colSpan={2}>\n                                <b>Panel header table</b>\n                            </td>\n                            <td>\n                                <div>\n                                    <span className='rioglyph rioglyph-volume margin-right-3' />\n                                    <span>Lorem ipsum dolor</span>\n                                </div>\n                            </td>\n                            <td>Dolor sit</td>\n                            <td>Amet</td>\n                        </tr>\n                    </thead>\n                </table>\n            }\n            headerClassName='padding-0 position-relative'\n            iconClassName='position-absolute top-0 right-15 height-100pct display-flex align-items-center'\n            titleClassName='width-100pct margin-0 overflow-hidden'\n            bodyClassName='padding-0'\n            className='shadow-default overflow-hidden'\n        >\n            <table className='table table-head-filled table-layout-fixed'>\n                <thead>\n                    <tr>\n                        {[...Array(5)].map(() => (\n                            <th key={crypto.randomUUID()} className='ellipsis-1'>\n                                Head column\n                            </th>\n                        ))}\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr>\n                        <td colSpan={2}>Lorem ipsum</td>\n                        <td>\n                            <div>\n                                <span className='rioglyph rioglyph-volume margin-right-3' />\n                                <span>2 Lorems</span>\n                            </div>\n                        </td>\n                        <td />\n                        <td />\n                    </tr>\n                    <tr>\n                        <td colSpan={2}>Dolor sit amet</td>\n                        <td>\n                            <div>\n                                <span className='rioglyph rioglyph-volume margin-right-3' />\n                                <span>1 Lorem</span>\n                            </div>\n                        </td>\n                        <td />\n                        <td />\n                    </tr>\n                </tbody>\n            </table>\n        </ExpanderPanel>\n    );\n};\n\nexport default TablePanelExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"expander-panel panel panel-blank shadow-default overflow-hidden\" aria-label=\"expander panel\">\n    <div class=\"panel-heading open padding-0 position-relative\" aria-label=\"panel heading\">\n        <span class=\"title width-100pct margin-0 overflow-hidden\">\n            <table class=\"table table-layout-fixed width-100pct\">\n                <thead>\n                    <tr>\n                        <td colspan=\"2\">\n                            <b>Panel header table</b>\n                        </td>\n                        <td>\n                            <div>\n                                <span class=\"rioglyph rioglyph-volume margin-right-3\">\n                                </span>\n                                <span>Lorem ipsum dolor</span>\n                            </div>\n                        </td>\n                        <td>Dolor sit</td>\n                        <td>Amet</td>\n                    </tr>\n                </thead>\n            </table>\n        </span>\n        <span class=\"expander-icon position-absolute top-0 right-15 height-100pct display-flex align-items-center rioglyph rioglyph-chevron-down\">\n        </span>\n    </div>\n    <div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\">\n        <div>\n            <div class=\"panel-body padding-0\">\n                <table class=\"table table-head-filled table-layout-fixed\">\n                    <thead>\n                        <tr>\n                            <th class=\"ellipsis-1\">Head column</th>\n                            <th class=\"ellipsis-1\">Head column</th>\n                            <th class=\"ellipsis-1\">Head column</th>\n                            <th class=\"ellipsis-1\">Head column</th>\n                            <th class=\"ellipsis-1\">Head column</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        <tr>\n                            <td colspan=\"2\">Lorem ipsum</td>\n                            <td>\n                                <div>\n                                    <span class=\"rioglyph rioglyph-volume margin-right-3\">\n                                    </span>\n                                    <span>2 Lorems</span>\n                                </div>\n                            </td>\n                            <td>\n                            </td>\n                            <td>\n                            </td>\n                        </tr>\n                        <tr>\n                            <td colspan=\"2\">Dolor sit amet</td>\n                            <td>\n                                <div>\n                                    <span class=\"rioglyph rioglyph-volume margin-right-3\">\n                                    </span>\n                                    <span>1 Lorem</span>\n                                </div>\n                            </td>\n                            <td>\n                            </td>\n                            <td>\n                            </td>\n                        </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/table-row-animation.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:33.833Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/table-row-animation",
+    "category": "Templates",
+    "section": "Tables",
+    "slug": "templates/table-row-animation",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "daba32b80f61fbc03ea8ea25a11bc18828a09c558c7ffb80be9b3745b90bbaf5"
+  },
+  "title": "Table row animation",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Table row animation",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"table-toolbar\"><div class=\"table-toolbar-container\"><div class=\"table-toolbar-group-left\"><div class=\"table-toolbar-column\"><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Remove row</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Reset table</button></div></div></div></div></div><div class=\"overflow-hidden\"><table class=\"table table-head-filled table-bordered\"><thead><tr><th>Id</th><th>Name</th><th>VIN</th><th>Status</th><th class=\"width-50\"></th></tr></thead><tbody><tr class=\"\"><td>1</td><td>Lorem</td><td>7354</td><td>Active</td><td class=\"padding-0 text-center\"><span><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-trash\"></span></button></span></td></tr><tr class=\"\"><td>2</td><td>Ipsum</td><td>456457</td><td>Inactive</td><td class=\"padding-0 text-center\"><span><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-trash\"></span></button></span></td></tr><tr class=\"\"><td>3</td><td>Dolor</td><td>895</td><td>Active</td><td class=\"padding-0 text-center\"><span><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-trash\"></span></button></span></td></tr><tr class=\"\"><td>4</td><td>Sit</td><td>3456</td><td>Active</td><td class=\"padding-0 text-center\"><span><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-trash\"></span></button></span></td></tr><tr class=\"\"><td>5</td><td>Amet</td><td>2445</td><td>Active</td><td class=\"padding-0 text-center\"><span><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-trash\"></span></button></span></td></tr><tr class=\"\"><td>6</td><td>Consectetur</td><td>878</td><td>Active</td><td class=\"padding-0 text-center\"><span><button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-trash\"></span></button></span></td></tr></tbody></table></div><div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\"><div class=\"min-width-150\"><div class=\"text-center margin-bottom-3\"><span class=\"text-medium\">70</span><span class=\"margin-left-5 margin-right-5\">/</span><span class=\"text-medium\">100</span></div><div class=\"progress height-2 margin-bottom-10 bg-white\"><div class=\"progress-bar\" style=\"width: 70%;\"></div></div><div class=\"display-flex justify-content-center\"><button class=\"btn btn-link padding-right-20 margin-top--5\" type=\"button\"><span class=\"rioglyph rioglyph-arrow-down\"></span>Load more</button></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';\nimport LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';\n\nconst tableData = [\n    {\n        id: 1,\n        name: 'Lorem',\n        vin: '7354',\n        status: 'Active',\n    },\n    {\n        id: 2,\n        name: 'Ipsum',\n        vin: '456457',\n        status: 'Inactive',\n    },\n    {\n        id: 3,\n        name: 'Dolor',\n        vin: '895',\n        status: 'Active',\n    },\n    {\n        id: 4,\n        name: 'Sit',\n        vin: '3456',\n        status: 'Active',\n    },\n    {\n        id: 5,\n        name: 'Amet',\n        vin: '2445',\n        status: 'Active',\n    },\n    {\n        id: 6,\n        name: 'Consectetur',\n        vin: '878',\n        status: 'Active',\n    },\n];\n\nconst ROW_ANIMATION_CLASSNAME =\n    'bg-white opacity-50 pointer-events-none animated-05s repeat-1 ease-in restart slide-out-right';\n\nconst ANIMATION_DURATION = 300;\n\nconst TableRowAnimationExample = () => {\n    const [data, setData] = useState(tableData);\n    const [rowIdToDelete, setRowIdToDelete] = useState<number | undefined>();\n\n    const handleRemoveRow = (fatalRow: number) => {\n        setRowIdToDelete(fatalRow);\n\n        setTimeout(() => {\n            setData(data.filter(item => item.id !== fatalRow));\n            setRowIdToDelete(undefined);\n        }, ANIMATION_DURATION);\n    };\n\n    const handleReset = () => setData(tableData);\n\n    return (\n        <div>\n            <TableToolbar>\n                <div className='table-toolbar-container'>\n                    <div className='table-toolbar-group-left'>\n                        <div className='table-toolbar-column'>\n                            <div className='btn-toolbar'>\n                                <Button\n                                    bsStyle={Button.PRIMARY}\n                                    disabled={!!rowIdToDelete}\n                                    onClick={() => handleRemoveRow(3)}\n                                >\n                                    Remove row\n                                </Button>\n                                <Button onClick={handleReset}>Reset table</Button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </TableToolbar>\n            <div className='overflow-hidden'>\n                <table className='table table-head-filled table-bordered'>\n                    <thead>\n                        <tr>\n                            <th>Id</th>\n                            <th>Name</th>\n                            <th>VIN</th>\n                            <th>Status</th>\n                            <th className='width-50' />\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {data.map(item => {\n                            const rowClassName = rowIdToDelete === item.id ? ROW_ANIMATION_CLASSNAME : '';\n                            return (\n                                <tr key={item.id} className={rowClassName}>\n                                    <td>{item.id}</td>\n                                    <td>{item.name}</td>\n                                    <td>{item.vin}</td>\n                                    <td>{item.status}</td>\n                                    <td className='padding-0 text-center'>\n                                        <span>\n                                            <Button\n                                                iconOnly\n                                                bsStyle={Button.MUTED}\n                                                iconName='rioglyph-trash'\n                                                onClick={() => handleRemoveRow(item.id)}\n                                            />\n                                        </span>\n                                    </td>\n                                </tr>\n                            );\n                        })}\n                    </tbody>\n                </table>\n            </div>\n            <LoadMoreButton\n                loaded={70}\n                total={100}\n                onLoadMore={() => {}}\n                loadMoreMessage='Load more'\n                noMoreMessage='Everything loaded'\n            />\n        </div>\n    );\n};\n\nexport default TableRowAnimationExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"table-toolbar\">\n        <div class=\"table-toolbar-container\">\n            <div class=\"table-toolbar-group-left\">\n                <div class=\"table-toolbar-column\">\n                    <div class=\"btn-toolbar\">\n                        <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Remove row</button>\n                        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Reset table</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"overflow-hidden\">\n        <table class=\"table table-head-filled table-bordered\">\n            <thead>\n                <tr>\n                    <th>Id</th>\n                    <th>Name</th>\n                    <th>VIN</th>\n                    <th>Status</th>\n                    <th class=\"width-50\">\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr class=\"\">\n                    <td>1</td>\n                    <td>Lorem</td>\n                    <td>7354</td>\n                    <td>Active</td>\n                    <td class=\"padding-0 text-center\">\n                        <span>\n                            <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                                <span class=\"rioglyph rioglyph-trash\">\n                                </span>\n                            </button>\n                        </span>\n                    </td>\n                </tr>\n                <tr class=\"\">\n                    <td>2</td>\n                    <td>Ipsum</td>\n                    <td>456457</td>\n                    <td>Inactive</td>\n                    <td class=\"padding-0 text-center\">\n                        <span>\n                            <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                                <span class=\"rioglyph rioglyph-trash\">\n                                </span>\n                            </button>\n                        </span>\n                    </td>\n                </tr>\n                <tr class=\"\">\n                    <td>3</td>\n                    <td>Dolor</td>\n                    <td>895</td>\n                    <td>Active</td>\n                    <td class=\"padding-0 text-center\">\n                        <span>\n                            <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                                <span class=\"rioglyph rioglyph-trash\">\n                                </span>\n                            </button>\n                        </span>\n                    </td>\n                </tr>\n                <tr class=\"\">\n                    <td>4</td>\n                    <td>Sit</td>\n                    <td>3456</td>\n                    <td>Active</td>\n                    <td class=\"padding-0 text-center\">\n                        <span>\n                            <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                                <span class=\"rioglyph rioglyph-trash\">\n                                </span>\n                            </button>\n                        </span>\n                    </td>\n                </tr>\n                <tr class=\"\">\n                    <td>5</td>\n                    <td>Amet</td>\n                    <td>2445</td>\n                    <td>Active</td>\n                    <td class=\"padding-0 text-center\">\n                        <span>\n                            <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                                <span class=\"rioglyph rioglyph-trash\">\n                                </span>\n                            </button>\n                        </span>\n                    </td>\n                </tr>\n                <tr class=\"\">\n                    <td>6</td>\n                    <td>Consectetur</td>\n                    <td>878</td>\n                    <td>Active</td>\n                    <td class=\"padding-0 text-center\">\n                        <span>\n                            <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                                <span class=\"rioglyph rioglyph-trash\">\n                                </span>\n                            </button>\n                        </span>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n    <div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\">\n        <div class=\"min-width-150\">\n            <div class=\"text-center margin-bottom-3\">\n                <span class=\"text-medium\">70</span>\n                <span class=\"margin-left-5 margin-right-5\">/</span>\n                <span class=\"text-medium\">100</span>\n            </div>\n            <div class=\"progress height-2 margin-bottom-10 bg-white\">\n                <div class=\"progress-bar\" style=\"width: 70%;\">\n                </div>\n            </div>\n            <div class=\"display-flex justify-content-center\">\n                <button class=\"btn btn-link padding-right-20 margin-top--5\" type=\"button\">\n                    <span class=\"rioglyph rioglyph-arrow-down\">\n                    </span>Load more</button>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/usage-cards.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:29.099Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/usage-cards",
+    "category": "Templates",
+    "section": "Content",
+    "slug": "templates/usage-cards",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "dec65676e02907aa2be2285c9e201056628f01b16472cffd0ec39c52768ad540"
+  },
+  "title": "Data usage cards",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Data usage cards",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 margin-auto\"><div class=\"display-grid gap-20 grid-cols-1 grid-cols-2-md\"><div class=\"bg-white rounded border padding-20 display-flex flex-column justify-content-between\"><div class=\"display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25\"><span class=\"rioglyph rioglyph-delivery text-size-h2\"></span><div class=\"text-size-18 text-bold text-center\">Data used for shipment tracking</div></div><div><div class=\"text-color-darker text-center margin-bottom-15\">The following data may be used to track shipments across carriers and systems:</div><div class=\"display-grid grid-cols-2 gap-10 text-size-14 text-color-darker\"><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-truck\"></span> Vehicle ID</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-map-marker\"></span> Current location</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-archive\"></span> Shipment status</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-time\"></span> Timestamps</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-user\"></span> Driver ID</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-route\"></span> Route info</div></div><button type=\"button\" class=\"btn btn-default btn-link btn-block btn-component margin-top-25\" tabindex=\"0\">Edit shipment settings</button></div></div><div class=\"bg-white rounded border padding-20 display-flex flex-column justify-content-between\"><div class=\"display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25\"><span class=\"rioglyph rioglyph-user-sign text-size-h2\"></span><div class=\"text-size-18 text-bold text-center\">Data linked to your company profile</div></div><div><div class=\"text-color-darker text-center margin-bottom-15\">This information may be associated with your identity or company profile:</div><div class=\"display-grid grid-cols-2 gap-10 text-size-14 text-color-darker\"><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-user-group\"></span> Customer ID</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-map\"></span> Delivery address</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-document\"></span> Shipping docs</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-stats\"></span> Usage metrics</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-cost-efficency\"></span> Freight costs</div><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-info-sign\"></span> Other data</div></div><button type=\"button\" class=\"btn btn-default btn-link btn-block btn-component margin-top-25\" tabindex=\"0\">Edit profile settings</button></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\n\nexport default () => {\n    return (\n        <div className='max-width-600 margin-auto'>\n            <div className='display-grid gap-20 grid-cols-1 grid-cols-2-md'>\n                <div className='bg-white rounded border padding-20 display-flex flex-column justify-content-between'>\n                    <div className='display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25'>\n                        <span className='rioglyph rioglyph-delivery text-size-h2' />\n                        <div className='text-size-18 text-bold text-center'>Data used for shipment tracking</div>\n                    </div>\n                    <div>\n                        <div className='text-color-darker text-center margin-bottom-15'>\n                            The following data may be used to track shipments across carriers and systems:\n                        </div>\n                        <div className='display-grid grid-cols-2 gap-10 text-size-14 text-color-darker'>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-truck' /> Vehicle ID\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-map-marker' /> Current location\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-archive' /> Shipment status\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-time' /> Timestamps\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-user' /> Driver ID\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-route' /> Route info\n                            </div>\n                        </div>\n                        <Button className='margin-top-25' variant='link' block>\n                            Edit shipment settings\n                        </Button>\n                    </div>\n                </div>\n\n                <div className='bg-white rounded border padding-20 display-flex flex-column justify-content-between'>\n                    <div className='display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25'>\n                        <span className='rioglyph rioglyph-user-sign text-size-h2' />\n                        <div className='text-size-18 text-bold text-center'>Data linked to your company profile</div>\n                    </div>\n                    <div>\n                        <div className='text-color-darker text-center margin-bottom-15'>\n                            This information may be associated with your identity or company profile:\n                        </div>\n                        <div className='display-grid grid-cols-2 gap-10 text-size-14 text-color-darker'>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-user-group' /> Customer ID\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-map' /> Delivery address\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-document' /> Shipping docs\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-stats' /> Usage metrics\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-cost-efficency' /> Freight costs\n                            </div>\n                            <div className='display-flex align-items-center gap-5'>\n                                <span className='rioglyph rioglyph-info-sign' /> Other data\n                            </div>\n                        </div>\n                        <Button className='margin-top-25' variant='link' block>\n                            Edit profile settings\n                        </Button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 margin-auto\">\n    <div class=\"display-grid gap-20 grid-cols-1 grid-cols-2-md\">\n        <div class=\"bg-white rounded border padding-20 display-flex flex-column justify-content-between\">\n            <div class=\"display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25\">\n                <span class=\"rioglyph rioglyph-delivery text-size-h2\">\n                </span>\n                <div class=\"text-size-18 text-bold text-center\">Data used for shipment tracking</div>\n            </div>\n            <div>\n                <div class=\"text-color-darker text-center margin-bottom-15\">The following data may be used to track shipments across carriers and systems:</div>\n                <div class=\"display-grid grid-cols-2 gap-10 text-size-14 text-color-darker\">\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-truck\">\n                        </span> Vehicle ID\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-map-marker\">\n                        </span> Current location\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-archive\">\n                        </span> Shipment status\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-time\">\n                        </span> Timestamps\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-user\">\n                        </span> Driver ID\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-route\">\n                        </span> Route info\n                    </div>\n                </div>\n                <button type=\"button\" class=\"btn btn-default btn-link btn-block btn-component margin-top-25\" tabindex=\"0\">Edit shipment settings</button>\n            </div>\n        </div>\n        <div class=\"bg-white rounded border padding-20 display-flex flex-column justify-content-between\">\n            <div class=\"display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25\">\n                <span class=\"rioglyph rioglyph-user-sign text-size-h2\">\n                </span>\n                <div class=\"text-size-18 text-bold text-center\">Data linked to your company profile</div>\n            </div>\n            <div>\n                <div class=\"text-color-darker text-center margin-bottom-15\">This information may be associated with your identity or company profile:</div>\n                <div class=\"display-grid grid-cols-2 gap-10 text-size-14 text-color-darker\">\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-user-group\">\n                        </span> Customer ID\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-map\">\n                        </span> Delivery address\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-document\">\n                        </span> Shipping docs\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-stats\">\n                        </span> Usage metrics\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-cost-efficency\">\n                        </span> Freight costs\n                    </div>\n                    <div class=\"display-flex align-items-center gap-5\">\n                        <span class=\"rioglyph rioglyph-info-sign\">\n                        </span> Other data\n                    </div>\n                </div>\n                <button type=\"button\" class=\"btn btn-default btn-link btn-block btn-component margin-top-25\" tabindex=\"0\">Edit profile settings</button>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}