@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,103 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:25.639Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/feature-cards",
+    "category": "Templates",
+    "section": "Content",
+    "slug": "templates/feature-cards",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "7e69432fb98a1a561b193d317eeec6fd9bb93702e2514624764e87c5cd5d22c9"
+  },
+  "title": "Feature cards",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Feature cards",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md max-width-800 margin-auto\"><div class=\"bg-white rounded border shadow-default padding-25\"><div class=\"text-size-h3 line-height-125rel text-color-darkest text-medium margin-bottom-15\">Lorem ipsum dolor sit amet</div><div class=\"display-flex gap-25 flex-wrap justify-content-between\"><div class=\"flex-1-1 max-width-600\">Administratio illum odit tui molestiae ulciscor cursus caveo.\nConfido decet toties sursum altus aetas.\nConsuasor aufero coadunatio cotidie acceptus solum depulso crastinus claustrum.\nDenuo attero adulatio tribuo vulticulus arcesso certe vobis.</div><div class=\"flex-0 btn-toolbar\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-sparkles\"></span>Get started</button></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Card from '@rio-cloud/rio-uikit/Card';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\n\nexport default () => {\n    return (\n        <div className='margin-25-md max-width-800 margin-auto'>\n            <Card padding={25} className=''>\n                <div className='text-size-h3 line-height-125rel text-color-darkest text-medium margin-bottom-15'>\n                    Lorem ipsum dolor sit amet\n                </div>\n                <div className='display-flex gap-25 flex-wrap justify-content-between'>\n                    <div className='flex-1-1 max-width-600'>{faker.lorem.lines(4)}</div>\n                    <ButtonToolbar className='flex-0'>\n                        <Button bsStyle='primary' iconName='rioglyph-sparkles'>\n                            Get started\n                        </Button>\n                    </ButtonToolbar>\n                </div>\n            </Card>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md max-width-800 margin-auto\">\n    <div class=\"bg-white rounded border shadow-default padding-25\">\n        <div class=\"text-size-h3 line-height-125rel text-color-darkest text-medium margin-bottom-15\">Lorem ipsum dolor sit amet</div>\n        <div class=\"display-flex gap-25 flex-wrap justify-content-between\">\n            <div class=\"flex-1-1 max-width-600\">Administratio illum odit tui molestiae ulciscor cursus caveo.\n                Confido decet toties sursum altus aetas.\n                Consuasor aufero coadunatio cotidie acceptus solum depulso crastinus claustrum.\n                Denuo attero adulatio tribuo vulticulus arcesso certe vobis.</div>\n            <div class=\"flex-0 btn-toolbar\">\n                <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">\n                    <span class=\"rioglyph rioglyph-sparkles\">\n                    </span>Get started</button>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md max-width-800 margin-auto\"><div class=\"bg-white rounded border shadow-default padding-25\"><div class=\"text-color-primary text-medium\">Lorem ipsum</div><div class=\"text-size-h3 line-height-125rel text-color-darkest text-medium\">Lorem ipsum dolor sit amet</div><p class=\"margin-bottom-25\">Optio arcesso cotidie decumbo.\nTergum verus spiculum compello suscipit compono pel succurro eaque maiores.\nAccusator adeptio necessitatibus thorax tam.\nDesparatus virga maiores villa tamisium.</p><div><button type=\"button\" class=\"btn btn-primary btn-icon-right btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-arrow-right\"></span>Read more</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Card from '@rio-cloud/rio-uikit/Card';\n\nexport default () => {\n    return (\n        <div className='margin-25-md max-width-800 margin-auto'>\n            <Card padding={25}>\n                <div className='text-color-primary text-medium'>Lorem ipsum</div>\n                <div className='text-size-h3 line-height-125rel text-color-darkest text-medium'>\n                    Lorem ipsum dolor sit amet\n                </div>\n                <p className='margin-bottom-25'>{faker.lorem.lines(4)}</p>\n                <div>\n                    <Button bsStyle='primary' iconName='rioglyph-arrow-right' iconRight>\n                        Read more\n                    </Button>\n                </div>\n            </Card>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md max-width-800 margin-auto\">\n    <div class=\"bg-white rounded border shadow-default padding-25\">\n        <div class=\"text-color-primary text-medium\">Lorem ipsum</div>\n        <div class=\"text-size-h3 line-height-125rel text-color-darkest text-medium\">Lorem ipsum dolor sit amet</div>\n        <p class=\"margin-bottom-25\">Optio arcesso cotidie decumbo.\n            Tergum verus spiculum compello suscipit compono pel succurro eaque maiores.\n            Accusator adeptio necessitatibus thorax tam.\n            Desparatus virga maiores villa tamisium.</p>\n        <div>\n            <button type=\"button\" class=\"btn btn-primary btn-icon-right btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-arrow-right\">\n                </span>Read more</button>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md max-width-800 margin-auto\"><div class=\"bg-white rounded border shadow-default padding-25\"><div class=\"text-size-h4 line-height-125rel text-color-darkest text-medium\">Lorem ipsum dolor sit amet</div><p class=\"margin-bottom-15\">Sodalitas toties commodi arceo.\nCur demergo vereor callide sumo sint vulgaris caelestis pecus cito.\nVigor suus solus cavus ocer truculenter apto.\nVos ars stipes curto suadeo animus.\nViscus adhaero tenax ambitus adsuesco odio aequitas tantum.</p><div><button type=\"button\" class=\"btn btn-default btn-link btn-link-inline btn-icon-right btn-component text-medium\" tabindex=\"0\"><span class=\"rioglyph rioglyph-arrow-right\"></span>Learn more about our delivery features</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Card from '@rio-cloud/rio-uikit/Card';\n\nexport default () => {\n    return (\n        <div className='margin-25-md max-width-800 margin-auto'>\n            <Card padding={25}>\n                <div className='text-size-h4 line-height-125rel text-color-darkest text-medium'>\n                    Lorem ipsum dolor sit amet\n                </div>\n                <p className='margin-bottom-15'>{faker.lorem.lines(5)}</p>\n                <div>\n                    <Button variant='link-inline' className='text-medium' iconName='rioglyph-arrow-right' iconRight>\n                        Learn more about our delivery features\n                    </Button>\n                </div>\n            </Card>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md max-width-800 margin-auto\">\n    <div class=\"bg-white rounded border shadow-default padding-25\">\n        <div class=\"text-size-h4 line-height-125rel text-color-darkest text-medium\">Lorem ipsum dolor sit amet</div>\n        <p class=\"margin-bottom-15\">Sodalitas toties commodi arceo.\n            Cur demergo vereor callide sumo sint vulgaris caelestis pecus cito.\n            Vigor suus solus cavus ocer truculenter apto.\n            Vos ars stipes curto suadeo animus.\n            Viscus adhaero tenax ambitus adsuesco odio aequitas tantum.</p>\n        <div>\n            <button type=\"button\" class=\"btn btn-default btn-link btn-link-inline btn-icon-right btn-component text-medium\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-arrow-right\">\n                </span>Learn more about our delivery features</button>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md max-width-800 margin-auto\"><div class=\"bg-white rounded border shadow-default padding-15 padding-x-25 padding-y-50 display-flex flex-column flex-row-sm gap-25\"><div class=\"display-flex flex-wrap gap-10\"><div class=\"flex-1-1\"><div class=\"text-size-h4 line-height-125rel text-color-darkest text-medium\">Lorem ipsum dolor sit amet</div><p class=\"margin-bottom-15\">Cunabula angulus tutis alienus.\nAdsidue desidero cibus confero explicabo suasoria libero copia assumenda.\nTotam clamo occaecati votum.\nOdio allatus aro arca dicta accusamus ustulo carbo cubitum audacia.\nConqueror consuasor tamisium.</p></div><div class=\"flex-1-1 btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">View details</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-sparkles\"></span>Get started</button></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Card from '@rio-cloud/rio-uikit/Card';\nimport SvgImage from '@rio-cloud/rio-uikit/SvgImage';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\n\nexport default () => {\n    return (\n        <div className='margin-25-md max-width-800 margin-auto'>\n            <Card className='padding-x-25 padding-y-50 display-flex flex-column flex-row-sm gap-25'>\n                <SvgImage name='abstract-product/product' size={100} className='flex-0' />\n                <div className='display-flex flex-wrap gap-10'>\n                    <div className='flex-1-1'>\n                        <div className='text-size-h4 line-height-125rel text-color-darkest text-medium'>\n                            Lorem ipsum dolor sit amet\n                        </div>\n                        <p className='margin-bottom-15'>{faker.lorem.lines(5)}</p>\n                    </div>\n                    <ButtonToolbar className='flex-1-1'>\n                        <Button bsStyle='default'>View details</Button>\n                        <Button bsStyle='primary' iconName='rioglyph-sparkles'>\n                            Get started\n                        </Button>\n                    </ButtonToolbar>\n                </div>\n            </Card>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md max-width-800 margin-auto\">\n    <div class=\"bg-white rounded border shadow-default padding-15 padding-x-25 padding-y-50 display-flex flex-column flex-row-sm gap-25\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:serif=\"http://www.serif.com/\" width=\"100\" height=\"100\" viewBox=\"0 0 250 250\" version=\"1.1\" xml:space=\"preserve\" class=\"flex-0\" style=\"fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-miterlimit: 2;\">\n            <g id=\"product\" transform=\"matrix(3.65079,0,0,3.65085,5.02397,-234.3)\">\n                <g transform=\"matrix(1.14763,0,0,1.14763,-0.201218,-9.87871)\">\n                    <path d=\"M49.363,90.916C49.363,104.17 38.618,114.915 25.363,114.915C12.108,114.915 1.363,104.17 1.363,90.916C1.363,77.661 12.108,66.916 25.363,66.916C38.618,66.916 49.363,77.661 49.363,90.916Z\" style=\"fill: var(--gray-lighter); fill-rule: nonzero;\">\n                    </path>\n                </g>\n                <path d=\"M18.363,104.915L18.363,120.915L37.363,129.915L56.363,120.915L56.363,104.915L18.363,104.915Z\" style=\"fill: var(--color-highlight-lighter); fill-rule: nonzero;\">\n                </path>\n                <path d=\"M56.363,107.915L56.363,120.915L37.363,129.915L18.363,120.915L18.363,107.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n                </path>\n                <path d=\"M37.363,105.915L37.363,129.915\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n                </path>\n                <path d=\"M10.363,103.915L29.363,112.915L37.363,105.915L37.363,104.915L18.363,95.916L10.363,102.915L10.363,103.915Z\" style=\"fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;\">\n                </path>\n                <path d=\"M10.363,103.915L29.363,112.915L37.363,105.915L37.363,104.915L18.363,95.916L10.363,102.915L10.363,103.915Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n                </path>\n                <path d=\"M64.363,103.915L45.363,112.915L37.363,105.915L37.363,104.915L56.363,95.916L64.363,102.915L64.363,103.915Z\" style=\"fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;\">\n                </path>\n                <path d=\"M64.363,103.915L45.363,112.915L37.363,105.915L37.363,104.915L56.363,95.916L64.363,102.915L64.363,103.915Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n                </path>\n                <path d=\"M10.363,87.916L29.363,78.916L37.363,85.916L37.363,86.916L18.363,95.916L10.363,88.916L10.363,87.916Z\" style=\"fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;\">\n                </path>\n                <path d=\"M10.363,87.916L29.363,78.916L37.363,85.916L37.363,86.916L18.363,95.916L10.363,88.916L10.363,87.916Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n                </path>\n                <path d=\"M64.363,87.916L45.363,78.916L37.363,85.916L37.363,86.916L56.363,95.916L64.363,88.916L64.363,87.916Z\" style=\"fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;\">\n                </path>\n                <path d=\"M64.363,87.916L45.363,78.916L37.363,85.916L37.363,86.916L56.363,95.916L64.363,88.916L64.363,87.916Z\" style=\"fill: none; stroke: var(--brand-info); stroke-width: 2.3px;\">\n                </path>\n                <path d=\"M37.363,73.916L35.363,75.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M42.363,68.916L40.363,70.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M40.363,73.916L42.363,75.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M35.363,68.916L37.363,70.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M20.363,72.916L20.363,74.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M20.363,76.916L20.363,78.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M19.363,75.916L17.363,75.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M23.363,75.916L21.363,75.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M10.363,111.915L10.363,113.915\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M10.363,115.915L10.363,117.915\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M9.363,114.915L7.363,114.915\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M13.363,114.915L11.363,114.915\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M51.363,66.916L51.363,68.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M51.363,70.916L51.363,72.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M50.363,69.916L48.363,69.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n                <path d=\"M54.363,69.916L52.363,69.916\" style=\"fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;\">\n                </path>\n            </g>\n        </svg>\n        <div class=\"display-flex flex-wrap gap-10\">\n            <div class=\"flex-1-1\">\n                <div class=\"text-size-h4 line-height-125rel text-color-darkest text-medium\">Lorem ipsum dolor sit amet</div>\n                <p class=\"margin-bottom-15\">Cunabula angulus tutis alienus.\n                    Adsidue desidero cibus confero explicabo suasoria libero copia assumenda.\n                    Totam clamo occaecati votum.\n                    Odio allatus aro arca dicta accusamus ustulo carbo cubitum audacia.\n                    Conqueror consuasor tamisium.</p>\n            </div>\n            <div class=\"flex-1-1 btn-toolbar\">\n                <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">View details</button>\n                <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">\n                    <span class=\"rioglyph rioglyph-sparkles\">\n                    </span>Get started</button>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-25-md margin-auto\"><div class=\"display-grid grid-cols-1 grid-cols-2-sm grid-cols-3-md grid-rowspan-3 gap-25\"><div class=\"bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0\"><div class=\"text-center text-color-darker margin-top-15\"><div class=\"text-size-16\">Customize</div><div class=\"text-size-12\"><div class=\"text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium\">Import your own data</div></div></div><div class=\"text-size-20 text-center padding-15\"><span class=\"rioglyph rioglyph-stats text-size-300pct\"></span></div><div><p class=\"margin-bottom-20 text-color-dark\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p><button type=\"button\" class=\"btn btn-primary btn-lg btn-block btn-component\" tabindex=\"0\">Read more</button></div></div><div class=\"bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0\"><div class=\"text-center text-color-darker margin-top-15\"><div class=\"text-size-16\">Use on mobile</div><div class=\"text-size-12\"><div class=\"text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium\">Get the app</div></div></div><div class=\"text-size-20 text-center padding-15\"><span class=\"rioglyph rioglyph-phone text-size-300pct\"></span></div><div><p class=\"margin-bottom-20 text-color-dark\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p><button type=\"button\" class=\"btn btn-primary btn-lg btn-block btn-component\" tabindex=\"0\">Download now</button></div></div><div class=\"bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0\"><div class=\"text-center text-color-darker margin-top-15\"><div class=\"text-size-16\">Tips</div><div class=\"text-size-12\"><div class=\"text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium\">Discover new features</div></div></div><div class=\"text-size-20 text-center padding-15\"><span class=\"rioglyph rioglyph-cost-efficency text-size-300pct\"></span></div><div><p class=\"margin-bottom-20 text-color-dark\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p><button type=\"button\" class=\"btn btn-primary btn-lg btn-block btn-component\" tabindex=\"0\">Read more</button></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport Card from '@rio-cloud/rio-uikit/Card';\n\nexport default () => {\n    return (\n        <div className='margin-25-md margin-auto'>\n            <div className='display-grid grid-cols-1 grid-cols-2-sm grid-cols-3-md grid-rowspan-3 gap-25'>\n                <Card\n                    className='display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0'\n                    padding={25}\n                    shadow='smooth'\n                >\n                    <div className='text-center text-color-darker margin-top-15'>\n                        <div className='text-size-16'>Customize</div>\n                        <div className='text-size-12'>\n                            <div className='text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium'>\n                                Import your own data\n                            </div>\n                        </div>\n                    </div>\n                    <div className='text-size-20 text-center padding-15'>\n                        <span className='rioglyph rioglyph-stats text-size-300pct' />\n                    </div>\n                    <div>\n                        <p className='margin-bottom-20 text-color-dark'>\n                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin\n                            commodo.\n                        </p>\n                        <Button bsStyle='primary' bsSize='lg' block>\n                            Read more\n                        </Button>\n                    </div>\n                </Card>\n\n                <Card\n                    className='display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0'\n                    padding={25}\n                    shadow='smooth'\n                >\n                    <div className='text-center text-color-darker margin-top-15'>\n                        <div className='text-size-16'>Use on mobile</div>\n                        <div className='text-size-12'>\n                            <div className='text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium'>\n                                Get the app\n                            </div>\n                        </div>\n                    </div>\n                    <div className='text-size-20 text-center padding-15'>\n                        <span className='rioglyph rioglyph-phone text-size-300pct' />\n                    </div>\n                    <div>\n                        <p className='margin-bottom-20 text-color-dark'>\n                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin\n                            commodo.\n                        </p>\n                        <Button bsStyle='primary' bsSize='lg' block>\n                            Download now\n                        </Button>\n                    </div>\n                </Card>\n\n                <Card\n                    className='display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0'\n                    padding={25}\n                    shadow='smooth'\n                >\n                    <div className='text-center text-color-darker margin-top-15'>\n                        <div className='text-size-16'>Tips</div>\n                        <div className='text-size-12'>\n                            <div className='text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium'>\n                                Discover new features\n                            </div>\n                        </div>\n                    </div>\n                    <div className='text-size-20 text-center padding-15'>\n                        <span className='rioglyph rioglyph-cost-efficency text-size-300pct' />\n                    </div>\n                    <div>\n                        <p className='margin-bottom-20 text-color-dark'>\n                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin\n                            commodo.\n                        </p>\n                        <Button bsStyle='primary' bsSize='lg' block>\n                            Read more\n                        </Button>\n                    </div>\n                </Card>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-25-md margin-auto\">\n    <div class=\"display-grid grid-cols-1 grid-cols-2-sm grid-cols-3-md grid-rowspan-3 gap-25\">\n        <div class=\"bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0\">\n            <div class=\"text-center text-color-darker margin-top-15\">\n                <div class=\"text-size-16\">Customize</div>\n                <div class=\"text-size-12\">\n                    <div class=\"text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium\">Import your own data</div>\n                </div>\n            </div>\n            <div class=\"text-size-20 text-center padding-15\">\n                <span class=\"rioglyph rioglyph-stats text-size-300pct\">\n                </span>\n            </div>\n            <div>\n                <p class=\"margin-bottom-20 text-color-dark\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>\n                <button type=\"button\" class=\"btn btn-primary btn-lg btn-block btn-component\" tabindex=\"0\">Read more</button>\n            </div>\n        </div>\n        <div class=\"bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0\">\n            <div class=\"text-center text-color-darker margin-top-15\">\n                <div class=\"text-size-16\">Use on mobile</div>\n                <div class=\"text-size-12\">\n                    <div class=\"text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium\">Get the app</div>\n                </div>\n            </div>\n            <div class=\"text-size-20 text-center padding-15\">\n                <span class=\"rioglyph rioglyph-phone text-size-300pct\">\n                </span>\n            </div>\n            <div>\n                <p class=\"margin-bottom-20 text-color-dark\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>\n                <button type=\"button\" class=\"btn btn-primary btn-lg btn-block btn-component\" tabindex=\"0\">Download now</button>\n            </div>\n        </div>\n        <div class=\"bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0\">\n            <div class=\"text-center text-color-darker margin-top-15\">\n                <div class=\"text-size-16\">Tips</div>\n                <div class=\"text-size-12\">\n                    <div class=\"text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium\">Discover new features</div>\n                </div>\n            </div>\n            <div class=\"text-size-20 text-center padding-15\">\n                <span class=\"rioglyph rioglyph-cost-efficency text-size-300pct\">\n                </span>\n            </div>\n            <div>\n                <p class=\"margin-bottom-20 text-color-dark\">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>\n                <button type=\"button\" class=\"btn btn-primary btn-lg btn-block btn-component\" tabindex=\"0\">Read more</button>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/form-summary.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:31.600Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/form-summary",
+    "category": "Templates",
+    "section": "Forms",
+    "slug": "templates/form-summary",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "f0e99e4c18ea0488a19ef9fbe7e09f0f1039beb6c4c81516705c218d6b7e1f56"
+  },
+  "title": "Form summary",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Form summary",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Request summary",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 margin-auto\"><div><div class=\"padding-x-5\"><h3 class=\"text-base/7 font-semibold text-text-color-darker\">Request summary</h3><p class=\"mt-1 max-w-2xl text-sm/6 text-gray-500\">Generated client request data</p></div><div class=\"mt-6 border-t border-gray-100\"><dl class=\"divider-y-1 divider-color-lighter divider-style-solid\"><div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\"><dt class=\"text-medium text-color-darkest\">Contact person</dt><dd class=\"grid-colspan-2 text-color-darker\">Alberto Fritsch</dd></div><div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\"><dt class=\"text-medium text-color-darkest\">Requested role</dt><dd class=\"grid-colspan-2 text-color-darker\">International Functionality Consultant</dd></div><div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\"><dt class=\"text-medium text-color-darkest\">Contact email</dt><dd class=\"grid-colspan-2 text-color-darker\">Aletha.Erdman23@yahoo.com</dd></div><div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\"><dt class=\"text-medium text-color-darkest\">Annual budget</dt><dd class=\"grid-colspan-2 text-color-darker\">€198,965.00</dd></div><div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\"><dt class=\"text-medium text-color-darkest\">Project description</dt><dd class=\"grid-colspan-2 text-color-darker\">Spectaculum crebro tener toties defendo.\nVesica tutamen cedo.\nAcervus ambitus coaegresco.</dd></div><div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\"><dt class=\"text-medium text-color-darkest\">Supporting files</dt><dd class=\"grid-colspan-2\"><div class=\"list-group border rounded\"><div class=\"list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5\"><div class=\"grid-colspan-4\">project-outline.pdf</div><div class=\"text-color-dark text-size-12\">2.4MB</div><div class=\"grid-colspan-2 text-right\"><button type=\"button\" class=\"btn btn-default btn-link btn-component\" tabindex=\"0\">Download</button></div></div><div class=\"list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5\"><div class=\"grid-colspan-4\">wireframes.pdf</div><div class=\"text-color-dark text-size-12\">3.7MB</div><div class=\"grid-colspan-2 text-right\"><button type=\"button\" class=\"btn btn-default btn-link btn-component\" tabindex=\"0\">Download</button></div></div></div></dd></div></dl></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport { FormattedNumber } from 'react-intl';\n\nexport default () => {\n    const subjectInfo = {\n        fullName: faker.person.fullName(),\n        role: faker.person.jobTitle(),\n        email: faker.internet.email(),\n        budget: faker.number.int({ min: 50_000, max: 200_000 }),\n        description: faker.lorem.lines(3),\n        attachments: [\n            {\n                name: 'project-outline.pdf',\n                sizeMB: 2.4,\n            },\n            {\n                name: 'wireframes.pdf',\n                sizeMB: 3.7,\n            },\n        ],\n    };\n\n    return (\n        <div className='max-width-600 margin-auto'>\n            <div>\n                <div className='padding-x-5'>\n                    <h3 className='text-base/7 font-semibold text-text-color-darker'>Request summary</h3>\n                    <p className='mt-1 max-w-2xl text-sm/6 text-gray-500'>Generated client request data</p>\n                </div>\n                <div className='mt-6 border-t border-gray-100'>\n                    <dl className='divider-y-1 divider-color-lighter divider-style-solid'>\n                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>\n                            <dt className='text-medium text-color-darkest'>Contact person</dt>\n                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.fullName}</dd>\n                        </div>\n                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>\n                            <dt className='text-medium text-color-darkest'>Requested role</dt>\n                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.role}</dd>\n                        </div>\n                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>\n                            <dt className='text-medium text-color-darkest'>Contact email</dt>\n                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.email}</dd>\n                        </div>\n                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>\n                            <dt className='text-medium text-color-darkest'>Annual budget</dt>\n                            <dd className='grid-colspan-2 text-color-darker'>\n                                <FormattedNumber value={subjectInfo.budget} style='currency' currency='EUR' />\n                            </dd>\n                        </div>\n                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>\n                            <dt className='text-medium text-color-darkest'>Project description</dt>\n                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.description}</dd>\n                        </div>\n                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>\n                            <dt className='text-medium text-color-darkest'>Supporting files</dt>\n                            <dd className='grid-colspan-2'>\n                                <div className='list-group border rounded'>\n                                    {subjectInfo.attachments.map(file => (\n                                        <div\n                                            key={file.name}\n                                            className='list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5'\n                                        >\n                                            <div className='grid-colspan-4'>{file.name}</div>\n                                            <div className='text-color-dark text-size-12'>\n                                                <FormattedNumber\n                                                    value={file.sizeMB}\n                                                    style='unit'\n                                                    unit='megabyte'\n                                                    unitDisplay='narrow'\n                                                />\n                                            </div>\n                                            <div className='grid-colspan-2 text-right'>\n                                                <Button variant='link'>Download</Button>\n                                            </div>\n                                        </div>\n                                    ))}\n                                </div>\n                            </dd>\n                        </div>\n                    </dl>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 margin-auto\">\n    <div>\n        <div class=\"padding-x-5\">\n            <h3 class=\"text-base/7 font-semibold text-text-color-darker\">Request summary</h3>\n            <p class=\"mt-1 max-w-2xl text-sm/6 text-gray-500\">Generated client request data</p>\n        </div>\n        <div class=\"mt-6 border-t border-gray-100\">\n            <dl class=\"divider-y-1 divider-color-lighter divider-style-solid\">\n                <div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\">\n                    <dt class=\"text-medium text-color-darkest\">Contact person</dt>\n                    <dd class=\"grid-colspan-2 text-color-darker\">Alberto Fritsch</dd>\n                </div>\n                <div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\">\n                    <dt class=\"text-medium text-color-darkest\">Requested role</dt>\n                    <dd class=\"grid-colspan-2 text-color-darker\">International Functionality Consultant</dd>\n                </div>\n                <div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\">\n                    <dt class=\"text-medium text-color-darkest\">Contact email</dt>\n                    <dd class=\"grid-colspan-2 text-color-darker\">Aletha.Erdman23@yahoo.com</dd>\n                </div>\n                <div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\">\n                    <dt class=\"text-medium text-color-darkest\">Annual budget</dt>\n                    <dd class=\"grid-colspan-2 text-color-darker\">€198,965.00</dd>\n                </div>\n                <div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\">\n                    <dt class=\"text-medium text-color-darkest\">Project description</dt>\n                    <dd class=\"grid-colspan-2 text-color-darker\">Spectaculum crebro tener toties defendo.\n                        Vesica tutamen cedo.\n                        Acervus ambitus coaegresco.</dd>\n                </div>\n                <div class=\"display-grid grid-cols-3 padding-x-5 padding-y-15\">\n                    <dt class=\"text-medium text-color-darkest\">Supporting files</dt>\n                    <dd class=\"grid-colspan-2\">\n                        <div class=\"list-group border rounded\">\n                            <div class=\"list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5\">\n                                <div class=\"grid-colspan-4\">project-outline.pdf</div>\n                                <div class=\"text-color-dark text-size-12\">2.4MB</div>\n                                <div class=\"grid-colspan-2 text-right\">\n                                    <button type=\"button\" class=\"btn btn-default btn-link btn-component\" tabindex=\"0\">Download</button>\n                                </div>\n                            </div>\n                            <div class=\"list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5\">\n                                <div class=\"grid-colspan-4\">wireframes.pdf</div>\n                                <div class=\"text-color-dark text-size-12\">3.7MB</div>\n                                <div class=\"grid-colspan-2 text-right\">\n                                    <button type=\"button\" class=\"btn btn-default btn-link btn-component\" tabindex=\"0\">Download</button>\n                                </div>\n                            </div>\n                        </div>\n                    </dd>\n                </div>\n            </dl>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/form-toggle.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:31.435Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/form-toggle",
+    "category": "Templates",
+    "section": "Forms",
+    "slug": "templates/form-toggle",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "473ff23aebc2da237df57cf4c29b028b34689225845b3dbfe12da92f25f502fa"
+  },
+  "title": "Form toggle",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Form toggle",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-grid gap-25 grid-cols-1 grid-cols-2-sm\"><div class=\"bg-white rounded border shadow-default padding-25 display-flex flex-column justify-content-between\"><div><div class=\"text-medium text-size-18 margin-bottom-5\">Size by form-group</div><div class=\"display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0\" data-capture-callout=\"true\"><div><span class=\"label label-info label-condensed label-filled\">Note</span></div><div class=\"width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1\">Different form-group sizes come with different bottom spacing</div></div><hr class=\"margin-top-20 margin-bottom-15\"><div class=\"h5\">Wrapped by sized form-groups</div><div class=\"form-group form-group-sm form-group-not-editable\"><label for=\"input1\" class=\"display-inline-block\"><span>form-group-sm + form-group-not-editable</span></label><div>Lorem Ipsum Dolor</div></div><div class=\"form-group  form-group-not-editable\"><label for=\"input1\" class=\"display-inline-block\"><span>form-group + form-group-not-editable</span></label><div>Lorem Ipsum Dolor</div></div><div class=\"form-group form-group-lg form-group-not-editable\"><label for=\"input1\" class=\"display-inline-block\"><span>form-group-lg + form-group-not-editable</span></label><div>Lorem Ipsum Dolor</div></div></div><div class=\"margin-top-25 display-flex \"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span>Edit</button></div></div><div class=\"bg-white rounded border shadow-default padding-25 display-flex flex-column justify-content-between\"><div><div class=\"text-medium text-size-18 margin-bottom-5\">Size by input-group</div><div class=\"display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0\" data-capture-callout=\"true\"><div><span class=\"label label-info label-condensed label-filled\">Note</span></div><div class=\"width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1\">No form-group size results in the same bottom spacing</div></div><hr class=\"margin-top-20 margin-bottom-15\"><div class=\"h5\">Wrapped only by form-group</div><div class=\"form-group\"><label for=\"input2\" class=\"display-inline-block\"><span>input-group-sm input-group-not-editable</span></label><div class=\"input-group input-group-sm + input-group-not-editable\"><div>Lorem Ipsum Dolor</div></div></div><div class=\"form-group\"><label for=\"input2\" class=\"display-inline-block\"><span>input-group input-group-not-editable</span></label><div class=\"input-group  + input-group-not-editable\"><div>Lorem Ipsum Dolor</div></div></div><div class=\"form-group\"><label for=\"input2\" class=\"display-inline-block\"><span>input-group-lg input-group-not-editable</span></label><div class=\"input-group input-group-lg + input-group-not-editable\"><div>Lorem Ipsum Dolor</div></div></div></div><div class=\"margin-top-25 display-flex \"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span>Edit</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport { Note } from '../../../components/Note';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Card from '@rio-cloud/rio-uikit/Card';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\ntype FormGroupProps = {\n    size?: 'sm' | 'lg';\n    value: string;\n    editMode: boolean;\n    onChange: VoidFunction;\n};\n\nconst FormGroup = ({ size, value, editMode, onChange }: FormGroupProps) => {\n    return (\n        <div className={`form-group ${size ? `form-group-${size}` : ''} ${!editMode ? 'form-group-not-editable' : ''}`}>\n            <FormLabel htmlFor='input1'>{`form-group${size ? `-${size}` : ''} ${\n                !editMode ? '+ form-group-not-editable' : ''\n            }`}</FormLabel>\n            {editMode ? (\n                <div className='input-group'>\n                    <input id='input1' className='form-control' type='text' defaultValue={value} onChange={onChange} />\n                    <span className='input-group-btn'>\n                        <Button\n                            iconOnly\n                            iconName='rioglyph-trash'\n                            bsSize={size}\n                            className={!editMode ? 'form-group-not-editable' : ''}\n                        />\n                    </span>\n                </div>\n            ) : (\n                <div>{value}</div>\n            )}\n        </div>\n    );\n};\n\ntype InputGroupProps = {\n    size?: 'sm' | 'lg';\n    value: string;\n    editMode: boolean;\n    onChange: VoidFunction;\n};\n\nconst InputGroup = ({ size, value, editMode, onChange }: InputGroupProps) => {\n    return (\n        <>\n            <FormLabel htmlFor='input2'>{`input-group${size ? `-${size}` : ''} ${\n                !editMode ? 'input-group-not-editable' : ''\n            }`}</FormLabel>\n            <div\n                className={`input-group ${size ? `input-group-${size}` : ''} ${\n                    !editMode ? '+ input-group-not-editable' : ''\n                }`}\n            >\n                {editMode ? (\n                    <>\n                        <input\n                            id='input2'\n                            className='form-control'\n                            type='text'\n                            defaultValue={value}\n                            onChange={onChange}\n                        />\n                        <span className='input-group-btn'>\n                            <Button\n                                iconOnly\n                                iconName='rioglyph-trash'\n                                bsSize={size}\n                                className={!editMode ? 'form-group-not-editable' : ''}\n                            />\n                        </span>\n                    </>\n                ) : (\n                    <div>{value}</div>\n                )}\n            </div>\n        </>\n    );\n};\n\nexport default () => {\n    const [editModes, setEditModes] = useState<Record<string, boolean>>({\n        formGroupEditMode: false,\n        inputGroupEditMode: false,\n    });\n\n    const [hasFormGroupExampleChanged, setHasFormGroupExampleChanged] = useState(false);\n    const [hasInputGroupExampleChanged, setHasInputGroupExampleChanged] = useState(false);\n\n    const handleFormInputChange = () => setHasFormGroupExampleChanged(true);\n    const handleInputChange = () => setHasInputGroupExampleChanged(true);\n\n    const handleChange = (key: string) => {\n        const newState = !editModes[key];\n\n        setEditModes({\n            ...editModes,\n            [key]: newState,\n        });\n\n        setHasFormGroupExampleChanged(false);\n        setHasInputGroupExampleChanged(false);\n    };\n\n    const { formGroupEditMode, inputGroupEditMode } = editModes;\n\n    return (\n        <div className='display-grid gap-25 grid-cols-1 grid-cols-2-sm'>\n            <Card className='display-flex flex-column justify-content-between' padding={25}>\n                <div>\n                    <div className='text-medium text-size-18 margin-bottom-5'>Size by form-group</div>\n                    <Note>Different form-group sizes come with different bottom spacing</Note>\n                    <hr className='margin-top-20 margin-bottom-15' />\n\n                    <div className='h5'>Wrapped by sized form-groups</div>\n                    <FormGroup\n                        onChange={handleFormInputChange}\n                        editMode={formGroupEditMode}\n                        size='sm'\n                        value='Lorem Ipsum Dolor'\n                    />\n                    <FormGroup\n                        onChange={handleFormInputChange}\n                        editMode={formGroupEditMode}\n                        value='Lorem Ipsum Dolor'\n                    />\n                    <FormGroup\n                        onChange={handleFormInputChange}\n                        editMode={formGroupEditMode}\n                        size='lg'\n                        value='Lorem Ipsum Dolor'\n                    />\n                </div>\n\n                <div className={`margin-top-25 display-flex ${formGroupEditMode ? 'justify-content-end' : ''}`}>\n                    {!formGroupEditMode && (\n                        <Button iconName='rioglyph-pencil' onClick={() => handleChange('formGroupEditMode')}>\n                            Edit\n                        </Button>\n                    )}\n                    {formGroupEditMode && (\n                        <div className='btn-toolbar'>\n                            <Button onClick={() => handleChange('formGroupEditMode')}>Cancel</Button>\n                            <Button\n                                bsStyle='primary'\n                                disabled={!hasFormGroupExampleChanged}\n                                onClick={() => handleChange('formGroupEditMode')}\n                            >\n                                Save changes\n                            </Button>\n                        </div>\n                    )}\n                </div>\n            </Card>\n\n            <Card className='display-flex flex-column justify-content-between' padding={25}>\n                <div>\n                    <div className='text-medium text-size-18 margin-bottom-5'>Size by input-group</div>\n                    <Note>No form-group size results in the same bottom spacing</Note>\n                    <hr className='margin-top-20 margin-bottom-15' />\n                    <div className='h5'>Wrapped only by form-group</div>\n                    <div className='form-group'>\n                        <InputGroup\n                            onChange={handleInputChange}\n                            editMode={inputGroupEditMode}\n                            size='sm'\n                            value='Lorem Ipsum Dolor'\n                        />\n                    </div>\n                    <div className='form-group'>\n                        <InputGroup\n                            onChange={handleInputChange}\n                            editMode={inputGroupEditMode}\n                            value='Lorem Ipsum Dolor'\n                        />\n                    </div>\n                    <div className='form-group'>\n                        <InputGroup\n                            onChange={handleInputChange}\n                            editMode={inputGroupEditMode}\n                            size='lg'\n                            value='Lorem Ipsum Dolor'\n                        />\n                    </div>\n                </div>\n\n                <div className={`margin-top-25 display-flex ${inputGroupEditMode ? 'justify-content-end' : ''}`}>\n                    {!inputGroupEditMode && (\n                        <Button iconName='rioglyph-pencil' onClick={() => handleChange('inputGroupEditMode')}>\n                            Edit\n                        </Button>\n                    )}\n                    {inputGroupEditMode && (\n                        <div className='btn-toolbar'>\n                            <Button onClick={() => handleChange('inputGroupEditMode')}>Cancel</Button>\n                            <Button\n                                bsStyle='primary'\n                                disabled={!hasInputGroupExampleChanged}\n                                onClick={() => handleChange('inputGroupEditMode')}\n                            >\n                                Save changes\n                            </Button>\n                        </div>\n                    )}\n                </div>\n            </Card>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-grid gap-25 grid-cols-1 grid-cols-2-sm\">\n    <div class=\"bg-white rounded border shadow-default padding-25 display-flex flex-column justify-content-between\">\n        <div>\n            <div class=\"text-medium text-size-18 margin-bottom-5\">Size by form-group</div>\n            <div class=\"display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0\" data-capture-callout=\"true\">\n                <div>\n                    <span class=\"label label-info label-condensed label-filled\">Note</span>\n                </div>\n                <div class=\"width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1\">Different form-group sizes come with different bottom spacing</div>\n            </div>\n            <hr class=\"margin-top-20 margin-bottom-15\">\n            <div class=\"h5\">Wrapped by sized form-groups</div>\n            <div class=\"form-group form-group-sm form-group-not-editable\">\n                <label for=\"input1\" class=\"display-inline-block\">\n                    <span>form-group-sm + form-group-not-editable</span>\n                </label>\n                <div>Lorem Ipsum Dolor</div>\n            </div>\n            <div class=\"form-group  form-group-not-editable\">\n                <label for=\"input1\" class=\"display-inline-block\">\n                    <span>form-group + form-group-not-editable</span>\n                </label>\n                <div>Lorem Ipsum Dolor</div>\n            </div>\n            <div class=\"form-group form-group-lg form-group-not-editable\">\n                <label for=\"input1\" class=\"display-inline-block\">\n                    <span>form-group-lg + form-group-not-editable</span>\n                </label>\n                <div>Lorem Ipsum Dolor</div>\n            </div>\n        </div>\n        <div class=\"margin-top-25 display-flex \">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-pencil\">\n                </span>Edit</button>\n        </div>\n    </div>\n    <div class=\"bg-white rounded border shadow-default padding-25 display-flex flex-column justify-content-between\">\n        <div>\n            <div class=\"text-medium text-size-18 margin-bottom-5\">Size by input-group</div>\n            <div class=\"display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0\" data-capture-callout=\"true\">\n                <div>\n                    <span class=\"label label-info label-condensed label-filled\">Note</span>\n                </div>\n                <div class=\"width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1\">No form-group size results in the same bottom spacing</div>\n            </div>\n            <hr class=\"margin-top-20 margin-bottom-15\">\n            <div class=\"h5\">Wrapped only by form-group</div>\n            <div class=\"form-group\">\n                <label for=\"input2\" class=\"display-inline-block\">\n                    <span>input-group-sm input-group-not-editable</span>\n                </label>\n                <div class=\"input-group input-group-sm + input-group-not-editable\">\n                    <div>Lorem Ipsum Dolor</div>\n                </div>\n            </div>\n            <div class=\"form-group\">\n                <label for=\"input2\" class=\"display-inline-block\">\n                    <span>input-group input-group-not-editable</span>\n                </label>\n                <div class=\"input-group  + input-group-not-editable\">\n                    <div>Lorem Ipsum Dolor</div>\n                </div>\n            </div>\n            <div class=\"form-group\">\n                <label for=\"input2\" class=\"display-inline-block\">\n                    <span>input-group-lg input-group-not-editable</span>\n                </label>\n                <div class=\"input-group input-group-lg + input-group-not-editable\">\n                    <div>Lorem Ipsum Dolor</div>\n                </div>\n            </div>\n        </div>\n        <div class=\"margin-top-25 display-flex \">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-pencil\">\n                </span>Edit</button>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,119 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:30.363Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/list-blocks",
+    "category": "Templates",
+    "section": "Content",
+    "slug": "templates/list-blocks",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "30e272b2a458ca7d1f8483894aa1fa597a8a233cdb4140ae8133be9c91fedf81"
+  },
+  "title": "List blocks",
+  "lead": null,
+  "content": [
+    {
+      "heading": "List blocks",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Ratione spiritus quaerat denuncio tunc.",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-500 margin-auto padding-5\"><div class=\"text-size-h2 font-bold\">Lorem ipsum dolor</div><p class=\"text-color-dark margin-top-0 margin-bottom-20\">Ratione spiritus quaerat denuncio tunc.</p><div class=\"space-y-15\"><div class=\"bg-white padding-15 rounded-large shadow-subtle border\"><div class=\"display-flex gap-15\"><div class=\"height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14\"><span class=\"rioglyph rioglyph-academic-cap text-size-300pct\"></span></div><div class=\"flex-1-1 display-flex gap-15 flex-row-ls flex-column\"><div class=\"flex-1-1\"><p class=\"text-size-18 margin-0 margin-bottom-5\">Reinger LLC</p><p class=\"text-color-dark margin-0\">Aegrus vitae tabgo cultellus copiose.</p></div><div class=\"display-flex align-items-center\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Connect</button></div></div></div></div><div class=\"bg-white padding-15 rounded-large shadow-subtle border\"><div class=\"display-flex gap-15\"><div class=\"height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14\"><span class=\"rioglyph rioglyph-inbox text-size-300pct\"></span></div><div class=\"flex-1-1 display-flex gap-15 flex-row-ls flex-column\"><div class=\"flex-1-1\"><p class=\"text-size-18 margin-0 margin-bottom-5\">Skiles - Vandervort</p><p class=\"text-color-dark margin-0\">Depopulo sub vitae arbitro illo triumphus adfero.\nCuris cupiditas tristis adamo tenuis deleo animadverto claro caste.</p></div><div class=\"display-flex align-items-center\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Connect</button></div></div></div></div><div class=\"bg-white padding-15 rounded-large shadow-subtle border\"><div class=\"display-flex gap-15\"><div class=\"height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14\"><span class=\"rioglyph rioglyph-rio text-size-300pct\"></span></div><div class=\"flex-1-1 display-flex gap-15 flex-row-ls flex-column\"><div class=\"flex-1-1\"><p class=\"text-size-18 margin-0 margin-bottom-5\">Satterfield - Corwin</p><p class=\"text-color-dark margin-0\">Labore caries deduco usitas pectus contabesco adamo bibo repellat apud.</p></div><div class=\"display-flex align-items-center\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Connect</button></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nexport default () => {\n    const examples = [\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-academic-cap',\n            description: faker.lorem.lines(1),\n        },\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-inbox',\n            description: faker.lorem.lines(2),\n        },\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-rio',\n            description: faker.lorem.lines(1),\n        },\n    ];\n\n    return (\n        <div className='max-width-500 margin-auto padding-5'>\n            <div className='text-size-h2 font-bold'>Lorem ipsum dolor</div>\n            <p className='text-color-dark margin-top-0 margin-bottom-20'>{faker.lorem.lines(1)}</p>\n\n            <div className='space-y-15'>\n                {examples.map(item => (\n                    <div key={item.name} className='bg-white padding-15 rounded-large shadow-subtle border'>\n                        <div className='display-flex gap-15'>\n                            <div className='height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14'>\n                                <span className={`rioglyph ${item.icon} text-size-300pct`} />\n                            </div>\n                            <div className='flex-1-1 display-flex gap-15 flex-row-ls flex-column'>\n                                <div className='flex-1-1'>\n                                    <p className='text-size-18 margin-0 margin-bottom-5'>{item.name}</p>\n                                    <p className='text-color-dark margin-0'>{item.description}</p>\n                                </div>\n                                <div className='display-flex align-items-center'>\n                                    <Button>Connect</Button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-500 margin-auto padding-5\">\n    <div class=\"text-size-h2 font-bold\">Lorem ipsum dolor</div>\n    <p class=\"text-color-dark margin-top-0 margin-bottom-20\">Ratione spiritus quaerat denuncio tunc.</p>\n    <div class=\"space-y-15\">\n        <div class=\"bg-white padding-15 rounded-large shadow-subtle border\">\n            <div class=\"display-flex gap-15\">\n                <div class=\"height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-academic-cap text-size-300pct\">\n                    </span>\n                </div>\n                <div class=\"flex-1-1 display-flex gap-15 flex-row-ls flex-column\">\n                    <div class=\"flex-1-1\">\n                        <p class=\"text-size-18 margin-0 margin-bottom-5\">Reinger LLC</p>\n                        <p class=\"text-color-dark margin-0\">Aegrus vitae tabgo cultellus copiose.</p>\n                    </div>\n                    <div class=\"display-flex align-items-center\">\n                        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Connect</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"bg-white padding-15 rounded-large shadow-subtle border\">\n            <div class=\"display-flex gap-15\">\n                <div class=\"height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-inbox text-size-300pct\">\n                    </span>\n                </div>\n                <div class=\"flex-1-1 display-flex gap-15 flex-row-ls flex-column\">\n                    <div class=\"flex-1-1\">\n                        <p class=\"text-size-18 margin-0 margin-bottom-5\">Skiles - Vandervort</p>\n                        <p class=\"text-color-dark margin-0\">Depopulo sub vitae arbitro illo triumphus adfero.\n                            Curis cupiditas tristis adamo tenuis deleo animadverto claro caste.</p>\n                    </div>\n                    <div class=\"display-flex align-items-center\">\n                        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Connect</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"bg-white padding-15 rounded-large shadow-subtle border\">\n            <div class=\"display-flex gap-15\">\n                <div class=\"height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14\">\n                    <span class=\"rioglyph rioglyph-rio text-size-300pct\">\n                    </span>\n                </div>\n                <div class=\"flex-1-1 display-flex gap-15 flex-row-ls flex-column\">\n                    <div class=\"flex-1-1\">\n                        <p class=\"text-size-18 margin-0 margin-bottom-5\">Satterfield - Corwin</p>\n                        <p class=\"text-color-dark margin-0\">Labore caries deduco usitas pectus contabesco adamo bibo repellat apud.</p>\n                    </div>\n                    <div class=\"display-flex align-items-center\">\n                        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Connect</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Choose the logistics session that fits your process",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-500 margin-auto padding-5\"><div class=\"bg-white rounded border shadow-default padding-25\"><div class=\"display-flex align-items-center gap-5 margin-bottom-5\"><span class=\"rioglyph rioglyph-user text-size-18\"></span><div class=\"text-size-18 text-bold text-color-darkest\">Meeting type</div></div><div class=\"text-color-dark margin-bottom-20\">Choose the logistics session that fits your process</div><div class=\"display-flex flex-column gap-10\"><div class=\"display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer\"><div><div class=\"text-medium text-color-darkest\">Freight pickup</div><div class=\"text-color-dark text-size-14\">Schedule cargo collection at origin</div></div><div class=\"badge badge-muted\">30 min</div></div><div class=\"display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer\"><div><div class=\"text-medium text-color-darkest\">Route planning</div><div class=\"text-color-dark text-size-14\">Discuss optimal route and ETA</div></div><div class=\"badge badge-muted\">45 min</div></div><div class=\"display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer\"><div><div class=\"text-medium text-color-darkest\">Delivery coordination</div><div class=\"text-color-dark text-size-14\">Align final drop-off and documents</div></div><div class=\"badge badge-muted\">60 min</div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Card from '@rio-cloud/rio-uikit/Card';\n\nexport default () => {\n    const options = [\n        {\n            title: 'Freight pickup',\n            subtitle: 'Schedule cargo collection at origin',\n            duration: '30 min',\n        },\n        {\n            title: 'Route planning',\n            subtitle: 'Discuss optimal route and ETA',\n            duration: '45 min',\n        },\n        {\n            title: 'Delivery coordination',\n            subtitle: 'Align final drop-off and documents',\n            duration: '60 min',\n        },\n    ];\n\n    return (\n        <div className='max-width-500 margin-auto padding-5'>\n            <Card padding={25}>\n                <div className='display-flex align-items-center gap-5 margin-bottom-5'>\n                    <span className='rioglyph rioglyph-user text-size-18' />\n                    <div className='text-size-18 text-bold text-color-darkest'>Meeting type</div>\n                </div>\n                <div className='text-color-dark margin-bottom-20'>\n                    Choose the logistics session that fits your process\n                </div>\n\n                <div className='display-flex flex-column gap-10'>\n                    {options.map(({ title, subtitle, duration }) => (\n                        <div\n                            key={title}\n                            className='display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer'\n                        >\n                            <div>\n                                <div className='text-medium text-color-darkest'>{title}</div>\n                                <div className='text-color-dark text-size-14'>{subtitle}</div>\n                            </div>\n                            <div className='badge badge-muted'>{duration}</div>\n                        </div>\n                    ))}\n                </div>\n            </Card>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-500 margin-auto padding-5\">\n    <div class=\"bg-white rounded border shadow-default padding-25\">\n        <div class=\"display-flex align-items-center gap-5 margin-bottom-5\">\n            <span class=\"rioglyph rioglyph-user text-size-18\">\n            </span>\n            <div class=\"text-size-18 text-bold text-color-darkest\">Meeting type</div>\n        </div>\n        <div class=\"text-color-dark margin-bottom-20\">Choose the logistics session that fits your process</div>\n        <div class=\"display-flex flex-column gap-10\">\n            <div class=\"display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer\">\n                <div>\n                    <div class=\"text-medium text-color-darkest\">Freight pickup</div>\n                    <div class=\"text-color-dark text-size-14\">Schedule cargo collection at origin</div>\n                </div>\n                <div class=\"badge badge-muted\">30 min</div>\n            </div>\n            <div class=\"display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer\">\n                <div>\n                    <div class=\"text-medium text-color-darkest\">Route planning</div>\n                    <div class=\"text-color-dark text-size-14\">Discuss optimal route and ETA</div>\n                </div>\n                <div class=\"badge badge-muted\">45 min</div>\n            </div>\n            <div class=\"display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer\">\n                <div>\n                    <div class=\"text-medium text-color-darkest\">Delivery coordination</div>\n                    <div class=\"text-color-dark text-size-14\">Align final drop-off and documents</div>\n                </div>\n                <div class=\"badge badge-muted\">60 min</div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Thalassinus varietas taceo turpis.",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-500 margin-auto padding-5\"><div class=\"text-center\"><div class=\"text-size-h2 font-bold\">Lorem ipsum dolor</div><p class=\"text-color-dark margin-top-0 margin-bottom-20\">Thalassinus varietas taceo turpis.</p></div><div class=\"space-y-15 divider-y-1 divider-color-light divider-style-solid\"><div class=\"padding-15\"><div class=\"display-flex gap-15\"><div class=\"text-size-14 text-color-darkest\"><span class=\"rioglyph rioglyph-trailer rioglyph-filled rioglyph-align-bottom text-size-300pct\"></span></div><div class=\"flex-1-1\"><div class=\"text-size-18 margin-bottom-2\">Jenkins - Beatty</div><div class=\"text-color-dark\">Cornu defluo ipsam uxor toties vaco socius ambulo somnus charisma.</div></div></div></div><div class=\"padding-15\"><div class=\"display-flex gap-15\"><div class=\"text-size-14 text-color-darkest\"><span class=\"rioglyph rioglyph-truck rioglyph-filled rioglyph-align-bottom text-size-300pct\"></span></div><div class=\"flex-1-1\"><div class=\"text-size-18 margin-bottom-2\">Glover, Sauer and Crona</div><div class=\"text-color-dark\">Nulla id voluptates adfectus varius aggredior adflicto urbs compono adeptio.\nVilis agnitio terra defleo cubicularis.</div></div></div></div><div class=\"padding-15\"><div class=\"display-flex gap-15\"><div class=\"text-size-14 text-color-darkest\"><span class=\"rioglyph rioglyph-van rioglyph-filled rioglyph-align-bottom text-size-300pct\"></span></div><div class=\"flex-1-1\"><div class=\"text-size-18 margin-bottom-2\">Langosh Group</div><div class=\"text-color-dark\">Confugo canis careo cicuta talus virgo maiores caste conqueror.\nAdeptio dicta celer videlicet.</div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nexport default () => {\n    const examples = [\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-trailer',\n            description: faker.lorem.lines(1),\n        },\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-truck',\n            description: faker.lorem.lines(2),\n        },\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-van',\n            description: faker.lorem.lines(2),\n        },\n    ];\n\n    return (\n        <div className='max-width-500 margin-auto padding-5'>\n            <div className='text-center'>\n                <div className='text-size-h2 font-bold'>Lorem ipsum dolor</div>\n                <p className='text-color-dark margin-top-0 margin-bottom-20'>{faker.lorem.lines(1)}</p>\n            </div>\n\n            <div className='space-y-15 divider-y-1 divider-color-light divider-style-solid'>\n                {examples.map(item => (\n                    <div key={item.name} className='padding-15'>\n                        <div className='display-flex gap-15'>\n                            <div className='text-size-14 text-color-darkest'>\n                                <span\n                                    className={`rioglyph ${item.icon} rioglyph-filled rioglyph-align-bottom text-size-300pct`}\n                                />\n                            </div>\n                            <div className='flex-1-1'>\n                                <div className='text-size-18 margin-bottom-2'>{item.name}</div>\n                                <div className='text-color-dark'>{item.description}</div>\n                            </div>\n                        </div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-500 margin-auto padding-5\">\n    <div class=\"text-center\">\n        <div class=\"text-size-h2 font-bold\">Lorem ipsum dolor</div>\n        <p class=\"text-color-dark margin-top-0 margin-bottom-20\">Thalassinus varietas taceo turpis.</p>\n    </div>\n    <div class=\"space-y-15 divider-y-1 divider-color-light divider-style-solid\">\n        <div class=\"padding-15\">\n            <div class=\"display-flex gap-15\">\n                <div class=\"text-size-14 text-color-darkest\">\n                    <span class=\"rioglyph rioglyph-trailer rioglyph-filled rioglyph-align-bottom text-size-300pct\">\n                    </span>\n                </div>\n                <div class=\"flex-1-1\">\n                    <div class=\"text-size-18 margin-bottom-2\">Jenkins - Beatty</div>\n                    <div class=\"text-color-dark\">Cornu defluo ipsam uxor toties vaco socius ambulo somnus charisma.</div>\n                </div>\n            </div>\n        </div>\n        <div class=\"padding-15\">\n            <div class=\"display-flex gap-15\">\n                <div class=\"text-size-14 text-color-darkest\">\n                    <span class=\"rioglyph rioglyph-truck rioglyph-filled rioglyph-align-bottom text-size-300pct\">\n                    </span>\n                </div>\n                <div class=\"flex-1-1\">\n                    <div class=\"text-size-18 margin-bottom-2\">Glover, Sauer and Crona</div>\n                    <div class=\"text-color-dark\">Nulla id voluptates adfectus varius aggredior adflicto urbs compono adeptio.\n                        Vilis agnitio terra defleo cubicularis.</div>\n                </div>\n            </div>\n        </div>\n        <div class=\"padding-15\">\n            <div class=\"display-flex gap-15\">\n                <div class=\"text-size-14 text-color-darkest\">\n                    <span class=\"rioglyph rioglyph-van rioglyph-filled rioglyph-align-bottom text-size-300pct\">\n                    </span>\n                </div>\n                <div class=\"flex-1-1\">\n                    <div class=\"text-size-18 margin-bottom-2\">Langosh Group</div>\n                    <div class=\"text-color-dark\">Confugo canis careo cicuta talus virgo maiores caste conqueror.\n                        Adeptio dicta celer videlicet.</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Qui careo conculco crur alienus tenax curtus rerum. Desipio alveus conventus chirographum somniculosus aliqua coniecto uxor capitulus tempore. Admiratio custodia quas.",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"margin-auto max-width-800 margin-bottom-50\"><div class=\"text-size-h2 text-medium\">Lorem ipsum dolor sit amet</div><div>Animi abbas defungo ea vita.\nVehemens thymum solvo vacuus explicabo vapulus ventus aliquid adipiscor tactus.</div></div><div class=\"margin-auto max-width-800 display-grid grid-cols-1 grid-cols-2-ls row-gap-25 column-gap-50\"><div><div class=\"text-size-14 text-color-primary margin-bottom-10\"><span class=\"rioglyph rioglyph-stats text-size-200pct\"></span></div><div class=\"text-size-18 text-color-darker text-medium margin-bottom-5\">Kirlin and Sons</div><div class=\"text-color-dark\">Qui careo conculco crur alienus tenax curtus rerum.\nDesipio alveus conventus chirographum somniculosus aliqua coniecto uxor capitulus tempore.\nAdmiratio custodia quas.</div></div><div><div class=\"text-size-14 text-color-primary margin-bottom-10\"><span class=\"rioglyph rioglyph-server-stack text-size-200pct\"></span></div><div class=\"text-size-18 text-color-darker text-medium margin-bottom-5\">Beahan - Homenick</div><div class=\"text-color-dark\">Alioqui suggero carmen derideo volup sodalitas vespillo.\nIncidunt distinctio vicinus perferendis.\nAttero confido crustulum.</div></div><div><div class=\"text-size-14 text-color-primary margin-bottom-10\"><span class=\"rioglyph rioglyph-fingerprint text-size-200pct\"></span></div><div class=\"text-size-18 text-color-darker text-medium margin-bottom-5\">Hansen, Breitenberg and Renner</div><div class=\"text-color-dark\">Vulticulus civitas dolor.\nDedico baiulus defungo comes vel non tres.\nCoadunatio testimonium vapulus totus.</div></div><div><div class=\"text-size-14 text-color-primary margin-bottom-10\"><span class=\"rioglyph rioglyph-code-brackets text-size-200pct\"></span></div><div class=\"text-size-18 text-color-darker text-medium margin-bottom-5\">Johnston, Funk and Abbott</div><div class=\"text-color-dark\">Tot defluo aestus comes amiculum tantillus calco suspendo admoveo.\nAbsque vado advenio.\nAntea addo tabula vilicus quam adhuc expedita cruciamentum clarus.</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\n\nexport default () => {\n    const examples = [\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-stats',\n            description: faker.lorem.lines(3),\n        },\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-server-stack',\n            description: faker.lorem.lines(3),\n        },\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-fingerprint',\n            description: faker.lorem.lines(3),\n        },\n        {\n            name: faker.company.name(),\n            icon: 'rioglyph-code-brackets',\n            description: faker.lorem.lines(3),\n        },\n    ];\n\n    return (\n        <div>\n            <div className='margin-auto max-width-800 margin-bottom-50'>\n                <div className='text-size-h2 text-medium'>Lorem ipsum dolor sit amet</div>\n                <div>{faker.lorem.lines(2)}</div>\n            </div>\n            <div className='margin-auto max-width-800 display-grid grid-cols-1 grid-cols-2-ls row-gap-25 column-gap-50'>\n                {examples.map(item => (\n                    <div key={item.name}>\n                        <div className='text-size-14 text-color-primary margin-bottom-10'>\n                            <span className={`rioglyph ${item.icon} text-size-200pct`} />\n                        </div>\n                        <div className='text-size-18 text-color-darker text-medium margin-bottom-5'>{item.name}</div>\n                        <div className='text-color-dark'>{item.description}</div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"margin-auto max-width-800 margin-bottom-50\">\n        <div class=\"text-size-h2 text-medium\">Lorem ipsum dolor sit amet</div>\n        <div>Animi abbas defungo ea vita.\n            Vehemens thymum solvo vacuus explicabo vapulus ventus aliquid adipiscor tactus.</div>\n    </div>\n    <div class=\"margin-auto max-width-800 display-grid grid-cols-1 grid-cols-2-ls row-gap-25 column-gap-50\">\n        <div>\n            <div class=\"text-size-14 text-color-primary margin-bottom-10\">\n                <span class=\"rioglyph rioglyph-stats text-size-200pct\">\n                </span>\n            </div>\n            <div class=\"text-size-18 text-color-darker text-medium margin-bottom-5\">Kirlin and Sons</div>\n            <div class=\"text-color-dark\">Qui careo conculco crur alienus tenax curtus rerum.\n                Desipio alveus conventus chirographum somniculosus aliqua coniecto uxor capitulus tempore.\n                Admiratio custodia quas.</div>\n        </div>\n        <div>\n            <div class=\"text-size-14 text-color-primary margin-bottom-10\">\n                <span class=\"rioglyph rioglyph-server-stack text-size-200pct\">\n                </span>\n            </div>\n            <div class=\"text-size-18 text-color-darker text-medium margin-bottom-5\">Beahan - Homenick</div>\n            <div class=\"text-color-dark\">Alioqui suggero carmen derideo volup sodalitas vespillo.\n                Incidunt distinctio vicinus perferendis.\n                Attero confido crustulum.</div>\n        </div>\n        <div>\n            <div class=\"text-size-14 text-color-primary margin-bottom-10\">\n                <span class=\"rioglyph rioglyph-fingerprint text-size-200pct\">\n                </span>\n            </div>\n            <div class=\"text-size-18 text-color-darker text-medium margin-bottom-5\">Hansen, Breitenberg and Renner</div>\n            <div class=\"text-color-dark\">Vulticulus civitas dolor.\n                Dedico baiulus defungo comes vel non tres.\n                Coadunatio testimonium vapulus totus.</div>\n        </div>\n        <div>\n            <div class=\"text-size-14 text-color-primary margin-bottom-10\">\n                <span class=\"rioglyph rioglyph-code-brackets text-size-200pct\">\n                </span>\n            </div>\n            <div class=\"text-size-18 text-color-darker text-medium margin-bottom-5\">Johnston, Funk and Abbott</div>\n            <div class=\"text-color-dark\">Tot defluo aestus comes amiculum tantillus calco suspendo admoveo.\n                Absque vado advenio.\n                Antea addo tabula vilicus quam adhuc expedita cruciamentum clarus.</div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "The maroon Chair combines Saint Lucia aesthetics with Berkelium-based durability",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-800 margin-auto\"><h2 class=\"text-center text-wrap-pretty text-size-24 margin-bottom-25\">Enhance your application with powerful add-ons!</h2><div class=\"display-flex flex-column gap-20\"><div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\"><div class=\"align-self-start text-size-14 text-color-darker\"><span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\"></span></div><div class=\"flex-1-1\"><div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Handcrafted Rubber Sausages</div><div class=\"text-size-14 text-color-dark\">The maroon Chair combines Saint Lucia aesthetics with Berkelium-based durability</div></div><div class=\"width-100\"><div class=\"text-size-16 text-medium\">€23.69</div><div class=\"text-size-12 text-color-gray\">Total per user / month</div></div><div><button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button></div></div><div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\"><div class=\"align-self-start text-size-14 text-color-darker\"><span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\"></span></div><div class=\"flex-1-1\"><div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Fantastic Marble Salad</div><div class=\"text-size-14 text-color-dark\">Savor the juicy essence in our Shirt, designed for right culinary adventures</div></div><div class=\"width-100\"><div class=\"text-size-16 text-medium\">€21.00</div><div class=\"text-size-12 text-color-gray\">Total per user / month</div></div><div><button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button></div></div><div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\"><div class=\"align-self-start text-size-14 text-color-darker\"><span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\"></span></div><div class=\"flex-1-1\"><div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Recycled Gold Bike</div><div class=\"text-size-14 text-color-dark\">Professional-grade Chips perfect for made-up training and recreational use</div></div><div class=\"width-100\"><div class=\"text-size-16 text-medium\">€59.39</div><div class=\"text-size-12 text-color-gray\">Per 1000 messages / month</div></div><div><button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button></div></div><div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\"><div class=\"align-self-start text-size-14 text-color-darker\"><span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\"></span></div><div class=\"flex-1-1\"><div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Handmade Cotton Salad</div><div class=\"text-size-14 text-color-dark\">Featuring Tellurium-enhanced technology, our Chips offers unparalleled wretched performance</div></div><div class=\"width-100\"><div class=\"text-size-16 text-medium\">€95.25</div><div class=\"text-size-12 text-color-gray\">Total per user / month</div></div><div><button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button></div></div><div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\"><div class=\"align-self-start text-size-14 text-color-darker\"><span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\"></span></div><div class=\"flex-1-1\"><div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Small Bamboo Pants</div><div class=\"text-size-14 text-color-dark\">Frozen Soap designed with Ceramic for agreeable performance</div></div><div class=\"width-100\"><div class=\"text-size-16 text-medium\">€26.39</div><div class=\"text-size-12 text-color-gray\">Total per month</div></div><div><button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useState } from 'react';\nimport { faker } from '@faker-js/faker';\nimport { FormattedNumber } from 'react-intl';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useWindowResize from '@rio-cloud/rio-uikit/useWindowResize';\n\nconst gridTemplateLargeScreen = 'auto 1fr auto auto';\nconst gridTemplateSmallScreen = '1fr auto';\n\nexport default () => {\n    const addons = Array.from({ length: 5 }).map(() => ({\n        id: faker.string.uuid(),\n        title: faker.commerce.productName(),\n        description: faker.commerce.productDescription(),\n        price: Number(faker.commerce.price({ min: 5, max: 99 })),\n        unit: faker.helpers.arrayElement(['Total per month', 'Total per user / month', 'Per 1000 messages / month']),\n    }));\n\n    const [gridTemplate, setGridTemplate] = useState(gridTemplateLargeScreen);\n\n    const handleResize = () => {\n        const windowWidth = window.innerWidth;\n        if (windowWidth < 600) {\n            setGridTemplate(gridTemplateSmallScreen);\n        } else {\n            setGridTemplate(gridTemplateLargeScreen);\n        }\n    };\n\n    // Handle small screens on mount\n    useEffect(() => {\n        handleResize();\n    }, []);\n\n    // Handle small screens when window resizes\n    useWindowResize(() => {\n        handleResize();\n    });\n\n    console.log({ gridTemplate });\n\n    return (\n        <div className='max-width-800 margin-auto'>\n            <h2 className='text-center text-wrap-pretty text-size-24 margin-bottom-25'>\n                Enhance your application with powerful add-ons!\n            </h2>\n\n            <div className='display-flex flex-column gap-20'>\n                {addons.map(addon => (\n                    <div\n                        key={addon.id}\n                        className='display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border'\n                        style={{\n                            gridTemplateColumns: gridTemplate,\n                        }}\n                    >\n                        <div className='align-self-start text-size-14 text-color-darker'>\n                            <span className='rioglyph rioglyph-puzzle text-size-300pct margin-top-2' />\n                        </div>\n\n                        <div className='flex-1-1'>\n                            <div className='text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word'>\n                                {addon.title}\n                            </div>\n                            <div className='text-size-14 text-color-dark'>{addon.description}</div>\n                        </div>\n\n                        <div className='width-100'>\n                            <div className='text-size-16 text-medium'>\n                                <FormattedNumber value={addon.price} style='currency' currency='EUR' />\n                            </div>\n                            <div className='text-size-12 text-color-gray'>{addon.unit}</div>\n                        </div>\n\n                        <div>\n                            <Button bsStyle='muted-filled'>Get Add-on</Button>\n                        </div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-800 margin-auto\">\n    <h2 class=\"text-center text-wrap-pretty text-size-24 margin-bottom-25\">Enhance your application with powerful add-ons!</h2>\n    <div class=\"display-flex flex-column gap-20\">\n        <div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\">\n            <div class=\"align-self-start text-size-14 text-color-darker\">\n                <span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\">\n                </span>\n            </div>\n            <div class=\"flex-1-1\">\n                <div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Handcrafted Rubber Sausages</div>\n                <div class=\"text-size-14 text-color-dark\">The maroon Chair combines Saint Lucia aesthetics with Berkelium-based durability</div>\n            </div>\n            <div class=\"width-100\">\n                <div class=\"text-size-16 text-medium\">€23.69</div>\n                <div class=\"text-size-12 text-color-gray\">Total per user / month</div>\n            </div>\n            <div>\n                <button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button>\n            </div>\n        </div>\n        <div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\">\n            <div class=\"align-self-start text-size-14 text-color-darker\">\n                <span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\">\n                </span>\n            </div>\n            <div class=\"flex-1-1\">\n                <div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Fantastic Marble Salad</div>\n                <div class=\"text-size-14 text-color-dark\">Savor the juicy essence in our Shirt, designed for right culinary adventures</div>\n            </div>\n            <div class=\"width-100\">\n                <div class=\"text-size-16 text-medium\">€21.00</div>\n                <div class=\"text-size-12 text-color-gray\">Total per user / month</div>\n            </div>\n            <div>\n                <button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button>\n            </div>\n        </div>\n        <div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\">\n            <div class=\"align-self-start text-size-14 text-color-darker\">\n                <span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\">\n                </span>\n            </div>\n            <div class=\"flex-1-1\">\n                <div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Recycled Gold Bike</div>\n                <div class=\"text-size-14 text-color-dark\">Professional-grade Chips perfect for made-up training and recreational use</div>\n            </div>\n            <div class=\"width-100\">\n                <div class=\"text-size-16 text-medium\">€59.39</div>\n                <div class=\"text-size-12 text-color-gray\">Per 1000 messages / month</div>\n            </div>\n            <div>\n                <button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button>\n            </div>\n        </div>\n        <div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\">\n            <div class=\"align-self-start text-size-14 text-color-darker\">\n                <span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\">\n                </span>\n            </div>\n            <div class=\"flex-1-1\">\n                <div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Handmade Cotton Salad</div>\n                <div class=\"text-size-14 text-color-dark\">Featuring Tellurium-enhanced technology, our Chips offers unparalleled wretched performance</div>\n            </div>\n            <div class=\"width-100\">\n                <div class=\"text-size-16 text-medium\">€95.25</div>\n                <div class=\"text-size-12 text-color-gray\">Total per user / month</div>\n            </div>\n            <div>\n                <button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button>\n            </div>\n        </div>\n        <div class=\"display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border\" style=\"grid-template-columns: auto 1fr auto auto;\">\n            <div class=\"align-self-start text-size-14 text-color-darker\">\n                <span class=\"rioglyph rioglyph-puzzle text-size-300pct margin-top-2\">\n                </span>\n            </div>\n            <div class=\"flex-1-1\">\n                <div class=\"text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word\">Small Bamboo Pants</div>\n                <div class=\"text-size-14 text-color-dark\">Frozen Soap designed with Ceramic for agreeable performance</div>\n            </div>\n            <div class=\"width-100\">\n                <div class=\"text-size-16 text-medium\">€26.39</div>\n                <div class=\"text-size-12 text-color-gray\">Total per month</div>\n            </div>\n            <div>\n                <button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">Get Add-on</button>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 6",
+          "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=\"lead \"><div class=\"display-flex justify-content-between\"><div>Features</div></div><hr class=\"margin-top-10 border-color-light\"></div><ul class=\"display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-10 icon-list margin-bottom-0\"><li class=\"display-flex gap-10 \"><span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\"></span><div><div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Recycled Plastic Hat</div><div>Discover the tepid new Chair with an exciting mix of Ceramic ingredients</div></div></li><li class=\"display-flex gap-10 \"><span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\"></span><div><div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Recycled Aluminum Towels</div><div>New sky blue Hat with ergonomic design for timely comfort</div></div></li><li class=\"display-flex gap-10 \"><span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\"></span><div><div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Elegant Marble Bacon</div><div>Professional-grade Pants perfect for massive training and recreational use</div></div></li><li class=\"display-flex gap-10 \"><span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\"></span><div><div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Handmade Marble Chips</div><div>New Bike model with 91 GB RAM, 286 GB storage, and well-lit features</div></div></li><li class=\"display-flex gap-10 \"><span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\"></span><div><div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Sleek Aluminum Chips</div><div>Introducing the Marshall Islands-inspired Soap, blending dim style with local craftsmanship</div></div></li><li class=\"display-flex gap-10\"><span class=\"rioglyph rioglyph rioglyph-minus-sign text-color-gray text-size-20\"></span><div><div class=\"text-medium text-size-18 text-color-darker text-capitalize-first-word\">Sleek Concrete Ball</div><div>Discover the deer-like agility of our Sausages, perfect for parallel users</div></div></li></ul></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { faker } from '@faker-js/faker';\n\nexport default () => {\n    const examples = Array.from({ length: 5 }).map(() => ({\n        id: faker.string.uuid(),\n        title: faker.commerce.productName(),\n        description: faker.commerce.productDescription(),\n    }));\n\n    return (\n        <div className='max-width-600 margin-auto'>\n            <div className='lead '>\n                <div className='display-flex justify-content-between'>\n                    <div>Features</div>\n                </div>\n                <hr className='margin-top-10 border-color-light' />\n            </div>\n\n            <ul className='display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-10 icon-list margin-bottom-0'>\n                {examples.map(example => (\n                    <li key={example.id} className='display-flex gap-10 '>\n                        <span className='rioglyph rioglyph-ok-sign text-color-success text-size-20' />\n                        <div>\n                            <div className='text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word'>\n                                {example.title}\n                            </div>\n                            <div>{example.description}</div>\n                        </div>\n                    </li>\n                ))}\n                <li className='display-flex gap-10'>\n                    <span className='rioglyph rioglyph rioglyph-minus-sign text-color-gray text-size-20' />\n                    <div>\n                        <div className='text-medium text-size-18 text-color-darker text-capitalize-first-word'>\n                            {faker.commerce.productName()}\n                        </div>\n                        <div>{faker.commerce.productDescription()}</div>\n                    </div>\n                </li>\n            </ul>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 margin-auto\">\n    <div class=\"lead \">\n        <div class=\"display-flex justify-content-between\">\n            <div>Features</div>\n        </div>\n        <hr class=\"margin-top-10 border-color-light\">\n    </div>\n    <ul class=\"display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-10 icon-list margin-bottom-0\">\n        <li class=\"display-flex gap-10 \">\n            <span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\">\n            </span>\n            <div>\n                <div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Recycled Plastic Hat</div>\n                <div>Discover the tepid new Chair with an exciting mix of Ceramic ingredients</div>\n            </div>\n        </li>\n        <li class=\"display-flex gap-10 \">\n            <span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\">\n            </span>\n            <div>\n                <div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Recycled Aluminum Towels</div>\n                <div>New sky blue Hat with ergonomic design for timely comfort</div>\n            </div>\n        </li>\n        <li class=\"display-flex gap-10 \">\n            <span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\">\n            </span>\n            <div>\n                <div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Elegant Marble Bacon</div>\n                <div>Professional-grade Pants perfect for massive training and recreational use</div>\n            </div>\n        </li>\n        <li class=\"display-flex gap-10 \">\n            <span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\">\n            </span>\n            <div>\n                <div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Handmade Marble Chips</div>\n                <div>New Bike model with 91 GB RAM, 286 GB storage, and well-lit features</div>\n            </div>\n        </li>\n        <li class=\"display-flex gap-10 \">\n            <span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-20\">\n            </span>\n            <div>\n                <div class=\"text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word\">Sleek Aluminum Chips</div>\n                <div>Introducing the Marshall Islands-inspired Soap, blending dim style with local craftsmanship</div>\n            </div>\n        </li>\n        <li class=\"display-flex gap-10\">\n            <span class=\"rioglyph rioglyph rioglyph-minus-sign text-color-gray text-size-20\">\n            </span>\n            <div>\n                <div class=\"text-medium text-size-18 text-color-darker text-capitalize-first-word\">Sleek Concrete Ball</div>\n                <div>Discover the deer-like agility of our Sausages, perfect for parallel users</div>\n            </div>\n        </li>\n    </ul>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}