@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/licensePlate.md

@@ -0,0 +1,412 @@
+# LicensePlate
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/licensePlate
+*Captured:* 2025-12-12T12:38:53.423Z
+
+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.
+
+## LicensePlate
+
+### Example: Example 1
+
+Test with your own data
+
+Enter demo data for countryCode and LicensePlate
+
+D
+M-TB-1234
+
+DK
+AF 12 3456
+
+SLO
+LJ 12-ABC
+
+D
+M-TB-1234
+
+DK
+AF 12 3456
+
+SLO
+LJ 12-ABC
+
+D
+M-TB-1234
+
+DK
+AF 12 3456
+
+SLO
+LJ 12-ABC
+
+D
+M-TB-1234
+
+DK
+AF 12 3456
+
+SLO
+LJ 12-ABC
+
+#### Summary
+
+Test with your own data
+
+Enter demo data for countryCode and LicensePlate
+
+D
+M-TB-1234
+
+DK
+AF 12 3456
+
+SLO
+LJ 12-ABC
+
+D
+M-TB-1234
+
+DK
+AF 12 3456
+
+SLO
+LJ 12-ABC
+
+D
+M-TB-1234
+
+DK
+AF 12 3456
+
+SLO
+LJ 12-ABC
+
+D
+M-TB-1234
+
+DK
+AF 12 3456
+
+SLO
+LJ 12-ABC
+
+#### React (tsx)
+
+```tsx
+import type React from 'react';
+import { useState } from 'react';
+
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import LicensePlate from '@rio-cloud/rio-uikit/LicensePlate';
+import { Description } from '../../../components/Description';
+
+export default () => {
+    const [inputValue, setInputValue] = useState('');
+    const [countryCode, setCountryCode] = useState('');
+
+    const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {
+        setInputValue(event.target.value);
+    };
+
+    const handleCountryCodeChange = (event: { target: { value: string } }) => {
+        setCountryCode(event.target.value.toUpperCase());
+    };
+
+    return (
+        <div className='display-grid gap-25'>
+            <Description headline='Test with your own data' className='margin-bottom-0'>
+                <p className='margin-bottom-0'>
+                    Enter demo data for <code>countryCode</code> and <code>LicensePlate</code>
+                </p>
+            </Description>
+            <div className='display-flex gap-10'>
+                <div className='width-60'>
+                    <input
+                        type='text'
+                        value={countryCode}
+                        onChange={handleCountryCodeChange}
+                        className='form-control text-center'
+                        maxLength={3}
+                    />
+                </div>
+                <div className='max-width-200'>
+                    <input
+                        type='text'
+                        value={inputValue}
+                        onChange={handleInputChange}
+                        className='form-control'
+                        maxLength={10}
+                    />
+                </div>
+            </div>
+
+            <Divider />
+
+            <LicensePlate className='max-width-300' countryCode={countryCode || 'D'}>
+                {inputValue || 'M-TB-1234'}
+            </LicensePlate>
+            <LicensePlate className='max-width-300' countryCode={countryCode || 'DK'}>
+                {inputValue || 'AF 12 3456'}
+            </LicensePlate>
+            <LicensePlate className='max-width-300' countryCode={countryCode || 'SLO'}>
+                {inputValue || 'LJ 12-ABC'}
+            </LicensePlate>
+
+            <Divider />
+
+            <LicensePlate className='max-width-200' countryCode={countryCode || 'D'}>
+                {inputValue || 'M-TB-1234'}
+            </LicensePlate>
+            <LicensePlate className='max-width-200' countryCode={countryCode || 'DK'}>
+                {inputValue || 'AF 12 3456'}
+            </LicensePlate>
+            <LicensePlate className='max-width-200' countryCode={countryCode || 'SLO'}>
+                {inputValue || 'LJ 12-ABC'}
+            </LicensePlate>
+
+            <Divider />
+
+            <LicensePlate className='max-width-150' countryCode={countryCode || 'D'}>
+                {inputValue || 'M-TB-1234'}
+            </LicensePlate>
+            <LicensePlate className='max-width-150' countryCode={countryCode || 'DK'}>
+                {inputValue || 'AF 12 3456'}
+            </LicensePlate>
+            <LicensePlate className='max-width-150' countryCode={countryCode || 'SLO'}>
+                {inputValue || 'LJ 12-ABC'}
+            </LicensePlate>
+
+            <Divider />
+
+            <LicensePlate className='max-width-100' countryCode={countryCode || 'D'}>
+                {inputValue || 'M-TB-1234'}
+            </LicensePlate>
+            <LicensePlate className='max-width-100' countryCode={countryCode || 'DK'}>
+                {inputValue || 'AF 12 3456'}
+            </LicensePlate>
+            <LicensePlate className='max-width-100' countryCode={countryCode || 'SLO'}>
+                {inputValue || 'LJ 12-ABC'}
+            </LicensePlate>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| countryCode | string | — | The country code. Should be a string with 1-3 capital letters. |
+| hideStars | boolean | false | Whether the EU stars should be hidden. |
+| className | string | — | Additional classes added to the wrapping element. |