@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,75 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:38.474Z",
+    "source": "https://uikit.developers.rio.cloud/#components/labeledElement",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/labeledelement",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "b30dcc570d7827376c0bacfcf8eb5460049393f108ce32e501756963e2a23af5"
+  },
+  "title": "LabeledElement",
+  "lead": "A simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.",
+  "content": [
+    {
+      "heading": "LabeledElement",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Label for other elements",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25\"><div class=\"LabeledElement display-flex flex-column\"><label for=\"sample-input\" class=\"display-inline-block\"><span>Label for a form element</span></label><input id=\"sample-input\" class=\"form-control\" placeholder=\"Some random input\"></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Label for other elements</div><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Button</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Button</button></div></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Label for a value</div><div>Some value with default gap</div></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Label with no gap</div>Lorem ipsum dolor</div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\"><span>Label for styled value</span></div><span class=\"text-size-16 text-color-darker\">Lorem ipsum dolor</span></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';\n\nexport default () => (\n    <div className='display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25'>\n        <LabeledElement label='Label for a form element' htmlFor='sample-input'>\n            <input id='sample-input' className='form-control' placeholder='Some random input' />\n        </LabeledElement>\n\n        <LabeledElement label='Label for other elements'>\n            <ButtonToolbar>\n                <Button>Button</Button>\n                <Button bsStyle='primary'>Button</Button>\n            </ButtonToolbar>\n        </LabeledElement>\n\n        <LabeledElement label='Label for a value'>\n            <div>Some value with default gap</div>\n        </LabeledElement>\n\n        <LabeledElement label='Label with no gap' noGap>\n            Lorem ipsum dolor\n        </LabeledElement>\n\n        <LabeledElement label={<span>Label for styled value</span>} noGap>\n            <span className='text-size-16 text-color-darker'>Lorem ipsum dolor</span>\n        </LabeledElement>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25\">\n    <div class=\"LabeledElement display-flex flex-column\">\n        <label for=\"sample-input\" class=\"display-inline-block\">\n            <span>Label for a form element</span>\n        </label>\n        <input id=\"sample-input\" class=\"form-control\" placeholder=\"Some random input\">\n    </div>\n    <div class=\"LabeledElement display-flex flex-column\">\n        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Label for other elements</div>\n        <div class=\"btn-toolbar\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Button</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Button</button>\n        </div>\n    </div>\n    <div class=\"LabeledElement display-flex flex-column\">\n        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Label for a value</div>\n        <div>Some value with default gap</div>\n    </div>\n    <div class=\"LabeledElement display-flex flex-column\">\n        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Label with no gap</div>Lorem ipsum dolor\n    </div>\n    <div class=\"LabeledElement display-flex flex-column\">\n        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">\n            <span>Label for styled value</span>\n        </div>\n        <span class=\"text-size-16 text-color-darker\">Lorem ipsum dolor</span>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "label",
+                      "type": "string | React.ReactElement",
+                      "default": "",
+                      "description": "The text to display for the label."
+                    },
+                    {
+                      "name": "labelProps",
+                      "type": "FormLabelProps",
+                      "default": "",
+                      "description": "Additional props for the FormLabel, excluding children and htmlFor."
+                    },
+                    {
+                      "name": "noGap",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "If true, removes the bottom margin from the label."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,69 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:51.607Z",
+    "source": "https://uikit.developers.rio.cloud/#components/licensePlate",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/licenseplate",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "43153bd64ae74299e348ee06a55c6875c6271913718f4f3f4b29ee0552616e03"
+  },
+  "title": "LicensePlate",
+  "lead": "The LicensePlate component is designed to display license plate information with various customization options. It is built with container queries, which ensure that design elements are shown or hidden based on the available space.",
+  "content": [
+    {
+      "heading": "LicensePlate",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-grid gap-25\"><div class=\"margin-bottom-0\"><div class=\"description-headline\"><h2 class=\"\">Test with your own data</h2></div><div class=\"max-width-1000\"><p class=\"margin-bottom-0\">Enter demo data for <code>countryCode</code> and <code>LicensePlate</code></p></div></div><div class=\"display-flex gap-10\"><div class=\"width-60\"><input type=\"text\" class=\"form-control text-center\" maxlength=\"3\" value=\"\"></div><div class=\"max-width-200\"><input type=\"text\" class=\"form-control\" maxlength=\"10\" value=\"\"></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"license-plate max-width-300\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code \">D</span></div><div class=\"plate-number\">M-TB-1234</div></div></div><div class=\"license-plate max-width-300\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code two-letters\">DK</span></div><div class=\"plate-number\">AF 12 3456</div></div></div><div class=\"license-plate max-width-300\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code three-letters\">SLO</span></div><div class=\"plate-number\">LJ 12-ABC</div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"license-plate max-width-200\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code \">D</span></div><div class=\"plate-number\">M-TB-1234</div></div></div><div class=\"license-plate max-width-200\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code two-letters\">DK</span></div><div class=\"plate-number\">AF 12 3456</div></div></div><div class=\"license-plate max-width-200\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code three-letters\">SLO</span></div><div class=\"plate-number\">LJ 12-ABC</div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"license-plate max-width-150\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code \">D</span></div><div class=\"plate-number\">M-TB-1234</div></div></div><div class=\"license-plate max-width-150\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code two-letters\">DK</span></div><div class=\"plate-number\">AF 12 3456</div></div></div><div class=\"license-plate max-width-150\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code three-letters\">SLO</span></div><div class=\"plate-number\">LJ 12-ABC</div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"license-plate max-width-100\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code \">D</span></div><div class=\"plate-number\">M-TB-1234</div></div></div><div class=\"license-plate max-width-100\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code two-letters\">DK</span></div><div class=\"plate-number\">AF 12 3456</div></div></div><div class=\"license-plate max-width-100\"><div class=\"plate-content\"><div class=\"plate-country\"><span class=\"stars\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\"></path></svg></span><span class=\"plate-country-code three-letters\">SLO</span></div><div class=\"plate-number\">LJ 12-ABC</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\nimport { Divider } from '@rio-cloud/rio-uikit';\nimport LicensePlate from '@rio-cloud/rio-uikit/LicensePlate';\nimport { Description } from '../../../components/Description';\n\nexport default () => {\n    const [inputValue, setInputValue] = useState('');\n    const [countryCode, setCountryCode] = useState('');\n\n    const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n        setInputValue(event.target.value);\n    };\n\n    const handleCountryCodeChange = (event: { target: { value: string } }) => {\n        setCountryCode(event.target.value.toUpperCase());\n    };\n\n    return (\n        <div className='display-grid gap-25'>\n            <Description headline='Test with your own data' className='margin-bottom-0'>\n                <p className='margin-bottom-0'>\n                    Enter demo data for <code>countryCode</code> and <code>LicensePlate</code>\n                </p>\n            </Description>\n            <div className='display-flex gap-10'>\n                <div className='width-60'>\n                    <input\n                        type='text'\n                        value={countryCode}\n                        onChange={handleCountryCodeChange}\n                        className='form-control text-center'\n                        maxLength={3}\n                    />\n                </div>\n                <div className='max-width-200'>\n                    <input\n                        type='text'\n                        value={inputValue}\n                        onChange={handleInputChange}\n                        className='form-control'\n                        maxLength={10}\n                    />\n                </div>\n            </div>\n\n            <Divider />\n\n            <LicensePlate className='max-width-300' countryCode={countryCode || 'D'}>\n                {inputValue || 'M-TB-1234'}\n            </LicensePlate>\n            <LicensePlate className='max-width-300' countryCode={countryCode || 'DK'}>\n                {inputValue || 'AF 12 3456'}\n            </LicensePlate>\n            <LicensePlate className='max-width-300' countryCode={countryCode || 'SLO'}>\n                {inputValue || 'LJ 12-ABC'}\n            </LicensePlate>\n\n            <Divider />\n\n            <LicensePlate className='max-width-200' countryCode={countryCode || 'D'}>\n                {inputValue || 'M-TB-1234'}\n            </LicensePlate>\n            <LicensePlate className='max-width-200' countryCode={countryCode || 'DK'}>\n                {inputValue || 'AF 12 3456'}\n            </LicensePlate>\n            <LicensePlate className='max-width-200' countryCode={countryCode || 'SLO'}>\n                {inputValue || 'LJ 12-ABC'}\n            </LicensePlate>\n\n            <Divider />\n\n            <LicensePlate className='max-width-150' countryCode={countryCode || 'D'}>\n                {inputValue || 'M-TB-1234'}\n            </LicensePlate>\n            <LicensePlate className='max-width-150' countryCode={countryCode || 'DK'}>\n                {inputValue || 'AF 12 3456'}\n            </LicensePlate>\n            <LicensePlate className='max-width-150' countryCode={countryCode || 'SLO'}>\n                {inputValue || 'LJ 12-ABC'}\n            </LicensePlate>\n\n            <Divider />\n\n            <LicensePlate className='max-width-100' countryCode={countryCode || 'D'}>\n                {inputValue || 'M-TB-1234'}\n            </LicensePlate>\n            <LicensePlate className='max-width-100' countryCode={countryCode || 'DK'}>\n                {inputValue || 'AF 12 3456'}\n            </LicensePlate>\n            <LicensePlate className='max-width-100' countryCode={countryCode || 'SLO'}>\n                {inputValue || 'LJ 12-ABC'}\n            </LicensePlate>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-grid gap-25\">\n    <div class=\"margin-bottom-0\">\n        <div class=\"description-headline\">\n            <h2 class=\"\">Test with your own data</h2>\n        </div>\n        <div class=\"max-width-1000\">\n            <p class=\"margin-bottom-0\">Enter demo data for <code>countryCode</code> and <code>LicensePlate</code>\n            </p>\n        </div>\n    </div>\n    <div class=\"display-flex gap-10\">\n        <div class=\"width-60\">\n            <input type=\"text\" class=\"form-control text-center\" maxlength=\"3\" value=\"\">\n        </div>\n        <div class=\"max-width-200\">\n            <input type=\"text\" class=\"form-control\" maxlength=\"10\" value=\"\">\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"license-plate max-width-300\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code \">D</span>\n            </div>\n            <div class=\"plate-number\">M-TB-1234</div>\n        </div>\n    </div>\n    <div class=\"license-plate max-width-300\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code two-letters\">DK</span>\n            </div>\n            <div class=\"plate-number\">AF 12 3456</div>\n        </div>\n    </div>\n    <div class=\"license-plate max-width-300\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code three-letters\">SLO</span>\n            </div>\n            <div class=\"plate-number\">LJ 12-ABC</div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"license-plate max-width-200\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code \">D</span>\n            </div>\n            <div class=\"plate-number\">M-TB-1234</div>\n        </div>\n    </div>\n    <div class=\"license-plate max-width-200\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code two-letters\">DK</span>\n            </div>\n            <div class=\"plate-number\">AF 12 3456</div>\n        </div>\n    </div>\n    <div class=\"license-plate max-width-200\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code three-letters\">SLO</span>\n            </div>\n            <div class=\"plate-number\">LJ 12-ABC</div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"license-plate max-width-150\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code \">D</span>\n            </div>\n            <div class=\"plate-number\">M-TB-1234</div>\n        </div>\n    </div>\n    <div class=\"license-plate max-width-150\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code two-letters\">DK</span>\n            </div>\n            <div class=\"plate-number\">AF 12 3456</div>\n        </div>\n    </div>\n    <div class=\"license-plate max-width-150\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code three-letters\">SLO</span>\n            </div>\n            <div class=\"plate-number\">LJ 12-ABC</div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"license-plate max-width-100\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code \">D</span>\n            </div>\n            <div class=\"plate-number\">M-TB-1234</div>\n        </div>\n    </div>\n    <div class=\"license-plate max-width-100\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code two-letters\">DK</span>\n            </div>\n            <div class=\"plate-number\">AF 12 3456</div>\n        </div>\n    </div>\n    <div class=\"license-plate max-width-100\">\n        <div class=\"plate-content\">\n            <div class=\"plate-country\">\n                <span class=\"stars\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\">\n                        <path fill=\"#FFC200\" fill-rule=\"nonzero\" d=\"M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z\">\n                        </path>\n                    </svg>\n                </span>\n                <span class=\"plate-country-code three-letters\">SLO</span>\n            </div>\n            <div class=\"plate-number\">LJ 12-ABC</div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "countryCode",
+                      "type": "string",
+                      "default": "",
+                      "description": "The country code. Should be a string with 1-3 capital letters."
+                    },
+                    {
+                      "name": "hideStars",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Whether the EU stars should be hidden."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}