@rio-cloud/uikit-mcp 1.1.2 → 1.1.3

package/dist/doc-metadata.json

@@ -44,7 +44,7 @@
     "title": "Animations",
     "lead": "The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.",
     "summary": "The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.",
-    "searchText": "Animations\nThe UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.\nAnimations\nThe official documentation can be found here https://motion.dev/docs/react\nSome Data\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nAdd ItemItem B5WVP1454N\n\nItem B2NSH3LST8\n\nItem U0X067T8JOG\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nLoad ItemsItem 38PP430D6M\n\nItem RPNOB6D411\n\nItem AQQ4M0ZVKXI\n\nItem KTZKI295U1\n\nItem 5DTMWYDMLFH\n\nItem Z5EJ4VMHJ1H",
+    "searchText": "Animations\nThe UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.\nAnimations\nThe official documentation can be found here https://motion.dev/docs/react\nSome Data\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nAdd ItemItem YUWCXY4QCL\n\nItem 18Z0QVGEMQ\n\nItem KQ9QJ25F3B\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nLoad ItemsItem 4NYRNZDOEAJ\n\nItem 9XGVIHIZDRK\n\nItem ZP0PGXK14B\n\nItem N4PC0EB2RM\n\nItem KO6IY6WXTC\n\nItem KC0LC7DH2MH",
     "category": "Components",
     "section": "Content",
     "boost": "Animations components/animations #components/animations Components Content"
@@ -64,7 +64,7 @@
     "title": "ApplicationLayout",
     "lead": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
     "summary": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
-    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n3\n1\n2\n1\n\nAsset Group5\nVehicle-2702Asset 1002\nVehicle-2861Asset 1006\nVehicle-3712Asset 1001\nVehicle-6558Asset 1000\nVehicle-9897Asset 1003\n\nUngrouped2\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |",
+    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n4\n7\n4\n4\n\nAsset Group9\nVehicle-1869Asset 1015\nVehicle-3532Asset 1007\nVehicle-3812Asset 1000\nVehicle-5185Asset 1016\nVehicle-6538Asset 1017\nVehicle-7129Asset 1008\nVehicle-7924Asset 1010\nVehicle-8111Asset 1012\nVehicle-9372Asset 1014\n\nUngrouped10\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |",
     "category": "Components",
     "section": "Application",
     "boost": "ApplicationLayout components/appLayout #components/appLayout Components Application"
@@ -104,7 +104,7 @@
     "title": "AssetTree",
     "lead": "The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.",
     "summary": "The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.",
-    "searchText": "AssetTree\nThe asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.\nAssetTree\nFilter\n\n5413\n4\n\nGroup - Abel Botsford - 848515\n\nGroup - Ada O'Keefe IV - 40215\n\nGroup - Albert Kulas - 345412\n\nGroup - Alberta Runolfsdottir - 878116\n\nGroup - Alexander Johns - 72049\n\nGroup - Alexandra Jenkins Jr. - 462611\n\nGroup - Alfonso Runte - 64749\n\nGroup - Alice Ferry Jr. - 32587\n\nGroup - Alison Luettgen - 641912\n\nGroup - Alonzo Ratke - 810014\n\nGroup - Alton Mueller - 81233\n\nGroup - Alyssa Walsh - 25789\n\nGroup - Amanda Heaney - 34019\n\nGroup - Amanda Klocko - 940415\n\n200\n\n200\n\nLoad trucksClear treeToggle all groups selection\n\nCurrent category:\ntrucks\nSelected groups:\n\nSelected assets:\n\nExpanded groups:\nTrailer Group\n\nSelected drivers:\n\nSearch value:\n\nAsset type filter:\n[]\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n10\n7\n3\n10\n\nMy Empty Group4\n\nTruck Group East5\n\nTruck Group North8\nN18-G101 / M-AN 1020\nN18-G103 / M-AN 1023\nN18-G324 / M-AN 1025\nN18-G330 / M-AN 1000\nN18-G508 / M-AN 1005\nN18-G609 / M-AN 1024\nN18-G747 / M-AN 1003\nN18-G997 / M-AN 1010\n\nTruck Group South3\n\nTruck Group West6\n\nAll my unassigned Trucks4\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\nWhen using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.\n8\n6\n2\n4\n\n8\n5\n4\n2\n1\n\nMixed Vehicles7\nVehicle-1093Debug: electric\nVehicle-1580Debug: heavy_fuel_oil\nVehicle-3686Debug: gas\nVehicle-4687Debug: gas\nVehicle-6053Debug: diesel\nVehicle-6103Debug: cng\nVehicle-6758Debug: hydrogen\n\nUngrouped13\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with custom summary\n3\n15\n\nJohnDoe\nMaxlRainer\nJohanSchmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 015\n\nFolder 025\n\nFolder 036\n\nFolder 044\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTree without header and search\n\nFolder 014\n\nFolder 028\n\nFolder 035\n\nFolder 043\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |",
+    "searchText": "AssetTree\nThe asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.\nAssetTree\nFilter\n\n5384\n4\n\nGroup - Abraham Watsica - 621113\n\nGroup - Adam Windler - 770317\n\nGroup - Alexandra Collins - 999013\n\nGroup - Alfred Olson - 956712\n\nGroup - Alfred Stokes - 89338\n\nGroup - Alice Green - 890610\n\nGroup - Allison Padberg III - 27086\n\nGroup - Alma Sanford - 66055\n\nGroup - Alvin Wolf Sr. - 47075\n\nGroup - Amanda Kunde - 348613\n\nGroup - Amelia Zemlak - 819710\n\nGroup - Amos Welch - 13858\n\nGroup - Ana Greenfelder - 97437\n\nGroup - Andrea Mueller - 75687\n\nGroup - Andrew Howell Sr. - 815511\n\n200\n\n200\n\nLoad trucksClear treeToggle all groups selection\n\nCurrent category:\ntrucks\nSelected groups:\n\nSelected assets:\n\nExpanded groups:\nTrailer Group\n\nSelected drivers:\n\nSearch value:\n\nAsset type filter:\n[]\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n10\n5\n9\n6\n\nMy Empty Group5\n\nTruck Group East5\n\nTruck Group North7\nN18-G109 / M-AN 1018\nN18-G176 / M-AN 1026\nN18-G560 / M-AN 1006\nN18-G704 / M-AN 1007\nN18-G811 / M-AN 1005\nN18-G830 / M-AN 1010\nN18-G961 / M-AN 1009\n\nTruck Group South7\n\nTruck Group West3\n\nAll my unassigned Trucks3\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\nWhen using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.\n7\n4\n3\n6\n\n7\n5\n1\n4\n3\n\nMixed Vehicles12\nVehicle-1219Debug: lpg\nVehicle-1695Debug: heavy_fuel_oil\nVehicle-2865Debug: gas\nVehicle-2935Debug: hydrogen\nVehicle-4548Debug: lpg\nVehicle-4993Debug: hydrogen\nVehicle-5555Debug: heavy_fuel_oil\nVehicle-7086Debug: diesel\nVehicle-8678Debug: dual_fuel_diesel_cng\nVehicle-8791Debug: hydrogen\nVehicle-9194Debug: lpg\nVehicle-9266Debug: hydrogen\n\nUngrouped8\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with custom summary\n3\n15\n\nJohnDoe\nMaxlRainer\nJohanSchmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 015\n\nFolder 024\n\nFolder 034\n\nFolder 047\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTree without header and search\n\nFolder 017\n\nFolder 024\n\nFolder 036\n\nFolder 043\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |",
     "category": "Components",
     "section": "Selection",
     "boost": "AssetTree components/assetTree #components/assetTree Components Selection"
@@ -164,7 +164,7 @@
     "title": "Map",
     "lead": "The following map shows labels for locale de",
     "summary": "The following map shows labels for locale de",
-    "searchText": "Map\nThe following map shows labels for locale de\nMap\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap with ScaleBar\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap localization\nTerms of use© 1987–2025 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen",
+    "searchText": "Map\nThe following map shows labels for locale de\nMap\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap with ScaleBar\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap localization\nTerms of use© 1987–2026 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen",
     "category": "Components",
     "section": "Map",
     "boost": "Map components/basicMap #components/basicMap Components Map"
@@ -204,7 +204,7 @@
     "title": "CalendarStripe",
     "lead": "A headless component where you provide a function that renders the UI for every day to be displayed.",
     "summary": "A headless component where you provide a function that renders the UI for every day to be displayed.",
-    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nTuesday\n16 December 2025\n\nWednesday\n17 December 2025\n\nThursday\n18 December 2025\n\nFriday\n19 December 2025\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |\nDec\n16\n2025\n\nDec\n17\n2025\n\nDec\n18\n2025\n\nDec\n19\n2025\n\nDec\n20\n2025\n\nDec\n21\n2025\n\nDec\n22\n2025\n\nSet to JanuaryToggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |",
+    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nThursday\n8 January 2026\n\nFriday\n9 January 2026\n\nSaturday\n10 January 2026\n\nSunday\n11 January 2026\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |\nJan\n8\n2026\n\nJan\n9\n2026\n\nJan\n10\n2026\n\nJan\n11\n2026\n\nJan\n12\n2026\n\nJan\n13\n2026\n\nJan\n14\n2026\n\nSet to JanuaryToggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "CalendarStripe components/calendarStripe #components/calendarStripe Components Misc"
@@ -324,7 +324,7 @@
     "title": "DatePicker",
     "lead": "A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.",
     "summary": "A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.",
-    "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefaultFormat: YYYY-MM-DD HH:mm\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nOnly month\n\n‹2025›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nWith min-width\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and optional value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n04:02\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nTo:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
+    "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefaultFormat: YYYY-MM-DD HH:mm\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nOnly month\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nWith min-width\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nClearableInput and optional value\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n01:11\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nTo:\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
     "category": "Components",
     "section": "Pickers",
     "boost": "DatePicker components/datepickers #components/datepickers Components Pickers"
@@ -354,7 +354,7 @@
     "title": "Dropdowns",
     "lead": "Wrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.",
     "summary": "Wrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.",
-    "searchText": "Dropdowns\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nDropdowns\nButtonDropdown\nSimpleButtonDropdown\n\nSingleButtonDropdown\n\nWrapper component for ButtonDropdown, kept for backwards compatibility.\n\nSplitButtonDropdown\n\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variantsText dropdown\n\nCustom dropdowns for filter tagsTag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labelsActive\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nSingleButtonDropdown\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | \"\" | Displayed button title. |\n| items | Array of Objects | [] | Details see above for the ButtonDropdown |\n| disabled | Boolean | false | Disables every entry on the title list item. |\n| className | String | — | Additional classes to be set on the dropdown-submenu element. |\nCustom Dropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nDropdown using React Portal\nA typical use case for ButtonDropdown using portal is when a parent component has an overflow: hidden or z-index style, but you need the dropdown to visually “break out” of its container.\nNormal Button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Massa efficitur quis, felis. in iaculis. Integer iaculis. elit. tortor eget\n\n2Elit. consectetur purus vitae in, felis. ligula velit. ante iaculis.\n\n3Ante ac massa In efficitur faucibus. efficitur dui metus scelerisque\n\n4Posuere molestie\nLorem ac Integer\n\n5Vitae Fusce felis. quis, ligula orci, Integer consectetur fringilla\n\n6Elementum aliquam sagittis ligula tortor elementum efficitur vel vel dui aliquam ut pharetra condimentum pharetra\n\n7In rutrum aliquam pharetra nec viverra malesuada efficitur consectetur enim scelerisque elit. efficitur\n\n8Ipsum dolor dolor in ut elit. elit. ligula felis. Sed ligula volutpat pretium faucibus. in\n\n9In ante In\nLorem eget eget efficitur massa, iaculis.\nLorem finibus\nLorem lorem lorem\n\n10Viverra velit. purus viverra hendrerit Interdum ante Interdum est posuere In\n\n11Sed nunc In finibus vel In consectetur ante ac Fusce\n\n12Sit Interdum sem. in, ante consectetur massa ut sem.\n\n13Ac Mauris pretium elementum ligula fringilla velit. ut iaculis. pretium faucibus.\n\n14Nunc semper. efficitur elementum ante velit. purus libero dolor ac posuere\n\n15Eget Sed elit. massa, fames consectetur ipsum iaculis. orci, faucibus. nunc velit. quis, Duis posuere\n\n16Sit hendrerit ante ipsum sem. quis, semper consectetur ac efficitur ac molestie\nLorem\n\n17In velit. elit. et ipsum enim tortor bibendum,\n\n18In eget orci, vitae tortor primis semper. fames orci,\n\n19Vitae malesuada massa fames consectetur hendrerit posuere efficitur Sed pharetra massa, efficitur\n\n20Elementum neque. iaculis. dui eget metus amet, eget fringilla scelerisque metus Sed Sed velit.\n\n21Nec aliquam condimentum enim ante neque. Vivamus rutrum\n\n22Et dui est consectetur orci, in, consectetur fringilla\n\n23Lorem neque. velit. bibendum, ante ante felis. felis. condimentum dolor\n\n24Sit\nLorem faucibus. ut et Fusce sit sagittis est in Sed neque.\n\n25Pretium velit. semper metus rutrum vitae faucibus. pretium consectetur\n\n26Bibendum, efficitur ac finibus Interdum est faucibus. ac fringilla Vivamus\n\n27Massa fames elementum Vivamus dui\n\n28In in elementum In Sed orci ipsum\nLorem\n\n29Ac ac ut fringilla est dolor quis, in hendrerit Ut\n\n30Nunc efficitur dui et purus elit. consectetur in, sem. elit. elit. dui efficitur viverra ante\n\n31Eget viverra felis. scelerisque Sed\n\n32Felis. efficitur in ac velit. ante neque. orci ac ante semper.\n\n33Malesuada consectetur ac ligula massa efficitur condimentum finibus\n\n34Aliquam ac et semper ut tortor tincidunt. nunc tortor in vel faucibus. ac dui bibendum,\n\n35Nunc malesuada volutpat ligula vel felis. lorem\n\n36Velit. ante Sed massa, ut finibus in et\n\n37Velit. semper eget ac Vivamus nunc libero ac\n\n38Efficitur dui nunc bibendum, primis ante ligula consectetur\n\n39Tortor In fames Integer vitae eget ante faucibus. eget primis ac ante\n\n40Neque. ante in felis. tortor ipsum faucibus. ante bibendum, posuere in efficitur velit. iaculis. bibendum,\n\n41Libero\nLorem metus ante adipiscing in semper. condimentum nec iaculis. orci quis,\n\n42Massa, pharetra et Fusce In quis, quis, ante neque. est\n\n43Et sit fringilla in, dolor hendrerit Duis fames adipiscing consectetur adipiscing malesuada adipiscing volutpat\n\n44Primis vel eget semper ante molestie Fusce nec\n\n45Fames ac ipsum faucibus. libero sem. ante Ut elementum\n\n46Fusce quis, fringilla hendrerit et pharetra adipiscing viverra ante ac Mauris\n\n47Nec nunc in ac in\n\n48Ligula nunc ut scelerisque ante efficitur velit.\n\n49Efficitur viverra ipsum rutrum pretium amet, ipsum est efficitur\n\n50Fringilla in, pretium hendrerit aliquam sagittis elit. neque. adipiscing\n\n51Molestie ante amet, nec ut hendrerit purus amet, Ut ante velit. elit. molestie ac\n\n52Velit. semper ac Ut\nLorem Sed primis et\n\n53In Interdum pretium ante ipsum adipiscing vitae in Duis velit. amet, adipiscing nunc\n\n54Nunc purus faucibus. nec lorem consectetur lorem ligula ante in condimentum Ut\n\n55Dui purus tortor\nLorem ipsum massa, massa, elementum felis. in Ut\n\n56Posuere tincidunt. libero Mauris scelerisque volutpat ac Duis\n\n57Ante vitae sagittis vel ac In ut semper primis semper. nec\n\n58Ac in, massa, rutrum molestie dui felis. quis, Integer\n\n59Dui tortor ante faucibus. ipsum\n\n60Pharetra vitae nec pharetra metus nunc malesuada\n\n61Sit libero efficitur consectetur In sit vitae\n\n62Fusce consectetur\nLorem ipsum vitae Fusce Vivamus est iaculis. purus pharetra Integer ac in, nec\n\n63Primis fames condimentum semper. hendrerit Interdum ac scelerisque Ut elit. in pharetra\n\n64Ipsum ipsum viverra efficitur pharetra Duis in\n\n65Rutrum lorem ipsum sagittis nec Vivamus ligula Ut ipsum fringilla vel ligula Interdum neque. sem.\n\n66Vel fringilla fringilla ut finibus faucibus. semper ac semper in lorem primis lorem libero\n\n67Elementum massa tincidunt. sagittis enim ut iaculis. ante metus fames ante efficitur\n\n68Aliquam viverra molestie est sit dolor et semper nec semper. ipsum malesuada\n\n69Metus molestie ac semper consectetur ante est libero consectetur Mauris Sed malesuada\n\n70Metus nec semper. In pretium Vivamus in In neque. ante pretium adipiscing ipsum\n\n71Aliquam et In Mauris metus vel ac ante finibus bibendum,\nLorem iaculis.\n\n72Sed ac ante semper malesuada amet, ante fringilla ac in Mauris\n\n73Ligula ante condimentum fringilla Sed aliquam ac iaculis. enim amet,\n\n74Ac finibus est molestie amet, ac ac ac elit.\n\n75Ipsum elit. elit. posuere ut efficitur dolor sem. pretium Ut vitae vitae\n\n76In Fusce hendrerit Fusce ac lorem primis in posuere bibendum, metus nunc vitae Duis\n\n77Eget massa in fringilla est ipsum efficitur elit. lorem sagittis neque. elit. Duis nunc adipiscing\n\n78Adipiscing quis, ipsum Interdum velit. velit. ut fringilla ac\nLorem metus posuere\n\n79Elit. semper. pretium ante est et dui fringilla elit. vitae pretium Mauris ut consectetur efficitur\n\n80Massa, lorem eget et In Fusce amet,\n\n81Iaculis. sagittis ac lorem sit elit. ipsum ipsum In\nLorem bibendum, pretium condimentum dui in\n\n82Et enim amet, in velit. ligula In sagittis orci, neque. sit Fusce\nLorem et nec\n\n83\nLorem ante metus fringilla tortor semper. efficitur efficitur quis, semper ipsum massa, ut iaculis.\n\n84Vivamus primis ut ac amet, iaculis. Mauris Fusce Mauris\n\n85Condimentum ante ac elit. iaculis. Ut ut ut et finibus\n\n86In, Vivamus adipiscing consectetur enim fames primis tincidunt.\nLorem quis, nec Interdum fames condimentum ut\n\n87In, sit ac dui consectetur finibus\n\n88Sem. condimentum ante elementum elit. ac ante faucibus. sit massa, vitae\n\n89Rutrum elit. ipsum Ut libero felis. consectetur dolor tincidunt. enim massa in,\n\n90Tincidunt. pharetra et ipsum in est\n\n91Ante massa, et orci elementum\n\n92Fringilla dolor enim pretium vitae pharetra ac bibendum,\n\n93Ac libero sem. tincidunt. primis iaculis.\n\n94Ac quis, et nec rutrum in, volutpat semper.\n\n95Consectetur faucibus. hendrerit vitae consectetur lorem efficitur ac et vitae adipiscing pretium orci fringilla in\n\n96Vel orci sem. efficitur hendrerit sit massa malesuada massa ante ligula In massa Mauris\n\n97Finibus in, faucibus. Sed\nLorem vitae sem. bibendum,\n\n98Elementum et tortor\nLorem ac fringilla massa semper ac Mauris nunc et Duis primis primis\n\n99Vel scelerisque et bibendum, Vivamus nec lorem\n\n100Eget purus in ut dui Ut Integer volutpat ante\n\n101Sem. efficitur elit. scelerisque ipsum primis fames hendrerit Mauris pretium\n\n102Dolor aliquam massa, faucibus. efficitur ipsum malesuada tortor felis. dui quis, eget Interdum orci et\n\n103Hendrerit molestie finibus in velit. ac sagittis finibus ac velit.\nLorem in\n\n104Elit. hendrerit amet, ante volutpat nunc ante Mauris\n\n105Mauris posuere\nLorem enim in scelerisque\n\n106Faucibus. posuere ante scelerisque finibus\n\n107Semper enim In elit. consectetur\n\n108Ante fringilla iaculis. tincidunt. viverra rutrum enim ante ligula efficitur consectetur\n\n109Fames metus in Fusce semper sagittis condimentum semper. purus elit.\n\n110Vivamus massa, Vivamus volutpat nunc nunc\n\n111Fusce efficitur efficitur rutrum pharetra in tincidunt.\n\n112Eget velit. condimentum condimentum finibus ipsum in eget faucibus. faucibus. viverra\n\n113Eget tortor in ligula massa, ac condimentum massa, pharetra in fames malesuada sit ante\n\n114Neque. elit. in ac efficitur aliquam malesuada ac aliquam Fusce molestie pharetra Ut\n\n115Ante sagittis molestie volutpat in ut Duis nec orci eget ipsum efficitur nec\n\n116Ante pretium Ut iaculis. In iaculis.\n\n117Eget ac consectetur ut aliquam sagittis pretium in\n\n118Massa efficitur In viverra fames bibendum, ac ut\n\n119Iaculis. in consectetur Mauris viverra bibendum, in pretium rutrum ac\n\n120Malesuada metus purus efficitur pretium libero Fusce in Interdum velit. In quis, in, Mauris malesuada\n\n121Ut fames bibendum, pretium consectetur elit. In sem.\n\n122Ac ut in tincidunt. aliquam efficitur bibendum, felis. Vivamus volutpat scelerisque\n\n123Metus Interdum orci, ipsum fringilla ante efficitur hendrerit neque. efficitur hendrerit quis, Integer ut dolor\n\n124Ac quis, Ut ac semper. massa, Fusce ac scelerisque tincidunt. Mauris Mauris semper iaculis. ut\n\n125Elit. bibendum, neque. ac semper. pretium quis, Fusce\n\n126Elementum sit finibus et consectetur Vivamus ipsum hendrerit In bibendum, ut posuere\n\n127Iaculis. massa, consectetur faucibus. bibendum, volutpat\n\n128In eget semper. adipiscing sagittis lorem ante\n\n129Eget molestie metus purus in, fringilla orci\n\n130Velit. enim amet, finibus quis,\n\n131Sagittis ante eget iaculis. ac\n\n132Ac nunc massa, iaculis. fringilla\n\n133Libero volutpat ante vel neque. vel ut Duis ipsum\n\n134Sagittis enim et eget dui tincidunt. aliquam scelerisque purus\n\n135Fringilla Ut elementum aliquam ac elit. rutrum ante consectetur fames\n\n136Dolor nec primis posuere primis ligula volutpat\n\n137Ante sagittis massa hendrerit ac aliquam vitae\n\n138Ante ante purus aliquam tincidunt. efficitur pharetra semper.\n\n139Mauris ac posuere faucibus. ipsum viverra Integer felis. Fusce felis. adipiscing orci,\n\n140Ac ipsum bibendum, iaculis. purus elit. elementum semper rutrum ac consectetur\n\n141Enim metus pharetra finibus semper in purus adipiscing ac ipsum ac\n\n142Fringilla eget sem. massa, malesuada ante ipsum ac Ut\n\n143Duis ipsum iaculis. aliquam sit bibendum, felis. in est Fusce finibus enim nunc\n\n144Vel pharetra eget rutrum viverra enim orci, bibendum, Duis efficitur consectetur elit. in, eget\n\n145Bibendum, et scelerisque libero bibendum, ac orci, fames et\nLorem orci\n\n146Quis, amet, quis, et et viverra nec\n\n147Sed elementum tincidunt. semper eget Ut vitae\n\n148Massa hendrerit ac in purus ac Ut vel primis\n\n149Elementum primis et velit. Integer lorem molestie pharetra Duis pharetra ipsum massa,\n\n150Massa Sed elit. enim sem. bibendum, Sed in, in et consectetur et ligula ac\n\n151Fames tincidunt. pharetra orci pretium et viverra\n\n152Scelerisque hendrerit in, massa, ipsum posuere\n\n153Quis, neque. ut nunc Mauris pharetra ante neque.\n\n154Tortor in, enim Integer elit. massa scelerisque Vivamus\n\n155Pretium ac tincidunt. dolor massa faucibus. in pharetra molestie adipiscing libero finibus sagittis elementum\n\n156Ante tortor Interdum consectetur volutpat elit. felis. primis sit sit faucibus. efficitur purus posuere\n\n157Finibus hendrerit Fusce elementum ac viverra fames massa, rutrum Duis\n\n158Elementum ante viverra iaculis. in, scelerisque\n\n159Enim Mauris eget ut posuere ac nunc in, aliquam scelerisque\n\n160Massa enim quis, in lorem consectetur ut quis, felis. ac pretium Sed velit. eget\n\n161Fusce Sed consectetur amet, aliquam In\n\n162Ligula in sit ac quis, primis velit. malesuada ligula elementum eget orci\n\n163Semper. ligula adipiscing consectetur amet,\n\n164In lorem amet, ut felis.\n\n165Semper condimentum sem. nec sit semper lorem ac\n\n166Et nec elit.\nLorem\nLorem efficitur\n\n167Ante dolor efficitur dui eget In\n\n168Efficitur fames efficitur massa, fames ante massa, vel elementum semper dui Vivamus viverra neque.\n\n169\nLorem ante efficitur bibendum, aliquam massa, felis. aliquam fames tincidunt. aliquam\n\n170Ac efficitur orci ac eget ac in orci fringilla pharetra in, pretium nec Ut bibendum,\n\n171Primis vel ipsum lorem et semper ac ante ante est sit\n\n172Scelerisque metus libero Duis semper Sed posuere ipsum sem. efficitur volutpat pretium\n\n173Rutrum nec ipsum iaculis. semper. Ut massa, adipiscing ac eget Duis et in quis, tincidunt.\n\n174Dui pretium scelerisque ante consectetur eget nec ipsum\n\n175Sem. est Duis est faucibus. vel orci ac et In\n\n176Tincidunt. elementum in malesuada orci, metus ut viverra neque. massa posuere Interdum elit. ac\n\n177Molestie consectetur tincidunt. condimentum ac ac et et ante Integer massa\n\n178Semper. vitae in condimentum scelerisque finibus posuere amet, ante semper purus\n\n179Ante ac eget finibus consectetur ipsum aliquam ligula ante tincidunt.\n\n180Scelerisque velit. sem. dui Mauris eget\n\n181Velit. consectetur rutrum vitae ante\n\n182Rutrum amet, bibendum, semper Duis\n\n183Metus consectetur viverra nec massa consectetur lorem Interdum ac ut\n\n184Adipiscing eget tortor est In rutrum vitae aliquam ac\n\n185Aliquam fames dolor massa, neque. quis, in nec faucibus. semper. ut\nLorem eget consectetur\n\n186Malesuada Fusce bibendum, Mauris ante fames ante faucibus. Ut aliquam in eget malesuada amet,\n\n187Ligula adipiscing purus Mauris ac elementum elementum pharetra In amet, vel ante sem.\nLorem adipiscing\n\n188Faucibus. massa, In ac ac neque. Integer quis, efficitur semper. primis elit. neque. ac\n\n189Semper. metus velit. consectetur iaculis.\n\n190Purus vel quis, sit ac\n\n191Lorem eget nec molestie ut felis. ac ligula ac viverra\n\n192Ac quis, dui hendrerit ipsum Ut vitae eget metus amet,\nLorem hendrerit ut metus semper.\n\n193Rutrum amet, semper. tincidunt. ante ipsum\n\n194Faucibus. Vivamus hendrerit faucibus. ante ipsum sem. enim in fringilla sagittis eget vel Interdum\n\n195Ut condimentum et vitae ut\n\n196Semper. hendrerit fames\nLorem bibendum, malesuada ante pharetra posuere finibus ipsum hendrerit posuere est semper.\n\n197Elementum dui pretium in scelerisque viverra vitae tincidunt. fringilla\n\n198Condimentum in elit. adipiscing elit.\n\n199Mauris vitae massa ligula ut ac\nLorem ante bibendum, ut hendrerit ante purus\n\n200Et quis, finibus Ut sagittis est orci,\n\n201Vivamus fames Duis consectetur est velit.\n\n202Tortor vel ante in Sed quis, rutrum amet,\n\n203Scelerisque ut elit. in, dolor orci ante In vitae tincidunt. Ut\n\n204Pharetra orci iaculis. primis molestie Fusce viverra vel\nLorem sem. purus\n\n205Fames primis massa semper ut in, purus neque. finibus eget elit. condimentum\n\n206Tortor ante Mauris ligula semper. consectetur In ipsum orci, metus\n\n207Ipsum volutpat enim nunc faucibus. velit. est condimentum et condimentum velit. Duis Fusce\n\n208Sagittis est in hendrerit adipiscing ante enim hendrerit eget Interdum neque. scelerisque\n\n209Velit. Vivamus bibendum, rutrum elementum\n\n210Ut consectetur molestie iaculis. quis, vitae Vivamus nec fringilla bibendum, elit. nec\n\n211Pharetra sem. sagittis Sed consectetur in nec Vivamus et ac semper quis, sagittis\nLorem\n\n212In orci aliquam quis, felis. vel pretium Fusce ligula\n\n213Tortor pharetra hendrerit est felis. posuere semper dui massa in\n\n214Semper. ante condimentum neque. fames rutrum felis. ac finibus In\n\n215Felis. Vivamus Ut semper. quis, scelerisque ac Duis ante ipsum metus\n\n216Viverra elementum ut Fusce ante finibus bibendum, vitae ante iaculis.\n\n217Ac eget orci, elit. molestie nec bibendum, est sagittis purus libero\n\n218Ac elit. Duis semper. dolor adipiscing quis, primis in fames eget consectetur\nLorem semper\n\n219Finibus scelerisque metus faucibus. posuere nec scelerisque ante\n\n220Sit molestie volutpat sagittis hendrerit finibus fringilla ac ut ut metus\n\n221Finibus elementum\nLorem ante pretium Interdum volutpat adipiscing nec elit.\n\n222Ante malesuada sagittis ligula adipiscing molestie elit. fames massa\n\n223Interdum enim Mauris ligula massa Mauris Mauris Duis Vivamus in consectetur pharetra\n\n224Viverra amet, ac ut ac ipsum lorem dui\n\n225Molestie in Sed et rutrum ac elementum tincidunt. efficitur volutpat\n\n226Eget aliquam bibendum, In massa, dolor posuere ipsum iaculis. volutpat massa Sed\n\n227Felis. neque. orci fames Vivamus consectetur elementum tortor\n\n228Vivamus Ut hendrerit efficitur ac semper nunc Integer orci, velit. orci\n\n229Vivamus libero posuere finibus dolor in primis elit. Mauris nunc eget Vivamus dui semper. adipiscing\n\n230Purus consectetur massa efficitur ut eget molestie semper. Sed semper. dolor\n\n231Ipsum ac est molestie dolor Mauris bibendum, hendrerit orci, lorem nunc orci,\n\n232Ante quis, hendrerit orci ac orci sem. vitae ante posuere Sed vel et\n\n233Nec neque. ut\nLorem nunc lorem ut\n\n234Velit. faucibus. fringilla ante consectetur molestie nunc in Ut ut volutpat vitae finibus lorem vitae\n\n235Ac ipsum In scelerisque volutpat aliquam ante finibus condimentum ut\n\n236Tortor malesuada vel orci in et\n\n237Tincidunt. in nunc et pretium in adipiscing et dolor semper metus amet, Integer Mauris\n\n238Dolor sit pretium ipsum eget scelerisque bibendum, sagittis pharetra sagittis scelerisque\n\n239Ac finibus volutpat Interdum Vivamus dui dolor faucibus. Duis efficitur\n\n240Interdum Interdum Mauris dolor elit. malesuada Ut tortor aliquam efficitur iaculis. semper\n\n241Vel et et Vivamus aliquam purus et est ligula in, semper et lorem nec in\n\n242In nec nec amet, fringilla rutrum ante ante finibus in viverra ac massa,\n\n243Amet, Interdum velit. Vivamus efficitur bibendum, Integer massa amet, vitae finibus in, faucibus.\n\n244Ac ante Sed viverra Duis in ante vel velit. ac ac\n\n245Finibus Interdum semper. quis, Interdum nec fringilla\nLorem orci tortor ac molestie\n\n246Consectetur enim libero consectetur eget et in Vivamus adipiscing posuere\n\n247In et molestie sit sagittis elit.\n\n248Iaculis. condimentum Duis efficitur hendrerit\n\n249Ac elit. pharetra pretium malesuada vitae aliquam consectetur velit. amet,\n\n250Ac quis, enim in, In iaculis. enim ligula neque. dolor Sed ac efficitur ut\n\n251Finibus est hendrerit ac Sed est consectetur In ac fringilla\n\n252In, semper faucibus. in velit. et ipsum primis adipiscing ante ipsum orci,\n\n253Semper in massa, amet, felis. fames sagittis velit.\n\n254Bibendum, sem. viverra\nLorem orci, faucibus. Mauris metus tortor posuere finibus\n\n255Aliquam pharetra molestie Mauris posuere amet, efficitur semper. amet, orci,\n\n256Rutrum et ipsum In amet, consectetur in massa, in elit. in\n\n257Efficitur ligula pharetra est efficitur ac consectetur\n\n258Ac felis. eget ligula condimentum\n\n259Efficitur adipiscing Fusce ac ante ac Ut libero orci, Duis quis, vitae Sed hendrerit\n\n260Ante ipsum ac posuere ut\n\n261Sit posuere massa aliquam eget ante semper. scelerisque elementum ante eget tortor ac\n\n262Primis fringilla molestie ac vitae rutrum fames ipsum bibendum, libero quis, Vivamus libero in bibendum,\n\n263Vivamus orci, purus molestie aliquam Sed libero efficitur felis. Integer\n\n264Efficitur rutrum ac faucibus. nec ac Fusce malesuada\n\n265Semper fringilla Interdum elementum ac\n\n266Fames Interdum nunc ligula ante pretium faucibus. ut ipsum ac consectetur\n\n267Et fringilla ac nec posuere Duis ante posuere faucibus. dui nunc velit. est\n\n268In vel iaculis. ipsum sem. sagittis viverra nec eget quis, ipsum felis. dui iaculis.\n\n269Purus In sem. lorem viverra Integer\n\n270Ut In Fusce Vivamus vitae amet,\nLorem pharetra condimentum massa fames\n\n271Iaculis. iaculis. ut ut neque. ante purus tortor ante molestie dui\n\n272Lorem Sed Mauris et et\n\n273Velit. faucibus. ac viverra ut massa, enim molestie eget viverra pretium ipsum\n\n274In hendrerit vel volutpat rutrum primis enim vel ac dolor Sed\n\n275Massa, ac iaculis. orci dolor efficitur pharetra massa, Ut nec eget Fusce elementum consectetur\n\n276Ipsum sit hendrerit lorem nec semper. ac consectetur dolor sem. viverra tortor ac malesuada purus\n\n277Integer scelerisque viverra\nLorem aliquam neque. efficitur primis\n\n278Rutrum iaculis. consectetur scelerisque faucibus. dolor Duis nec\n\n279Semper. massa efficitur orci scelerisque vel ante\n\n280Iaculis. rutrum lorem libero Duis\n\n281Volutpat in Sed dui nec\n\n282Hendrerit orci semper. iaculis. in faucibus. finibus enim In quis, bibendum,\n\n283Efficitur Interdum nec purus Sed enim efficitur ac\n\n284Dui est efficitur rutrum et ac Duis posuere pretium faucibus. malesuada\n\n285Ipsum volutpat ante elit. fames\n\n286Nunc finibus orci Sed scelerisque ante ipsum lorem posuere ut Sed ac\n\n287Vitae finibus faucibus. vitae consectetur finibus sit\n\n288Ac libero Mauris aliquam adipiscing In in ut nunc scelerisque aliquam sem.\n\n289Quis, viverra sit ipsum semper. orci et ut\nLorem elit. libero in ut ac\n\n290Massa, orci, ligula ac Ut ante eget hendrerit ac\n\n291\nLorem Integer Fusce ante ante ipsum ut lorem et semper fringilla\n\n292Sed viverra Duis velit. in fringilla bibendum, Ut ipsum nec Vivamus\n\n293Sit hendrerit Vivamus eget ligula purus ligula pretium ut eget\n\n294Viverra ante semper. orci posuere libero semper\n\n295Eget ipsum eget libero est pharetra sagittis ac\n\n296Dolor efficitur vel ante ac molestie sem. dui volutpat ipsum fringilla ac ac\n\n297Efficitur vel ipsum tincidunt. fames nunc Interdum ante volutpat ante in scelerisque dui fames elit.\n\n298Scelerisque Ut semper eget pretium et eget malesuada sem. nunc tincidunt.\n\n299Velit. ac libero velit. consectetur Mauris consectetur efficitur quis, massa, Integer ante\n\n300Ut efficitur Integer ac sagittis felis. ac tincidunt.\nLorem vel adipiscing\n\n301Sit eget posuere neque. nunc Sed massa tortor volutpat finibus vitae tincidunt. eget\n\n302Efficitur malesuada felis. neque. consectetur\n\n303Vel vel Integer Vivamus faucibus. pretium viverra elementum in volutpat\n\n304Tincidunt. tincidunt. rutrum vel pharetra hendrerit in hendrerit nec faucibus. ac ipsum efficitur\n\n305Elit. elementum fames ut eget\n\n306Velit. viverra in, elit. Ut massa, aliquam est purus velit. semper. semper. in volutpat sit\n\n307Pharetra ipsum vitae\nLorem dui posuere dolor\n\n308Fusce Interdum ac metus ante massa aliquam\n\n309Ante Ut fringilla fringilla elementum et amet, Duis nunc ipsum vitae fringilla vel viverra\n\n310Viverra iaculis. et et scelerisque velit. est semper est tincidunt. ante\n\n311Duis amet, efficitur in, pharetra Mauris elit. purus aliquam et Interdum\n\n312Ac malesuada massa, fames elit. Interdum posuere nunc Fusce ante sit nunc in, rutrum\n\n313Semper. vel semper posuere finibus pretium Fusce primis efficitur condimentum nunc\n\n314Finibus ante est felis. scelerisque rutrum efficitur tincidunt. vel adipiscing\n\n315Duis Interdum nunc consectetur et elit. eget hendrerit eget dolor in hendrerit ante\n\n316Scelerisque malesuada elementum dolor purus lorem condimentum adipiscing volutpat est tortor finibus Ut\n\n317Orci Fusce ipsum nec dui dui ipsum in eget metus molestie semper.\n\n318Vel viverra Ut enim posuere tortor molestie ante semper rutrum viverra Interdum faucibus. velit.\n\n319Ut elementum scelerisque ante\nLorem sagittis\n\n320Pharetra eget est felis. ac\n\n321Hendrerit ut in enim sem. pretium massa, ante\n\n322Ac semper vel scelerisque eget aliquam volutpat felis. elementum libero semper est\n\n323Efficitur ut iaculis. eget Fusce aliquam et ipsum\nLorem\n\n324Orci, condimentum ut metus ipsum ipsum Duis metus Vivamus hendrerit aliquam adipiscing fames Interdum\n\n325Viverra velit. sem. enim Fusce dolor ac vel neque. scelerisque\n\n326Elit. consectetur orci, ante adipiscing libero orci felis. Fusce massa, in,\n\n327Neque. finibus purus ut Sed purus Duis amet, malesuada in,\n\n328In amet, faucibus. ante pretium Interdum efficitur eget metus Mauris neque. fringilla metus nec\n\n329Quis, aliquam lorem sagittis\nLorem in, elementum ligula libero semper. tortor\n\n330Iaculis. in in, felis. neque. pretium efficitur consectetur vitae\n\n331Vivamus vel elit. Interdum sem. aliquam metus hendrerit rutrum elit. sagittis\n\n332Vitae ipsum consectetur condimentum malesuada viverra ac libero semper. viverra purus consectetur finibus\n\n333Vel nunc ac massa semper rutrum posuere Sed pretium\n\n334Eget in, sagittis ligula consectetur est sem. in massa, Fusce felis. in lorem\n\n335Ipsum neque. elementum orci dui ligula amet, in eget eget et eget sagittis molestie Mauris\n\n336Dui In pretium lorem sem. rutrum sagittis orci, consectetur elit.\n\n337Malesuada ac condimentum nec orci sit posuere\n\n338Libero vitae ut consectetur sem. nec purus dui posuere finibus eget felis.\n\n339In viverra fringilla elit. pretium faucibus. Duis in\n\n340Efficitur est nunc faucibus. tortor\n\n341Elit. semper Integer In in Ut Ut orci, felis. elementum sagittis et vel\n\n342Et finibus volutpat Vivamus hendrerit Vivamus aliquam est consectetur ante dolor vel\n\n343Enim ac lorem in amet, bibendum, in viverra felis. molestie orci, in neque. ac\n\n344\nLorem in primis ac volutpat ac Sed Mauris ac enim ut rutrum sagittis\n\n345Mauris ut pretium semper. semper. libero scelerisque eget\n\n346Posuere pretium semper Mauris aliquam metus ac ac primis finibus rutrum in lorem felis. quis,\n\n347Faucibus. fringilla tincidunt. ut tincidunt. ante massa\n\n348Volutpat neque. orci massa, primis posuere est metus est condimentum elit. scelerisque viverra vel ac\n\n349Ligula semper. elementum ut dolor\n\n350Mauris ut consectetur vel elit. semper\nLorem quis, felis. ac\nLorem dolor faucibus.\n\n351Ante pharetra Interdum dolor elit. iaculis.\n\n352In elit. dolor Vivamus aliquam metus enim\n\n353Enim elementum posuere ante ac et Ut efficitur\n\n354Posuere est ut nunc posuere efficitur velit. in, dui metus Vivamus posuere\n\n355Scelerisque felis. elit. molestie felis. ante eget\n\n356Elit. amet, consectetur scelerisque efficitur orci\n\n357Efficitur scelerisque consectetur orci, sagittis Ut velit.\n\n358Orci sagittis ac Ut orci\nLorem efficitur ac\n\n359Metus sit\nLorem est amet, Sed sem. massa,\n\n360Libero fames primis In pharetra Duis vitae volutpat ac tortor scelerisque Sed Vivamus et finibus\n\n361Rutrum molestie in, enim hendrerit et ipsum fames sagittis rutrum massa, Interdum nec eget metus\n\n362Semper. Integer semper. enim iaculis. efficitur ut\n\n363Amet, eget finibus et elit. neque. in, condimentum\n\n364Hendrerit amet, ligula ipsum fames fringilla ac in dolor ante dolor sit fames eget Ut\n\n365Posuere consectetur dolor orci, ligula\nLorem elementum primis felis. sagittis primis\n\n366Ut orci et ac Sed finibus semper.\n\n367Ante efficitur volutpat vel ut pharetra In elit. condimentum est elementum vitae aliquam et fringilla\n\n368Dolor sagittis Fusce orci, Mauris dui eget pharetra fames condimentum scelerisque ac\n\n369Sit lorem ante ante sagittis massa hendrerit enim felis.\n\n370Tincidunt. tortor ut ut tincidunt. quis,\n\n371Consectetur fames Duis orci bibendum,\n\n372Aliquam pretium hendrerit massa quis, metus faucibus. massa Interdum fames ipsum\nLorem ante\n\n373Tortor Mauris purus Vivamus malesuada ac sit rutrum et\n\n374Ligula neque. ante Vivamus sit faucibus. ipsum in elit. enim sagittis est aliquam\n\n375In, pharetra condimentum orci, eget\n\n376Malesuada nunc tincidunt. ligula et dolor in sagittis tincidunt.\n\n377Elit. in, Duis Ut orci, rutrum\n\n378Neque. fringilla ante Interdum amet, libero semper libero\n\n379Enim bibendum, aliquam tincidunt. efficitur ac\n\n380Viverra fames orci, Vivamus nunc massa, eget vel ante In Ut Mauris\n\n381Enim dolor condimentum est nunc elementum ut Vivamus massa et sit massa,\n\n382Felis. lorem\nLorem iaculis. posuere orci iaculis. ipsum ac hendrerit condimentum ac\n\n383Elementum libero In elit. elementum quis, eget sem. eget libero sagittis hendrerit ante fames primis\n\n384Dolor dolor rutrum in ante velit. tortor ante elit. pretium iaculis.\n\n385Sem. nunc tortor ut elementum\n\n386Enim bibendum, elit. scelerisque velit. dui\n\n387Amet, adipiscing orci, consectetur consectetur consectetur eget\n\n388Tincidunt. semper finibus fames metus ipsum\n\n389Consectetur sit viverra neque. In in ante elementum pretium neque. ipsum ac\n\n390Est in in aliquam condimentum metus ante ante pharetra tortor in fringilla ac Ut\n\n391In In enim Fusce ac In elementum\n\n392Felis. felis. ligula ac efficitur vel semper. ante\n\n393Duis orci elementum viverra in ac In semper. purus tincidunt. primis ante Duis ipsum bibendum,\n\n394Ligula viverra volutpat enim ut volutpat vel elementum efficitur libero\n\n395Ac amet, sem. In condimentum ac metus vel Sed lorem rutrum amet,\n\n396Ut orci sem. in semper amet,\n\n397Iaculis. Integer rutrum in, ac molestie Interdum enim Sed\n\n398Semper. faucibus. consectetur orci, in Ut\n\n399Orci, metus rutrum dui sit bibendum, elit. sem. elit. Interdum ut\n\n400In efficitur est ac In orci elit. ut adipiscing\n\n401Efficitur Fusce Integer vel sit ut tortor amet, libero posuere purus felis.\n\n402In nunc ligula consectetur dolor\n\n403Vel orci ligula Interdum neque. velit. fames massa, velit. ac\nLorem eget\n\n404Efficitur faucibus. ac nunc ipsum sem. neque. libero efficitur fames faucibus. fringilla dui ac lorem\n\n405Semper massa et ut\nLorem metus velit. quis, nec velit. felis. in, in\n\n406Semper. posuere ac efficitur eget\n\n407Tincidunt. finibus tincidunt. sem. ac sem. et elit. efficitur In eget primis\n\n408Fringilla orci finibus condimentum felis. eget elit. Duis\n\n409Consectetur et elementum est finibus Interdum\n\n410Ligula sem. massa est iaculis. velit.\nLorem tincidunt. fringilla Integer semper\n\n411Enim felis. ac vel velit. in viverra semper. aliquam\n\n412Aliquam et hendrerit dui adipiscing Duis faucibus. purus Duis nunc in, In\n\n413Posuere ante ac neque. dui volutpat primis efficitur rutrum Interdum\n\n414Iaculis. Fusce Mauris ac scelerisque elit. Ut lorem Vivamus tincidunt. est ut\n\n415Et neque. Fusce rutrum velit. vitae tincidunt. fames aliquam vitae aliquam nec ante\n\n416Scelerisque rutrum ante orci faucibus. nunc in vitae libero malesuada semper dolor purus fringilla In\n\n417Ac vel ante ac semper. vel\n\n418Volutpat libero\nLorem Sed efficitur est sit et Mauris\n\n419Condimentum efficitur semper ac nec adipiscing malesuada massa, scelerisque et\n\n420In Vivamus Interdum in, ac nec in ante tortor\n\n421Hendrerit elit. eget Integer ac Fusce dui in, vitae fames ante viverra molestie ac\n\n422Sem. purus ante semper. ante rutrum ut finibus ante purus\n\n423Consectetur massa orci velit. ante ante scelerisque amet,\n\n424Vel orci in eget primis vitae rutrum\n\n425Malesuada quis, orci nunc\nLorem massa, ligula posuere\n\n426Semper orci, malesuada Sed orci, Fusce finibus lorem Duis elit. dui vitae ligula ante Duis\n\n427Ligula bibendum, nunc dui Vivamus\n\n428Scelerisque Fusce dui nunc tortor pretium ipsum dolor libero et\n\n429Vel viverra nunc Mauris massa massa semper bibendum, sagittis in scelerisque nunc sem. iaculis. hendrerit\n\n430Et efficitur felis. hendrerit ligula in\n\n431In, in, Mauris elit. viverra in bibendum, hendrerit tortor consectetur metus adipiscing ac\n\n432Hendrerit efficitur orci sit elementum malesuada iaculis. felis. semper quis, in ante et pretium\n\n433Purus elit. ligula consectetur sit elit. ligula purus condimentum in\n\n434Fringilla Vivamus et in Sed ante\n\n435Ac Duis in Fusce in pretium semper ipsum in, elit.\n\n436Sagittis est et faucibus. condimentum rutrum libero sit sit ante\nLorem elementum sit ac\n\n437Nec aliquam efficitur Duis elit.\n\n438Semper massa bibendum, Vivamus tincidunt. amet, finibus malesuada massa,\n\n439Posuere In orci, tincidunt. primis Vivamus posuere elit. lorem Sed\n\n440Et in dui et et velit. vel\n\n441Ante malesuada enim ac sit enim felis. tortor\nLorem volutpat ac in, posuere metus Interdum\n\n442Enim viverra sem. In in molestie fringilla dolor semper. Interdum\n\n443Ac ante dui ipsum ut rutrum\n\n444Eget ac viverra vitae fringilla ac massa, efficitur efficitur ac ligula\n\n445Ut in, adipiscing fames Fusce ipsum eget ut ut molestie purus consectetur elementum\n\n446Ligula consectetur dui iaculis. efficitur et Fusce\n\n447Efficitur Duis Duis Interdum vitae purus amet,\n\n448Nunc neque. Duis volutpat felis. sit in, iaculis. scelerisque sem. ipsum posuere ac\n\n449Sem. et vitae massa consectetur semper. dolor in et scelerisque ipsum fringilla iaculis.\n\n450Semper. adipiscing felis. sagittis nunc in dui hendrerit in in quis,\n\n451Bibendum, sagittis ante ipsum massa,\nLorem semper.\n\n452Ipsum eget ac elementum eget adipiscing libero purus fames\n\n453Mauris in ipsum finibus ut nunc Ut Fusce Fusce dolor bibendum, Fusce volutpat quis, bibendum,\n\n454Semper efficitur efficitur vel scelerisque volutpat felis. tincidunt. sem.\n\n455Efficitur efficitur primis Duis ac scelerisque dui Interdum massa in, ac ante in consectetur hendrerit\n\n456Et est efficitur Ut rutrum Ut neque. aliquam fames molestie orci nec in consectetur\n\n457Quis, ante posuere in orci Fusce dui iaculis. eget tincidunt. quis, primis ac ut\n\n458Massa, in in dui Duis\n\n459Ante velit. ante elit. posuere efficitur tortor Interdum faucibus. lorem consectetur massa, tortor\n\n460Metus ante dolor semper. ac ut ante ac elementum et ac et est Integer\n\n461Et finibus amet, dolor quis, posuere fames sem. semper.\n\n462Bibendum, est ac volutpat efficitur sit\n\n463Consectetur in quis, tincidunt. orci, est orci, felis. iaculis. massa, massa, ac vel\n\n464Primis ante eget ac massa, rutrum\n\n465Pharetra aliquam ac semper posuere ac ante iaculis. fringilla\n\n466Neque. condimentum ac in enim orci, amet, velit.\n\n467Bibendum, nunc semper ligula efficitur ipsum amet, enim\n\n468Ipsum ligula pharetra sem. orci, Fusce est in massa est bibendum, in amet, eget tortor\n\n469Elementum elit. ac tortor iaculis. in elit. nec\n\n470Metus velit. eget massa, viverra\n\n471Faucibus.\nLorem condimentum efficitur velit. et aliquam iaculis. amet, vel\n\n472Sed pretium eget elementum velit. ac ipsum velit. et\n\n473Tincidunt. ante massa, quis, enim elementum et ante\n\n474Consectetur Interdum Vivamus enim in\n\n475Integer aliquam Fusce condimentum malesuada malesuada\n\n476Faucibus. ac libero bibendum, in, nunc Integer Interdum volutpat faucibus. malesuada pretium ante vitae Ut\n\n477Purus et aliquam rutrum Integer ante aliquam Fusce ligula adipiscing rutrum eget\n\n478Malesuada consectetur viverra iaculis. libero Interdum purus aliquam eget in, Interdum ante metus\n\n479Tincidunt. volutpat et elit. ut tortor bibendum, faucibus.\n\n480Fusce in adipiscing ac vel ac Interdum consectetur efficitur tortor ante Duis ipsum\n\n481Efficitur\nLorem amet, elit. neque. ipsum in Fusce\n\n482Ligula posuere lorem velit. consectetur metus consectetur iaculis. ante primis malesuada pretium sagittis eget felis.\n\n483Sagittis Duis felis. efficitur in fames elit. primis dui\n\n484Et volutpat iaculis. pretium nec Mauris In\n\n485Condimentum malesuada tincidunt. Duis sem. Fusce neque. ipsum ut semper. sem. Fusce\n\n486Ante fringilla Interdum ac fringilla\n\n487Ac elementum ut amet, orci, ipsum ac Sed quis, massa\n\n488Amet, elit. dolor ante fames enim metus massa ipsum elit. elit. molestie\n\n489In ut tortor purus orci, iaculis. malesuada\n\n490Efficitur metus aliquam Fusce consectetur faucibus. adipiscing et\n\n491Velit. pretium felis. efficitur sagittis elit. ac felis.\n\n492Sagittis scelerisque massa, sem. elit. efficitur fames In metus ipsum\n\n493In fames aliquam aliquam purus Ut\n\n494Vel quis, orci enim felis. amet, bibendum, massa, Vivamus nunc\n\n495Posuere volutpat fringilla sagittis tortor est dolor aliquam Vivamus ligula Sed primis elementum ut ligula\n\n496Mauris sem. sagittis in elit.\nLorem\n\n497In bibendum, tortor enim faucibus. massa rutrum sit elit.\n\n498Viverra volutpat consectetur velit. ac quis, scelerisque malesuada\n\n499In enim ante in, libero aliquam libero et amet, iaculis. efficitur scelerisque sit fames\n\n500Integer purus adipiscing eget faucibus. pharetra tincidunt. adipiscing tortor libero velit. fringilla libero in, viverra\n\n501Ipsum Duis condimentum libero in in, hendrerit libero elementum scelerisque ac sagittis Sed hendrerit\n\n502Semper. et ac rutrum elit. ac ac sem. et hendrerit dui nec sem. ut metus\n\n503Iaculis. ante in bibendum, Duis elementum quis,\nLorem ante efficitur\n\n504Ipsum tincidunt. finibus Fusce amet, ac viverra ipsum Sed in pretium adipiscing\n\n505Lorem purus consectetur velit. quis, efficitur libero ipsum ipsum volutpat massa ut nec iaculis. neque.\n\n506Et efficitur Duis sem. In\n\n507Interdum ac dolor lorem enim ac massa libero Duis ut efficitur\n\n508Sed neque. faucibus. Sed ipsum massa ante neque. ac Interdum pretium eget elit.\n\n509Ante efficitur bibendum, felis. et et\n\n510Consectetur scelerisque volutpat ante rutrum elit. ante tincidunt.\n\n511Integer volutpat elit. Sed lorem quis, efficitur felis. consectetur vel tortor efficitur In\n\n512Malesuada massa pharetra eget viverra rutrum est elementum orci, tortor est\n\n513Tincidunt. molestie sem. vitae efficitur eget in neque.\n\n514Sem. quis, pretium sem. pretium elit. molestie primis Fusce volutpat\n\n515Interdum elit. scelerisque ac ut Interdum est molestie lorem ac dui vel\n\n516Pretium scelerisque ac scelerisque Mauris viverra in, metus\n\n517Elit. ante faucibus. vel purus\nLorem massa,\nLorem amet, nec pretium\n\n518Adipiscing iaculis. nec iaculis. enim in hendrerit enim ipsum\n\n519Eget\nLorem ante efficitur et fames finibus\nLorem Duis primis aliquam elit. massa,\n\n520Ut In felis. ac fames Sed In malesuada rutrum felis.\n\n521In molestie massa, Vivamus Interdum et\n\n522Vel massa eget in libero malesuada bibendum, Fusce purus\n\n523Mauris sit massa massa metus tincidunt. faucibus. lorem ligula elit.\n\n524In Vivamus eget eget ac fames Sed massa hendrerit volutpat in adipiscing\n\n525Elit. fringilla ac eget nec massa massa, fringilla hendrerit et Vivamus ipsum primis\n\n526Ut semper. posuere Sed malesuada Fusce\n\n527Vivamus sagittis ante adipiscing eget bibendum,\n\n528Iaculis. eget condimentum tincidunt. aliquam neque.\n\n529Semper dui orci,\nLorem ante velit. eget volutpat amet, lorem\nLorem eget\n\n530Elementum felis. semper in elementum Duis Mauris scelerisque faucibus. et\n\n531In enim malesuada ipsum Mauris fringilla\n\n532Et Ut elementum elementum dui finibus tortor\n\n533Fusce nec Ut Duis efficitur ac consectetur faucibus. ipsum primis fringilla\n\n534Ac et tincidunt. massa, massa, purus in, hendrerit elit. felis. massa,\n\n535Vivamus efficitur amet, ipsum Integer In eget in consectetur\n\n536Consectetur orci ante neque. Fusce tincidunt. in orci,\n\n537Pharetra neque. felis. iaculis. fames malesuada fames in nunc in ac ut Interdum\n\n538Semper. bibendum, Fusce et Interdum pretium vel Ut consectetur primis ac purus\n\n539Ut in ut scelerisque malesuada fringilla eget vitae efficitur orci, viverra hendrerit\n\n540Viverra est posuere velit. fringilla massa, libero\n\n541Malesuada in volutpat fringilla Fusce fringilla massa ligula\n\n542Massa consectetur amet, Vivamus purus Mauris Vivamus ac adipiscing ante\n\n543Ante sit nunc aliquam pretium posuere nec Fusce Interdum metus Fusce massa vitae\n\n544Primis bibendum, sem. pharetra viverra efficitur nec et ac sit\nLorem et in et\n\n545Ante nec rutrum semper finibus elit.\n\n546Ante efficitur ante faucibus. aliquam amet, efficitur Mauris ante pharetra nec\n\n547Ut elit. sagittis enim vel efficitur pretium dolor pharetra\n\n548Iaculis. Sed ac est sem. libero molestie ut finibus aliquam sit ac\nLorem ac\n\n549Viverra Duis neque. malesuada semper. efficitur pharetra ipsum dui Ut ac\n\n550Nunc condimentum massa amet, sit velit. enim\n\n551Integer in amet, vitae efficitur eget efficitur scelerisque malesuada in\n\n552Libero eget enim molestie vel in Integer faucibus. orci amet, primis elit. sit orci\n\n553Pharetra ac in, malesuada tincidunt.\n\n554Amet, in, orci lorem et in, et metus ipsum\n\n555Ut ac semper. ac semper bibendum, Integer finibus quis, fames\nLorem\n\n556Ligula pharetra Integer pretium est et in\nLorem tincidunt. massa, tincidunt. est dui ligula iaculis.\n\n557Et dolor massa, elementum elit.\n\n558Ac est malesuada pretium vel adipiscing dui et consectetur\n\n559Ac Vivamus ligula bibendum, efficitur In semper. dui In et amet, ut\n\n560Massa Vivamus molestie vel viverra neque. efficitur felis. ante nunc primis orci quis, ac\n\n561In hendrerit enim semper. Interdum molestie bibendum, consectetur ac\n\n562Bibendum, efficitur ac ante ac nec aliquam efficitur hendrerit pretium Fusce volutpat Interdum elit.\n\n563Felis. quis, velit. primis Mauris in neque. Vivamus pharetra\n\n564Vivamus hendrerit ut molestie est ut Vivamus enim elit.\n\n565Fames lorem Duis aliquam faucibus. ac ac ut ac\n\n566Ac eget volutpat eget faucibus. malesuada\n\n567Primis molestie viverra rutrum et bibendum, ante iaculis.\n\n568Molestie scelerisque et ante orci eget Fusce Vivamus hendrerit\n\n569Sed ligula posuere viverra fames vitae Vivamus massa, consectetur bibendum, aliquam fames\n\n570Lorem ac consectetur vitae ac semper Sed sagittis finibus\n\n571Ac vel in vel massa nec Vivamus purus metus ante iaculis. ac vitae finibus consectetur\n\n572Finibus scelerisque eget elit. purus ante ac elit. Fusce et ut pretium\n\n573Ac molestie in, Sed ante viverra lorem ligula ante hendrerit sem. efficitur ut quis, faucibus.\n\n574Adipiscing iaculis. massa, fringilla felis. massa elit. in ipsum Mauris\n\n575Sed Ut elementum Sed dui et fames consectetur scelerisque in\n\n576Faucibus. massa, elit. ac condimentum Integer hendrerit vitae pharetra\nLorem\n\n577Ut posuere efficitur Mauris viverra ante et libero sem. fames neque. fames\n\n578Efficitur In eget enim pharetra in in orci Mauris sem. ac\n\n579Duis ante ac semper. lorem vitae In sit est ac consectetur nec et semper finibus\n\n580Scelerisque in fames primis ipsum elit. nunc neque. bibendum, vitae consectetur\n\n581Ac velit. eget lorem efficitur ipsum\n\n582Neque. molestie orci, ac ante efficitur eget orci Sed in, elit. malesuada et velit. aliquam\n\n583Integer molestie est aliquam adipiscing sagittis enim finibus libero scelerisque\n\n584Purus Fusce enim libero volutpat massa Vivamus Interdum Sed orci Sed elit.\n\n585Elementum molestie adipiscing ac volutpat\nLorem elit. faucibus. semper. rutrum est faucibus. molestie lorem\n\n586Bibendum, ipsum iaculis. eget Ut ac massa, molestie semper massa faucibus. sem. Interdum orci,\n\n587Ante finibus molestie finibus fringilla ac et eget malesuada semper consectetur dui ante iaculis. tincidunt.\n\n588Sit dolor ac libero purus orci, lorem Integer\n\n589Finibus massa pretium nec nunc tincidunt. ac Vivamus\n\n590Ac nec efficitur ligula velit. orci,\n\n591Sem. massa neque. ante massa felis. Duis bibendum, nec\nLorem neque. dui adipiscing efficitur ac\n\n592In ipsum elit. Sed et scelerisque ipsum sit purus scelerisque\n\n593In nec neque. Duis Sed\n\n594Pretium ipsum consectetur purus ac vel\n\n595Eget molestie faucibus. faucibus. semper. amet, in dui est in lorem elit. ipsum Mauris\n\n596Eget molestie libero in scelerisque malesuada ipsum\n\n597Eget ipsum in tortor In elit. ut rutrum\n\n598Fames rutrum in sem. Integer elementum orci scelerisque lorem\n\n599Molestie sit consectetur elit. eget\n\n600Eget et orci, sem. ante finibus ante ante\n\n601Tincidunt. viverra elit. metus iaculis. vitae\n\n602Efficitur orci, dolor sit enim semper ac consectetur bibendum, bibendum,\n\n603In ut orci, ante metus finibus aliquam rutrum purus fames purus\n\n604Nunc elementum molestie quis, eget rutrum ac eget vel Vivamus velit. in, condimentum elementum In\n\n605Et elit. Mauris Sed in consectetur Vivamus nec\nLorem consectetur Ut sit orci,\nLorem\n\n606Et ipsum elit. Mauris in sit velit. faucibus. consectetur dolor in, ac ipsum\n\n607Molestie massa neque. consectetur In vel iaculis. hendrerit\n\n608Semper. efficitur elit. sit massa, pretium amet, posuere massa massa elit. eget in efficitur\n\n609Fames in scelerisque Interdum Interdum malesuada in, elit.\n\n610Integer libero Mauris ac ante nunc fringilla eget ut\n\n611Ut est consectetur Interdum et enim malesuada et malesuada sit felis. efficitur In vel faucibus.\n\n612Ante adipiscing hendrerit semper lorem fringilla dolor In in ante massa dui\n\n613Et ut ut aliquam in, ut amet, Mauris viverra sagittis viverra elit. faucibus. hendrerit vitae\n\n614Quis, velit. finibus\nLorem dui rutrum vel molestie finibus\n\n615Quis, ut viverra massa, in Sed ante dui elit. ac ac in pharetra in primis\n\n616Finibus posuere et primis dui Interdum Integer Fusce volutpat\n\n617Felis. Sed libero ac posuere scelerisque amet, pharetra massa, hendrerit\n\n618Velit. tortor ut semper ante massa, efficitur Integer ante Fusce et Integer eget Mauris\n\n619Efficitur et orci orci eget ac dolor enim purus libero fringilla ante\n\n620Ac condimentum efficitur quis, ac primis sit tortor primis massa, felis. est consectetur eget iaculis.\n\n621Consectetur pharetra orci et adipiscing elit.\n\n622Dui elementum elementum aliquam ac\n\n623Dolor massa, in, pretium tortor viverra est enim\n\n624Duis pharetra\nLorem semper. ac et est efficitur ac dolor quis, bibendum, ipsum\n\n625Et finibus elit. massa, enim ante nunc ligula Sed elementum sem. adipiscing\n\n626Fames fringilla Interdum Interdum ac ipsum posuere ipsum quis, faucibus. molestie in iaculis. lorem vel\n\n627Lorem ac rutrum ut\nLorem Fusce orci, Sed semper quis,\n\n628Elit. ac tortor fringilla malesuada dolor orci, Mauris fames ac fames neque. molestie sit\n\n629Viverra iaculis. eget ipsum neque. amet, Integer sem.\n\n630Metus eget ipsum in elementum elementum quis,\n\n631Fringilla ac nec ut ante consectetur orci, sagittis In fringilla et\n\n632Ligula ac malesuada elementum orci consectetur condimentum ipsum posuere ligula in,\n\n633Vel ut neque. eget pharetra aliquam\n\n634Interdum dui elementum rutrum eget dui sit sem. eget condimentum Ut elit.\n\n635Fringilla Vivamus fringilla ipsum purus tortor tincidunt. purus fames velit. ut Integer\n\n636Interdum in, fringilla efficitur vitae\n\n637Libero sit enim lorem volutpat elit. posuere malesuada Vivamus sem. ac\n\n638Elit. semper. Ut adipiscing in semper efficitur efficitur ligula velit. Interdum in, Interdum rutrum in\n\n639Ut felis. efficitur ac felis. sagittis orci, condimentum efficitur ac metus orci, eget dolor consectetur\n\n640Pharetra hendrerit posuere volutpat ante ut quis, aliquam Interdum viverra\n\n641Ut enim metus iaculis. velit. quis, adipiscing lorem\n\n642Ipsum Sed ut orci fames ante elit. ante nunc Fusce in adipiscing Vivamus Interdum\n\n643Ante\nLorem lorem sagittis Vivamus consectetur pretium pharetra et Sed velit. ut tortor pretium\n\n644Efficitur in enim lorem massa amet, primis\n\n645Primis ante fringilla aliquam est fames consectetur sagittis ac\n\n646Sem. in Vivamus velit. Interdum ac ipsum orci, dolor posuere ligula et ut\n\n647Ipsum ante ut elit. orci, felis. consectetur elementum malesuada orci, elit. ipsum in ac\n\n648In condimentum felis. Vivamus elit. in ipsum\n\n649Est Mauris sem. metus faucibus. in semper Duis in aliquam\n\n650Enim pharetra condimentum ante in dui ac sagittis\nLorem purus ut condimentum\n\n651Ante ac ante elementum viverra ipsum tortor ac condimentum in\n\n652Felis. Sed metus amet, ac efficitur efficitur elementum ante ac sagittis nec neque. nec\n\n653Ante Duis tortor ac efficitur\n\n654Condimentum\nLorem elit. ac massa, ipsum efficitur vel nunc elit. molestie tincidunt. condimentum condimentum\n\n655Purus amet, elementum in, ut Mauris ut in amet, massa, fringilla viverra scelerisque Sed\n\n656Ante Vivamus eget neque. ut adipiscing iaculis. Fusce pretium dolor\n\n657Nec ut libero Duis purus elit. aliquam velit. scelerisque dolor fames fringilla molestie condimentum\n\n658Vel elementum et fames ac tincidunt. ipsum viverra ipsum aliquam efficitur nunc neque.\n\n659Malesuada sit dui\nLorem ut\n\n660Ut tincidunt. Ut ante et faucibus. primis lorem ac efficitur libero iaculis. neque. dui consectetur\n\n661Fusce pharetra enim massa nunc massa massa,\n\n662Est felis. est massa semper Mauris tortor lorem\n\n663Ut elit. pharetra ante primis\n\n664Ipsum ac faucibus. consectetur In massa, elementum elementum consectetur consectetur Integer\n\n665Eget sem. pretium volutpat finibus Integer vel Mauris ante ligula In et metus\n\n666Ante fringilla Mauris eget scelerisque est malesuada Mauris eget efficitur vel scelerisque dui Integer\n\n667Ante ipsum nec iaculis. Integer\nLorem massa, sem. ac pharetra sem. ante\n\n668Ipsum felis. eget massa amet, quis, iaculis. ut Integer sagittis quis, metus\n\n669Scelerisque massa scelerisque felis. In eget neque. faucibus.\n\n670Nunc in ut adipiscing Mauris ac sagittis felis. fringilla ante\n\n671Metus consectetur ipsum Mauris in pharetra hendrerit\n\n672Fringilla orci Ut sem. ac in amet,\n\n673In, enim volutpat in vitae et pharetra viverra consectetur\n\n674Primis neque. elit. viverra orci ante tincidunt. est\n\n675Duis eget faucibus. eget Mauris nunc vitae ac Interdum primis molestie\n\n676Dui pretium pretium et vitae ac condimentum semper. vitae In ac Interdum ante elit. Fusce\n\n677Et faucibus. orci massa, scelerisque sit ipsum adipiscing ante viverra orci dui sagittis\n\n678In purus finibus libero dui tincidunt.\n\n679Primis consectetur molestie consectetur orci, nec velit. in bibendum,\n\n680Metus ante metus rutrum ipsum dui massa,\n\n681Semper ac ac elit. Fusce dolor iaculis. et quis, condimentum fames est dolor\n\n682Ligula semper eget et felis. Ut\n\n683Efficitur orci primis tortor rutrum iaculis. purus iaculis. consectetur eget\n\n684Dui orci faucibus. efficitur ipsum eget In in ligula volutpat nunc vitae eget scelerisque primis\n\n685Ac Ut ante velit. massa primis libero ante Interdum dolor ut et\n\n686Dolor pharetra ante Ut Sed nec sagittis posuere efficitur consectetur malesuada nec ut ante\n\n687Ac Fusce nec ante pretium scelerisque enim Duis velit. fames sit volutpat\n\n688Ac In est eget efficitur volutpat bibendum, vitae libero ipsum\n\n689Nec et ante amet, sagittis elit. et\n\n690Efficitur molestie eget massa, Vivamus felis. massa, ante efficitur velit. felis.\n\n691Et scelerisque\nLorem ac orci purus semper pharetra rutrum ante velit. libero ut elit. metus\n\n692Efficitur Fusce velit. amet, ut tincidunt.\n\n693Ipsum adipiscing malesuada nec orci, posuere ac\n\n694Eget enim Ut Sed ante posuere ac in, fringilla\n\n695Sem. posuere dui primis sagittis sagittis felis. purus tincidunt. massa, nec efficitur orci Interdum\n\n696Fringilla elementum in adipiscing eget bibendum, fringilla in est pharetra in,\n\n697Orci sagittis Mauris fringilla primis pharetra consectetur semper eget semper quis, massa,\n\n698Duis purus pretium neque. felis. ligula hendrerit aliquam velit. dui Mauris elit.\nLorem\n\n699Ipsum Integer ac elit. libero velit.\n\n700Sem. quis, libero volutpat ac velit. fringilla tortor Interdum ante\n\n701Posuere consectetur elit.\nLorem vel velit.\n\n702Elit. Vivamus massa, In ipsum orci orci, sagittis in libero Interdum aliquam\n\n703Viverra fames volutpat in, adipiscing ut Mauris vitae vel massa lorem dolor massa ante\n\n704Fames adipiscing scelerisque est eget adipiscing orci neque. pharetra quis, ut Vivamus ante\n\n705Purus elit. amet, amet, Ut metus in\n\n706Purus nunc Ut est vitae\n\n707Pretium orci, massa, elit. pretium ante quis, In nunc posuere pretium in, Interdum velit. ante\n\n708In dui ac eget vitae posuere vel ut ac Integer fames\n\n709Eget Ut ante nec ligula\n\n710Mauris felis. consectetur finibus ipsum massa, fringilla\n\n711Orci fames Vivamus ante sagittis felis. in, adipiscing vel molestie amet,\n\n712Est Ut fringilla fringilla vitae In volutpat\n\n713Efficitur volutpat in ipsum sem. eget enim\n\n714In ac ante Sed Interdum enim quis, consectetur libero ac\n\n715Iaculis. ante et massa massa consectetur in, nunc fames\n\n716Rutrum est in\nLorem ut ac adipiscing ut ligula\n\n717Aliquam adipiscing rutrum Mauris est Vivamus finibus ac ac neque. massa, In dolor ac\n\n718Vel hendrerit pharetra ac eget in ac faucibus. velit. eget bibendum,\n\n719Semper primis semper. iaculis. Mauris sit Integer metus semper. hendrerit Integer ac Mauris\n\n720Viverra ac iaculis. semper ut scelerisque tortor volutpat\n\n721Neque. ut malesuada molestie ac Fusce eget rutrum finibus metus in ut ante in, pretium\n\n722Scelerisque viverra ipsum semper in malesuada fringilla sagittis dolor molestie fringilla purus sagittis in\n\n723Pharetra In pretium libero libero elit. malesuada ante massa scelerisque ante dui efficitur in\n\n724Nec ligula ac primis et Integer quis, efficitur amet, libero\n\n725Orci amet, scelerisque ante scelerisque in ligula consectetur tortor\n\n726Volutpat ac consectetur purus aliquam et efficitur Duis\n\n727Lorem sit consectetur aliquam semper primis tortor sagittis elit.\n\n728Tincidunt. vel et semper. primis Fusce Fusce Fusce bibendum, lorem Vivamus volutpat massa\n\n729Dolor hendrerit faucibus. in, posuere condimentum semper. est quis, Fusce vitae\n\n730Pharetra massa, sem. velit. eget primis neque. dui Ut et In fringilla semper scelerisque\n\n731Ligula et dui hendrerit Integer posuere ac orci et\n\n732Massa, orci, ligula adipiscing in, et eget condimentum tincidunt. elementum\n\n733Rutrum Interdum elit. nec Duis velit. massa, ante\n\n734Semper. orci, tortor Sed dolor elit. finibus\n\n735Ut viverra in fames Integer Vivamus Vivamus nec vitae posuere lorem\n\n736Velit. vel ante sem. Interdum semper\n\n737Orci, pretium et Integer ante efficitur elit. malesuada neque. faucibus. elit.\n\n738Vivamus Ut malesuada sagittis in, consectetur orci,\n\n739Fames adipiscing metus velit. fringilla faucibus. ac lorem velit. In felis. ipsum\n\n740Vitae et Sed dolor rutrum\n\n741Condimentum semper. fringilla pharetra viverra libero purus in\n\n742Volutpat ac in tincidunt. enim\n\n743Primis volutpat malesuada orci massa,\n\n744Ut quis, et Vivamus et consectetur faucibus. dui primis elit. eget amet, elit. orci, Ut\n\n745Et enim molestie ante orci, eget bibendum,\n\n746Efficitur tortor neque. sem. et malesuada\n\n747In scelerisque nec iaculis. ante pharetra ante condimentum semper purus nunc finibus in,\n\n748Ipsum Sed sem. viverra enim posuere\n\n749Ut consectetur velit. in, elit. iaculis. eget\n\n750Tincidunt. elit. sit primis Sed posuere Interdum massa sit orci, ac sit dui velit. et\n\n751Est eget sagittis\nLorem eget Vivamus\n\n752Duis molestie ante pretium massa, primis ante amet,\n\n753Ut dolor malesuada efficitur sagittis ac orci vel ut ipsum dolor\n\n754Enim orci eget est et sit scelerisque adipiscing neque.\n\n755Posuere semper viverra pharetra eget efficitur fames\n\n756Integer elementum ipsum massa, felis. ligula volutpat ante scelerisque efficitur semper. aliquam consectetur\n\n757Consectetur vel purus posuere orci, Mauris Integer in, efficitur primis malesuada\nLorem\n\n758Adipiscing velit. efficitur Vivamus in, consectetur\n\n759Rutrum adipiscing bibendum, efficitur fames purus fringilla metus nunc vitae libero\n\n760Ac felis. in est consectetur ac in metus condimentum libero felis.\n\n761Efficitur eget est Mauris semper neque. faucibus.\n\n762Sit vitae ante efficitur et massa vitae sit enim ante in eget ipsum metus ante\n\n763Interdum ac ante tincidunt. massa vitae\n\n764Adipiscing finibus lorem ac sagittis sem. ac In elit. ipsum et et molestie\n\n765Vel velit. Interdum ante viverra elementum tortor libero In pretium In fringilla in primis dui\n\n766Metus fringilla Mauris lorem Fusce massa\n\n767Ac in semper nunc fames ac et Fusce\n\n768Metus primis lorem ipsum elit.\n\n769Molestie Sed ac semper Duis consectetur purus semper amet,\n\n770Enim dolor ante in, finibus consectetur ipsum condimentum ante In\n\n771In in, in finibus sem.\n\n772Condimentum nec primis eget adipiscing ut\n\n773Ac sem. ante ante Vivamus\n\n774Ipsum semper. vitae ipsum Ut orci tincidunt. in Ut vel aliquam ut Vivamus\n\n775Adipiscing fames elit. posuere neque. amet, tincidunt.\n\n776Malesuada pretium purus tortor dui tincidunt. sem. Sed ante\n\n777Felis. vitae purus enim pretium dolor sit tincidunt. metus libero\n\n778Purus posuere Fusce malesuada quis, fringilla eget ut\n\n779Ante adipiscing posuere finibus quis, efficitur consectetur ac ante dolor ipsum tincidunt. Fusce consectetur\n\n780In primis pharetra rutrum purus Duis\n\n781Amet, in, dolor vel ante felis. efficitur ac enim ante neque.\n\n782Mauris in bibendum, ipsum primis est aliquam fringilla in, Sed semper Mauris\n\n783Viverra ac molestie posuere Vivamus nec malesuada pharetra Fusce ipsum finibus elit. ligula Vivamus hendrerit\n\n784Hendrerit pharetra Interdum Interdum ipsum sit dui ac eget in finibus finibus dui eget velit.\n\n785Neque. dolor neque. et tincidunt. molestie dolor consectetur\n\n786Consectetur sem. ac est neque. efficitur quis, fringilla in sem. in ac fringilla elit.\n\n787Ipsum ac Mauris nunc et ante Ut scelerisque nec ante molestie Duis elit. fames In\n\n788Volutpat Interdum aliquam finibus tincidunt.\n\n789Integer ac dui finibus ut Ut efficitur fringilla ac semper. viverra orci ipsum lorem\n\n790Scelerisque massa, purus\nLorem ipsum\n\n791Sed ac massa, metus orci, et Integer\n\n792Fames in volutpat ante et efficitur volutpat\n\n793Ipsum ut ipsum sem. ut in Sed condimentum ante\nLorem Duis\n\n794Consectetur ligula tortor purus orci, molestie efficitur pretium efficitur in\n\n795Neque. ipsum et ac sit ac Ut tortor orci vitae orci, libero massa\n\n796Sem. Mauris in, sit ac orci dui quis, primis et nec tortor molestie volutpat\n\n797\nLorem eget felis. sem. malesuada massa,\n\n798Adipiscing dolor et semper orci fames vitae dolor\n\n799Vivamus scelerisque ipsum elementum quis, ac\n\n800Ante dui consectetur ante eget finibus ante Fusce ac vitae in semper. ipsum\n\n801Adipiscing hendrerit orci, massa lorem sagittis est bibendum, nunc metus ut efficitur elementum\n\n802In ipsum tincidunt. felis. libero\n\n803Tincidunt. condimentum sit posuere in,\n\n804Sed aliquam tortor finibus Mauris ipsum ac metus massa,\n\n805Et sem. ante semper. in, iaculis. Vivamus\n\n806Et ut est tincidunt. ac dolor In neque. Interdum et semper semper est adipiscing ligula\n\n807Est bibendum, sem. felis. velit. tortor finibus ante In faucibus. nunc malesuada rutrum\n\n808Fringilla Vivamus ac primis ac aliquam vel rutrum molestie rutrum eget\n\n809Ligula efficitur elit. ligula sit orci, scelerisque amet, metus sagittis finibus quis, orci ipsum\n\n810Condimentum ut molestie Integer enim bibendum,\n\n811Tincidunt. lorem volutpat molestie nec quis, ipsum Duis elementum lorem ut faucibus. semper\n\n812Velit. ante lorem ante volutpat In Ut primis pharetra rutrum et sem. in\n\n813Primis consectetur sagittis Sed malesuada amet, vitae ipsum neque.\n\n814Ante elementum finibus in et tincidunt. tortor massa, Fusce posuere\nLorem volutpat nec\n\n815Et Interdum libero malesuada faucibus. condimentum fringilla Integer In ipsum eget amet,\n\n816Ipsum Sed et enim dui consectetur ante dui nec\n\n817Faucibus. orci pretium sem. aliquam nunc sagittis pretium dolor dui sit condimentum purus\n\n818Fames enim hendrerit ac elit. vitae ligula sit velit. eget ligula Fusce massa,\n\n819Bibendum, volutpat ante libero nunc orci, fames metus Vivamus\n\n820Ac velit. ac eget massa ac consectetur et tincidunt. fringilla orci,\n\n821Felis. finibus et pharetra elementum Fusce vel\n\n822Tortor condimentum sagittis et pharetra hendrerit elementum Mauris orci dui sit\n\n823Tortor elit. ac rutrum ac primis\n\n824Consectetur primis ac ligula ac vitae In molestie\nLorem tortor\nLorem Mauris fames\n\n825Finibus neque. posuere tortor libero iaculis. libero efficitur ut\n\n826Faucibus. viverra malesuada finibus massa,\n\n827Et Sed aliquam scelerisque molestie ut aliquam felis. Sed elit. posuere eget\n\n828Neque. in finibus quis, orci, tortor libero ante primis Interdum scelerisque eget Mauris vitae orci\n\n829\nLorem tortor Sed vitae ante elit. nunc elementum et est in, Sed metus ut\n\n830Malesuada tincidunt. eget dui velit. consectetur In orci, consectetur volutpat pretium massa\n\n831Iaculis. enim sem. condimentum elementum consectetur eget sagittis in finibus molestie\n\n832Molestie Fusce viverra Ut elit. dolor nec lorem metus ac semper elit. lorem vel Interdum\n\n833Ipsum dui massa, scelerisque dui neque. adipiscing malesuada\n\n834Amet, ac semper eget felis. eget sit Duis ipsum tortor Sed velit. sit finibus quis,\n\n835Ipsum efficitur elementum in, viverra molestie consectetur ante\n\n836Scelerisque tincidunt. scelerisque elit. faucibus. rutrum elit. ante aliquam aliquam velit. nec sem. in primis\n\n837Massa Ut ac hendrerit Ut bibendum, eget\n\n838Ut iaculis. primis Sed consectetur enim fames elementum consectetur\n\n839Pretium amet, semper sagittis\nLorem ligula pretium elementum ante ac ipsum ipsum Duis in malesuada\n\n840Pharetra et neque. ut ipsum faucibus. Interdum elementum tortor ante Interdum rutrum\n\n841Semper. elit. ipsum semper primis\n\n842Elit. In ante semper primis ipsum adipiscing et ac massa velit. hendrerit ac malesuada quis,\n\n843Et hendrerit In velit. in primis orci libero ac Interdum sem.\n\n844Vivamus neque. faucibus. Interdum ante adipiscing fames Sed ipsum efficitur purus aliquam ligula est\n\n845Quis, in, tortor elit. elit. ac est Vivamus sit elementum Vivamus in, massa\n\n846Purus tincidunt. purus ligula eget pretium pharetra est\n\n847Pretium\nLorem et ac in, adipiscing semper. faucibus. ipsum aliquam posuere sit\n\n848Faucibus. Fusce ac viverra\nLorem eget Fusce ante finibus metus ac Mauris dui\n\n849Viverra aliquam massa dolor Interdum malesuada vitae\n\n850Ut sagittis in vitae orci ante faucibus. posuere dolor\nLorem in massa ac\n\n851Aliquam amet, pretium nec metus ac et volutpat elit. efficitur nunc condimentum Interdum libero\n\n852Posuere ligula efficitur malesuada consectetur finibus\n\n853Ut ac ut vel enim finibus et posuere vitae\n\n854Finibus quis, et dolor massa ut Vivamus felis. iaculis.\n\n855Rutrum ipsum nunc viverra ut consectetur felis. Integer ac semper ac hendrerit neque.\n\n856Consectetur malesuada pharetra molestie ut in semper.\nLorem sit massa Vivamus et aliquam ligula dui\n\n857Neque. scelerisque massa, tortor adipiscing eget primis Fusce\n\n858Finibus eget in neque. Integer Integer sit massa, malesuada posuere\n\n859Elit. ac massa, nunc quis, Fusce orci, Interdum ut\n\n860Ut Fusce consectetur purus sem. massa consectetur molestie tortor purus ante\n\n861Dolor semper efficitur ipsum semper. nunc bibendum, lorem\n\n862Viverra velit. in semper nec vitae scelerisque faucibus. adipiscing sem. volutpat\n\n863Ipsum finibus tortor tincidunt. viverra ac Ut\n\n864Tincidunt. Vivamus Integer Vivamus eget vitae in volutpat viverra Sed ut scelerisque elit. Duis ante\n\n865Amet, ac dui pharetra ut malesuada neque. ligula consectetur in\n\n866Lorem lorem rutrum Sed felis. volutpat pharetra lorem posuere felis. tincidunt. in, tincidunt. libero\n\n867Felis. Ut ac pretium pharetra ac scelerisque malesuada consectetur amet,\n\n868Felis. consectetur ipsum Vivamus consectetur sagittis massa ipsum\nLorem est hendrerit semper.\n\n869Et eget ac hendrerit Sed efficitur ipsum molestie Ut\n\n870Dolor ligula ac ante\nLorem fames semper. molestie vel est Fusce aliquam\n\n871Velit. in rutrum molestie fringilla enim efficitur sit nunc\n\n872Hendrerit efficitur viverra vel libero Mauris eget ac\n\n873Nec neque. ante libero rutrum posuere tincidunt. velit. sem. et elit.\n\n874Fames scelerisque purus condimentum aliquam ipsum faucibus. fringilla condimentum libero tortor hendrerit Ut\n\n875Vivamus ut et Mauris ipsum bibendum, libero consectetur In ante\n\n876Est tincidunt. aliquam orci, viverra nec efficitur scelerisque orci, ante\nLorem purus nec nec\n\n877Ante purus adipiscing ante elementum\nLorem in condimentum condimentum pretium ipsum\n\n878Ac scelerisque semper vitae in, bibendum, eget semper. amet, Mauris quis, faucibus. elit.\n\n879Efficitur in eget felis. tortor elementum primis\n\n880Ut Fusce pharetra faucibus. in faucibus. sagittis et semper posuere fames Integer consectetur\n\n881Vivamus consectetur Duis pretium semper. metus in nec Duis hendrerit in dui eget\n\n882Rutrum felis. adipiscing amet, ipsum viverra fringilla finibus Vivamus eget et et bibendum,\nLorem sagittis\n\n883Scelerisque ante primis Interdum condimentum ante condimentum semper In fringilla in finibus felis. et nunc\n\n884Malesuada Vivamus est ligula fames Duis dolor ac\n\n885Malesuada consectetur bibendum, sit Ut Ut\n\n886Integer primis et felis. neque. ante ac ante condimentum\n\n887Elementum efficitur condimentum bibendum, hendrerit in, et in\n\n888Ante finibus Sed elementum ac consectetur Sed lorem scelerisque iaculis.\n\n889Fringilla nunc tortor condimentum eget massa faucibus. sem. bibendum, ac sem. nunc primis\n\n890Sit in, elementum aliquam elit. ac bibendum, velit. volutpat malesuada scelerisque\n\n891Fringilla condimentum faucibus. ante quis, orci, felis. nec Integer eget tincidunt.\n\n892In ligula aliquam Vivamus orci, Vivamus Fusce aliquam faucibus. eget\n\n893Eget et consectetur rutrum condimentum Vivamus tincidunt. Mauris ut rutrum in, felis. semper dolor ipsum\n\n894Sit eget viverra est bibendum, libero bibendum, ac ante in Interdum Fusce sagittis faucibus.\n\n895Mauris Integer primis ante sem. quis, eget ante consectetur ut\n\n896Purus massa, consectetur in vel et\n\n897In vitae efficitur quis, ipsum Interdum ante lorem Vivamus consectetur ante\n\n898Ut vitae et massa et elit. in vel pretium primis enim ipsum in massa orci,\n\n899Efficitur finibus eget efficitur pharetra scelerisque ut dui\n\n900Nec vitae aliquam ligula est consectetur sit sagittis\n\n901Primis ac pretium ac dui vitae vel lorem pharetra\n\n902Sit tincidunt. ipsum lorem quis, lorem neque. aliquam posuere massa, felis. Fusce ac ligula\n\n903Fringilla velit. molestie in massa, eget semper\n\n904Elit. dui molestie ut eget ac efficitur ac orci posuere efficitur tortor\n\n905Ut elit. elit.\nLorem ac rutrum Vivamus ac ante molestie\n\n906In, ut in semper Interdum massa fames amet, velit. quis, quis,\n\n907Posuere sem. elit. eget enim Mauris in semper. Ut\n\n908Nunc lorem ante ante condimentum bibendum, sem. finibus massa, libero\n\n909Sem. orci condimentum Mauris malesuada\n\n910Iaculis. dolor faucibus. purus massa, metus orci Fusce et ac nunc\n\n911Faucibus. felis. lorem malesuada fringilla ante viverra sem. in eget scelerisque ipsum in In ut\n\n912Sit Integer in viverra fringilla\n\n913Fames ac nunc sit volutpat\n\n914\nLorem efficitur ipsum scelerisque nunc in sit\n\n915Orci, et vel volutpat posuere dui elit. In sit metus Vivamus\n\n916Lorem condimentum purus condimentum consectetur ac Mauris Sed\n\n917Bibendum, in Duis sagittis Integer enim scelerisque metus amet, ipsum elit.\n\n918Fringilla consectetur dui tortor quis, hendrerit rutrum dui Fusce aliquam ac massa est\n\n919In sagittis ante ut Fusce Vivamus\n\n920Massa libero nunc sagittis in eget neque. Ut in\nLorem\n\n921Ante hendrerit Ut velit. volutpat amet, est ut ac ut Duis Vivamus\n\n922Semper. in, ante neque. rutrum enim adipiscing sagittis pretium in elementum ut consectetur et Integer\n\n923Condimentum vitae ante Vivamus hendrerit efficitur orci, malesuada bibendum, ipsum vitae\n\n924Malesuada ac Mauris massa consectetur ipsum sagittis pretium\n\n925Semper. sem. ante pharetra dui ligula posuere nunc massa elementum\n\n926Et ut libero orci, Interdum ipsum ac neque. ut\n\n927Massa\nLorem Duis et est Fusce vel volutpat ligula\n\n928Interdum bibendum, ante ac massa, viverra et tortor bibendum, et eget sit viverra efficitur efficitur\n\n929Est Fusce In Duis bibendum, purus\n\n930Est metus ac neque. scelerisque Vivamus\n\n931Neque. eget vitae in tortor vel orci vel\n\n932Quis, malesuada felis. faucibus. felis. eget ac massa est velit. faucibus. nec\n\n933Pretium nec ut vitae finibus ante\n\n934Malesuada ut ipsum eget pharetra nunc Ut condimentum\n\n935Vel elementum purus condimentum vel condimentum in eget efficitur elementum ipsum viverra vitae ac Ut\n\n936Ante enim nec purus eget semper. metus massa, Sed hendrerit elit. pharetra malesuada Vivamus\n\n937Fusce et posuere Integer\nLorem felis. est volutpat fames efficitur Interdum\n\n938In elit. pharetra ante in massa, ante in, pretium ac primis\n\n939Vivamus scelerisque pretium ut primis in quis, fames ac ut malesuada pretium In\n\n940Mauris in Vivamus pharetra et nunc\n\n941Adipiscing in pretium sagittis in in, rutrum\nLorem et ut elit.\n\n942Fames felis. lorem ante orci, vel\n\n943Mauris adipiscing neque. amet, hendrerit pharetra lorem libero Sed est semper. ante primis\n\n944Volutpat sagittis et ac libero nec quis, eget ac purus velit. elementum tortor ac libero\n\n945Et adipiscing ac viverra in\n\n946Ante faucibus. Integer in purus tincidunt. Interdum in\n\n947Pharetra ante ipsum Integer ligula ut fames sagittis consectetur ac amet, adipiscing semper. vel in\n\n948Semper vel ipsum semper sit Interdum eget ac sagittis est nec\n\n949Pharetra rutrum aliquam Fusce ligula ipsum velit. semper. quis, consectetur Mauris\n\n950Ligula et in ipsum rutrum ut sit ut\n\n951Elit. dui massa ac nunc dolor Duis in hendrerit\n\n952Condimentum eget rutrum in molestie sit Interdum efficitur fringilla elit. ac ipsum fringilla\n\n953In, bibendum, elementum et ac primis rutrum ante ac in, pretium ac\n\n954Ut vel neque. posuere ante velit. Mauris In hendrerit\n\n955Aliquam in finibus in malesuada velit.\n\n956Efficitur Integer rutrum eget Duis consectetur finibus\n\n957Nunc condimentum tincidunt. aliquam dui eget lorem efficitur ipsum\n\n958Tortor nunc Vivamus rutrum massa, enim vitae efficitur nec felis. rutrum est massa\n\n959Malesuada massa pharetra posuere ligula iaculis. rutrum orci, elementum pretium rutrum\n\n960Amet, elementum nunc consectetur purus viverra ipsum dolor pharetra ut faucibus. dui in in\n\n961Tortor et et Duis elementum\nLorem\n\n962Scelerisque neque. in, faucibus. in malesuada felis. in primis Ut eget\n\n963Ut dui elit. fames molestie consectetur adipiscing in felis. dui elit. Mauris condimentum massa massa\n\n964Ut libero pharetra ac ut velit. pretium rutrum enim malesuada enim\n\n965Ante eget dolor ut aliquam volutpat nunc nunc ipsum felis. ante ipsum\n\n966Consectetur Duis ac fames ac massa consectetur fringilla scelerisque ante\n\n967Ipsum in, lorem in elit. ut Fusce est\n\n968Duis in et in neque. semper semper. elit.\n\n969Semper. orci, elit. tortor malesuada\n\n970Mauris in aliquam volutpat hendrerit\n\n971Bibendum, ipsum faucibus. ac rutrum ut scelerisque eget ligula vel\n\n972In In sagittis nec ut pretium orci, Mauris et ut ligula vel\n\n973Nec consectetur Sed elementum vitae\n\n974Efficitur pretium iaculis. lorem elementum volutpat massa, libero volutpat faucibus. Integer\n\n975Pharetra scelerisque ac hendrerit sem. semper. pretium dolor iaculis. libero aliquam in\n\n976Malesuada condimentum ut ante fringilla Vivamus nec\n\n977Vivamus sit felis. nec libero in ante in quis, condimentum sem. ipsum vel\n\n978Ac nunc purus molestie nec ac in velit. in eget eget adipiscing primis\n\n979Vitae fames ipsum eget in ac pretium enim enim semper. nunc\n\n980Fames vel vitae Interdum ante tortor\n\n981Et scelerisque consectetur elit. elementum eget ligula faucibus. viverra sit massa, quis, viverra\n\n982Ut fames Interdum in ante metus efficitur\n\n983Felis. In fringilla molestie molestie felis. elit. primis velit. consectetur fames efficitur orci In\n\n984Finibus Interdum tortor velit. quis, efficitur aliquam in, eget sit ligula\n\n985Rutrum ante dolor ante neque.\n\n986Et ipsum amet, Ut sem. nec fames efficitur in eget\n\n987Felis. efficitur ac volutpat pretium ac et ipsum posuere consectetur\n\n988Finibus finibus dui iaculis. libero tincidunt. Sed ipsum orci,\n\n989Tortor hendrerit hendrerit Vivamus massa primis rutrum\n\n990Ac ut Ut semper sagittis orci vitae consectetur semper. orci, semper ante\n\n991Vivamus eget et ipsum\nLorem eget volutpat elementum\n\n992Vel iaculis. semper. condimentum orci semper. purus eget pharetra consectetur fringilla ante\n\n993Iaculis. et fringilla Integer in, Sed massa, efficitur semper. pretium Interdum bibendum, efficitur\n\n994Ante posuere sit metus amet, rutrum in massa,\n\n995Purus vitae ut Mauris Vivamus in metus et ac in efficitur Integer\n\n996Mauris posuere est hendrerit viverra Duis pretium\n\n997Posuere dolor fringilla elit. semper Fusce felis. ac Sed pretium ac libero iaculis. quis, et\n\n998Semper. felis. ut lorem orci consectetur Interdum velit. ut scelerisque Sed massa consectetur enim aliquam\n\n999Ante In pharetra enim amet, est fringilla ipsum condimentum ante in consectetur\n\n1000Lorem libero et felis. finibus fames in est tortor\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |",
+    "searchText": "Dropdowns\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nDropdowns\nButtonDropdown\nSimpleButtonDropdown\n\nSingleButtonDropdown\n\nWrapper component for ButtonDropdown, kept for backwards compatibility.\n\nSplitButtonDropdown\n\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variantsText dropdown\n\nCustom dropdowns for filter tagsTag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labelsActive\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nSingleButtonDropdown\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | \"\" | Displayed button title. |\n| items | Array of Objects | [] | Details see above for the ButtonDropdown |\n| disabled | Boolean | false | Disables every entry on the title list item. |\n| className | String | — | Additional classes to be set on the dropdown-submenu element. |\nCustom Dropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nDropdown using React Portal\nA typical use case for ButtonDropdown using portal is when a parent component has an overflow: hidden or z-index style, but you need the dropdown to visually “break out” of its container.\nNormal Button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Duis efficitur felis. Mauris Sed Vivamus elementum sit tortor purus et\n\n2Pharetra et posuere Mauris massa,\n\n3Eget est metus elit. felis. bibendum, nunc orci, vel iaculis. orci semper.\n\n4Bibendum, enim massa consectetur primis in dui nec dolor purus ante aliquam dolor\n\n5Orci, enim consectetur felis. vel dui Sed\n\n6Orci ipsum Integer sagittis in\n\n7Sit ipsum scelerisque posuere malesuada Interdum fames consectetur Duis sagittis dolor\n\n8Efficitur Ut consectetur ligula purus tincidunt. elit. vel\n\n9Fringilla volutpat eget sem. efficitur vel rutrum iaculis. nec orci, neque. felis. malesuada ac ante\n\n10Tincidunt. consectetur ac adipiscing sem. in, ac ipsum neque. metus\n\n11\nLorem efficitur ac hendrerit in eget Mauris finibus velit. elit. primis Mauris pretium Integer efficitur\n\n12Ipsum est lorem tincidunt. vel vel enim molestie sit semper consectetur et\n\n13In, sagittis ac metus\nLorem iaculis. aliquam\n\n14Fringilla lorem\nLorem adipiscing in, Vivamus\n\n15Mauris semper volutpat faucibus. ut quis,\n\n16In elementum orci orci, faucibus. purus eget iaculis.\n\n17Lorem fames purus ipsum dolor vel et ac\n\n18Semper orci orci, ipsum est ipsum\n\n19Aliquam bibendum, et in, ante fames rutrum quis, molestie volutpat massa, semper\n\n20Rutrum fames posuere purus\nLorem ante ut\n\n21Semper. fames pretium neque. Sed fames quis, in, consectetur\n\n22Massa, ante est ligula efficitur iaculis. ut quis,\n\n23Felis. elit. ut dolor consectetur purus massa et consectetur orci, ac Mauris primis Mauris\n\n24Dolor ante ante vitae in,\n\n25Nunc ante sit ac efficitur In consectetur Sed semper vitae fringilla\n\n26\nLorem Mauris enim Mauris In amet,\n\n27In velit. amet, fames condimentum sem.\n\n28Sagittis elit. ac ipsum finibus ut orci\n\n29Ante pretium orci ac eget vitae in tincidunt. consectetur in\n\n30Vitae aliquam ligula iaculis. amet, nunc Ut iaculis. fringilla bibendum, elementum\n\n31Iaculis. nec neque. molestie In semper In volutpat dui libero consectetur ac ac\n\n32Sem. vel molestie nunc purus semper vitae orci ipsum faucibus. in, ante rutrum\n\n33Ut ac fringilla orci ac primis fringilla\n\n34Eget eget ante Ut enim nunc amet, purus efficitur ac sem. ante condimentum\n\n35Tortor fames consectetur ac fringilla elementum ac pretium felis. in condimentum vitae massa\n\n36Quis, et in pharetra fames nec orci,\n\n37Posuere quis, rutrum sagittis et hendrerit Interdum adipiscing ipsum velit. ipsum tincidunt.\n\n38\nLorem et nunc Interdum Ut Vivamus Interdum et rutrum in molestie Ut ipsum\n\n39Ante tortor eget velit. malesuada pretium consectetur elementum lorem ante lorem felis. ante quis, Integer\n\n40Condimentum ac posuere consectetur felis. Mauris nec Ut\n\n41Aliquam eget vitae efficitur Fusce orci sit elit. eget primis amet, eget tortor Sed\n\n42Ante ac in, tincidunt. viverra ipsum tortor est In dui lorem Vivamus orci, molestie\n\n43Ac dui fames\nLorem et\nLorem aliquam primis in ac sit\n\n44Consectetur malesuada orci, Duis ipsum felis. Ut et enim consectetur metus Vivamus ipsum\n\n45Fames malesuada sit nec dolor In orci vel Interdum metus in semper. consectetur\n\n46Lorem nunc efficitur dolor elementum ac ante amet, aliquam ligula et hendrerit velit.\n\n47Massa Interdum est pretium Interdum in adipiscing hendrerit consectetur iaculis. pharetra\n\n48Primis elementum aliquam vitae Ut Fusce Duis\n\n49Lorem in, consectetur elit. lorem massa, faucibus.\n\n50Pretium in, consectetur posuere tortor ut\n\n51In vitae purus ac pretium molestie ante ante ac eget iaculis. eget\n\n52Pharetra semper Mauris est finibus semper. eget massa, sit massa elit. Interdum tincidunt. Mauris\n\n53Eget Integer nunc metus ac Interdum vel ac fringilla consectetur\n\n54Enim ac libero molestie In\n\n55Consectetur est amet, massa, eget viverra pharetra ac in tincidunt. massa\n\n56Efficitur lorem elit. bibendum, neque. ac\n\n57Aliquam dui rutrum iaculis. sem.\n\n58Consectetur Ut eget est Fusce pretium hendrerit nunc purus Fusce Duis\n\n59Interdum adipiscing efficitur libero Interdum eget neque. ut purus in finibus ut eget\n\n60Efficitur nunc Ut aliquam finibus malesuada massa, nec ut tortor dolor libero In metus scelerisque\n\n61Et tortor Vivamus faucibus. eget dolor efficitur dui in\n\n62Consectetur Vivamus faucibus. velit. in Ut ac in et orci fames\n\n63Ac Duis Mauris primis in enim scelerisque efficitur\n\n64Adipiscing molestie neque. ac ante ante consectetur ac ipsum In metus\n\n65Condimentum orci, Duis Integer purus sagittis\n\n66Purus finibus pharetra vitae semper in ipsum scelerisque nunc finibus amet, volutpat enim\n\n67Elit. purus massa, velit. Ut bibendum, sem. hendrerit nec velit. Integer metus\n\n68Sed vitae massa efficitur condimentum Mauris quis,\n\n69Libero est neque. scelerisque sagittis massa, metus nec velit. ligula et ante\n\n70Pharetra Ut et vel molestie Fusce orci\n\n71Fusce tincidunt. Ut massa fames ut elit.\n\n72Faucibus. aliquam nec primis vitae condimentum in in Ut molestie\n\n73Duis est eget metus semper. molestie dui semper\n\n74Posuere posuere molestie velit. metus fames ac semper vel et eget Vivamus nec faucibus.\n\n75Massa, ac posuere nec ipsum eget pharetra dolor\nLorem sit efficitur ut tincidunt.\n\n76Efficitur semper tincidunt. hendrerit ac dui finibus condimentum\n\n77Ac condimentum scelerisque sem. ipsum dui\n\n78Orci in, pretium ante molestie posuere tincidunt. elit.\n\n79Interdum Duis Integer pharetra felis. metus Vivamus tincidunt. elementum Vivamus viverra molestie efficitur\n\n80Posuere condimentum et fames est semper. fringilla aliquam elementum vitae in, et Sed\n\n81Elit. adipiscing condimentum ipsum et sagittis enim metus efficitur pharetra Ut\n\n82In ligula in primis nunc Sed adipiscing semper In faucibus. purus molestie molestie elit. iaculis.\n\n83Consectetur vel orci bibendum, ipsum consectetur semper consectetur Duis\n\n84Neque. Fusce in faucibus. condimentum rutrum fames lorem ac ipsum metus et ut dolor\n\n85Elit. eget efficitur bibendum, ut malesuada aliquam In condimentum purus\n\n86Duis est efficitur dolor rutrum elit. neque. scelerisque ligula nunc ante\n\n87Et ante tincidunt. vitae consectetur ut posuere eget efficitur in ac aliquam\n\n88Velit. neque. Integer vel nec in in Ut Integer massa sit\n\n89Malesuada sagittis volutpat felis. Fusce felis. Vivamus\n\n90Massa, elementum et semper ac bibendum, tincidunt. ipsum\n\n91Condimentum ante purus ante sit Mauris ante in semper. nunc Sed nec et enim in,\n\n92Vitae amet, amet, consectetur orci, tortor lorem ac malesuada Sed\n\n93Elementum hendrerit Ut consectetur finibus ante efficitur hendrerit in consectetur condimentum\n\n94Amet, ipsum ac malesuada in Interdum efficitur semper\n\n95Sed fames ipsum metus sagittis fringilla dui sagittis condimentum ac\n\n96Dolor molestie molestie efficitur viverra\n\n97Ipsum purus eget In metus fames ac\nLorem Duis Vivamus ac Duis neque. enim\n\n98Sit consectetur est ut iaculis. velit. quis, felis. nunc fringilla ante purus\n\n99Consectetur purus Integer tortor posuere consectetur pretium pretium ut dui\n\n100Nunc velit. primis Sed eget Ut\n\n101Libero ut in elementum ante orci, elit. pharetra\n\n102Quis, eget fringilla in, Mauris ut ac ac faucibus. ac orci neque.\n\n103Interdum eget posuere orci, in tortor et volutpat\nLorem Integer purus tincidunt.\n\n104Dui Interdum pharetra libero efficitur aliquam Ut efficitur Vivamus enim semper orci,\n\n105Hendrerit faucibus. ac aliquam orci massa est\n\n106Enim est elit. Duis pretium nec ac malesuada\n\n107Felis. ac Sed et elementum vitae Vivamus tincidunt. est Vivamus amet, orci,\n\n108In vitae et massa ac massa, metus ante elit. ipsum finibus\n\n109Semper eget dolor in, felis. Ut in consectetur elit. sem. adipiscing est libero ipsum ipsum\n\n110Orci, Mauris metus fringilla finibus Vivamus posuere aliquam sagittis hendrerit bibendum, posuere nunc vitae\n\n111In, condimentum ut adipiscing in efficitur scelerisque posuere faucibus. dui sem. in efficitur faucibus.\n\n112Ut ut Integer eget Vivamus rutrum posuere\n\n113Ut ac Interdum pharetra neque. molestie ante hendrerit semper.\n\n114Vitae massa, In ipsum sagittis vitae scelerisque lorem\n\n115Pretium malesuada fringilla elit. in finibus semper. faucibus.\n\n116Consectetur est vitae fames fames\n\n117In pharetra elit. sit aliquam scelerisque\n\n118Quis, sagittis condimentum fringilla faucibus. elit. ac semper. hendrerit\nLorem finibus elit. ante molestie ac\n\n119Ante In ac neque. dolor Mauris ante Fusce consectetur rutrum Interdum sagittis Integer consectetur ut\n\n120Consectetur bibendum, bibendum, ac pharetra elementum\n\n121In hendrerit ac sagittis quis, elementum nunc lorem fringilla elit. Duis orci, faucibus. eget semper.\n\n122Felis. Fusce Fusce primis felis. malesuada ac massa volutpat ut semper. viverra ante elit. ante\n\n123Fusce purus ante viverra condimentum In ante ac molestie Integer\n\n124Vivamus lorem nunc volutpat orci, Mauris ipsum eget vel dui quis,\n\n125Vitae Vivamus sagittis adipiscing metus consectetur tortor dui metus\n\n126Nec ipsum enim sem. et consectetur eget massa, nec ac tincidunt. elit. in, in\n\n127Vel sit tortor massa primis ac malesuada\n\n128Volutpat ut in neque. massa,\n\n129Viverra nunc tincidunt. consectetur amet, efficitur et amet, finibus massa pretium sagittis ipsum\n\n130Finibus bibendum, ligula consectetur hendrerit aliquam\n\n131Massa ipsum Mauris consectetur scelerisque Vivamus semper massa consectetur ac ligula ligula\n\n132Ante orci ipsum primis fames ac molestie ut pretium finibus felis.\n\n133Sed Sed\nLorem fringilla consectetur velit. efficitur est ac eget consectetur neque.\n\n134Vitae iaculis. ante eget massa, faucibus. orci primis dui primis aliquam faucibus.\n\n135Tortor aliquam consectetur lorem malesuada Duis pharetra velit. ac ante molestie\n\n136Et In eget volutpat ac elit. posuere elit.\n\n137Consectetur vitae primis molestie scelerisque molestie\n\n138Ipsum ac eget felis. orci in pharetra ac ante iaculis. vel\n\n139Neque. et est in ac Mauris In velit. volutpat pharetra\n\n140Fringilla fames enim volutpat lorem massa, rutrum enim pharetra\nLorem semper. quis, condimentum fames massa,\n\n141Sed Vivamus semper ante massa, in, malesuada fames hendrerit orci metus Integer ac\n\n142\nLorem ac eget condimentum faucibus. metus primis ac purus nec iaculis. eget sem.\n\n143Massa, ut viverra In et Integer consectetur purus Mauris orci, tortor libero sem.\n\n144Enim consectetur Ut dolor ante pharetra nec finibus elit. ac ante Duis finibus quis,\n\n145Malesuada ac enim quis, Sed\n\n146Semper. iaculis. volutpat sit sem. dolor viverra vitae quis, eget vitae rutrum sagittis\n\n147Primis ipsum felis. sagittis primis\n\n148In, enim lorem lorem faucibus. elementum tincidunt. Sed metus orci ante ut semper. tincidunt.\n\n149Ante fringilla aliquam sit ac molestie Mauris posuere adipiscing ac finibus semper. ipsum\n\n150Massa, ante adipiscing sem. efficitur et ac in est\n\n151Elementum eget semper. sagittis in, in in, Duis iaculis. rutrum efficitur\n\n152In pharetra ante felis. purus\n\n153Dui Fusce elit. molestie\nLorem malesuada eget aliquam vel in, semper\n\n154Mauris Integer Integer semper. hendrerit enim condimentum posuere\n\n155Mauris fringilla dolor velit. tortor metus scelerisque libero\n\n156Sem. est neque. hendrerit volutpat aliquam efficitur iaculis. ac\n\n157Hendrerit dolor ante viverra velit. ac consectetur hendrerit elementum posuere sem. bibendum, scelerisque\n\n158Sem. ac elit. sit tincidunt. pharetra\n\n159Finibus volutpat eget adipiscing consectetur faucibus.\n\n160Ac Vivamus rutrum tortor consectetur malesuada nunc\n\n161Adipiscing faucibus. Sed In fames ante pretium velit. ut purus massa\n\n162Ut consectetur ut malesuada adipiscing efficitur massa\n\n163In pretium amet, bibendum, ut iaculis. adipiscing in ac hendrerit semper ante Integer\n\n164In fames elit. enim elementum sit purus Integer Vivamus finibus vitae eget\n\n165Interdum iaculis. ut dui ante ut nec amet, condimentum\n\n166Nec Fusce semper. metus fames ipsum in tincidunt. et scelerisque in\n\n167Amet, ante et finibus nunc in Integer felis. massa, massa, bibendum, faucibus. massa, in et\n\n168Consectetur viverra malesuada libero et semper\n\n169Dolor Mauris iaculis. amet, in iaculis. et dolor aliquam metus est orci neque.\n\n170Ac elit. consectetur libero vel malesuada In ut\n\n171Semper. Interdum malesuada Sed eget elementum primis vel Fusce\n\n172Quis, massa ante consectetur ante dui elit. iaculis. fames ac aliquam\n\n173Metus sagittis efficitur In felis. rutrum ante\n\n174Vivamus elit. eget nec ipsum scelerisque aliquam quis, et orci, semper elit.\n\n175Aliquam enim fringilla felis. efficitur nec finibus tincidunt. et Integer ut enim quis,\n\n176Fames Interdum massa elit. elementum amet, Sed semper quis, molestie consectetur ante sit orci,\n\n177Eget ante libero metus hendrerit hendrerit Vivamus scelerisque felis. volutpat ac et efficitur consectetur\n\n178Sed ipsum condimentum tortor molestie eget Vivamus ut hendrerit molestie\n\n179Semper. ac nunc Duis ut in\n\n180Eget bibendum, ligula enim dui velit. bibendum, sagittis aliquam ipsum\n\n181Est massa, Fusce dolor ac amet,\n\n182Orci, nec condimentum libero condimentum elit. sem. velit. in Ut hendrerit\n\n183Ante purus semper. massa neque. efficitur et neque. Sed fringilla eget elementum efficitur finibus Sed\n\n184Viverra quis, scelerisque eget consectetur semper in,\n\n185Metus quis, lorem ipsum ante consectetur ac\n\n186Fusce efficitur pretium enim In ut massa\n\n187Semper. nec vel Fusce eget massa, felis. velit. consectetur fringilla\n\n188Ipsum aliquam in, nunc ipsum in, libero consectetur eget\n\n189Tortor in orci viverra tincidunt. in rutrum primis eget efficitur\n\n190Volutpat dui scelerisque in Fusce\n\n191Purus Integer In dolor nec ut ante Duis ante molestie ante ipsum consectetur fringilla\n\n192Ligula Ut Fusce orci molestie malesuada tortor\n\n193Vivamus in nunc consectetur vitae Mauris semper in fringilla nunc Duis iaculis. sem. eget\n\n194Velit. sem. ipsum nec lorem metus volutpat ante amet, dui et\n\n195Est primis bibendum, fames consectetur vel volutpat rutrum dolor vel\n\n196Ac Sed massa in, pretium enim tincidunt. Integer Sed\n\n197Est ligula Sed orci, ac elit. molestie Interdum tincidunt. ac ac primis\n\n198Amet, velit. ante felis. velit. condimentum ut in elementum Ut dolor bibendum, Vivamus iaculis. enim\n\n199Dolor lorem neque. adipiscing bibendum, hendrerit ac felis.\n\n200Et Duis felis. ante amet, molestie\n\n201Molestie ac molestie nunc molestie bibendum, nunc\n\n202Iaculis. eget elit. hendrerit libero massa, In ut semper. condimentum felis. aliquam elit.\n\n203Volutpat molestie velit. et nunc fringilla et elit. in libero consectetur purus Duis eget finibus\n\n204Posuere dui massa, semper. rutrum\n\n205Ac ut massa lorem in, efficitur quis,\n\n206Condimentum Sed orci consectetur Integer bibendum, Vivamus metus vitae pretium scelerisque Fusce ligula adipiscing\n\n207Purus In iaculis. malesuada in Sed molestie Vivamus consectetur consectetur Interdum in, semper. faucibus. orci\n\n208\nLorem tortor et dui bibendum, consectetur malesuada ac ac massa et\n\n209Ut bibendum, quis, lorem velit. lorem enim\n\n210Pretium ut amet, In bibendum, ut Mauris primis aliquam pretium orci dui\n\n211Ante orci fames eget bibendum, Duis et\n\n212Sem. dui efficitur eget tincidunt. finibus viverra eget orci ligula ante Vivamus faucibus. tincidunt.\n\n213Eget et ante condimentum Fusce molestie semper. condimentum condimentum vitae condimentum\n\n214Condimentum tortor vitae Interdum nunc elit. Integer posuere lorem\n\n215Tortor libero Interdum ante lorem faucibus. consectetur ipsum vitae eget sit Ut ante ante enim\n\n216Iaculis. In efficitur efficitur fringilla elementum\n\n217Ac efficitur felis. posuere Ut ante finibus elit. ante condimentum quis, scelerisque est\n\n218Ut viverra elementum elit. nec In Sed iaculis. dui\nLorem libero tincidunt. efficitur primis\n\n219In ac Vivamus nunc eget condimentum Ut in bibendum, posuere in Ut amet, ac metus\n\n220Sem. ipsum in aliquam condimentum nec in ac ut Fusce\n\n221Ac lorem adipiscing adipiscing Integer Fusce primis enim Sed ante\n\n222Velit. libero in est rutrum elit. In amet, Sed ac\n\n223In faucibus. orci ante eget In sit et sagittis\n\n224Metus eget tortor quis, est dui Mauris ipsum\n\n225Pharetra sem. ac tincidunt. scelerisque fringilla metus Mauris Fusce ipsum ac eget fringilla\n\n226Quis, massa sem. eget aliquam in\n\n227Pharetra ut dolor eget Mauris Ut vel amet, Integer consectetur molestie purus\n\n228Semper sagittis efficitur\nLorem eget aliquam\n\n229Pharetra dui et viverra rutrum\nLorem elementum ac sem. dui ligula sit fringilla sagittis\n\n230Ut elit. elit. sit dui Ut sit consectetur Ut posuere ac volutpat\n\n231Molestie Mauris primis in, et faucibus.\n\n232Consectetur in, Sed amet, tincidunt. neque. ipsum bibendum,\n\n233Orci, in et felis. ligula ut rutrum bibendum, Duis scelerisque in\n\n234In est elit. Fusce fames felis. pharetra enim\n\n235Sem. nunc Vivamus ac volutpat sem. in, lorem massa posuere\n\n236Est velit. sagittis pretium efficitur enim eget faucibus. Mauris\n\n237Orci, viverra in viverra sagittis vitae Ut hendrerit faucibus. ac bibendum, malesuada\n\n238Semper. neque. scelerisque In tortor ante semper. molestie bibendum, Interdum elementum efficitur fringilla fames\n\n239Hendrerit amet, Integer pharetra ac condimentum Mauris\n\n240In fames eget neque. massa iaculis. bibendum, in et in, est dolor ac\n\n241Rutrum ante massa ipsum massa pharetra ante massa, lorem ante purus sit primis ac\n\n242Ligula faucibus. dui ipsum ante efficitur dolor efficitur primis ac semper. in, velit.\n\n243Primis Interdum pharetra semper neque. scelerisque primis purus metus fringilla consectetur\n\n244Amet, Sed sit pharetra elementum pharetra ante libero sagittis in, viverra in\n\n245Fames ut lorem fames ac neque. neque. massa,\nLorem vitae\n\n246Enim tortor est Interdum ac ante elementum dui ipsum Sed Ut massa,\n\n247Nec aliquam et Vivamus semper. hendrerit vel ac In ante pretium tortor orci, massa,\n\n248Sed nec consectetur ut elit. consectetur dui In\n\n249Duis consectetur Ut nunc est tortor efficitur elit.\n\n250Sit in eget et tortor fames\n\n251In viverra felis. tortor malesuada semper elementum rutrum in\n\n252Fringilla nec orci, purus ut ante in, amet, orci,\nLorem efficitur fames ut\n\n253Ut iaculis. ipsum enim\nLorem ac orci, sem. metus finibus in, Duis\n\n254In ante iaculis. et massa eget condimentum ligula bibendum,\n\n255Interdum molestie felis. adipiscing vel\n\n256Malesuada sem. Vivamus dui semper.\n\n257Pharetra ante consectetur volutpat et dolor eget Ut lorem viverra ac\n\n258Pretium bibendum, bibendum, dui sagittis Vivamus molestie ac purus elementum et\n\n259Ante ligula Vivamus Mauris ut Duis adipiscing\n\n260Sed efficitur ac ac in,\n\n261Nunc sem. primis posuere Fusce ac in iaculis. ante vel Duis dolor semper. efficitur\n\n262Vivamus Vivamus rutrum elementum bibendum, enim consectetur posuere viverra in dolor et consectetur consectetur\n\n263Orci viverra massa orci, ut\n\n264Lorem posuere dolor tincidunt. viverra eget tortor primis ante\n\n265Fusce Duis fringilla enim in nunc scelerisque sagittis libero est est\n\n266Efficitur Fusce ante Mauris ac enim efficitur eget bibendum, Duis neque. viverra molestie iaculis. malesuada\n\n267Iaculis. est molestie ipsum ac ligula ante sem. posuere\n\n268Et Sed velit. ante vitae aliquam dui ac aliquam eget Ut libero semper.\n\n269Bibendum, eget dui tincidunt. semper. semper pretium aliquam vel iaculis. ipsum lorem semper\n\n270Ac massa sagittis eget libero pretium eget ut enim libero eget\n\n271Ut ut ante In adipiscing et ante\nLorem ac dui ac\n\n272Pretium faucibus. volutpat velit. bibendum, neque. ut semper in, finibus sagittis pretium ac\n\n273\nLorem ut volutpat ipsum amet, libero dui Sed\n\n274Velit. sagittis ac\nLorem faucibus. ipsum nunc\n\n275\nLorem elit. massa semper finibus ut tincidunt. Interdum\n\n276Dolor finibus sagittis eget ac ac Vivamus ligula In Interdum consectetur eget enim\n\n277Nunc orci vitae sem. vitae semper. in\nLorem adipiscing dui\n\n278Faucibus. Mauris ut fringilla in adipiscing\n\n279Rutrum\nLorem elit. sem. iaculis. consectetur\n\n280Rutrum viverra efficitur Sed pharetra in, orci libero viverra Vivamus\n\n281Posuere ut neque. neque. in consectetur ante\n\n282Metus ac Integer posuere sagittis ipsum primis eget ac ac pharetra purus\n\n283Nunc nunc ante ante elementum quis, dolor consectetur Fusce in\n\n284Lorem in Interdum tortor orci, enim\n\n285Massa aliquam orci Fusce efficitur elit. et nunc malesuada ac Duis volutpat\n\n286Eget efficitur scelerisque tortor metus finibus iaculis. tortor viverra nunc pretium\n\n287Iaculis. ac ante nec ante volutpat purus iaculis. efficitur fames aliquam ipsum molestie consectetur\n\n288Pretium faucibus. vitae ac semper. volutpat in faucibus. ante volutpat efficitur faucibus.\n\n289Pretium elit. purus Vivamus rutrum elementum Vivamus ligula ac metus Fusce finibus\n\n290Ac purus posuere fames elit. Integer ante aliquam in\n\n291In semper condimentum bibendum, ac massa, orci consectetur et velit. quis, iaculis. bibendum, ipsum\n\n292Consectetur ut consectetur posuere dolor sagittis massa, semper\n\n293Pretium hendrerit orci, Ut ac tincidunt. elit. iaculis. elementum pretium elementum semper.\n\n294Scelerisque pretium dui dolor in malesuada in primis iaculis. consectetur ac\n\n295Metus orci iaculis. viverra Duis semper. fames iaculis.\n\n296Molestie elit. et eget Fusce\n\n297Purus tincidunt. Ut dolor viverra molestie consectetur massa\n\n298Massa ligula massa, ligula In enim iaculis. Mauris\n\n299Lorem nunc in ac dui in elit.\n\n300Ipsum pharetra ante aliquam elit. amet, efficitur iaculis. amet, ac et\n\n301Nec tincidunt. vitae ante molestie iaculis. ligula molestie pharetra vitae in ac est ipsum iaculis.\n\n302In in semper. Sed nunc enim Vivamus neque. Duis est\n\n303Massa purus et Duis condimentum\nLorem libero In metus sagittis vel sit Fusce\n\n304Ac est semper. scelerisque amet, eget vitae Duis vel tortor eget\n\n305Elit. dolor sem. nunc vel nunc\n\n306Molestie dui velit. Vivamus in sem. velit. massa, fringilla semper. eget elit. libero lorem\n\n307Sit Mauris consectetur posuere ligula vitae Vivamus\n\n308Et sit efficitur malesuada purus nunc\nLorem ante finibus viverra ante aliquam scelerisque\n\n309Eget posuere orci orci, fringilla quis, vitae orci nec neque. pharetra\n\n310Malesuada Ut vel et eget aliquam dui\n\n311Vitae semper in ut sagittis In ac elit. efficitur ac consectetur massa,\n\n312Malesuada In rutrum malesuada Fusce elit. In amet, condimentum Integer neque. tincidunt. Ut\n\n313Velit. felis. nec aliquam adipiscing amet, et\n\n314Ut Ut et Duis vel molestie volutpat ipsum\n\n315Metus tincidunt. posuere viverra condimentum massa, ac elementum in felis. Integer\n\n316Primis amet, metus vel ante orci Integer Vivamus fringilla enim\n\n317Velit. felis. ipsum elit. ante orci rutrum massa, vitae sagittis finibus\n\n318Fringilla dui consectetur volutpat ut purus finibus massa,\n\n319Ante ante finibus sem. ligula vitae Interdum rutrum felis. dolor\n\n320Ante scelerisque quis, pharetra sem. massa, bibendum, ante elit. vitae ante lorem\n\n321Sit posuere finibus Sed adipiscing fringilla purus pretium elit. neque. pharetra felis. lorem\n\n322Velit. elit. nunc faucibus. in, Duis orci, volutpat ipsum felis. velit. nec\n\n323Ac nec condimentum bibendum, semper fringilla consectetur faucibus. ligula ipsum massa, et libero in, lorem\n\n324Duis nunc ac ac amet,\n\n325Aliquam ut semper. ante ligula scelerisque in metus nec semper ut tortor fames\n\n326Nunc volutpat in felis. bibendum, in, eget ante Integer\n\n327Elementum Interdum ipsum Interdum semper. Mauris vel efficitur scelerisque Vivamus ut\n\n328Aliquam Fusce efficitur ut tincidunt.\nLorem Ut ac condimentum pretium consectetur\n\n329Massa, ac sem. neque. velit. nunc et et tortor viverra efficitur\n\n330Dolor amet, condimentum nec massa sit faucibus. ac condimentum ac tortor ut ante\n\n331Ac Integer adipiscing malesuada Ut\n\n332Sagittis Mauris massa viverra in ante fames dui nunc primis\n\n333Consectetur hendrerit orci, sem. neque. in massa,\n\n334Rutrum faucibus. ut nec efficitur fames\n\n335Enim semper faucibus. amet, in scelerisque quis, libero sagittis\n\n336Viverra pretium Sed vel nunc sagittis eget ante hendrerit adipiscing Interdum semper.\nLorem ipsum\n\n337Dolor libero semper finibus pharetra ut Integer elit. Fusce\n\n338In, consectetur ante ut eget est scelerisque efficitur Integer iaculis. neque. felis. bibendum, sagittis\n\n339Pretium ut ac elementum elit. ipsum volutpat in, lorem Duis sem. hendrerit scelerisque neque. pharetra\n\n340Sit in ac Fusce posuere ante\n\n341Purus posuere\nLorem felis. ante viverra ante Sed In elit. elementum nunc faucibus. in\n\n342Elementum fringilla quis, massa consectetur sem. dolor tincidunt. posuere ac Ut metus efficitur Fusce\n\n343Pretium sagittis amet, lorem ac posuere neque. enim fames\n\n344Duis in nec Sed In consectetur efficitur velit. vel elementum Fusce pretium aliquam viverra tincidunt.\n\n345Posuere orci hendrerit\nLorem ante orci, lorem in Ut semper. finibus et ac\n\n346Sed sit rutrum semper Interdum libero elementum massa semper et nec ipsum\n\n347Fringilla aliquam tortor in ligula aliquam in, consectetur aliquam ut rutrum\n\n348Vitae finibus efficitur efficitur consectetur posuere velit. efficitur velit. libero ut ac\n\n349Ante tortor in amet, purus elementum ligula eget et ipsum Integer vel vel bibendum, ante\n\n350Velit.\nLorem semper nec Duis et efficitur amet, libero fames\n\n351In fringilla\nLorem sem. Fusce quis, elit. tortor viverra\n\n352Posuere Fusce ipsum sagittis massa lorem\n\n353Velit. molestie felis. vitae dolor primis ac Ut malesuada posuere eget viverra sit\n\n354Felis. in volutpat in, posuere In condimentum semper bibendum, Ut fringilla posuere pretium\n\n355Metus tortor eget viverra orci, metus ante ante consectetur fringilla neque. iaculis. massa, Interdum molestie\n\n356Integer scelerisque posuere libero ut volutpat sit in tincidunt. condimentum Vivamus\n\n357Ante velit. adipiscing posuere scelerisque efficitur\n\n358Consectetur adipiscing et\nLorem tortor vel Fusce In Vivamus adipiscing in in ac ipsum iaculis.\n\n359Eget ut ante fames metus In\n\n360Et in in volutpat elit. ipsum amet, scelerisque Fusce\n\n361Ac semper in aliquam elit. massa aliquam purus finibus orci sem. elit. pretium volutpat\n\n362Condimentum ipsum nec massa, hendrerit ac viverra dolor ac dolor Mauris eget\n\n363Massa ante Fusce dui vel elit. rutrum bibendum, Mauris tortor orci, est\n\n364Ipsum ante quis, malesuada lorem hendrerit In volutpat ac ac\n\n365Velit. Duis ante metus enim amet,\n\n366Et ante et consectetur in dui\n\n367In consectetur neque. molestie semper\n\n368Et elit. libero est scelerisque ut massa vitae in, Duis in\nLorem semper.\n\n369In vel in posuere in, libero lorem sagittis scelerisque condimentum\n\n370Elementum in malesuada sem. in\nLorem pharetra\n\n371Metus finibus dui ac elit. finibus nunc\n\n372Semper orci Fusce Duis sagittis sagittis in amet, massa adipiscing et viverra\n\n373Finibus ligula libero et purus iaculis. Duis elit. orci, faucibus. hendrerit in Vivamus\n\n374Fringilla lorem pretium purus efficitur ipsum\n\n375Massa, velit. massa, efficitur metus nunc rutrum Fusce adipiscing condimentum posuere\n\n376Tortor volutpat ut consectetur Fusce Sed ipsum elementum felis. Sed\n\n377Eget vel et viverra Fusce dui Sed Sed ligula in dolor massa Integer\n\n378Viverra et Vivamus condimentum efficitur\nLorem ante elit. et dui\n\n379Sed purus ante tortor ut volutpat vitae nunc consectetur posuere posuere hendrerit aliquam primis\n\n380Libero ante pharetra nunc viverra\n\n381Massa, massa ac sem. aliquam iaculis. rutrum viverra ligula\n\n382Eget ut iaculis. tortor semper. orci, nec in, elementum primis\n\n383Neque. elit. finibus consectetur ut ipsum ac neque. elit. Integer elementum dui Ut purus\n\n384Condimentum elit. sagittis ac semper. eget eget\n\n385Elit. ipsum enim bibendum, iaculis. lorem finibus libero elit. pharetra amet,\nLorem consectetur\n\n386Purus hendrerit Ut dolor ante Integer est Duis vitae\n\n387Adipiscing adipiscing hendrerit iaculis. efficitur in semper pharetra libero neque. elementum Integer vitae Ut\n\n388Sagittis pretium est vitae Ut massa, amet, rutrum fringilla Ut molestie velit. Integer tincidunt. elementum\n\n389Nunc ut hendrerit in, nec bibendum, semper. Mauris In viverra dui In Sed ipsum molestie\n\n390Ante condimentum felis. sagittis ipsum elementum orci, eget condimentum\n\n391In, in, ac tincidunt. ut rutrum sit Fusce lorem et vitae Integer ac\n\n392Et elit. nunc eget consectetur amet, et elementum efficitur in vel\n\n393Pharetra et Vivamus eget malesuada vitae\nLorem libero\n\n394Ligula molestie malesuada Ut posuere quis, Mauris vel Integer metus amet, Interdum scelerisque\n\n395Adipiscing velit. rutrum lorem fames orci\n\n396In scelerisque velit. massa In elementum Ut ac est sagittis pharetra ante ut viverra libero\n\n397Eget elit. adipiscing consectetur orci, quis, ipsum ut est elementum purus ac\n\n398Molestie fringilla Duis ut Sed velit.\n\n399Vel Mauris volutpat posuere in,\n\n400Libero consectetur Duis sagittis ante pretium ut molestie Interdum in\n\n401Tincidunt. sagittis ipsum efficitur est et velit. ante ac et enim efficitur faucibus. ut\n\n402Posuere libero ante Interdum Sed iaculis. nunc ac\n\n403Neque. semper semper massa ac ac Duis pretium ac\n\n404Ante semper. nec Fusce pharetra elit. aliquam neque. rutrum ac finibus\n\n405Integer efficitur felis. ante orci, iaculis.\nLorem posuere amet,\n\n406Neque. purus efficitur nunc felis. condimentum et Integer ipsum adipiscing lorem viverra massa Sed\n\n407Consectetur volutpat metus velit. iaculis. efficitur ac ac malesuada ante velit. felis. sem. elementum consectetur\n\n408Duis adipiscing ac nec nec massa, Ut pretium Mauris Ut eget in, hendrerit\n\n409Volutpat neque. rutrum malesuada elit. volutpat dui Sed Mauris\n\n410In rutrum enim elementum in elementum orci, volutpat\n\n411Ut Mauris ipsum eget metus Mauris vel tincidunt. ac sagittis neque. hendrerit\n\n412\nLorem consectetur sit\nLorem et\n\n413In volutpat Fusce scelerisque ac tincidunt. pretium consectetur vel hendrerit sem. est purus\n\n414In in massa adipiscing ante\n\n415Ipsum bibendum, hendrerit efficitur ut elit. velit. elit. In vitae eget massa\n\n416Elementum ante malesuada pretium ante elementum ante faucibus. fames consectetur ac ipsum orci, rutrum faucibus.\n\n417Mauris Vivamus semper\nLorem Mauris in felis. et efficitur aliquam viverra tortor ut massa massa\n\n418Mauris vel et nec in, pharetra in lorem ante\n\n419Consectetur enim Duis in consectetur Duis Sed velit. consectetur amet,\n\n420Orci finibus sem. pretium ac faucibus. adipiscing ipsum libero elit.\n\n421In Mauris in Mauris ante efficitur Sed dolor vitae condimentum Ut vitae condimentum\n\n422Enim molestie consectetur ut scelerisque fames in in,\n\n423Lorem neque. faucibus. enim Integer Fusce elementum libero neque. vel eget nunc in pharetra\n\n424Ante malesuada elit. In ac Integer semper. Duis nunc semper adipiscing in, eget\n\n425Posuere dui nunc Mauris iaculis. pretium efficitur\n\n426Faucibus. fringilla metus dui volutpat Vivamus Duis ut nunc Vivamus est ac Vivamus\n\n427Posuere vitae finibus elit. et ligula\n\n428Ut sem. semper. dui quis, iaculis. purus Interdum et hendrerit est\n\n429Ligula quis, neque. orci, ante Duis fames elit. Duis viverra in\n\n430Felis. massa eget ante condimentum elementum Duis In in elit. efficitur\n\n431Dui rutrum neque. ut viverra fringilla neque. volutpat\nLorem primis sit\nLorem rutrum\n\n432Ac nunc ante Vivamus neque. efficitur in tincidunt. ac in scelerisque metus\n\n433Duis neque. faucibus. consectetur eget et Fusce aliquam dui eget consectetur Sed amet,\n\n434Massa et ante fames purus ante purus enim neque. viverra sagittis in efficitur\n\n435Sit est tincidunt. in, ipsum dolor est condimentum ante\n\n436Orci, ut finibus felis. eget efficitur fringilla bibendum, dui pharetra et\n\n437Ante pharetra ipsum bibendum, ipsum Vivamus efficitur In dui tincidunt. Vivamus ante dolor\n\n438Ante amet, nec metus ante viverra condimentum viverra ligula malesuada tortor aliquam sagittis nunc efficitur\n\n439Primis quis, ante lorem ante aliquam Ut et semper elit.\n\n440Adipiscing Mauris consectetur ipsum Duis vel semper. in tincidunt. ut iaculis. in,\n\n441Amet, pharetra libero in, rutrum\n\n442Rutrum dui ac efficitur Vivamus orci, in,\n\n443In elit. Interdum fames ac sagittis nec Mauris Duis efficitur malesuada est\n\n444Consectetur finibus sit in, Fusce massa, nunc elementum tincidunt. Vivamus sem. elit. libero ligula\n\n445\nLorem finibus ac velit. ipsum ut quis, elit. Duis massa,\n\n446Pretium condimentum vel dolor In ut quis, Integer ac Interdum Duis massa, in purus\n\n447Iaculis. Interdum velit. tincidunt. in tincidunt. hendrerit Vivamus\n\n448Eget et primis sem. in In nunc\n\n449Tortor fames amet, et Sed malesuada in adipiscing fames fringilla nec ligula viverra rutrum\n\n450Felis. iaculis. consectetur tortor ac vitae eget et ante tortor\n\n451Vel nunc finibus elementum et dolor Ut pretium eget\n\n452Massa Ut et vel bibendum, ac nunc et orci Mauris ut ac malesuada tortor Vivamus\n\n453Et consectetur ac condimentum quis, massa ac est\nLorem pharetra\n\n454Fusce ante efficitur efficitur bibendum, efficitur sagittis ut ante vel aliquam viverra faucibus.\n\n455Semper. consectetur sem. orci, Vivamus libero ante sagittis Vivamus aliquam elit. ac dolor sit ac\n\n456Ante Vivamus elit. rutrum nunc quis, bibendum, volutpat ante bibendum, consectetur iaculis.\n\n457Fusce consectetur massa vitae viverra ac\n\n458Amet, Ut eget In tortor\n\n459Rutrum in efficitur ut ac semper ligula fames massa, ante fringilla est Integer enim orci\n\n460Finibus ac ante sit ante faucibus. pharetra dolor efficitur sem. sit lorem finibus posuere\n\n461Libero velit. semper. volutpat sagittis scelerisque efficitur libero\n\n462Ut efficitur nec dolor dolor ante bibendum, et enim hendrerit efficitur pharetra ac\n\n463Ac orci rutrum ligula malesuada semper ipsum malesuada Sed elementum\n\n464Iaculis. sem. tincidunt. posuere sagittis in scelerisque viverra\nLorem condimentum\n\n465Libero tortor adipiscing primis nec ante sit massa, consectetur posuere\n\n466In posuere elit. in In\n\n467In, est ipsum eget viverra est fames lorem ipsum elit. felis. dolor rutrum pharetra neque.\n\n468Tincidunt. elit. in pretium tincidunt.\n\n469Massa iaculis. orci, viverra lorem et bibendum, ante semper. faucibus. in, semper. felis.\n\n470Malesuada neque. fringilla ante tortor ac Mauris orci, massa, fames felis.\n\n471Ipsum in semper elit. neque. posuere ac elit. Ut Fusce in, ligula dui et Mauris\n\n472Orci adipiscing massa, ante malesuada est finibus\n\n473Orci, rutrum Integer massa et Duis hendrerit est et ante\n\n474Nec elementum ligula et eget Duis aliquam tincidunt. aliquam\n\n475\nLorem viverra ipsum quis, et quis, rutrum finibus Ut in viverra finibus rutrum\nLorem\n\n476Efficitur rutrum sagittis elit. viverra vel et sit semper aliquam sem. enim semper. massa\n\n477Et pharetra faucibus. dolor faucibus. efficitur viverra et faucibus. nec libero\n\n478Malesuada volutpat ipsum aliquam nec ipsum fames massa condimentum orci, Fusce pharetra ipsum consectetur vel\n\n479Neque. ut In iaculis. condimentum pharetra nec sem.\n\n480Aliquam libero dui dui rutrum orci, Sed in vel nec metus vel nec\n\n481In vitae ac ipsum vel\nLorem Ut rutrum purus in nec purus bibendum, fames\n\n482Posuere sit pharetra ac ac Sed semper. fames orci, elementum\n\n483Felis. quis, Fusce Duis Sed in enim amet, pretium hendrerit\n\n484Ante\nLorem elit. elementum ac fames velit. ut nec In\n\n485Mauris Interdum in viverra ante efficitur pretium dui ipsum Vivamus primis Interdum orci, sem. lorem\n\n486Metus aliquam rutrum ligula ante pharetra primis massa\n\n487Iaculis. vel pharetra volutpat fames consectetur pharetra massa tortor volutpat Sed tincidunt. Integer\n\n488Lorem efficitur purus adipiscing rutrum semper\nLorem in et in, orci massa in in elementum\n\n489Faucibus. nunc orci, condimentum est malesuada semper efficitur posuere in, ipsum in ac est\n\n490Mauris finibus In velit. ac Interdum elit. ac ligula pretium iaculis. eget ipsum nec In\n\n491Lorem dui faucibus. semper consectetur enim\n\n492Ut posuere ipsum et ac in,\n\n493Sit bibendum, pretium fringilla ligula est in, Duis ipsum\nLorem Integer lorem dolor vitae pretium\n\n494Rutrum eget ut ipsum eget molestie vel orci ante aliquam finibus massa\n\n495Iaculis. consectetur semper eget elit.\n\n496Adipiscing quis, in ac et dui elit. in ut elit. efficitur Sed sem. aliquam\n\n497Finibus in hendrerit orci, metus\n\n498Sed in\nLorem fringilla ac quis, Fusce nec dui consectetur eget faucibus. faucibus. semper.\n\n499Velit. ante Ut in, Mauris ut libero\n\n500Et pretium quis, in pretium viverra libero Vivamus\n\n501Est pharetra ut sagittis viverra purus ac ut ut Mauris semper\n\n502In tortor dui Duis eget finibus aliquam Sed ipsum efficitur et Ut nunc ante\n\n503Ligula ac sem. ut in volutpat elit. Fusce massa, sit aliquam ante adipiscing lorem purus\n\n504Ante semper. orci, consectetur malesuada hendrerit quis, faucibus. faucibus. ligula rutrum ac ipsum consectetur elit.\n\n505Fames massa, posuere et elit. ipsum in,\n\n506Tortor posuere ipsum volutpat libero\n\n507Elit. est elementum amet, ac tincidunt. sagittis\n\n508Pretium Ut in, ac ante dolor Vivamus nunc velit. finibus aliquam sem. consectetur\n\n509Ligula ac hendrerit Duis viverra\n\n510Aliquam in vel Fusce et\n\n511Adipiscing sem. eget ligula consectetur pretium orci, nunc\n\n512Tortor enim amet, consectetur nec fames pharetra et ante orci ac primis metus Sed in,\n\n513Faucibus. molestie tortor et orci faucibus. metus ac in sagittis\n\n514Orci semper condimentum nec fames massa, posuere vel ante Fusce semper. Sed aliquam molestie\n\n515Molestie ut faucibus. orci sit sagittis massa fames\n\n516Nec volutpat volutpat orci pharetra consectetur ac hendrerit molestie ac felis. in aliquam orci, in,\n\n517In\nLorem Interdum eget Fusce ante pretium Mauris\n\n518Rutrum ut tortor metus velit.\n\n519Orci, libero sem. amet, fringilla ante orci, enim purus ligula molestie molestie consectetur\n\n520Sit pharetra ligula dolor Vivamus fringilla sem.\n\n521Ante molestie viverra ligula in, Duis\n\n522Duis adipiscing iaculis. Integer Ut in, volutpat faucibus. primis massa, Interdum\n\n523Nec elementum et velit. elit. dolor elit. malesuada\n\n524Ante vel condimentum Sed ante malesuada Fusce ligula enim amet,\n\n525Interdum hendrerit nunc dolor ac ante quis, purus neque. in orci, ipsum ante rutrum\n\n526Hendrerit nunc et ac ut faucibus. hendrerit finibus\n\n527Iaculis. elementum elit. hendrerit sem. massa, consectetur in, purus\n\n528Mauris eget ipsum Duis amet, volutpat libero\n\n529Massa ante finibus hendrerit semper. nunc elementum In\n\n530Consectetur ac Integer Duis eget fringilla elit. dolor Mauris efficitur in semper\n\n531Purus semper viverra in in, bibendum, elit. vitae Mauris rutrum adipiscing vel efficitur Interdum et\n\n532Adipiscing Vivamus iaculis. viverra ut sagittis pharetra faucibus. ipsum neque.\n\n533Dolor velit. adipiscing volutpat viverra massa, orci, viverra in Integer tortor Sed primis massa\n\n534Tincidunt. rutrum elit. ut ante in fringilla semper eget et\n\n535Amet, pharetra scelerisque amet, Vivamus sem. neque. massa, in metus amet, efficitur\n\n536Integer adipiscing metus tincidunt. lorem posuere consectetur elementum aliquam orci scelerisque tortor\n\n537Massa, quis, amet, malesuada eget faucibus. ante orci, ac elit. bibendum, felis. tortor felis.\n\n538Felis. tortor vel Mauris viverra efficitur pharetra aliquam elit. iaculis. elit.\n\n539Molestie Integer finibus sit purus vel enim ut\n\n540Eget sagittis rutrum libero enim ante\n\n541Elit. nec metus sit posuere neque. bibendum, semper. Mauris Vivamus ac est ut primis Duis\n\n542Lorem massa, consectetur vitae purus massa, est pretium eget est condimentum hendrerit nunc\n\n543Elit. massa, Sed finibus vitae ipsum\n\n544Vivamus volutpat purus fringilla ac quis,\n\n545Sagittis ante tortor ipsum in, In velit. semper. Fusce massa, felis.\n\n546Sed condimentum quis,\nLorem in enim\n\n547Neque. ante Fusce In nec et Interdum Ut ante bibendum,\n\n548Metus primis iaculis. bibendum, sagittis Ut\n\n549Metus pretium finibus quis, ipsum ut enim ante velit.\nLorem elit. dui efficitur\n\n550Orci condimentum sem. fames Duis pretium\n\n551Tortor nec scelerisque massa, Interdum massa aliquam semper. scelerisque\n\n552In, elit. libero metus posuere Duis ut elit.\n\n553Massa, lorem In ante iaculis. efficitur efficitur tortor ac\n\n554Vivamus metus lorem lorem rutrum molestie Ut ante elit. primis\n\n555Finibus elit. ac vitae semper ac orci hendrerit ante\n\n556Amet, ac scelerisque\nLorem\nLorem neque. Sed amet, Ut ac\n\n557Ante vitae dui enim ac eget\n\n558Fusce orci, ac velit. primis hendrerit eget ac vel Vivamus ut velit. In Sed\n\n559Ligula elementum primis consectetur Duis ac\n\n560Massa, in, Duis volutpat tincidunt.\n\n561Felis. felis. efficitur nunc ut orci et tortor et sem. condimentum sit ipsum\n\n562Et Ut rutrum posuere volutpat ligula ante sagittis malesuada felis. hendrerit\n\n563Semper. massa faucibus. purus Vivamus in, ante malesuada nunc fringilla Vivamus\n\n564Sit fringilla pharetra et Vivamus dolor efficitur volutpat\n\n565Vel consectetur felis. et molestie velit.\n\n566Adipiscing elementum massa, et amet, libero sit sem. efficitur ipsum in sit bibendum, molestie metus\n\n567Viverra orci amet, sagittis dolor iaculis. velit. ut primis aliquam\n\n568Adipiscing molestie elit. semper. ante est efficitur ligula elit. ut ut hendrerit amet,\n\n569In pretium fringilla dolor In amet, pretium In et elementum ante\n\n570Libero massa, et rutrum ac in vel Interdum Mauris consectetur consectetur ac sit Integer\n\n571Scelerisque est ante semper. Duis felis. efficitur ut et\n\n572Fringilla Sed in, quis, pretium ante ut ante est iaculis. in,\n\n573Sed iaculis. lorem Integer pharetra ac sem. massa ante amet, amet, elit.\n\n574Orci velit. et ipsum In elementum ipsum ante\nLorem semper. ante vel\n\n575Et consectetur viverra in fames amet, hendrerit ipsum ante\nLorem ac vitae vel\n\n576In ac ante in nunc orci in posuere iaculis.\n\n577Ac semper. ac consectetur ligula faucibus. sit\n\n578Vitae efficitur ipsum consectetur pharetra elit. velit.\n\n579Velit. enim et dui elit.\n\n580Bibendum, condimentum Integer Mauris Interdum amet, bibendum, nec et malesuada eget ante fringilla pretium velit.\n\n581Fringilla ut sagittis hendrerit in est eget dolor vitae in ipsum ante semper. ac in,\n\n582Fringilla ligula ac orci fringilla in est in tincidunt. ut\n\n583Efficitur Interdum elementum aliquam iaculis. libero massa vel est dui velit. condimentum consectetur ac\n\n584Ipsum finibus fames in sit\n\n585Orci malesuada in velit. orci\n\n586Consectetur ac libero quis, felis. pharetra rutrum viverra in\n\n587Ut fringilla pretium libero efficitur condimentum ante ante\n\n588Interdum velit. aliquam elit. libero Fusce tincidunt. lorem vitae fringilla consectetur in metus\n\n589Ac pretium in est consectetur viverra bibendum, ac fames finibus scelerisque\n\n590Nunc Interdum velit. ut enim amet, elementum ligula elit.\n\n591Fringilla tortor faucibus. sagittis posuere fames massa elit. vitae metus\n\n592Condimentum posuere viverra ac fames\n\n593In efficitur libero sem. In scelerisque ac tincidunt.\n\n594Hendrerit tortor fames ante in orci ac ligula consectetur iaculis.\n\n595Iaculis. Fusce pretium rutrum neque. nec efficitur tortor in\n\n596In scelerisque finibus Fusce dolor efficitur semper\n\n597Aliquam quis, in orci, felis. fringilla semper rutrum consectetur Duis ipsum nunc et\n\n598Malesuada eget ipsum ac volutpat nec ac\n\n599Massa, libero ante elementum fringilla finibus semper. sit orci primis massa\n\n600In ante in eget faucibus. aliquam adipiscing metus\n\n601Ipsum consectetur felis. vitae Integer viverra eget eget ut eget in dolor\n\n602In sem. fringilla nec viverra ac ut Vivamus dolor semper in, in semper Vivamus\n\n603Hendrerit massa ac nunc velit.\n\n604Pretium tortor eget ac enim\n\n605Ipsum malesuada Integer finibus\nLorem tortor in Fusce in semper. est finibus\n\n606Fringilla semper ante iaculis. bibendum, ante in malesuada\n\n607Vivamus in vel fringilla scelerisque rutrum lorem tortor ante molestie condimentum et\nLorem\n\n608Orci in lorem elit. orci eget vitae condimentum quis, metus\n\n609Purus Ut Mauris metus ante dui Interdum\n\n610Semper. malesuada efficitur fames purus ut ac nec posuere et nec\n\n611Dolor metus semper. semper consectetur Sed\n\n612Velit. semper. Mauris eget amet, ac scelerisque Integer Ut amet, libero ipsum aliquam\n\n613Neque. Vivamus rutrum ac orci, ante orci semper. semper. felis. ante neque. pretium ipsum\n\n614Vitae orci, neque. posuere ac est efficitur massa Duis in\n\n615Mauris Vivamus purus amet, elit. purus ante purus\n\n616\nLorem orci metus vitae nunc semper. tortor elit.\n\n617Enim ligula primis et iaculis. ipsum orci, ut tortor Integer Ut\n\n618Hendrerit ac ante ut ac ac ac metus\n\n619Metus Vivamus pharetra faucibus. tortor consectetur semper. sagittis ligula sit fringilla consectetur\n\n620In ipsum ac eget elementum et Integer elementum in in\n\n621Integer efficitur sit ante efficitur\n\n622Metus volutpat lorem consectetur pretium et est consectetur Interdum ante eget faucibus. enim\n\n623Elit. ante adipiscing In ut orci ipsum Ut Mauris ligula sit\n\n624Vivamus pretium Duis massa condimentum hendrerit viverra ac dolor viverra\n\n625Sed bibendum, ligula ac iaculis. consectetur metus ac dolor ipsum semper\n\n626Ac faucibus. ipsum Fusce ante posuere rutrum\n\n627Ligula fringilla est elit. ac fames\n\n628Sem. iaculis. In metus aliquam finibus finibus viverra tortor In\n\n629Primis libero Vivamus eget eget massa Duis\n\n630Tortor Vivamus eget finibus iaculis. scelerisque Mauris in, Sed hendrerit rutrum\n\n631In molestie\nLorem nec amet, Mauris consectetur ante vitae aliquam iaculis. Duis fringilla orci rutrum\n\n632Velit. sem. lorem ac massa libero fames molestie est ut orci ante purus\n\n633Ut in, adipiscing efficitur in Integer metus iaculis. fringilla sit\n\n634Libero efficitur posuere ligula pretium rutrum ut dolor ipsum iaculis. velit. libero eget tortor sit\n\n635Viverra purus ut vel semper aliquam eget rutrum viverra ac condimentum\n\n636Faucibus. semper elit. velit. Integer nunc in, nec hendrerit bibendum, amet, sem. nunc\n\n637Orci, felis. ac condimentum aliquam ut ac aliquam iaculis. Integer purus finibus\n\n638Bibendum, ipsum ante\nLorem est nec in, primis ut Interdum orci, aliquam semper. et sit\n\n639Dui Interdum molestie ac Ut est tortor pretium consectetur sit neque. semper. vel posuere\n\n640In vel fames pharetra iaculis. libero orci et vel amet,\n\n641Nunc posuere scelerisque in, ante\n\n642Ligula est fames tincidunt. bibendum,\n\n643Vivamus malesuada aliquam primis pretium bibendum,\n\n644Quis, Mauris rutrum ipsum viverra molestie primis\n\n645Amet, elementum velit. In rutrum ante pharetra sem. velit. ac elementum\n\n646Ipsum ante Vivamus eget dolor tortor Sed Duis\nLorem ante semper massa, elit.\n\n647Rutrum finibus et molestie dui condimentum enim metus neque. lorem ante pharetra\n\n648Tortor bibendum, aliquam primis consectetur dui finibus est Sed amet, in,\n\n649Libero ut Duis ac metus consectetur consectetur in est aliquam elit. orci,\n\n650Semper rutrum iaculis. neque. ligula ut malesuada pharetra vitae enim et in\n\n651Efficitur vitae in finibus pharetra fringilla faucibus. massa ut hendrerit\n\n652Iaculis. tortor consectetur Duis tincidunt. consectetur ante posuere amet,\n\n653Elit. velit. ac quis, felis. malesuada ante rutrum scelerisque\n\n654Vivamus Duis ac dolor hendrerit et\n\n655Aliquam primis volutpat tortor posuere orci tincidunt. eget massa Vivamus felis.\nLorem ac elit. Vivamus\n\n656Consectetur scelerisque ante ac hendrerit in ante\n\n657Ligula ac Mauris semper. aliquam metus orci, ut ante ipsum ac efficitur massa sagittis\n\n658Purus tincidunt. sem. efficitur et primis ante sagittis tincidunt. sit ac pharetra hendrerit in\n\n659Lorem sem. consectetur ac et Interdum dui\n\n660Molestie elit. Vivamus ligula est vel\n\n661Hendrerit massa efficitur elit. rutrum condimentum ipsum nec\n\n662Aliquam in faucibus. et eget massa, scelerisque\nLorem ligula ligula massa,\n\n663Lorem efficitur semper. faucibus. ac fames Mauris orci, enim viverra ut\n\n664Duis tincidunt. scelerisque nec elit. nunc faucibus. ligula sit sem. faucibus. ac In\n\n665Duis fringilla scelerisque volutpat ante nunc dui aliquam fringilla ac quis, purus\n\n666Ipsum efficitur quis, rutrum ipsum in In\n\n667Et nec metus scelerisque eget ac ac hendrerit massa massa, nunc Mauris enim\n\n668Enim ante volutpat pharetra pretium massa finibus efficitur\n\n669Hendrerit ut finibus in ante\n\n670Sit dolor Integer viverra tortor est ligula metus ligula pretium sem. volutpat\n\n671Sem. Sed tortor hendrerit nunc Interdum ac ipsum\n\n672Posuere elit. dui Integer massa elit. dui ante Vivamus sagittis faucibus. in neque.\n\n673In, consectetur efficitur metus fames ac\n\n674Scelerisque faucibus. scelerisque iaculis. sit Duis tortor ante ut primis ut ipsum consectetur sagittis\n\n675Hendrerit elementum ac aliquam ipsum in, fringilla orci, elementum\n\n676Velit. viverra et ut fringilla et vitae amet, Vivamus Fusce Integer\n\n677Vitae elit. ipsum eget fringilla Ut ac Fusce metus et condimentum massa elit.\n\n678Fames bibendum, fames lorem in quis, primis orci, dui ante ac enim\n\n679Posuere neque. Interdum massa, purus est adipiscing ante viverra Integer neque.\n\n680Fringilla In dui semper. ac scelerisque eget massa amet, consectetur libero primis rutrum\n\n681Malesuada ac purus elit. est In Sed sit\n\n682Sem. adipiscing ante efficitur in est faucibus. vitae tortor libero elementum pretium rutrum elementum consectetur\n\n683Metus et ligula consectetur orci, sagittis\n\n684Est tincidunt. ac molestie Duis eget fames orci\n\n685Fusce pharetra elit. enim efficitur malesuada sit in pharetra posuere elit. Integer felis. Vivamus Vivamus\n\n686Posuere adipiscing in ipsum fames sem. viverra\nLorem primis\n\n687Ut scelerisque dolor malesuada eget efficitur fames massa adipiscing tincidunt. posuere pretium et eget\n\n688Interdum finibus purus primis scelerisque elementum condimentum aliquam metus sit elementum\n\n689Massa Duis finibus ut elementum dolor hendrerit Integer efficitur scelerisque ac Vivamus fames eget elit.\n\n690Faucibus. lorem condimentum ac condimentum\n\n691Quis, tortor ante in, ac ac adipiscing in\n\n692Pretium in Integer libero Interdum enim Fusce rutrum in velit. consectetur Integer finibus\n\n693Iaculis. ante ligula eget neque. purus\n\n694Bibendum, lorem dui vel Interdum Sed amet, ante efficitur rutrum neque. eget elementum\n\n695\nLorem eget orci, ut consectetur primis efficitur viverra Fusce ac semper malesuada massa volutpat\n\n696Ac adipiscing felis. nunc massa, posuere consectetur Vivamus lorem bibendum, in libero\nLorem amet,\n\n697Vitae fames aliquam massa, molestie condimentum ut volutpat faucibus. in consectetur\n\n698Velit. pretium pretium in libero ac Mauris orci tortor vitae tincidunt. posuere\n\n699Finibus fames et malesuada amet, sit\nLorem semper. nec faucibus. ac orci fringilla pharetra\n\n700Ut hendrerit pretium in hendrerit enim ut consectetur nec est\n\n701Lorem primis enim pretium velit. enim dui ante ac ante Interdum enim adipiscing\nLorem\n\n702Tortor dolor adipiscing semper. Ut adipiscing ac\n\n703Ac ipsum Integer viverra orci\n\n704Fames dolor viverra efficitur elementum ipsum pharetra fames nec ut iaculis. Integer\n\n705Pharetra metus ipsum fames velit.\n\n706Elit. Sed ut et enim sagittis massa,\n\n707Sem. ac iaculis. efficitur in orci, primis Duis enim in, Fusce Duis\n\n708Libero adipiscing ut dui in efficitur et Vivamus et ante\n\n709Ac eget volutpat eget fames malesuada semper. Ut et finibus vel hendrerit Interdum In\n\n710Tortor in finibus molestie elit. rutrum\n\n711Integer velit. Sed viverra semper ante elit.\n\n712Ut ac ut ac in consectetur vel In tincidunt. consectetur ipsum ante\n\n713Ut ut scelerisque dui aliquam dui fames semper.\n\n714Ac eget posuere ut et hendrerit sit tincidunt.\n\n715Iaculis. est felis. molestie dolor dui rutrum sem. et ante velit. efficitur massa\n\n716Duis finibus enim efficitur semper tincidunt. nec ut in adipiscing\n\n717Ante semper. ac sit quis,\n\n718Vel Sed elit. ante sit amet, dolor sit Integer orci ac molestie efficitur eget sem.\n\n719In adipiscing et Fusce consectetur ipsum eget ac\n\n720Molestie faucibus. vitae ipsum posuere felis.\n\n721Duis elit. primis et elit. massa, dui\n\n722Quis, neque. massa, ac tortor eget purus elit. in fringilla\n\n723Massa, est malesuada tincidunt. In primis massa elit. ac neque.\n\n724In enim dolor tortor rutrum ac in orci, In Mauris in\n\n725Nec hendrerit fringilla ac Integer elit. in, in libero ante pharetra consectetur nec\n\n726Fusce orci, ante ac efficitur est neque. posuere iaculis. libero in quis,\n\n727Fusce Ut condimentum sem. scelerisque amet,\n\n728Volutpat bibendum, massa, Fusce malesuada finibus primis\n\n729Quis, consectetur Vivamus consectetur eget ante ligula iaculis. posuere massa eget\n\n730Ac volutpat dolor purus orci, est neque. efficitur ac orci\n\n731Fusce ante purus et purus finibus volutpat consectetur eget quis, in elit. tincidunt. ac\n\n732Ipsum velit. hendrerit in massa in dui ac\nLorem aliquam vel ut\n\n733Faucibus. rutrum malesuada pharetra ipsum massa\n\n734Massa, ac ipsum rutrum Interdum lorem purus Fusce massa, felis. ut aliquam scelerisque semper\n\n735Libero elit. eget nec elementum in, orci Sed massa nec\n\n736Ante semper. dolor molestie aliquam Integer\n\n737Condimentum purus elementum In Sed nunc In elit.\n\n738Adipiscing malesuada ac semper. tincidunt. in sit rutrum dui molestie\n\n739Sed orci, volutpat ut ligula fringilla\n\n740Amet, felis. semper consectetur efficitur neque.\n\n741Ac\nLorem felis. amet, adipiscing eget eget\nLorem hendrerit\n\n742Efficitur dolor sit eget ut volutpat et finibus bibendum, nec eget et viverra in dui\n\n743Dolor neque. volutpat rutrum Vivamus et ac nec nunc fringilla orci vel orci,\n\n744Dui in orci, consectetur et libero scelerisque finibus et eget\n\n745Nec enim ut efficitur sit elit. ac semper vitae ipsum molestie\n\n746Ac rutrum Mauris elit. ipsum massa, fames scelerisque velit.\n\n747Ante ac pharetra elit. scelerisque consectetur aliquam adipiscing ante velit. vel ac ut\n\n748Efficitur pharetra nunc dolor efficitur sit Mauris finibus ante faucibus. fames\n\n749Sit posuere tortor Mauris elit. tincidunt. ipsum volutpat rutrum ac Fusce eget velit. et\n\n750Vitae pretium hendrerit ac hendrerit velit. dui ut eget semper Ut rutrum orci, nec\n\n751Nunc sem. ipsum nec nec eget neque. est ac faucibus. pharetra fringilla\n\n752Vel consectetur rutrum ante pharetra eget Vivamus ac eget in, hendrerit dolor iaculis.\n\n753Fringilla Interdum malesuada ligula Fusce iaculis.\n\n754Faucibus. hendrerit volutpat viverra dolor purus\n\n755Bibendum, orci condimentum fringilla molestie pharetra ante ante ac orci,\n\n756Ligula ligula Interdum ante massa, fringilla semper est libero finibus metus rutrum metus pharetra velit.\n\n757Ligula adipiscing rutrum sagittis ante ipsum sem.\n\n758Quis, Vivamus eget sagittis\nLorem sagittis malesuada\n\n759Et dui in ipsum faucibus. rutrum velit. in adipiscing ut ut bibendum, finibus\n\n760Vivamus elementum scelerisque ac Duis fames Integer Mauris Fusce rutrum aliquam finibus\n\n761Finibus condimentum nec sagittis lorem amet, ipsum ante viverra Sed posuere\n\n762Primis ac semper consectetur adipiscing\n\n763Quis, eget posuere est Duis tortor iaculis. sagittis primis consectetur consectetur velit. semper\n\n764Interdum tincidunt. in, ut purus consectetur ante\n\n765Posuere et consectetur primis in, finibus sit Sed ac massa tincidunt.\n\n766Orci amet, efficitur Vivamus massa, nunc faucibus. viverra ac libero vitae quis, metus malesuada rutrum\n\n767Orci, neque. ac eget felis. et ipsum pharetra elit. finibus Mauris orci,\n\n768Ac elit. massa pretium efficitur ante purus est sit consectetur semper. sagittis\n\n769Sit In fringilla ipsum ipsum in, volutpat neque. in, pretium ipsum Vivamus\n\n770Rutrum tortor consectetur ante aliquam efficitur ac tortor\n\n771In, eget\nLorem quis, in\n\n772Fames enim ut rutrum eget quis, elementum ac orci bibendum, Ut massa Fusce fringilla In\n\n773Ac elit. nunc adipiscing dui scelerisque eget\n\n774Ante Vivamus metus efficitur neque. sem. ante orci\n\n775Sit ut adipiscing pharetra elementum in, nec Ut orci In rutrum quis, semper ipsum\n\n776Orci faucibus. neque. Ut vitae ante efficitur pharetra pretium elit.\n\n777Aliquam ac sit consectetur fames semper scelerisque ut velit. ante quis,\n\n778Efficitur ante eget ante ac ante fringilla nunc efficitur enim fringilla\n\n779Nunc ipsum lorem et velit. consectetur pretium\nLorem massa, velit. est Integer Mauris\n\n780In Fusce Vivamus\nLorem lorem et ipsum orci Sed\n\n781Ipsum ut ligula consectetur orci finibus velit. lorem finibus libero Mauris\n\n782Efficitur rutrum consectetur malesuada felis. amet, felis. massa,\n\n783Eget condimentum ante ac tincidunt. molestie semper ac purus ante\n\n784Efficitur bibendum, Mauris hendrerit dolor orci iaculis. metus in, metus dolor\n\n785Et Interdum Duis elementum Duis\n\n786Quis, ac malesuada orci sagittis elementum est elit. molestie molestie ut vel elit.\n\n787Eget eget Interdum elit. ac Mauris Fusce amet,\n\n788Vitae dui quis, metus hendrerit ipsum dui ante nec efficitur Vivamus eget metus velit. in\n\n789In, Ut Interdum condimentum eget semper.\n\n790Sed ac libero fames Mauris finibus\n\n791Sagittis tortor elementum efficitur eget ligula velit. bibendum, faucibus.\n\n792Scelerisque condimentum ac rutrum neque. volutpat eget metus ante\n\n793Primis ante purus eget ipsum in bibendum, molestie ac velit.\n\n794Ante adipiscing ligula ac viverra fringilla rutrum elementum consectetur ante eget elit. ac nec\n\n795Hendrerit Mauris velit. libero dui ante primis elementum sagittis Sed molestie malesuada\n\n796Fames ante ac ut aliquam semper eget in\n\n797Molestie in sagittis Ut eget elit. nunc efficitur semper orci, purus velit. eget tincidunt. Fusce\n\n798Quis, Fusce ut et viverra Fusce\n\n799Posuere adipiscing pharetra posuere massa\n\n800Tincidunt. ac orci, ante Vivamus viverra velit. Ut fringilla Interdum viverra ac in purus\n\n801Posuere vel pharetra Interdum ante iaculis.\n\n802Ac est in, metus primis massa, massa elementum ac adipiscing elementum purus viverra\n\n803Sagittis Sed molestie ut massa, nunc in orci vitae ante\n\n804Mauris sem. ac eget Mauris Mauris vel vitae elementum Fusce molestie ligula\n\n805Fames malesuada est Fusce fames amet,\nLorem\n\n806Posuere et fringilla dolor iaculis. ante posuere tincidunt. ac bibendum,\n\n807Ac hendrerit enim ac\nLorem viverra dolor consectetur condimentum sit sit primis\n\n808Tortor rutrum in vel velit. ac tortor\n\n809Semper. dolor neque. Duis libero in, iaculis. felis. velit. consectetur eget in, velit.\n\n810Duis rutrum velit. orci vel ut hendrerit dui aliquam tincidunt. vitae in adipiscing felis.\n\n811Purus in, ac est ipsum libero ac fames finibus est sagittis In\n\n812Nunc Integer In ipsum nec massa efficitur sem. efficitur ut volutpat condimentum fringilla Sed\n\n813Orci molestie elit. elit. enim\n\n814Ligula molestie tortor fringilla efficitur sem. aliquam vitae pretium tincidunt. fringilla\n\n815Et elit. eget sit molestie vel massa enim efficitur dui\n\n816Orci ac molestie faucibus. tincidunt. Mauris massa faucibus. aliquam\n\n817Efficitur sagittis vitae massa, velit. amet, viverra Mauris est primis elit. semper.\nLorem molestie in\n\n818Ut primis pretium libero velit. ut\n\n819Neque. viverra in semper eget\n\n820Viverra libero elit. adipiscing consectetur\n\n821Hendrerit\nLorem sagittis Mauris consectetur malesuada massa Mauris ac consectetur nunc efficitur primis\n\n822Eget ipsum scelerisque In Mauris eget rutrum massa,\n\n823Ligula fames nunc est elit. quis, finibus Sed ipsum\n\n824Felis. malesuada ac sit pharetra massa, felis.\n\n825Ut libero elit. elit. ligula efficitur fames orci bibendum, eget pretium\n\n826Sit sem. bibendum, Fusce\nLorem rutrum ac pharetra enim\n\n827Aliquam ac orci ut in ante\n\n828Ac aliquam vitae lorem ac hendrerit consectetur ante ligula orci ligula primis\n\n829Faucibus. aliquam massa elementum In libero adipiscing eget enim nec purus orci,\n\n830Ante elementum pretium volutpat iaculis. Mauris viverra Vivamus consectetur eget metus hendrerit in\n\n831Consectetur scelerisque ante ante ante pharetra\n\n832Sagittis Fusce velit. pretium ligula sagittis efficitur libero metus massa, posuere faucibus. velit.\n\n833Ac elementum aliquam orci, est elementum eget faucibus. quis, Interdum neque. amet, ipsum orci,\n\n834Ante viverra condimentum enim orci, ac efficitur tincidunt. iaculis. ac pretium finibus purus viverra\n\n835Ac\nLorem metus orci elementum elementum sit\n\n836Bibendum, amet, eget ac felis. hendrerit Sed Sed Fusce viverra eget tortor elementum velit. pharetra\n\n837Orci efficitur consectetur ut efficitur in massa, ligula et pharetra Interdum Ut pharetra efficitur\n\n838Dolor scelerisque Mauris massa tincidunt. condimentum fames iaculis. efficitur in semper\n\n839Orci, lorem sem. neque. Fusce Mauris\n\n840Bibendum, ligula massa, Sed vitae ligula in, molestie faucibus. nunc finibus viverra\n\n841Adipiscing Sed ligula et efficitur hendrerit ac ac bibendum, libero sagittis ante Sed et\n\n842Massa est rutrum in, hendrerit massa, rutrum rutrum fringilla fringilla ut Interdum Sed metus Sed\n\n843Malesuada vitae pretium Integer ut hendrerit felis. vitae et velit.\n\n844Finibus in Vivamus adipiscing malesuada felis.\n\n845Vel volutpat faucibus. molestie\nLorem adipiscing ligula elit. scelerisque iaculis.\n\n846Adipiscing elementum ut est Vivamus vel enim massa\n\n847Sem. neque. ante posuere ligula scelerisque in,\n\n848Pharetra sem. pharetra adipiscing ante elit. vitae faucibus. rutrum adipiscing et ut\n\n849Velit. Mauris amet, massa fames et\n\n850Orci, et semper. ut bibendum,\n\n851Vel sem. finibus ante ligula ut quis, ante malesuada hendrerit\n\n852In ac purus malesuada ut dui semper. ac\n\n853Sit elit. tincidunt. hendrerit in ante volutpat elementum ligula pharetra lorem purus lorem\n\n854Efficitur pharetra ante tincidunt. condimentum neque.\n\n855Sed Interdum ut et\nLorem Duis semper primis vel nunc ante nunc consectetur finibus\n\n856Rutrum felis. libero eget iaculis. condimentum lorem\n\n857In Ut condimentum elit. nunc molestie hendrerit fringilla\n\n858Ut sit dolor condimentum Vivamus malesuada\n\n859Est velit. adipiscing sagittis semper libero\n\n860Ipsum pharetra primis ut ante dui\n\n861Ligula libero nunc vitae fringilla\n\n862Vivamus ante Mauris eget\nLorem ante ac dolor dolor sagittis massa\n\n863Bibendum, Sed orci semper. elit. vel amet, purus orci\n\n864Velit. adipiscing quis, orci efficitur sagittis efficitur efficitur Integer ante faucibus. elit.\n\n865Eget pretium consectetur ut ante ac massa, molestie amet, hendrerit condimentum\n\n866Vel ac elit. ut nec scelerisque ac orci, et\n\n867Velit. nunc felis. in massa fringilla tincidunt. malesuada pretium\n\n868Efficitur enim scelerisque nec condimentum ipsum amet,\n\n869Ut dui vel ante hendrerit amet, in sagittis fames molestie fringilla ac Mauris\n\n870Primis fringilla condimentum ut ante et\n\n871Sem. vel vel in elit. in\nLorem\n\n872Elementum massa in semper quis, metus in semper vel massa massa, volutpat\n\n873Iaculis. orci, In tincidunt. eget tincidunt. vel Ut ac tortor\n\n874Sed Integer massa, ipsum bibendum, fringilla\n\n875Et sagittis\nLorem Sed finibus tortor elementum malesuada quis, Sed Interdum fringilla in quis, Fusce\n\n876Ipsum fringilla semper ante fringilla semper.\nLorem elementum primis vitae\n\n877Volutpat adipiscing dolor hendrerit nunc scelerisque sit volutpat elit. in ac massa, ipsum ipsum\n\n878Tincidunt. ante massa volutpat volutpat iaculis. lorem felis. nunc ipsum volutpat purus\n\n879Bibendum, Vivamus nunc viverra ut purus pharetra velit. rutrum consectetur\n\n880Hendrerit nunc velit. nunc Vivamus et vitae Integer condimentum\n\n881Sed tortor Fusce Fusce Integer vel ante\nLorem et volutpat massa Duis pharetra primis\n\n882Sit faucibus. massa ut elementum vel Mauris finibus\n\n883Eget Integer libero Duis dolor est\nLorem sit faucibus. ante et est\nLorem orci\n\n884Dolor hendrerit Duis Fusce dolor Integer pretium rutrum in,\n\n885Sed ligula primis finibus dolor\n\n886Ut metus finibus neque. tortor ac consectetur metus consectetur quis, Ut rutrum viverra molestie\n\n887Est efficitur libero est ipsum dolor et massa, ac ante ac pretium Duis ac iaculis.\n\n888Et in Sed pretium metus ut enim scelerisque In vel\n\n889Massa ipsum Interdum in Sed ante in massa, enim iaculis. viverra tincidunt. fringilla semper.\n\n890Posuere pretium purus felis. sit scelerisque et condimentum faucibus. velit. in, scelerisque\n\n891Ligula in nec ac molestie fames massa ante\n\n892In ac tortor rutrum ante Integer velit. felis. in condimentum\n\n893Bibendum, in, Sed molestie ipsum\n\n894Viverra vel in\nLorem malesuada efficitur primis sagittis ac ipsum fames in ac ac finibus\n\n895Massa ligula Duis nunc condimentum In eget primis vel purus ac\n\n896Fusce orci consectetur amet, sagittis orci, tincidunt. semper ante efficitur In\n\n897Dui eget viverra scelerisque vel fames nunc semper. hendrerit eget enim semper fringilla\n\n898Dui ante viverra faucibus. Integer ligula ac faucibus. ante\n\n899In faucibus. ante ante adipiscing rutrum semper In in\n\n900Ante adipiscing pretium sit Duis Interdum pretium sem. iaculis.\n\n901Massa, pretium rutrum neque. consectetur est Mauris massa pharetra elit.\n\n902Hendrerit dolor consectetur consectetur ac tincidunt. eget dolor\n\n903Bibendum, ac ut dui Sed in, libero massa fames et aliquam eget\n\n904Fames finibus adipiscing hendrerit faucibus. pretium\n\n905Sem. est molestie ante Integer orci, ante sagittis\n\n906Ut ipsum Duis scelerisque ac adipiscing semper tortor Vivamus orci ipsum massa sem. ac\n\n907Volutpat hendrerit consectetur Sed Integer vitae orci ut posuere eget ut\n\n908Primis Ut scelerisque adipiscing scelerisque et elementum in dui quis, ipsum semper. ipsum Ut\n\n909Velit.\nLorem ante Interdum sem. in in felis. tincidunt.\n\n910Duis Ut sit volutpat viverra condimentum Ut Ut primis sem. est condimentum volutpat eget aliquam\n\n911Eget semper. ac ante ut ante ut orci, dolor ipsum enim\n\n912Fringilla metus ligula ac rutrum est ligula neque. consectetur\n\n913Ac condimentum ut quis, ut sit consectetur felis. sem. bibendum, nunc in\n\n914Fusce faucibus. quis, ante vel ante elit. sit massa Fusce Ut iaculis. massa, finibus metus\n\n915Dolor condimentum massa in pharetra Ut efficitur\n\n916Iaculis. et vel massa adipiscing\n\n917Ligula massa ac Fusce dui semper\n\n918Elementum ut purus efficitur fringilla\n\n919Interdum pretium purus elementum vel felis.\n\n920Nec orci, efficitur vitae massa Vivamus Fusce vel rutrum ac ut sagittis\n\n921Primis ligula condimentum enim dui in\n\n922Ac pharetra ut\nLorem semper. metus vitae purus ac amet, faucibus. finibus Ut ac dolor\n\n923Quis, volutpat viverra metus ac eget Integer ipsum volutpat Duis molestie et in ac hendrerit\n\n924Scelerisque Sed vitae ut amet, rutrum primis condimentum dui bibendum, in\n\n925Finibus in Vivamus iaculis. libero elit. ante aliquam in tortor metus libero purus efficitur\n\n926Amet, elit. tincidunt. ipsum hendrerit pretium condimentum scelerisque neque. nec bibendum, Interdum rutrum\n\n927Sagittis est ipsum ac lorem in,\n\n928Pharetra dui massa, sit primis posuere in ipsum efficitur pretium primis ac in Vivamus condimentum\n\n929Orci, ac semper molestie viverra Vivamus eget dolor ante\n\n930Nunc est purus orci viverra elit. Sed in ante pharetra eget dui\n\n931In, nec sem. neque. consectetur consectetur eget et ut faucibus. in ante efficitur purus\n\n932Bibendum, consectetur scelerisque hendrerit ante orci,\n\n933Fames lorem bibendum, est condimentum nec\n\n934Sed Integer sem. ante ut est eget orci consectetur ac fames vel\n\n935Malesuada massa Duis pharetra ac Mauris metus elementum rutrum faucibus. libero neque. nec primis\n\n936In, semper. faucibus. primis bibendum,\n\n937Primis enim Mauris ut lorem sit dolor consectetur quis, ut sagittis\n\n938Velit. iaculis. efficitur ac condimentum malesuada vel ante condimentum Vivamus neque.\n\n939Vel viverra enim sit hendrerit amet, posuere ac eget elit. scelerisque vel amet,\n\n940Viverra Ut orci orci, Vivamus finibus in, ligula rutrum condimentum Interdum eget\n\n941Tincidunt. posuere massa, pretium lorem In est iaculis. purus ac rutrum\n\n942Elit. et massa, massa, Fusce\n\n943Lorem purus bibendum, et efficitur quis, orci, Integer elit. ipsum\n\n944Neque. Integer sagittis in metus adipiscing\nLorem\n\n945Duis vitae sem. semper. rutrum Mauris Ut adipiscing vitae\n\n946In purus ante consectetur sem. lorem\n\n947In lorem vitae ut In pretium\n\n948Fusce in orci ipsum purus fames pretium tincidunt.\n\n949Fusce condimentum semper semper. est malesuada ac\n\n950Fusce primis Mauris pharetra rutrum rutrum ante ac ut finibus neque. dui\n\n951Viverra aliquam scelerisque hendrerit orci in rutrum viverra in in tortor in\n\n952Bibendum, et ac consectetur efficitur\n\n953Quis, libero lorem Vivamus ut ligula massa,\n\n954In In scelerisque orci posuere Duis ante vitae hendrerit in\n\n955Lorem consectetur consectetur molestie metus adipiscing sagittis felis. consectetur Integer ante\n\n956Faucibus. ac sem. faucibus. posuere Sed ante\n\n957Lorem Interdum iaculis. consectetur molestie sagittis Interdum ante purus malesuada ac ac hendrerit hendrerit condimentum\n\n958Ut semper orci, orci ut ac semper. consectetur consectetur Mauris\n\n959\nLorem ipsum orci ac bibendum, scelerisque bibendum, quis, libero bibendum, nec et dolor\n\n960Ac massa, tortor quis, elit. massa, in amet, est volutpat\n\n961Consectetur ac ac elit. neque. pretium vel ac metus dolor semper.\n\n962Orci, ipsum in, aliquam neque. est viverra est\n\n963Ac ac massa massa, ac\n\n964Iaculis. finibus aliquam velit. ante\n\n965Massa, ipsum molestie est in Fusce efficitur fames velit. nunc\n\n966Integer lorem efficitur condimentum faucibus. ligula dui scelerisque ac Mauris pretium massa aliquam\n\n967Neque. elit. velit. lorem viverra ut\n\n968Ligula vel et volutpat elit. adipiscing in finibus posuere metus Interdum rutrum\n\n969Ac dui primis et tincidunt. vitae\n\n970Orci, In ante Duis elementum dolor malesuada fames ipsum\n\n971Sem. ipsum ante in Sed in elit.\n\n972Semper. eget iaculis. ut et\n\n973Sem. sagittis nec In pharetra efficitur ante Vivamus nunc aliquam felis. Sed faucibus. ac Mauris\n\n974Orci, faucibus. massa est condimentum In efficitur sagittis ac elit. velit. metus purus\n\n975Amet, ac vel scelerisque consectetur Integer viverra faucibus.\n\n976Massa, fames in est in quis, vel dolor pretium semper\n\n977Ligula et Duis in Integer fames ac Duis volutpat et ac ligula\n\n978Elit. ipsum ac pretium volutpat\n\n979Ac hendrerit sem. quis, tortor enim in hendrerit scelerisque primis quis, neque.\n\n980Ante posuere metus semper vel metus faucibus. orci, Sed elementum\n\n981Et efficitur volutpat orci consectetur sagittis In vitae elit. dolor\n\n982Efficitur ante efficitur consectetur Integer eget orci\n\n983Ac sagittis amet, ac aliquam nunc primis Interdum neque. vitae fringilla aliquam eget\n\n984Adipiscing orci, In posuere et aliquam Ut tortor orci iaculis. in scelerisque\n\n985Vivamus ipsum sem. ut faucibus. quis, elit. sagittis consectetur lorem adipiscing pharetra felis. lorem ante\n\n986Finibus ante metus\nLorem elit. adipiscing pharetra scelerisque quis,\n\n987Tincidunt. felis. vitae tincidunt. consectetur hendrerit in in ipsum amet, volutpat\n\n988Tincidunt. in ante ac amet, vitae efficitur posuere sem. scelerisque condimentum\n\n989Vitae fames dui consectetur ante amet, hendrerit\n\n990Molestie in viverra fames ante ante lorem viverra Interdum\n\n991Elementum in quis, primis scelerisque sagittis\n\n992Ut metus Interdum efficitur orci,\n\n993Faucibus. amet, In neque. velit. ante enim scelerisque primis malesuada elit.\n\n994Elementum nec ligula primis massa, In\n\n995Semper Vivamus aliquam efficitur condimentum consectetur\n\n996Fusce Interdum efficitur tincidunt. orci elit. et rutrum in,\n\n997Sit tortor sit hendrerit vitae fames nec elementum nunc malesuada aliquam\n\n998Eget massa in in tincidunt. Sed molestie nunc Ut metus ipsum\n\n999Metus vel condimentum Vivamus neque. quis, ligula in rutrum neque. iaculis. malesuada Mauris\n\n1000Et Fusce ac elit. est est consectetur enim Interdum felis.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |",
     "category": "Components",
     "section": "Selection",
     "boost": "Dropdowns components/dropdowns #components/dropdowns Components Selection"
@@ -439,16 +439,6 @@
     "section": "Content",
     "boost": "FormLabel components/formLabel #components/formLabel Components Content"
   },
-  {
-    "id": "components/fullscreenMap",
-    "title": "components/fullscreenMap",
-    "lead": null,
-    "summary": "- resize: 1",
-    "searchText": "Overview\n- resize: 1",
-    "category": "Components",
-    "section": "Map",
-    "boost": "components/fullscreenMap #components/fullscreenMap Components Map"
-  },
   {
     "id": "components/groupedItemList",
     "title": "GroupedItemList",
@@ -543,8 +533,8 @@
     "id": "components/mapCircle",
     "title": "Circle",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Circle\nCircle\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Circle\nCircle\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "Circle components/mapCircle #components/mapCircle Components Map"
@@ -553,8 +543,8 @@
     "id": "components/mapCluster",
     "title": "Clusters",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Clusters\nClusters\nTerms of use© 1987–2025 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate dataToggle cluster\nClusters with POIs\nTerms of use© 1987–2025 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate data",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Clusters\nClusters\nTerms of use© 1987–2026 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate dataToggle cluster\nClusters with POIs\nTerms of use© 1987–2026 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate data",
     "category": "Components",
     "section": "Map",
     "boost": "Clusters components/mapCluster #components/mapCluster Components Map"
@@ -563,8 +553,8 @@
     "id": "components/mapContext",
     "title": "Map",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Map\nMap\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n### ContextMenu\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| onOpen | Function | — | Callback function triggered when the context menu has opened. It returns the coordinates where the map has been clicked: { lat: 48.07182240898762, lng: 11.495482666015647 } |\n| children | List of ContextMenuItem | — | The list of ContextMenuItem to render. Note that the order is important and may not be altered after the first render as the component tries to update the labels directly and relieson the order of items. Also do not omit an item which you want to add later on. Rather disable it. |\n### ContextMenuItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String | — | The actual label text. |\n| disabled | Boolean | — | Defines whether or not the item is disabled. |\n| hasSpinner | Boolean | — | Defines whether or not a spinner is rendered instead of the label. |\n| icon | String | — | The name of the icon added to the label. |\n| callback | Function | — | Callback function that is called when clicking on the item. |\n| labelClassName | String | — | Additional classes added to the label element. |\n| className | String | — | Additional classes added to the wrapper element. |",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Map\nMap\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n### ContextMenu\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| onOpen | Function | — | Callback function triggered when the context menu has opened. It returns the coordinates where the map has been clicked: { lat: 48.07182240898762, lng: 11.495482666015647 } |\n| children | List of ContextMenuItem | — | The list of ContextMenuItem to render. Note that the order is important and may not be altered after the first render as the component tries to update the labels directly and relieson the order of items. Also do not omit an item which you want to add later on. Rather disable it. |\n### ContextMenuItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String | — | The actual label text. |\n| disabled | Boolean | — | Defines whether or not the item is disabled. |\n| hasSpinner | Boolean | — | Defines whether or not a spinner is rendered instead of the label. |\n| icon | String | — | The name of the icon added to the label. |\n| callback | Function | — | Callback function that is called when clicking on the item. |\n| labelClassName | String | — | Additional classes added to the label element. |\n| className | String | — | Additional classes added to the wrapper element. |",
     "category": "Components",
     "section": "Map",
     "boost": "Map components/mapContext #components/mapContext Components Map"
@@ -573,8 +563,8 @@
     "id": "components/mapDraggableMarker",
     "title": "Draggable marker",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Draggable marker\nDraggable marker\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMarker position{\"lat\":48.16,\"lng\":11.38}",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Draggable marker\nDraggable marker\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMarker position{\"lat\":48.16,\"lng\":11.38}",
     "category": "Components",
     "section": "Map",
     "boost": "Draggable marker components/mapDraggableMarker #components/mapDraggableMarker Components Map"
@@ -593,8 +583,8 @@
     "id": "components/mapInfoBubble",
     "title": "InfoBubble",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "InfoBubble\nInfoBubble\nTerms of use© 1987–2025 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen\n\nToggle info",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "InfoBubble\nInfoBubble\nTerms of use© 1987–2026 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen\n\nToggle info",
     "category": "Components",
     "section": "Map",
     "boost": "InfoBubble components/mapInfoBubble #components/mapInfoBubble Components Map"
@@ -603,8 +593,8 @@
     "id": "components/mapLayerGroup",
     "title": "MapLayerGroup",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "MapLayerGroup\nMapLayerGroup\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "MapLayerGroup\nMapLayerGroup\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "MapLayerGroup components/mapLayerGroup #components/mapLayerGroup Components Map"
@@ -614,7 +604,7 @@
     "title": "Marker",
     "lead": "Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.",
     "summary": "Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.",
-    "searchText": "Marker\nMarkers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.\nMarker\nNote: The map zoom level does not affect the size of Markers.\n\nSharing icon between Markers\n\nIt's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on the map.\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nSingleMapMarker\nVehicle\n\nVehicle\n2\n1\n\nVehicle\n2\n1\n\nThe hover state is triggered on mouse hover or by adding the class hover\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n2\n1\n\nVehicle\n\nVehicle\n\nVehicle\n2\n1\n\nTo activate the active state of any marker you have to add the class active\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\n236km\n\nVehicle\n\nPOI\n\nGeofence\n\nMax height 2.5m\n\n236km\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n\nThe animation plays automatically when using the SingleMapMarker prop pinging\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nClusterMapMarker\n100\n\n10\n25\n\n100\n\n10\n25\n\n100\n\n100\n\n100\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| count | Number | — | Number displayed in the center. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence' or 'bg-map-marker-route'. |",
+    "searchText": "Marker\nMarkers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.\nMarker\nNote: The map zoom level does not affect the size of Markers.\n\nSharing icon between Markers\n\nIt's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on the map.\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nSingleMapMarker\nVehicle\n\nVehicle\n2\n1\n\nVehicle\n2\n1\n\nThe hover state is triggered on mouse hover or by adding the class hover\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n2\n1\n\nVehicle\n\nVehicle\n\nVehicle\n2\n1\n\nTo activate the active state of any marker you have to add the class active\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\n236km\n\nVehicle\n\nPOI\n\nGeofence\n\nMax height 2.5m\n\n236km\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n\nThe animation plays automatically when using the SingleMapMarker prop pinging\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nClusterMapMarker\n100\n\n10\n25\n\n100\n\n10\n25\n\n100\n\n100\n\n100\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| count | Number | — | Number displayed in the center. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence' or 'bg-map-marker-route'. |",
     "category": "Components",
     "section": "Map",
     "boost": "Marker components/mapMarker #components/mapMarker Components Map"
@@ -623,8 +613,8 @@
     "id": "components/mapPolygon",
     "title": "Polygon",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Polygon\nPolygon\nTerms of use© 1987–2025 HERE\n\n200 m\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nColorcolor-warmup-salmonColdplay\ncolor-coldplay-wine\ncolor-coldplay-aubergine\ncolor-coldplay-kashmir\ncolor-coldplay-fountain\ncolor-coldplay-turquoise\ncolor-coldplay-bermuda\ncolor-coldplay-moos\ncolor-coldplay-primrose\ncolor-coldplay-khaki\nWarmup\ncolor-warmup-crimson\ncolor-warmup-victoria\ncolor-warmup-cadillac\ncolor-warmup-raspberry\ncolor-warmup-cerise\ncolor-warmup-charm\ncolor-warmup-salmon\ncolor-warmup-cherokee\ncolor-warmup-corn\nGray\ngray-darkest\ngray-darker\ngray-dark\ngray\ngray-light\ngray-lighter\ngray-lightest\ngray-decent\nBrand\nbrand-primary\nbrand-secondary\nbrand-info\nbrand-success\nbrand-warning\nbrand-danger\nStatus\ncolor-status-available\ncolor-status-driving\ncolor-status-resting\ncolor-status-working\nMap Marker\ncolor-map-marker-text\ncolor-map-marker-active\ncolor-map-marker-asset\ncolor-map-marker-poi\ncolor-map-marker-geofence\ncolor-map-marker-route\ncolor-map-marker-info\ncolor-map-marker-success\ncolor-map-marker-warning\ncolor-map-marker-danger\nRating\ncolor-rating-1\ncolor-rating-2\ncolor-rating-3\ncolor-rating-4\ncolor-rating-5\nHighlight\ncolor-highlight-darkest\ncolor-highlight-darker\ncolor-highlight-dark\ncolor-highlight\ncolor-highlight-light\ncolor-highlight-lighter\ncolor-highlight-lightest\ncolor-highlight-decent\n\nTerms of use© 1987–2025 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Polygon\nPolygon\nTerms of use© 1987–2026 HERE\n\n200 m\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nColorcolor-warmup-salmonColdplay\ncolor-coldplay-wine\ncolor-coldplay-aubergine\ncolor-coldplay-kashmir\ncolor-coldplay-fountain\ncolor-coldplay-turquoise\ncolor-coldplay-bermuda\ncolor-coldplay-moos\ncolor-coldplay-primrose\ncolor-coldplay-khaki\nWarmup\ncolor-warmup-crimson\ncolor-warmup-victoria\ncolor-warmup-cadillac\ncolor-warmup-raspberry\ncolor-warmup-cerise\ncolor-warmup-charm\ncolor-warmup-salmon\ncolor-warmup-cherokee\ncolor-warmup-corn\nGray\ngray-darkest\ngray-darker\ngray-dark\ngray\ngray-light\ngray-lighter\ngray-lightest\ngray-decent\nBrand\nbrand-primary\nbrand-secondary\nbrand-info\nbrand-success\nbrand-warning\nbrand-danger\nStatus\ncolor-status-available\ncolor-status-driving\ncolor-status-resting\ncolor-status-working\nMap Marker\ncolor-map-marker-text\ncolor-map-marker-active\ncolor-map-marker-asset\ncolor-map-marker-poi\ncolor-map-marker-geofence\ncolor-map-marker-route\ncolor-map-marker-info\ncolor-map-marker-success\ncolor-map-marker-warning\ncolor-map-marker-danger\nRating\ncolor-rating-1\ncolor-rating-2\ncolor-rating-3\ncolor-rating-4\ncolor-rating-5\nHighlight\ncolor-highlight-darkest\ncolor-highlight-darker\ncolor-highlight-dark\ncolor-highlight\ncolor-highlight-light\ncolor-highlight-lighter\ncolor-highlight-lightest\ncolor-highlight-decent\n\nTerms of use© 1987–2026 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "Polygon components/mapPolygon #components/mapPolygon Components Map"
@@ -634,7 +624,7 @@
     "title": "Route",
     "lead": "There are currently 3 different route styles built-in into the map component.",
     "summary": "There are currently 3 different route styles built-in into the map component.",
-    "searchText": "Route\nThere are currently 3 different route styles built-in into the map component.\nRoute\nThe \"reduced\" style is meant for historic routes and shall indicate that the driver went that route but is ahead of a certain timestamp.\n\nThe \"alternativeRoute\" style is meant for route planning cases and shall show alternate routes.\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing geometry\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nChange routeToggle route\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing styles\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nToggle reduced styleToggle arrows\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with different colors\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute indicating a range for electric vehicles\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute sandbox\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\n{\n\"segments\": [\n{\n\"points\": [\n{\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n{\n\"lat\": 48.17937,\n\"lng\": 11.4875\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48767\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.4879\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48826\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48867\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.48924\n},\n{\n\"lat\": 48.1794,\n\"lng\": 11.48959\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48999\n},\n{\n\"lat\": 48.17936,\n\"lng\": 11.4904\n},\n{\n\"lat\": 48.17933,\n\"lng\": 11.4906\n},\n{\n\"lat\": 48.17927,\n\"lng\": 11.49095\n},\n{\n\"lat\": 48.17915,\n\"lng\": 11.49154\n},\n{\n\"lat\": 48.17895,\n\"lng\": 11.49235\n},\n{\n\"lat\": 48.1788,\n\"lng\": 11.49283\n},\n{\n\"lat\": 48.17869,\n\"lng\": 11.49314\n},\n{\n\"lat\": 48.17856,\n\"lng\": 11.49346\n},\n{\n\"lat\": 48.17843,\n\"lng\": 11.49376\n},\n{\n\"lat\": 48.17828,\n\"lng\": 11.49413\n},\n{\n\"lat\": 48.17813,\n\"lng\": 11.49445\n},\n{\n\"lat\": 48.17797,\n\"lng\": 11.49479\n},\n{\n\"lat\": 48.1778,\n\"lng\": 11.49521\n},\n{\n\"lat\": 48.17775,\n\"lng\": 11.49538\n},\n{\n\"lat\": 48.17769,\n\"lng\": 11.49551\n},\n{\n\"lat\": 48.17757,\n\"lng\": 11.49576\n},\n{\n\"lat\": 48.17752,\n\"lng\": 11.49586\n},\n{\n\"lat\": 48.17748,\n\"lng\": 11.49595\n},\n{\n\"lat\": 48.17744,\n\"lng\": 11.49604\n},\n{\n\"lat\": 48.17735,\n\"lng\": 11.49622\n},\n{\n\"lat\": 48.17722,\n\"lng\": 11.49649\n},\n{\n\"lat\": 48.17701,\n\"lng\": 11.49692\n},\n{\n\"lat\": 48.177,\n\"lng\": 11.49695\n},\n{\n\"lat\": 48.17698,\n\"lng\": 11.49699\n},\n{\n\"lat\": 48.1767,\n\"lng\": 11.49758\n},\n{\n\"lat\": 48.1758,\n\"lng\": 11.49944\n},\n{\n\"lat\": 48.17572,\n\"lng\": 11.4996\n},\n{\n\"lat\": 48.17538,\n\"lng\": 11.50031\n},\n{\n\"lat\": 48.17523,\n\"lng\": 11.50061\n},\n{\n\"lat\": 48.17519,\n\"lng\": 11.50069\n},\n{\n\"lat\": 48.17513,\n\"lng\": 11.50081\n},\n{\n\"lat\": 48.17495,\n\"lng\": 11.50117\n},\n{\n\"lat\": 48.17468,\n\"lng\": 11.50171\n},\n{\n\"lat\": 48.17449,\n\"lng\": 11.50205\n},\n{\n\"lat\": 48.17431,\n\"lng\": 11.50234\n},\n{\n\"lat\": 48.17418,\n\"lng\": 11.50254\n},\n{\n\"lat\": 48.17405,\n\"lng\": 11.5027\n},\n{\n\"lat\": 48.17346,\n\"lng\": 11.5035\n},\n{\n\"lat\": 48.173,\n\"lng\": 11.50416\n},\n{\n\"lat\": 48.17276,\n\"lng\": 11.50448\n},\n{\n\"lat\": 48.17253,\n\"lng\": 11.50482\n},\n{\n\"lat\": 48.17237,\n\"lng\": 11.50509\n},\n{\n\"lat\": 48.17223,\n\"lng\": 11.50536\n},\n{\n\"lat\": 48.1721,\n\"lng\": 11.50564\n},\n{\n\"lat\": 48.17188,\n\"lng\": 11.50614\n},\n{\n\"lat\": 48.17169,\n\"lng\": 11.50658\n},\n{\n\"lat\": 48.17128,\n\"lng\": 11.50753\n},\n{\n\"lat\": 48.17117,\n\"lng\": 11.50777\n},\n{\n\"lat\": 48.17095,\n\"lng\": 11.50828\n},\n{\n\"lat\": 48.1709,\n\"lng\": 11.50838\n},\n{\n\"lat\": 48.17076,\n\"lng\": 11.50871\n},\n{\n\"lat\": 48.17057,\n\"lng\": 11.50922\n},\n{\n\"lat\": 48.17051,\n\"lng\": 11.50938\n},\n{\n\"lat\": 48.17042,\n\"lng\": 11.50953\n},\n{\n\"lat\": 48.17032,\n\"lng\": 11.50976\n},\n{\n\"lat\": 48.17022,\n\"lng\": 11.50999\n},\n{\n\"lat\": 48.17014,\n\"lng\": 11.51017\n},\n{\n\"lat\": 48.17007,\n\"lng\": 11.51029\n},\n{\n\"lat\": 48.16999,\n\"lng\": 11.51044\n},\n{\n\"lat\": 48.16993,\n\"lng\": 11.51055\n},\n{\n\"lat\": 48.16985,\n\"lng\": 11.51069\n},\n{\n\"lat\": 48.1698,\n\"lng\": 11.51078\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.51086\n},\n{\n\"lat\": 48.16984,\n\"lng\": 11.5109\n},\n{\n\"lat\": 48.16991,\n\"lng\": 11.51093\n},\n{\n\"lat\": 48.17003,\n\"lng\": 11.51097\n},\n{\n\"lat\": 48.17015,\n\"lng\": 11.51099\n},\n{\n\"lat\": 48.1703,\n\"lng\": 11.511\n},\n{\n\"lat\": 48.17048,\n\"lng\": 11.51104\n},\n{\n\"lat\": 48.17068,\n\"lng\": 11.5111\n},\n{\n\"lat\": 48.17093,\n\"lng\": 11.51118\n},\n{\n\"lat\": 48.17112,\n\"lng\": 11.51124\n},\n{\n\"lat\": 48.17131,\n\"lng\": 11.51131\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.51139\n},\n{\n\"lat\": 48.17165,\n\"lng\": 11.51147\n},\n{\n\"lat\": 48.17179,\n\"lng\": 11.51156\n},\n{\n\"lat\": 48.17192,\n\"lng\": 11.51166\n},\n{\n\"lat\": 48.17205,\n\"lng\": 11.51178\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.51192\n},\n{\n\"lat\": 48.17232,\n\"lng\": 11.51206\n},\n{\n\"lat\": 48.17242,\n\"lng\": 11.51219\n},\n{\n\"lat\": 48.17251,\n\"lng\": 11.51234\n},\n{\n\"lat\": 48.17261,\n\"lng\": 11.5125\n},\n{\n\"lat\": 48.1727,\n\"lng\": 11.51268\n},\n{\n\"lat\": 48.17279,\n\"lng\": 11.51287\n},\n{\n\"lat\": 48.17294,\n\"lng\": 11.51328\n},\n{\n\"lat\": 48.17304,\n\"lng\": 11.51362\n},\n{\n\"lat\": 48.17307,\n\"lng\": 11.51373\n},\n{\n\"lat\": 48.17315,\n\"lng\": 11.51402\n},\n{\n\"lat\": 48.17333,\n\"lng\": 11.51476\n},\n{\n\"lat\": 48.17341,\n\"lng\": 11.51511\n},\n{\n\"lat\": 48.17365,\n\"lng\": 11.51612\n},\n{\n\"lat\": 48.17394,\n\"lng\": 11.51727\n},\n{\n\"lat\": 48.1741,\n\"lng\": 11.51791\n},\n{\n\"lat\": 48.17416,\n\"lng\": 11.51819\n},\n{\n\"lat\": 48.17433,\n\"lng\": 11.51893\n},\n{\n\"lat\": 48.17438,\n\"lng\": 11.51911\n},\n{\n\"lat\": 48.17453,\n\"lng\": 11.51968\n},\n{\n\"lat\": 48.17465,\n\"lng\": 11.52003\n},\n{\n\"lat\": 48.17469,\n\"lng\": 11.52013\n},\n{\n\"lat\": 48.17477,\n\"lng\": 11.52031\n},\n{\n\"lat\": 48.17488,\n\"lng\": 11.52056\n},\n{\n\"lat\": 48.17501,\n\"lng\": 11.52084\n},\n{\n\"lat\": 48.17509,\n\"lng\": 11.52099\n},\n{\n\"lat\": 48.1754,\n\"lng\": 11.52154\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52171\n},\n{\n\"lat\": 48.17542,\n\"lng\": 11.52198\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52245\n},\n{\n\"lat\": 48.17517,\n\"lng\": 11.52292\n},\n{\n\"lat\": 48.17478,\n\"lng\": 11.52371\n},\n{\n\"lat\": 48.17462,\n\"lng\": 11.52403\n},\n{\n\"lat\": 48.17455,\n\"lng\": 11.52416\n},\n{\n\"lat\": 48.17451,\n\"lng\": 11.52425\n},\n{\n\"lat\": 48.17442,\n\"lng\": 11.52442\n},\n{\n\"lat\": 48.17421,\n\"lng\": 11.52483\n},\n{\n\"lat\": 48.17412,\n\"lng\": 11.52499\n},\n{\n\"lat\": 48.17388,\n\"lng\": 11.52544\n},\n{\n\"lat\": 48.17376,\n\"lng\": 11.52567\n},\n{\n\"lat\": 48.17353,\n\"lng\": 11.52614\n},\n{\n\"lat\": 48.17317,\n\"lng\": 11.52684\n},\n{\n\"lat\": 48.17299,\n\"lng\": 11.52719\n},\n{\n\"lat\": 48.17267,\n\"lng\": 11.52782\n},\n{\n\"lat\": 48.17262,\n\"lng\": 11.52792\n},\n{\n\"lat\": 48.17246,\n\"lng\": 11.52824\n},\n{\n\"lat\": 48.17225,\n\"lng\": 11.52861\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.52872\n},\n{\n\"lat\": 48.17214,\n\"lng\": 11.52882\n},\n{\n\"lat\": 48.17189,\n\"lng\": 11.52926\n},\n{\n\"lat\": 48.17187,\n\"lng\": 11.5293\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.52995\n},\n{\n\"lat\": 48.17132,\n\"lng\": 11.53026\n},\n{\n\"lat\": 48.17127,\n\"lng\": 11.53034\n},\n{\n\"lat\": 48.17103,\n\"lng\": 11.53075\n},\n{\n\"lat\": 48.17073,\n\"lng\": 11.53125\n},\n{\n\"lat\": 48.17028,\n\"lng\": 11.53194\n},\n{\n\"lat\": 48.17017,\n\"lng\": 11.53211\n},\n{\n\"lat\": 48.16982,\n\"lng\": 11.53266\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.53277\n},\n{\n\"lat\": 48.16939,\n\"lng\": 11.53331\n},\n{\n\"lat\": 48.16885,\n\"lng\": 11.53418\n},\n{\n\"lat\": 48.16872,\n\"lng\": 11.53437\n},\n{\n\"lat\": 48.16822,\n\"lng\": 11.5351\n},\n{\n\"lat\": 48.16809,\n\"lng\": 11.5353\n},\n{\n\"lat\": 48.16791,\n\"lng\": 11.53554\n},\n{\n\"lat\": 48.16785,\n\"lng\": 11.53562\n},\n{\n\"lat\": 48.16774,\n\"lng\": 11.53577\n},\n{\n\"lat\": 48.16761,\n\"lng\": 11.53593\n},\n{\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n{\n\"lat\": 48.16714,\n\"lng\": 11.53644\n},\n{\n\"lat\": 48.167,\n\"lng\": 11.53659\n},\n{\n\"lat\": 48.16695,\n\"lng\": 11.53664\n},\n{\n\"lat\": 48.16688,\n\"lng\": 11.53671\n},\n{\n\"lat\": 48.16653,\n\"lng\": 11.53704\n},\n{\n\"lat\": 48.1659,\n\"lng\": 11.53768\n},\n{\n\"lat\": 48.16578,\n\"lng\": 11.53781\n},\n{\n\"lat\": 48.16564,\n\"lng\": 11.53796\n},\n{\n\"lat\": 48.1655,\n\"lng\": 11.53812\n},\n{\n\"lat\": 48.16513,\n\"lng\": 11.53854\n},\n{\n\"lat\": 48.16487,\n\"lng\": 11.53887\n},\n{\n\"lat\": 48.16472,\n\"lng\": 11.53908\n},\n{\n\"lat\": 48.1644,\n\"lng\": 11.53958\n},\n{\n\"lat\": 48.16432,\n\"lng\": 11.53971\n},\n{\n\"lat\": 48.16369,\n\"lng\": 11.54072\n},\n{\n\"lat\": 48.16354,\n\"lng\": 11.54097\n},\n{\n\"lat\": 48.16328,\n\"lng\": 11.54138\n},\n{\n\"lat\": 48.16281,\n\"lng\": 11.54216\n},\n{\n\"lat\": 48.16231,\n\"lng\": 11.54299\n},\n{\n\"lat\": 48.16185,\n\"lng\": 11.54381\n},\n{\n\"lat\": 48.16127,\n\"lng\": 11.54476\n},\n{\n\"lat\": 48.16115,\n\"lng\": 11.54496\n},\n{\n\"lat\": 48.16097,\n\"lng\": 11.54525\n},\n{\n\"lat\": 48.16073,\n\"lng\": 11.54561\n},\n{\n\"lat\": 48.16056,\n\"lng\": 11.54587\n},\n{\n\"lat\": 48.16029,\n\"lng\": 11.54625\n},\n{\n\"lat\": 48.16014,\n\"lng\": 11.54644\n},\n{\n\"lat\": 48.15994,\n\"lng\": 11.54668\n},\n{\n\"lat\": 48.15979,\n\"lng\": 11.54683\n},\n{\n\"lat\": 48.15969,\n\"lng\": 11.54693\n},\n{\n\"lat\": 48.15958,\n\"lng\": 11.54707\n},\n{\n\"lat\": 48.15947,\n\"lng\": 11.54721\n},\n{\n\"lat\": 48.15933,\n\"lng\": 11.54737\n},\n{\n\"lat\": 48.15902,\n\"lng\": 11.54779\n},\n{\n\"lat\": 48.15882,\n\"lng\": 11.54804\n},\n{\n\"lat\": 48.15811,\n\"lng\": 11.54893\n},\n{\n\"lat\": 48.15794,\n\"lng\": 11.54914\n},\n{\n\"lat\": 48.15734,\n\"lng\": 11.54987\n},\n{\n\"lat\": 48.15605,\n\"lng\": 11.55145\n},\n{\n\"lat\": 48.15531,\n\"lng\": 11.55236\n},\n{\n\"lat\": 48.15523,\n\"lng\": 11.55246\n},\n{\n\"lat\": 48.15422,\n\"lng\": 11.55378\n},\n{\n\"lat\": 48.15389,\n\"lng\": 11.55422\n},\n{\n\"lat\": 48.15342,\n\"lng\": 11.55479\n},\n{\n\"lat\": 48.15274,\n\"lng\": 11.55563\n},\n{\n\"lat\": 48.1521,\n\"lng\": 11.55639\n},\n{\n\"lat\": 48.15167,\n\"lng\": 11.5569\n},\n{\n\"lat\": 48.15153,\n\"lng\": 11.55707\n},\n{\n\"lat\": 48.15131,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15102,\n\"lng\": 11.55766\n},\n{\n\"lat\": 48.1509,\n\"lng\": 11.55778\n},\n{\n\"lat\": 48.15085,\n\"lng\": 11.55771\n},\n{\n\"lat\": 48.15077,\n\"lng\": 11.55763\n},\n{\n\"lat\": 48.15061,\n\"lng\": 11.55751\n},\n{\n\"lat\": 48.15043,\n\"lng\": 11.55736\n},\n{\n\"lat\": 48.15036,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15033,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15029,\n\"lng\": 11.55735\n},\n{\n\"lat\": 48.15026,\n\"lng\": 11.55737\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55742\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55746\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55753\n},\n{\n\"lat\": 48.15024,\n\"lng\": 11.55783\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55813\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55824\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55836\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55848\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55868\n},\n{\n\"lat\": 48.1502,\n\"lng\": 11.55881\n},\n{\n\"lat\": 48.15017,\n\"lng\": 11.55891\n},\n{\n\"lat\": 48.14997,\n\"lng\": 11.55967\n},\n{\n\"lat\": 48.14985,\n\"lng\": 11.5601\n},\n{\n\"lat\": 48.14919,\n\"lng\": 11.56242\n},\n{\n\"lat\": 48.14908,\n\"lng\": 11.56282\n},\n{\n\"lat\": 48.14906,\n\"lng\": 11.56288\n},\n{\n\"lat\": 48.14873,\n\"lng\": 11.56403\n},\n{\n\"lat\": 48.14858,\n\"lng\": 11.56455\n},\n{\n\"lat\": 48.14845,\n\"lng\": 11.56501\n},\n{\n\"lat\": 48.14833,\n\"lng\": 11.56545\n},\n{\n\"lat\": 48.14821,\n\"lng\": 11.56587\n},\n{\n\"lat\": 48.14804,\n\"lng\": 11.5665\n},\n{\n\"lat\": 48.14793,\n\"lng\": 11.56688\n},\n{\n\"lat\": 48.14791,\n\"lng\": 11.56696\n},\n{\n\"lat\": 48.14782,\n\"lng\": 11.56726\n},\n{\n\"lat\": 48.1476,\n\"lng\": 11.56804\n},\n{\n\"lat\": 48.14755,\n\"lng\": 11.56823\n},\n{\n\"lat\": 48.14752,\n\"lng\": 11.56834\n},\n{\n\"lat\": 48.14725,\n\"lng\": 11.56927\n},\n{\n\"lat\": 48.14702,\n\"lng\": 11.5701\n},\n{\n\"lat\": 48.14695,\n\"lng\": 11.57037\n},\n{\n\"lat\": 48.14689,\n\"lng\": 11.57057\n},\n{\n\"lat\": 48.14631,\n\"lng\": 11.57269\n},\n{\n\"lat\": 48.14623,\n\"lng\": 11.57297\n},\n{\n\"lat\": 48.14607,\n\"lng\": 11.5732\n},\n{\n\"lat\": 48.14596,\n\"lng\": 11.57336\n},\n{\n\"lat\": 48.14587,\n\"lng\": 11.57355\n},\n{\n\"lat\": 48.14585,\n\"lng\": 11.57359\n},\n{\n\"lat\": 48.14577,\n\"lng\": 11.57378\n},\n{\n\"lat\": 48.14566,\n\"lng\": 11.57413\n},\n{\n\"lat\": 48.14562,\n\"lng\": 11.57426\n},\n{\n\"lat\": 48.14555,\n\"lng\": 11.57433\n},\n{\n\"lat\": 48.14552,\n\"lng\": 11.57439\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57447\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.5746\n},\n{\n\"lat\": 48.14541,\n\"lng\": 11.57482\n},\n{\n\"lat\": 48.14538,\n\"lng\": 11.57501\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57518\n},\n{\n\"lat\": 48.14539,\n\"lng\": 11.57552\n},\n{\n\"lat\": 48.14544,\n\"lng\": 11.57592\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.57626\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57667\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57702\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57722\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57737\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57746\n},\n{\n\"lat\": 48.1455,\n\"lng\": 11.57762\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57768\n},\n{\n\"lat\": 48.14547,\n\"lng\": 11.5778\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14525,\n\"lng\": 11.57878\n},\n{\n\"lat\": 48.14486,\n\"lng\": 11.57861\n},\n{\n\"lat\": 48.14467,\n\"lng\": 11.57852\n},\n{\n\"lat\": 48.14428,\n\"lng\": 11.57833\n},\n{\n\"lat\": 48.14411,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14389,\n\"lng\": 11.57814\n},\n{\n\"lat\": 48.14357,\n\"lng\": 11.57799\n},\n{\n\"lat\": 48.1433,\n\"lng\": 11.57787\n},\n{\n\"lat\": 48.14318,\n\"lng\": 11.57782\n},\n{\n\"lat\": 48.14304,\n\"lng\": 11.57776\n},\n{\n\"lat\": 48.14263,\n\"lng\": 11.57752\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14237,\n\"lng\": 11.57791\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14251,\n\"lng\": 11.57804\n},\n{\n\"lat\": 48.14249,\n\"lng\": 11.57811\n},\n{\n\"lat\": 48.14241,\n\"lng\": 11.57837\n},\n{\n\"lat\": 48.14234,\n\"lng\": 11.57869\n},\n{\n\"lat\": 48.14222,\n\"lng\": 11.57923\n},\n{\n\"lat\": 48.14208,\n\"lng\": 11.57917\n},\n{\n\"lat\": 48.14193,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.14182,\n\"lng\": 11.58051\n},\n{\n\"lat\": 48.14166,\n\"lng\": 11.58118\n},\n{\n\"lat\": 48.14151,\n\"lng\": 11.58122\n},\n{\n\"lat\": 48.14122,\n\"lng\": 11.58107\n},\n{\n\"lat\": 48.1408,\n\"lng\": 11.58089\n},\n{\n\"lat\": 48.14029,\n\"lng\": 11.58068\n},\n{\n\"lat\": 48.1401,\n\"lng\": 11.58061\n},\n{\n\"lat\": 48.13995,\n\"lng\": 11.58055\n},\n{\n\"lat\": 48.13937,\n\"lng\": 11.58033\n},\n{\n\"lat\": 48.1391,\n\"lng\": 11.58025\n},\n{\n\"lat\": 48.13916,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.13878,\n\"lng\": 11.57965\n},\n{\n\"lat\": 48.13871,\n\"lng\": 11.57983\n},\n{\n\"lat\": 48.13859,\n\"lng\": 11.58013\n}\n],\n\"alternative\": false\n}\n],\n\"markers\": [\n{\n\"id\": \"100\",\n\"position\": {\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"start\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"200\",\n\"position\": {\n\"lat\": 48.13859,\n\"lng\": 11.58013\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"finish\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"59.70357\",\n\"position\": {\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n\"markerProps\": {\n\"active\": true,\n\"iconNames\": [\n\"route\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"name\": \"10 km / 36 min\",\n\"clickable\": false,\n\"fixed\": true\n}\n}\n]\n}\n\nSelect file...\n\nCreate demo routeCreate demo markerToggle route events\nEnter your route data into the input or select a JSON file to render a route with multiple segments and markers. Please note that this will replace all previously existing markers and route segments.\nSegments are separate parts of the route, each containing a list of points, which can be rendered as reduced route (semi-transparent) and with or without arrows (showArrows). A Marker should provide aposition and markerProps to define its shape.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |",
+    "searchText": "Route\nThere are currently 3 different route styles built-in into the map component.\nRoute\nThe \"reduced\" style is meant for historic routes and shall indicate that the driver went that route but is ahead of a certain timestamp.\n\nThe \"alternativeRoute\" style is meant for route planning cases and shall show alternate routes.\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing geometry\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nChange routeToggle route\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing styles\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nToggle reduced styleToggle arrows\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with different colors\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute indicating a range for electric vehicles\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute sandbox\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\n{\n\"segments\": [\n{\n\"points\": [\n{\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n{\n\"lat\": 48.17937,\n\"lng\": 11.4875\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48767\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.4879\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48826\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48867\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.48924\n},\n{\n\"lat\": 48.1794,\n\"lng\": 11.48959\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48999\n},\n{\n\"lat\": 48.17936,\n\"lng\": 11.4904\n},\n{\n\"lat\": 48.17933,\n\"lng\": 11.4906\n},\n{\n\"lat\": 48.17927,\n\"lng\": 11.49095\n},\n{\n\"lat\": 48.17915,\n\"lng\": 11.49154\n},\n{\n\"lat\": 48.17895,\n\"lng\": 11.49235\n},\n{\n\"lat\": 48.1788,\n\"lng\": 11.49283\n},\n{\n\"lat\": 48.17869,\n\"lng\": 11.49314\n},\n{\n\"lat\": 48.17856,\n\"lng\": 11.49346\n},\n{\n\"lat\": 48.17843,\n\"lng\": 11.49376\n},\n{\n\"lat\": 48.17828,\n\"lng\": 11.49413\n},\n{\n\"lat\": 48.17813,\n\"lng\": 11.49445\n},\n{\n\"lat\": 48.17797,\n\"lng\": 11.49479\n},\n{\n\"lat\": 48.1778,\n\"lng\": 11.49521\n},\n{\n\"lat\": 48.17775,\n\"lng\": 11.49538\n},\n{\n\"lat\": 48.17769,\n\"lng\": 11.49551\n},\n{\n\"lat\": 48.17757,\n\"lng\": 11.49576\n},\n{\n\"lat\": 48.17752,\n\"lng\": 11.49586\n},\n{\n\"lat\": 48.17748,\n\"lng\": 11.49595\n},\n{\n\"lat\": 48.17744,\n\"lng\": 11.49604\n},\n{\n\"lat\": 48.17735,\n\"lng\": 11.49622\n},\n{\n\"lat\": 48.17722,\n\"lng\": 11.49649\n},\n{\n\"lat\": 48.17701,\n\"lng\": 11.49692\n},\n{\n\"lat\": 48.177,\n\"lng\": 11.49695\n},\n{\n\"lat\": 48.17698,\n\"lng\": 11.49699\n},\n{\n\"lat\": 48.1767,\n\"lng\": 11.49758\n},\n{\n\"lat\": 48.1758,\n\"lng\": 11.49944\n},\n{\n\"lat\": 48.17572,\n\"lng\": 11.4996\n},\n{\n\"lat\": 48.17538,\n\"lng\": 11.50031\n},\n{\n\"lat\": 48.17523,\n\"lng\": 11.50061\n},\n{\n\"lat\": 48.17519,\n\"lng\": 11.50069\n},\n{\n\"lat\": 48.17513,\n\"lng\": 11.50081\n},\n{\n\"lat\": 48.17495,\n\"lng\": 11.50117\n},\n{\n\"lat\": 48.17468,\n\"lng\": 11.50171\n},\n{\n\"lat\": 48.17449,\n\"lng\": 11.50205\n},\n{\n\"lat\": 48.17431,\n\"lng\": 11.50234\n},\n{\n\"lat\": 48.17418,\n\"lng\": 11.50254\n},\n{\n\"lat\": 48.17405,\n\"lng\": 11.5027\n},\n{\n\"lat\": 48.17346,\n\"lng\": 11.5035\n},\n{\n\"lat\": 48.173,\n\"lng\": 11.50416\n},\n{\n\"lat\": 48.17276,\n\"lng\": 11.50448\n},\n{\n\"lat\": 48.17253,\n\"lng\": 11.50482\n},\n{\n\"lat\": 48.17237,\n\"lng\": 11.50509\n},\n{\n\"lat\": 48.17223,\n\"lng\": 11.50536\n},\n{\n\"lat\": 48.1721,\n\"lng\": 11.50564\n},\n{\n\"lat\": 48.17188,\n\"lng\": 11.50614\n},\n{\n\"lat\": 48.17169,\n\"lng\": 11.50658\n},\n{\n\"lat\": 48.17128,\n\"lng\": 11.50753\n},\n{\n\"lat\": 48.17117,\n\"lng\": 11.50777\n},\n{\n\"lat\": 48.17095,\n\"lng\": 11.50828\n},\n{\n\"lat\": 48.1709,\n\"lng\": 11.50838\n},\n{\n\"lat\": 48.17076,\n\"lng\": 11.50871\n},\n{\n\"lat\": 48.17057,\n\"lng\": 11.50922\n},\n{\n\"lat\": 48.17051,\n\"lng\": 11.50938\n},\n{\n\"lat\": 48.17042,\n\"lng\": 11.50953\n},\n{\n\"lat\": 48.17032,\n\"lng\": 11.50976\n},\n{\n\"lat\": 48.17022,\n\"lng\": 11.50999\n},\n{\n\"lat\": 48.17014,\n\"lng\": 11.51017\n},\n{\n\"lat\": 48.17007,\n\"lng\": 11.51029\n},\n{\n\"lat\": 48.16999,\n\"lng\": 11.51044\n},\n{\n\"lat\": 48.16993,\n\"lng\": 11.51055\n},\n{\n\"lat\": 48.16985,\n\"lng\": 11.51069\n},\n{\n\"lat\": 48.1698,\n\"lng\": 11.51078\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.51086\n},\n{\n\"lat\": 48.16984,\n\"lng\": 11.5109\n},\n{\n\"lat\": 48.16991,\n\"lng\": 11.51093\n},\n{\n\"lat\": 48.17003,\n\"lng\": 11.51097\n},\n{\n\"lat\": 48.17015,\n\"lng\": 11.51099\n},\n{\n\"lat\": 48.1703,\n\"lng\": 11.511\n},\n{\n\"lat\": 48.17048,\n\"lng\": 11.51104\n},\n{\n\"lat\": 48.17068,\n\"lng\": 11.5111\n},\n{\n\"lat\": 48.17093,\n\"lng\": 11.51118\n},\n{\n\"lat\": 48.17112,\n\"lng\": 11.51124\n},\n{\n\"lat\": 48.17131,\n\"lng\": 11.51131\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.51139\n},\n{\n\"lat\": 48.17165,\n\"lng\": 11.51147\n},\n{\n\"lat\": 48.17179,\n\"lng\": 11.51156\n},\n{\n\"lat\": 48.17192,\n\"lng\": 11.51166\n},\n{\n\"lat\": 48.17205,\n\"lng\": 11.51178\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.51192\n},\n{\n\"lat\": 48.17232,\n\"lng\": 11.51206\n},\n{\n\"lat\": 48.17242,\n\"lng\": 11.51219\n},\n{\n\"lat\": 48.17251,\n\"lng\": 11.51234\n},\n{\n\"lat\": 48.17261,\n\"lng\": 11.5125\n},\n{\n\"lat\": 48.1727,\n\"lng\": 11.51268\n},\n{\n\"lat\": 48.17279,\n\"lng\": 11.51287\n},\n{\n\"lat\": 48.17294,\n\"lng\": 11.51328\n},\n{\n\"lat\": 48.17304,\n\"lng\": 11.51362\n},\n{\n\"lat\": 48.17307,\n\"lng\": 11.51373\n},\n{\n\"lat\": 48.17315,\n\"lng\": 11.51402\n},\n{\n\"lat\": 48.17333,\n\"lng\": 11.51476\n},\n{\n\"lat\": 48.17341,\n\"lng\": 11.51511\n},\n{\n\"lat\": 48.17365,\n\"lng\": 11.51612\n},\n{\n\"lat\": 48.17394,\n\"lng\": 11.51727\n},\n{\n\"lat\": 48.1741,\n\"lng\": 11.51791\n},\n{\n\"lat\": 48.17416,\n\"lng\": 11.51819\n},\n{\n\"lat\": 48.17433,\n\"lng\": 11.51893\n},\n{\n\"lat\": 48.17438,\n\"lng\": 11.51911\n},\n{\n\"lat\": 48.17453,\n\"lng\": 11.51968\n},\n{\n\"lat\": 48.17465,\n\"lng\": 11.52003\n},\n{\n\"lat\": 48.17469,\n\"lng\": 11.52013\n},\n{\n\"lat\": 48.17477,\n\"lng\": 11.52031\n},\n{\n\"lat\": 48.17488,\n\"lng\": 11.52056\n},\n{\n\"lat\": 48.17501,\n\"lng\": 11.52084\n},\n{\n\"lat\": 48.17509,\n\"lng\": 11.52099\n},\n{\n\"lat\": 48.1754,\n\"lng\": 11.52154\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52171\n},\n{\n\"lat\": 48.17542,\n\"lng\": 11.52198\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52245\n},\n{\n\"lat\": 48.17517,\n\"lng\": 11.52292\n},\n{\n\"lat\": 48.17478,\n\"lng\": 11.52371\n},\n{\n\"lat\": 48.17462,\n\"lng\": 11.52403\n},\n{\n\"lat\": 48.17455,\n\"lng\": 11.52416\n},\n{\n\"lat\": 48.17451,\n\"lng\": 11.52425\n},\n{\n\"lat\": 48.17442,\n\"lng\": 11.52442\n},\n{\n\"lat\": 48.17421,\n\"lng\": 11.52483\n},\n{\n\"lat\": 48.17412,\n\"lng\": 11.52499\n},\n{\n\"lat\": 48.17388,\n\"lng\": 11.52544\n},\n{\n\"lat\": 48.17376,\n\"lng\": 11.52567\n},\n{\n\"lat\": 48.17353,\n\"lng\": 11.52614\n},\n{\n\"lat\": 48.17317,\n\"lng\": 11.52684\n},\n{\n\"lat\": 48.17299,\n\"lng\": 11.52719\n},\n{\n\"lat\": 48.17267,\n\"lng\": 11.52782\n},\n{\n\"lat\": 48.17262,\n\"lng\": 11.52792\n},\n{\n\"lat\": 48.17246,\n\"lng\": 11.52824\n},\n{\n\"lat\": 48.17225,\n\"lng\": 11.52861\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.52872\n},\n{\n\"lat\": 48.17214,\n\"lng\": 11.52882\n},\n{\n\"lat\": 48.17189,\n\"lng\": 11.52926\n},\n{\n\"lat\": 48.17187,\n\"lng\": 11.5293\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.52995\n},\n{\n\"lat\": 48.17132,\n\"lng\": 11.53026\n},\n{\n\"lat\": 48.17127,\n\"lng\": 11.53034\n},\n{\n\"lat\": 48.17103,\n\"lng\": 11.53075\n},\n{\n\"lat\": 48.17073,\n\"lng\": 11.53125\n},\n{\n\"lat\": 48.17028,\n\"lng\": 11.53194\n},\n{\n\"lat\": 48.17017,\n\"lng\": 11.53211\n},\n{\n\"lat\": 48.16982,\n\"lng\": 11.53266\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.53277\n},\n{\n\"lat\": 48.16939,\n\"lng\": 11.53331\n},\n{\n\"lat\": 48.16885,\n\"lng\": 11.53418\n},\n{\n\"lat\": 48.16872,\n\"lng\": 11.53437\n},\n{\n\"lat\": 48.16822,\n\"lng\": 11.5351\n},\n{\n\"lat\": 48.16809,\n\"lng\": 11.5353\n},\n{\n\"lat\": 48.16791,\n\"lng\": 11.53554\n},\n{\n\"lat\": 48.16785,\n\"lng\": 11.53562\n},\n{\n\"lat\": 48.16774,\n\"lng\": 11.53577\n},\n{\n\"lat\": 48.16761,\n\"lng\": 11.53593\n},\n{\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n{\n\"lat\": 48.16714,\n\"lng\": 11.53644\n},\n{\n\"lat\": 48.167,\n\"lng\": 11.53659\n},\n{\n\"lat\": 48.16695,\n\"lng\": 11.53664\n},\n{\n\"lat\": 48.16688,\n\"lng\": 11.53671\n},\n{\n\"lat\": 48.16653,\n\"lng\": 11.53704\n},\n{\n\"lat\": 48.1659,\n\"lng\": 11.53768\n},\n{\n\"lat\": 48.16578,\n\"lng\": 11.53781\n},\n{\n\"lat\": 48.16564,\n\"lng\": 11.53796\n},\n{\n\"lat\": 48.1655,\n\"lng\": 11.53812\n},\n{\n\"lat\": 48.16513,\n\"lng\": 11.53854\n},\n{\n\"lat\": 48.16487,\n\"lng\": 11.53887\n},\n{\n\"lat\": 48.16472,\n\"lng\": 11.53908\n},\n{\n\"lat\": 48.1644,\n\"lng\": 11.53958\n},\n{\n\"lat\": 48.16432,\n\"lng\": 11.53971\n},\n{\n\"lat\": 48.16369,\n\"lng\": 11.54072\n},\n{\n\"lat\": 48.16354,\n\"lng\": 11.54097\n},\n{\n\"lat\": 48.16328,\n\"lng\": 11.54138\n},\n{\n\"lat\": 48.16281,\n\"lng\": 11.54216\n},\n{\n\"lat\": 48.16231,\n\"lng\": 11.54299\n},\n{\n\"lat\": 48.16185,\n\"lng\": 11.54381\n},\n{\n\"lat\": 48.16127,\n\"lng\": 11.54476\n},\n{\n\"lat\": 48.16115,\n\"lng\": 11.54496\n},\n{\n\"lat\": 48.16097,\n\"lng\": 11.54525\n},\n{\n\"lat\": 48.16073,\n\"lng\": 11.54561\n},\n{\n\"lat\": 48.16056,\n\"lng\": 11.54587\n},\n{\n\"lat\": 48.16029,\n\"lng\": 11.54625\n},\n{\n\"lat\": 48.16014,\n\"lng\": 11.54644\n},\n{\n\"lat\": 48.15994,\n\"lng\": 11.54668\n},\n{\n\"lat\": 48.15979,\n\"lng\": 11.54683\n},\n{\n\"lat\": 48.15969,\n\"lng\": 11.54693\n},\n{\n\"lat\": 48.15958,\n\"lng\": 11.54707\n},\n{\n\"lat\": 48.15947,\n\"lng\": 11.54721\n},\n{\n\"lat\": 48.15933,\n\"lng\": 11.54737\n},\n{\n\"lat\": 48.15902,\n\"lng\": 11.54779\n},\n{\n\"lat\": 48.15882,\n\"lng\": 11.54804\n},\n{\n\"lat\": 48.15811,\n\"lng\": 11.54893\n},\n{\n\"lat\": 48.15794,\n\"lng\": 11.54914\n},\n{\n\"lat\": 48.15734,\n\"lng\": 11.54987\n},\n{\n\"lat\": 48.15605,\n\"lng\": 11.55145\n},\n{\n\"lat\": 48.15531,\n\"lng\": 11.55236\n},\n{\n\"lat\": 48.15523,\n\"lng\": 11.55246\n},\n{\n\"lat\": 48.15422,\n\"lng\": 11.55378\n},\n{\n\"lat\": 48.15389,\n\"lng\": 11.55422\n},\n{\n\"lat\": 48.15342,\n\"lng\": 11.55479\n},\n{\n\"lat\": 48.15274,\n\"lng\": 11.55563\n},\n{\n\"lat\": 48.1521,\n\"lng\": 11.55639\n},\n{\n\"lat\": 48.15167,\n\"lng\": 11.5569\n},\n{\n\"lat\": 48.15153,\n\"lng\": 11.55707\n},\n{\n\"lat\": 48.15131,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15102,\n\"lng\": 11.55766\n},\n{\n\"lat\": 48.1509,\n\"lng\": 11.55778\n},\n{\n\"lat\": 48.15085,\n\"lng\": 11.55771\n},\n{\n\"lat\": 48.15077,\n\"lng\": 11.55763\n},\n{\n\"lat\": 48.15061,\n\"lng\": 11.55751\n},\n{\n\"lat\": 48.15043,\n\"lng\": 11.55736\n},\n{\n\"lat\": 48.15036,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15033,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15029,\n\"lng\": 11.55735\n},\n{\n\"lat\": 48.15026,\n\"lng\": 11.55737\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55742\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55746\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55753\n},\n{\n\"lat\": 48.15024,\n\"lng\": 11.55783\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55813\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55824\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55836\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55848\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55868\n},\n{\n\"lat\": 48.1502,\n\"lng\": 11.55881\n},\n{\n\"lat\": 48.15017,\n\"lng\": 11.55891\n},\n{\n\"lat\": 48.14997,\n\"lng\": 11.55967\n},\n{\n\"lat\": 48.14985,\n\"lng\": 11.5601\n},\n{\n\"lat\": 48.14919,\n\"lng\": 11.56242\n},\n{\n\"lat\": 48.14908,\n\"lng\": 11.56282\n},\n{\n\"lat\": 48.14906,\n\"lng\": 11.56288\n},\n{\n\"lat\": 48.14873,\n\"lng\": 11.56403\n},\n{\n\"lat\": 48.14858,\n\"lng\": 11.56455\n},\n{\n\"lat\": 48.14845,\n\"lng\": 11.56501\n},\n{\n\"lat\": 48.14833,\n\"lng\": 11.56545\n},\n{\n\"lat\": 48.14821,\n\"lng\": 11.56587\n},\n{\n\"lat\": 48.14804,\n\"lng\": 11.5665\n},\n{\n\"lat\": 48.14793,\n\"lng\": 11.56688\n},\n{\n\"lat\": 48.14791,\n\"lng\": 11.56696\n},\n{\n\"lat\": 48.14782,\n\"lng\": 11.56726\n},\n{\n\"lat\": 48.1476,\n\"lng\": 11.56804\n},\n{\n\"lat\": 48.14755,\n\"lng\": 11.56823\n},\n{\n\"lat\": 48.14752,\n\"lng\": 11.56834\n},\n{\n\"lat\": 48.14725,\n\"lng\": 11.56927\n},\n{\n\"lat\": 48.14702,\n\"lng\": 11.5701\n},\n{\n\"lat\": 48.14695,\n\"lng\": 11.57037\n},\n{\n\"lat\": 48.14689,\n\"lng\": 11.57057\n},\n{\n\"lat\": 48.14631,\n\"lng\": 11.57269\n},\n{\n\"lat\": 48.14623,\n\"lng\": 11.57297\n},\n{\n\"lat\": 48.14607,\n\"lng\": 11.5732\n},\n{\n\"lat\": 48.14596,\n\"lng\": 11.57336\n},\n{\n\"lat\": 48.14587,\n\"lng\": 11.57355\n},\n{\n\"lat\": 48.14585,\n\"lng\": 11.57359\n},\n{\n\"lat\": 48.14577,\n\"lng\": 11.57378\n},\n{\n\"lat\": 48.14566,\n\"lng\": 11.57413\n},\n{\n\"lat\": 48.14562,\n\"lng\": 11.57426\n},\n{\n\"lat\": 48.14555,\n\"lng\": 11.57433\n},\n{\n\"lat\": 48.14552,\n\"lng\": 11.57439\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57447\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.5746\n},\n{\n\"lat\": 48.14541,\n\"lng\": 11.57482\n},\n{\n\"lat\": 48.14538,\n\"lng\": 11.57501\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57518\n},\n{\n\"lat\": 48.14539,\n\"lng\": 11.57552\n},\n{\n\"lat\": 48.14544,\n\"lng\": 11.57592\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.57626\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57667\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57702\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57722\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57737\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57746\n},\n{\n\"lat\": 48.1455,\n\"lng\": 11.57762\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57768\n},\n{\n\"lat\": 48.14547,\n\"lng\": 11.5778\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14525,\n\"lng\": 11.57878\n},\n{\n\"lat\": 48.14486,\n\"lng\": 11.57861\n},\n{\n\"lat\": 48.14467,\n\"lng\": 11.57852\n},\n{\n\"lat\": 48.14428,\n\"lng\": 11.57833\n},\n{\n\"lat\": 48.14411,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14389,\n\"lng\": 11.57814\n},\n{\n\"lat\": 48.14357,\n\"lng\": 11.57799\n},\n{\n\"lat\": 48.1433,\n\"lng\": 11.57787\n},\n{\n\"lat\": 48.14318,\n\"lng\": 11.57782\n},\n{\n\"lat\": 48.14304,\n\"lng\": 11.57776\n},\n{\n\"lat\": 48.14263,\n\"lng\": 11.57752\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14237,\n\"lng\": 11.57791\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14251,\n\"lng\": 11.57804\n},\n{\n\"lat\": 48.14249,\n\"lng\": 11.57811\n},\n{\n\"lat\": 48.14241,\n\"lng\": 11.57837\n},\n{\n\"lat\": 48.14234,\n\"lng\": 11.57869\n},\n{\n\"lat\": 48.14222,\n\"lng\": 11.57923\n},\n{\n\"lat\": 48.14208,\n\"lng\": 11.57917\n},\n{\n\"lat\": 48.14193,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.14182,\n\"lng\": 11.58051\n},\n{\n\"lat\": 48.14166,\n\"lng\": 11.58118\n},\n{\n\"lat\": 48.14151,\n\"lng\": 11.58122\n},\n{\n\"lat\": 48.14122,\n\"lng\": 11.58107\n},\n{\n\"lat\": 48.1408,\n\"lng\": 11.58089\n},\n{\n\"lat\": 48.14029,\n\"lng\": 11.58068\n},\n{\n\"lat\": 48.1401,\n\"lng\": 11.58061\n},\n{\n\"lat\": 48.13995,\n\"lng\": 11.58055\n},\n{\n\"lat\": 48.13937,\n\"lng\": 11.58033\n},\n{\n\"lat\": 48.1391,\n\"lng\": 11.58025\n},\n{\n\"lat\": 48.13916,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.13878,\n\"lng\": 11.57965\n},\n{\n\"lat\": 48.13871,\n\"lng\": 11.57983\n},\n{\n\"lat\": 48.13859,\n\"lng\": 11.58013\n}\n],\n\"alternative\": false\n}\n],\n\"markers\": [\n{\n\"id\": \"100\",\n\"position\": {\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"start\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"200\",\n\"position\": {\n\"lat\": 48.13859,\n\"lng\": 11.58013\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"finish\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"59.70357\",\n\"position\": {\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n\"markerProps\": {\n\"active\": true,\n\"iconNames\": [\n\"route\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"name\": \"10 km / 36 min\",\n\"clickable\": false,\n\"fixed\": true\n}\n}\n]\n}\n\nSelect file...\n\nCreate demo routeCreate demo markerToggle route events\nEnter your route data into the input or select a JSON file to render a route with multiple segments and markers. Please note that this will replace all previously existing markers and route segments.\nSegments are separate parts of the route, each containing a list of points, which can be rendered as reduced route (semi-transparent) and with or without arrows (showArrows). A Marker should provide aposition and markerProps to define its shape.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |",
     "category": "Components",
     "section": "Map",
     "boost": "Route components/mapRoute #components/mapRoute Components Map"
@@ -653,8 +643,8 @@
     "id": "components/mapSettings",
     "title": "Map settings",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Map settings\nMap settings\nTerms of use© 1987–2025 HERE\n\n20 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMap TypeDayDay\nFleet style\nSatellite\nTerrain\nNight\n\nMap LayerPlease select...Incidents\nTraffic\nRoad restrictions\n\nLanguageEnglishEnglish\nGerman\nPolish\n\nZoom\n\nMin zoom\n\nMax zoom\n\nMap centerReset position\n\nClusterShow cluster\nRenderingWebGL vector tiles\nUse device pixel ratio\n\nMap centerN48° 30.000′ E12° 6.000′\nSettings examples\nNo settings\n\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nWithout cluster settings\n\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nWithout cluster and map layer settings\n\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nStatic map without interaction\n\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Map settings\nMap settings\nTerms of use© 1987–2026 HERE\n\n20 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMap TypeDayDay\nFleet style\nSatellite\nTerrain\nNight\n\nMap LayerPlease select...Incidents\nTraffic\nRoad restrictions\n\nLanguageEnglishEnglish\nGerman\nPolish\n\nZoom\n\nMin zoom\n\nMax zoom\n\nMap centerReset position\n\nClusterShow cluster\nRenderingWebGL vector tiles\nUse device pixel ratio\n\nMap centerN48° 30.000′ E12° 6.000′\nSettings examples\nNo settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nWithout cluster settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nWithout cluster and map layer settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nStatic map without interaction\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "Map settings components/mapSettings #components/mapSettings Components Map"
@@ -854,7 +844,7 @@
     "title": "SaveableInput",
     "lead": null,
     "summary": "SaveableInput",
-    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\n\nThis is an error message\n\nDisabled SaveableInput\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nControlled - Stay open on invalid (default)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n04:02\n\nSaved value:\n\nControlled - With error\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2025›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n4:02 PM\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | Date \\| Moment \\| String | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | \"stay-open\" \\| \"reset-and-close\" | \"stay-open\" | Behavior when trying to exit edit mode with invalid input: stay-open: Keep edit mode open until valid input is provided reset-and-close: Close edit mode and reset to initial value |\n| buttonStyle | \"default\" \\| \"primary\" | — | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | — | Props passed directly to the date picker component. |\n| disabled | Boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
+    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\n\nThis is an error message\n\nDisabled SaveableInput\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nControlled - Stay open on invalid (default)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n01:11\n\nSaved value:\n\nControlled - With error\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n1:11 PM\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | Date \\| Moment \\| String | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | \"stay-open\" \\| \"reset-and-close\" | \"stay-open\" | Behavior when trying to exit edit mode with invalid input: stay-open: Keep edit mode open until valid input is provided reset-and-close: Close edit mode and reset to initial value |\n| buttonStyle | \"default\" \\| \"primary\" | — | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | — | Props passed directly to the date picker component. |\n| disabled | Boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "SaveableInput components/saveableInput #components/saveableInput Components Interaction"
@@ -1084,7 +1074,7 @@
     "title": "VirtualList",
     "lead": "The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.",
     "summary": "The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.",
-    "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\nEget ligula consectetur posuere viverra lorem In ipsum malesuada\n\nItem 2\nFringilla elit. efficitur ipsum in elit. massa Duis\n\nItem 3\nOrci felis. iaculis. rutrum semper. ante\n\nItem 4\nEt tincidunt. metus quis, massa, lorem et orci neque. ut elementum efficitur ante massa,\n\nItem 5\nIpsum iaculis. sit primis ut orci\n\nItem 6\nNec in sit posuere malesuada pretium adipiscing sagittis metus efficitur enim eget in\n\nItem 7\n\nLorem libero metus tortor ante In In\n\nItem 8\nVivamus In vitae semper in pretium finibus Sed consectetur in, dolor et dolor lorem in,\n\nItem 9\nEfficitur felis. Duis bibendum, massa,\n\nItem 10\nSagittis ac scelerisque posuere faucibus. vel eget In quis,\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |\nVirtual list with 5000 items\nVehicle 1\nPosuere viverra semper Duis molestie orci\n\nVehicle 2\nPosuere vitae orci, pharetra eget orci, molestie metus ante orci,\n\nVehicle 3\nIn ut metus massa, consectetur iaculis. ligula molestie nunc pretium\n\nVehicle 4\nPurus tincidunt. et primis vitae consectetur Duis est ac primis ligula Vivamus est sagittis Fusce\n\nVehicle 5\nPharetra orci, volutpat aliquam eget massa pretium nec fringilla faucibus. vitae\n\nVehicle 6\nIaculis. efficitur felis. tortor est\n\nVehicle 7\nInterdum ante semper. hendrerit ante faucibus. pretium condimentum ligula hendrerit in in vitae\n\nVehicle 8\nTincidunt. in in orci elementum viverra Fusce in semper ut orci iaculis. Integer quis,\n\nVehicle 9\nVel orci, semper consectetur\nLorem ac pretium pharetra Vivamus\n\nVehicle 10\nTortor sagittis metus elit. ac ante dui efficitur felis. nec malesuada\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |",
+    "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\nSed ac in vel et in ac\n\nItem 2\nVelit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,\n\nItem 3\nAc\nLorem orci, nec primis lorem\n\nItem 4\nEfficitur massa, iaculis. ligula nunc\n\nItem 5\nAc nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc\n\nItem 6\nPretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper\n\nItem 7\nInteger dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed\n\nItem 8\nBibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,\n\nItem 9\nEt massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat\n\nItem 10\nUt ligula\nLorem lorem tortor primis libero\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |\nVirtual list with 5000 items\nVehicle 1\nVel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac\n\nVehicle 2\nFringilla Fusce eget pharetra Vivamus\n\nVehicle 3\nIn felis. dui metus malesuada fames\n\nVehicle 4\nAliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.\n\nVehicle 5\nAnte Sed ligula dolor molestie\n\nVehicle 6\nVolutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante\n\nVehicle 7\nDuis et Fusce vitae elit. est sit ac\n\nVehicle 8\nUt sagittis elementum adipiscing iaculis. iaculis.\n\nVehicle 9\nLibero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante\n\nVehicle 10\nDuis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |",
     "category": "Components",
     "section": "Content",
     "boost": "VirtualList components/virtualList #components/virtualList Components Content"
@@ -1094,7 +1084,7 @@
     "title": "Foundations",
     "lead": "You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light",
     "summary": "You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light",
-    "searchText": "Foundations\nYou can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light\nButtons\nSee also our Button component.\n\nNote: For having spacing between buttons in a single row you may want to wrap them with<div class=\"btn-toolbar\"</div\n\nNote: You can use link buttons within text blocks by adding btn-linkbtn-link-inline\nDefault buttons\n\nDefaultDefault\n\nIcon buttons\n\nMuted buttons\n\nMuted filledMuted\n\nLink buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nColored buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nOutline buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nSplit buttons\n\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted-filled\nButton states\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButton sizes\nXS buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nXS icon buttons\n\nSM buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nSM icon buttons\n\nMD buttons (default)\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nMD icon buttons (default)\n\nLG buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nLG icon buttons\nButton examples\nButton toolbar\n\nPrevNext\n\nButton group\n\n1234\n\nButtonButtonButton\n\nMultiline button\n\nThis is a multiline button with a lot of Text\nBlock button\n\nBlock level button\nTooltip buttons\n\nButton with tooltipDisabled button with tooltip\nAction buttons\nClick meClick meClick meClick meClick meClick me\nBackground colors\nBasic\nbg-white\nbg-black\n\nBrand\nbg-primary\nbg-secondary\n\nStatus\nbg-info\nbg-success\nbg-warning\nbg-danger\n\nDriving status\nbg-status-available\nbg-status-driving\nbg-status-resting\nbg-status-working\n\nMap marker\nbg-map-marker-asset\nbg-map-marker-poi\nbg-map-marker-geofence\nbg-map-marker-route\n\nRating\nbg-rating-1\nbg-rating-2\nbg-rating-3\nbg-rating-4\nbg-rating-5\n\nGray\nbg-decent\nbg-lightest\nbg-lighter\nbg-light\nbg-gray\nbg-dark\nbg-darker\nbg-darkest\n\nHighlight\nbg-highlight-decent\nbg-highlight-lightest\nbg-highlight-lighter\nbg-highlight-light\nbg-highlight\nbg-highlight-dark\nbg-highlight-darker\nbg-highlight-darkest\nHover background colors\nBasic\nhover-bg-white\nhover-bg-black\n\nBrand\nhover-bg-primary\nhover-bg-secondary\n\nStatus\nhover-bg-info\nhover-bg-success\nhover-bg-warning\nhover-bg-danger\n\nDriving status\nhover-bg-status-available\nhover-bg-status-driving\nhover-bg-status-resting\nhover-bg-status-working\n\nMap Marker\nhover-bg-map-marker-asset\nhover-bg-map-marker-poi\nhover-bg-map-marker-geofence\nhover-bg-map-marker-route\n\nRating\nhover-bg-rating-1\nhover-bg-rating-2\nhover-bg-rating-3\nhover-bg-rating-4\nhover-bg-rating-5\n\nGray\nhover-bg-decent\nhover-bg-lightest\nhover-bg-lighter\nhover-bg-light\nhover-bg-gray\nhover-bg-dark\nhover-bg-darker\nhover-bg-darkest\n\nHighlight\nhover-bg-highlight-decent\nhover-bg-highlight-lightest\nhover-bg-highlight-lighter\nhover-bg-highlight-light\nhover-bg-highlight\nhover-bg-highlight-dark\nhover-bg-highlight-darker\nhover-bg-highlight-darkest\nText\nBasic\ntext-color-white\ntext-color-black\n\nBrand\ntext-color-primary\ntext-color-secondary\n\nStatus\ntext-color-info\ntext-color-success\ntext-color-warning\ntext-color-danger\n\nDriving status\ntext-color-status-available\ntext-color-status-driving\ntext-color-status-resting\ntext-color-status-working\n\nMap marker\ntext-color-map-marker-asset\ntext-color-map-marker-poi\ntext-color-map-marker-geofence\ntext-color-map-marker-route\n\nRating\ntext-color-rating-1\ntext-color-rating-2\ntext-color-rating-3\ntext-color-rating-4\ntext-color-rating-5\n\nGray\ntext-color-decent\ntext-color-lightest\ntext-color-lighter\ntext-color-light\ntext-color-gray\ntext-color-dark\ntext-color-darker\ntext-color-darkest\n\nHighlight\ntext-color-highlight-decent\ntext-color-highlight-lightest\ntext-color-highlight-lighter\ntext-color-highlight-light\ntext-color-highlight\ntext-color-highlight-dark\ntext-color-highlight-darker\ntext-color-highlight-darkest\nHover text\nBasic\nhover-text-color-white\nhover-text-color-black\n\nBrand\nhover-text-color-primary\nhover-text-color-secondary\n\nStatus\nhover-text-color-info\nhover-text-color-success\nhover-text-color-warning\nhover-text-color-danger\n\nDriving status\nhover-text-color-status-available\nhover-text-color-status-driving\nhover-text-color-status-resting\nhover-text-color-status-working\n\nMap marker\nhover-text-color-map-marker-asset\nhover-text-color-map-marker-poi\nhover-text-color-map-marker-geofence\nhover-text-color-map-marker-route\n\nRating\nhover-text-color-rating-1\nhover-text-color-rating-2\nhover-text-color-rating-3\nhover-text-color-rating-4\nhover-text-color-rating-5\n\nGray\nhover-text-color-decent\nhover-text-color-lightest\nhover-text-color-lighter\nhover-text-color-light\nhover-text-color-gray\nhover-text-color-dark\nhover-text-color-darker\nhover-text-color-darkest\n\nHighlight\nhover-text-color-highlight-decent\nhover-text-color-highlight-lightest\nhover-text-color-highlight-lighter\nhover-text-color-highlight-light\nhover-text-color-highlight\nhover-text-color-highlight-dark\nhover-text-color-highlight-darker\nhover-text-color-highlight-darkest\nSVGs\nBackground\nBackground size\n\nBackground position\n\nBackground repeat\nBorder\nHover Border Color\n\nHover Border Color with Transition\n\nHover Border Style\nLast Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\nDivider\nYou can use the the shorthanddivider-yfor the automatic combination ofdivider-y-1,divider-style-solidanddivider-color-light\ndivider-y-1\ndivider-y-1\ndivider-y-1\ndivider-y-1\n\ndivider-y-2\ndivider-y-2\ndivider-y-2\ndivider-y-2\n\ndivider-y-3\ndivider-y-3\ndivider-y-3\ndivider-y-3\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-2\ndivider-x-2\ndivider-x-2\nOpacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nHover opacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nRounded\nrounded\n...-circle\n\n...-top\n...-bottom\n...-left\n...-right\n\n...-top-left\n...-top-right\n...-bottom-right\n...-bottom-left\n...-small\n...\n...-large\n...-extra-large\nShadows\nThe default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.\n\nDo not use hard shadows on tables, in dialogs, or on elements placed on white background.\n\nThe exception for not using shadows on a white background is for floating elements placed above the content for instance via position absolute.\nshadow-default\nPanel with shadow\nshadow-default\nShadow variants\nSurrounding shadows\n\nshadow-subtle\nshadow-muted\nshadow-accent\nshadow-default\nshadow-smooth\nshadow-hard\n\nDirection shadows\n\nshadow-muted-down\nshadow-default-down\n\nshadow-smooth-up\nshadow-smooth-down\nshadow-hard-up\nshadow-hard-down\n\nAccent shadow for list items\n\nNote\nWhen utilizing the shadow-accent avoid combining it with a border style, as the shadow is optimized for small block items like those in a list and works best without a border.\n\nItem\nItem\nItem\nItem\nItem\nItem\nRIOglyph\nDefault\n\nSized icons\n\nColored icons\nVehicle icons\nVehicle icons\n\nBaseline vehicle icons\nPair icons\nDefault\n\nWith background\n\nDisplay engine types\n\nSized\nAnimated icons\nSpinning icons\n\nPulsing icons\nDisabled icons\nDefault\n\nWith red line\n\nInverse\nFilled icons\nDefault filled icons\n\nColored filled icons\n\nGood use cases examples for icons with a filled circle background\n\nHeadline enhancements: For emphasizing key points in headings or subheadings, like \"New features\" or \"Highlights,\" where the icon in a filled circle draws attention without being too overwhelming.\n\nHelp/Documentation pages: Icons with filled circles are perfect for highlighting actions or key steps in a guide. They help break down text-heavy content and make instructions visually appealing. Example: For \"step-by-step\" instructions, an icon inside a circle could represent each action (e.g., a checkmark icon to signify completed tasks or a question mark for additional help).\n\nFeature lists and cards: Use filled circle icons as design elements for feature lists, product highlights, or feature comparisons. This works especially well when listing distinct features of a product, app, or service.\n\nWhen NOT to use a filled circle icon\nAvoid inconsistent usage in buttons – If some buttons have a filled circle and others don’t, the UI becomes inconsistent.\n\nDon’t use it for simple inline icons – Icons inside text (e.g., \"🔍 Search\") or standalone icons in tables don’t need a background.\n\nNot for decorative or unnecessary elements – If an icon doesn’t need extra emphasis, the filled circle is overkill.\nCustom icons\nUse external svgs as RIOglyph icons. Please read our guidelines\nRIOglyph text alignment\nWhen an icon is used alongside text in a flex, grid, or inline text layout, additional alignment adjustments may be needed. To ensure proper alignment, the following classes are available:\nrioglyph-align-top - assuming a display-flex and default line-height\nrioglyph-align-bottom - assuming a display-flex and line-height 1.25\nrioglyph-align-baseline - assuming an inline text and default line-height\n\nThese classes help align icons correctly within different layouts where they are used alongside text.\nNote: Setting a text line-height class will also affect the icon alignment and may require manual adjustments to ensure proper positioning.\nBaseline-aligned icon with inline text\nLorem ipsum dolor\n\nTop-aligned icon with text inside a flex-box layout\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nBottom-aligned icon inside an inline-flex layout and line-height-125rel\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nIcons inside a link usually don't need to be aligned manually\nLorem ipsum\n\nBaseline-aligned icon inside an inline h3 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\n\nBaseline-aligned icon inside an inline h4 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\nIcon library\nSearch\n\nrioglyph rioglyph-academic-cap\nrioglyph rioglyph-addressbook\nrioglyph rioglyph-ai\nrioglyph rioglyph-air-pay\nrioglyph rioglyph-am\nrioglyph rioglyph-angle-double-down\nrioglyph rioglyph-angle-double-left\nrioglyph rioglyph-angle-double-right\nrioglyph rioglyph-angle-double-up\nrioglyph rioglyph-antenna\nrioglyph rioglyph-api\nrioglyph rioglyph-archive\nrioglyph rioglyph-area-chart\nrioglyph rioglyph-area-in\nrioglyph rioglyph-area-out\nrioglyph rioglyph-arrow-down\nrioglyph rioglyph-arrow-left\nrioglyph rioglyph-arrow-right\nrioglyph rioglyph-arrow-up\nrioglyph rioglyph-arrows-collapse\nrioglyph rioglyph-arrows-combine\nrioglyph rioglyph-arrows-expand\nrioglyph rioglyph-arrows-horizontal\nrioglyph rioglyph-arrows-split\nrioglyph rioglyph-assigned\nrioglyph rioglyph-axis-x\nrioglyph rioglyph-axis-y\nrioglyph rioglyph-axis-z\nrioglyph rioglyph-axle\nrioglyph rioglyph-ban-circle\nrioglyph rioglyph-bar-chart-box\nrioglyph rioglyph-battery-charging\nrioglyph rioglyph-battery-level-empty\nrioglyph rioglyph-battery-level-full\nrioglyph rioglyph-battery-level-low\nrioglyph rioglyph-beacon\nrioglyph rioglyph-book\nrioglyph rioglyph-bookable-poi\nrioglyph rioglyph-bookmark-square\nrioglyph rioglyph-bookmark\nrioglyph rioglyph-border-crossing\nrioglyph rioglyph-brain\nrioglyph rioglyph-brake\nrioglyph rioglyph-branch-horizontal\nrioglyph rioglyph-branch-remove\nrioglyph rioglyph-branch-vertical\nrioglyph rioglyph-broadcast\nrioglyph rioglyph-building\nrioglyph rioglyph-bulb\nrioglyph rioglyph-bus-baseline\nrioglyph rioglyph-bus-breakdown\nrioglyph rioglyph-bus\nrioglyph rioglyph-businessman\nrioglyph rioglyph-calendar-parking\nrioglyph rioglyph-calendar-plus\nrioglyph rioglyph-calendar-today\nrioglyph rioglyph-calendar\nrioglyph rioglyph-camera\nrioglyph rioglyph-car-baseline\nrioglyph rioglyph-car-wash\nrioglyph rioglyph-car\nrioglyph rioglyph-card-hotel\nrioglyph rioglyph-card-reader\nrioglyph rioglyph-cards-add\nrioglyph rioglyph-cards-grid\nrioglyph rioglyph-cards-list\nrioglyph rioglyph-cards-table\nrioglyph rioglyph-cargo\nrioglyph rioglyph-carrier\nrioglyph rioglyph-chat\nrioglyph rioglyph-check-badge\nrioglyph rioglyph-check-shield\nrioglyph rioglyph-checkbox-checked\nrioglyph rioglyph-checkbox\nrioglyph rioglyph-checkboxes\nrioglyph rioglyph-chevron-down\nrioglyph rioglyph-chevron-left\nrioglyph rioglyph-chevron-right\nrioglyph rioglyph-chevron-up\nrioglyph rioglyph-chip\nrioglyph rioglyph-circle-dashed\nrioglyph rioglyph-circle-stack\nrioglyph rioglyph-click\nrioglyph rioglyph-climate-control\nrioglyph rioglyph-clipboard\nrioglyph rioglyph-cloud-download\nrioglyph rioglyph-cloud-not-saved\nrioglyph rioglyph-cloud-progress\nrioglyph rioglyph-cloud-upload\nrioglyph rioglyph-cloud\nrioglyph rioglyph-coasting\nrioglyph rioglyph-code-braces\nrioglyph rioglyph-code-brackets\nrioglyph rioglyph-coffee\nrioglyph rioglyph-cog\nrioglyph rioglyph-color-swatch\nrioglyph rioglyph-comment\nrioglyph rioglyph-compare\nrioglyph rioglyph-compass\nrioglyph rioglyph-component-custom-recurrent\nrioglyph rioglyph-component-custom\nrioglyph rioglyph-construction\nrioglyph rioglyph-convert\nrioglyph rioglyph-conveyor-belt\nrioglyph rioglyph-cookie\nrioglyph rioglyph-cooling\nrioglyph rioglyph-cost-efficiency\nrioglyph rioglyph-crown\nrioglyph rioglyph-cruise-control\nrioglyph rioglyph-csv\nrioglyph rioglyph-cube-dashed\nrioglyph rioglyph-cube\nrioglyph rioglyph-currency-euro\nrioglyph rioglyph-damages\nrioglyph rioglyph-dangerousgoods\nrioglyph rioglyph-dashboard-view\nrioglyph rioglyph-dashboard\nrioglyph rioglyph-delivery-completed\nrioglyph rioglyph-delivery-error\nrioglyph rioglyph-delivery-late\nrioglyph rioglyph-delivery-on-track\nrioglyph rioglyph-delivery-warning\nrioglyph rioglyph-delivery\nrioglyph rioglyph-design\nrioglyph rioglyph-desktop\nrioglyph rioglyph-detail-view-info\nrioglyph rioglyph-detail-view\nrioglyph rioglyph-direction\nrioglyph rioglyph-discount-badge\nrioglyph rioglyph-document-out\nrioglyph rioglyph-document\nrioglyph rioglyph-download\nrioglyph rioglyph-drag-n-drop\nrioglyph rioglyph-drive-history\nrioglyph rioglyph-driver-card\nrioglyph rioglyph-driver\nrioglyph rioglyph-drivercard-in\nrioglyph rioglyph-drivercard-out\nrioglyph rioglyph-duplicate\nrioglyph rioglyph-earphone\nrioglyph rioglyph-emergency-stop\nrioglyph rioglyph-empty\nrioglyph rioglyph-engine\nrioglyph rioglyph-envelope-indicator\nrioglyph rioglyph-envelope-open\nrioglyph rioglyph-envelope\nrioglyph rioglyph-erase\nrioglyph rioglyph-error-sign\nrioglyph rioglyph-euro-note\nrioglyph rioglyph-exclamation-sign\nrioglyph rioglyph-exclamation\nrioglyph rioglyph-eye-close\nrioglyph rioglyph-eye-closed\nrioglyph rioglyph-eye-open\nrioglyph rioglyph-face-frown\nrioglyph rioglyph-face-neutral\nrioglyph rioglyph-face-smile\nrioglyph rioglyph-facetime-video\nrioglyph rioglyph-factory\nrioglyph rioglyph-file-signature\nrioglyph rioglyph-files\nrioglyph rioglyph-fill\nrioglyph rioglyph-filling-e-station\nrioglyph rioglyph-filling-station\nrioglyph rioglyph-filter-active\nrioglyph rioglyph-filter-reset\nrioglyph rioglyph-filter\nrioglyph rioglyph-fingerprint\nrioglyph rioglyph-finish\nrioglyph rioglyph-fire\nrioglyph rioglyph-flag\nrioglyph rioglyph-flash\nrioglyph rioglyph-folder-closed\nrioglyph rioglyph-folder-open\nrioglyph rioglyph-fuel-electric\nrioglyph rioglyph-fuel-gas\nrioglyph rioglyph-fuel-hydrogen\nrioglyph rioglyph-fuel-liquid\nrioglyph rioglyph-fuel-mix\nrioglyph rioglyph-fullscreen\nrioglyph rioglyph-geofence\nrioglyph rioglyph-get\nrioglyph rioglyph-give\nrioglyph rioglyph-globe-alt\nrioglyph rioglyph-globe\nrioglyph rioglyph-group-blocks\nrioglyph rioglyph-group\nrioglyph rioglyph-hand-down\nrioglyph rioglyph-hand-left\nrioglyph rioglyph-hand-right\nrioglyph rioglyph-hand-up\nrioglyph rioglyph-handshake\nrioglyph rioglyph-hash\nrioglyph rioglyph-heart\nrioglyph rioglyph-heating\nrioglyph rioglyph-hierarchy\nrioglyph rioglyph-history\nrioglyph rioglyph-home-sign\nrioglyph rioglyph-home\nrioglyph rioglyph-hour-glass\nrioglyph rioglyph-id\nrioglyph rioglyph-inbox-in\nrioglyph rioglyph-inbox-out\nrioglyph rioglyph-inbox-stack\nrioglyph rioglyph-inbox\nrioglyph rioglyph-info-sign\nrioglyph rioglyph-info\nrioglyph rioglyph-insert\nrioglyph rioglyph-issue-tracking\nrioglyph rioglyph-key\nrioglyph rioglyph-kickdown\nrioglyph rioglyph-language\nrioglyph rioglyph-layer-pois\nrioglyph rioglyph-layer\nrioglyph rioglyph-leafs\nrioglyph rioglyph-light-bulb\nrioglyph rioglyph-line-chart\nrioglyph rioglyph-link\nrioglyph rioglyph-load-unload\nrioglyph rioglyph-load\nrioglyph rioglyph-location-arrow\nrioglyph rioglyph-lock-open\nrioglyph rioglyph-lock\nrioglyph rioglyph-log-in\nrioglyph rioglyph-logout\nrioglyph rioglyph-looking-glass-man\nrioglyph rioglyph-looking-glass\nrioglyph rioglyph-magic-wand\nrioglyph rioglyph-maintenance-components\nrioglyph rioglyph-map-location\nrioglyph rioglyph-map-marker\nrioglyph rioglyph-map\nrioglyph rioglyph-megaphone\nrioglyph rioglyph-menu-hamburger\nrioglyph rioglyph-merge\nrioglyph rioglyph-migrate\nrioglyph rioglyph-milage\nrioglyph rioglyph-minus-light\nrioglyph rioglyph-minus-sign\nrioglyph rioglyph-minus\nrioglyph rioglyph-missing\nrioglyph rioglyph-mode-dark-light\nrioglyph rioglyph-more\nrioglyph rioglyph-new-window\nrioglyph rioglyph-newspaper\nrioglyph rioglyph-note\nrioglyph rioglyph-notification\nrioglyph rioglyph-number-1\nrioglyph rioglyph-number-2\nrioglyph rioglyph-number-3\nrioglyph rioglyph-off\nrioglyph rioglyph-oil-can\nrioglyph rioglyph-ok-circle\nrioglyph rioglyph-ok-dashed\nrioglyph rioglyph-ok-sign\nrioglyph rioglyph-ok\nrioglyph rioglyph-onboarding\nrioglyph rioglyph-ongoing\nrioglyph rioglyph-option-horizontal\nrioglyph rioglyph-option-vertical\nrioglyph rioglyph-order\nrioglyph rioglyph-palette-broken\nrioglyph rioglyph-palette\nrioglyph rioglyph-paper-clip\nrioglyph rioglyph-parcel-broken\nrioglyph rioglyph-parcel\nrioglyph rioglyph-parking\nrioglyph rioglyph-pause-circle\nrioglyph rioglyph-pause\nrioglyph rioglyph-pdf-file\nrioglyph rioglyph-pencil-square\nrioglyph rioglyph-pencil\nrioglyph rioglyph-phone\nrioglyph rioglyph-pictures\nrioglyph rioglyph-pin-range\nrioglyph rioglyph-pin\nrioglyph rioglyph-play-circle\nrioglyph rioglyph-play\nrioglyph rioglyph-plugged-off\nrioglyph rioglyph-plugged-on\nrioglyph rioglyph-plus-light\nrioglyph rioglyph-plus-sign\nrioglyph rioglyph-plus\nrioglyph rioglyph-pm\nrioglyph rioglyph-poi\nrioglyph rioglyph-polygon\nrioglyph rioglyph-position\nrioglyph rioglyph-print\nrioglyph rioglyph-progress-ongoing\nrioglyph rioglyph-progress-remaining\nrioglyph rioglyph-progression\nrioglyph rioglyph-prompt\nrioglyph rioglyph-pto-off\nrioglyph rioglyph-pto-on\nrioglyph rioglyph-pushpin\nrioglyph rioglyph-puzzle\nrioglyph rioglyph-pylon\nrioglyph rioglyph-qr-code\nrioglyph rioglyph-question-sign\nrioglyph rioglyph-question\nrioglyph rioglyph-record\nrioglyph rioglyph-recycle\nrioglyph rioglyph-refresh\nrioglyph rioglyph-remove-circle\nrioglyph rioglyph-remove-sign\nrioglyph rioglyph-remove\nrioglyph rioglyph-repeat-square\nrioglyph rioglyph-repeat\nrioglyph rioglyph-resize-full\nrioglyph rioglyph-resize-horizontal\nrioglyph rioglyph-resize-small\nrioglyph rioglyph-resize-vertical\nrioglyph rioglyph-retrofit\nrioglyph rioglyph-revert\nrioglyph rioglyph-rio-marker\nrioglyph rioglyph-rio\nrioglyph rioglyph-road-restrictions\nrioglyph rioglyph-road\nrioglyph rioglyph-robot\nrioglyph rioglyph-rocket\nrioglyph rioglyph-role-management\nrioglyph rioglyph-route-option\nrioglyph rioglyph-route-view\nrioglyph rioglyph-route\nrioglyph rioglyph-ruler\nrioglyph rioglyph-satellite-radar\nrioglyph rioglyph-save\nrioglyph rioglyph-scale\nrioglyph rioglyph-scan\nrioglyph rioglyph-scissors\nrioglyph rioglyph-search-list\nrioglyph rioglyph-search-truck\nrioglyph rioglyph-search\nrioglyph rioglyph-send\nrioglyph rioglyph-series\nrioglyph rioglyph-server-stack\nrioglyph rioglyph-settings\nrioglyph rioglyph-share-alt\nrioglyph rioglyph-share-nodes\nrioglyph rioglyph-share\nrioglyph rioglyph-shelve\nrioglyph rioglyph-ship\nrioglyph rioglyph-shopping-bag\nrioglyph rioglyph-shopping-cart\nrioglyph rioglyph-signature\nrioglyph rioglyph-slope-down-max\nrioglyph rioglyph-slope-down-min\nrioglyph rioglyph-slope-up-max\nrioglyph rioglyph-slope-up-min\nrioglyph rioglyph-sort-by-attributes-alt\nrioglyph rioglyph-sort-by-attributes\nrioglyph rioglyph-sort\nrioglyph rioglyph-sparkles\nrioglyph rioglyph-speed\nrioglyph rioglyph-sphere\nrioglyph rioglyph-spinner\nrioglyph rioglyph-split-view\nrioglyph rioglyph-square-dashed\nrioglyph rioglyph-stack-add\nrioglyph rioglyph-stack-iso\nrioglyph rioglyph-stack\nrioglyph rioglyph-star-empty\nrioglyph rioglyph-star\nrioglyph rioglyph-stars\nrioglyph rioglyph-start\nrioglyph rioglyph-stats-high\nrioglyph rioglyph-stats-line-dots\nrioglyph rioglyph-stats-low\nrioglyph rioglyph-stats-medium\nrioglyph rioglyph-stats\nrioglyph rioglyph-status-available\nrioglyph rioglyph-status-change-horizontal\nrioglyph rioglyph-status-change\nrioglyph rioglyph-status-driving\nrioglyph rioglyph-status-resting\nrioglyph rioglyph-status-working\nrioglyph rioglyph-steering-wheel\nrioglyph rioglyph-stopover\nrioglyph rioglyph-support\nrioglyph rioglyph-table-view\nrioglyph rioglyph-tachograph-download\nrioglyph rioglyph-tachograph\nrioglyph rioglyph-tag\nrioglyph rioglyph-tasks\nrioglyph rioglyph-temperature\nrioglyph rioglyph-th-list\nrioglyph rioglyph-thumbs-down\nrioglyph rioglyph-thumbs-up\nrioglyph rioglyph-tickets\nrioglyph rioglyph-time-alt\nrioglyph rioglyph-time-cancle\nrioglyph rioglyph-time-incomplete\nrioglyph rioglyph-time\nrioglyph rioglyph-tire\nrioglyph rioglyph-tms\nrioglyph rioglyph-to-bottom\nrioglyph rioglyph-to-left\nrioglyph rioglyph-to-right\nrioglyph rioglyph-to-top\nrioglyph rioglyph-tracking-package\nrioglyph rioglyph-traffic-lights\nrioglyph rioglyph-trailer-baseline\nrioglyph rioglyph-trailer\nrioglyph rioglyph-trailerposition\nrioglyph rioglyph-train\nrioglyph rioglyph-transfer\nrioglyph rioglyph-transition-push-right\nrioglyph rioglyph-transition-right\nrioglyph rioglyph-trash\nrioglyph rioglyph-triangle-bottom\nrioglyph rioglyph-triangle-left\nrioglyph rioglyph-triangle-right\nrioglyph rioglyph-triangle-top\nrioglyph rioglyph-trophy\nrioglyph rioglyph-truck-baseline\nrioglyph rioglyph-truck-breakdown\nrioglyph rioglyph-truck-unit\nrioglyph rioglyph-truck\nrioglyph rioglyph-unassigned\nrioglyph rioglyph-unavailable\nrioglyph rioglyph-unlink\nrioglyph rioglyph-upload\nrioglyph rioglyph-user-add\nrioglyph rioglyph-user-group\nrioglyph rioglyph-user-ok\nrioglyph rioglyph-user-remove\nrioglyph rioglyph-user-sign-off\nrioglyph rioglyph-user-sign\nrioglyph rioglyph-user\nrioglyph rioglyph-van-baseline\nrioglyph rioglyph-van\nrioglyph rioglyph-variable\nrioglyph rioglyph-video\nrioglyph rioglyph-volume\nrioglyph rioglyph-wallet\nrioglyph rioglyph-warehouse\nrioglyph rioglyph-warning-sign\nrioglyph rioglyph-weather-cloudy\nrioglyph rioglyph-weather-icy\nrioglyph rioglyph-weather-overcast\nrioglyph rioglyph-weather-raining\nrioglyph rioglyph-weather-snowing\nrioglyph rioglyph-weather-stormy\nrioglyph rioglyph-weather-sunny\nrioglyph rioglyph-weather-thundering\nrioglyph rioglyph-weather-windy\nrioglyph rioglyph-weight\nrioglyph rioglyph-width\nrioglyph rioglyph-wifi\nrioglyph rioglyph-window\nrioglyph rioglyph-workflow-step\nrioglyph rioglyph-workflow\nrioglyph rioglyph-workshop\nrioglyph rioglyph-wrench\nrioglyph rioglyph-xmas-raindeer\nrioglyph rioglyph-xmas-santa\nText styles\nHeadline size\n\ntext-size-h1\ntext-size-h2\ntext-size-h3\ntext-size-h4\ntext-size-h5\ntext-size-h6\n\nText size\n\ntext-size-10\ntext-size-11\ntext-size-12\ntext-size-14\ntext-size-16\ntext-size-18\ntext-size-20\n\nText weight\n\ntext-thin\ntext-light\ntext-normal\ntext-medium\ntext-bold\nText style\n\ntext-style-normal\ntext-style-italic\n\nText decoration\n\ntext-decoration-none\nhover-text-decoration-none\ntext-decoration-line-through\ntext-decoration-underline\nunderline-offset-2\nunderline-offset-3\nunderline-offset-4\nunderline-offset-5\n\nText wrapping\n\nwhite-space-nowrap\nwhite-space-normal\n\nText transform\n\ntext-capitalize\nTEXT-LOWERCASE\ntext-uppercase\ntext capitalize first word\ntext-transform-none\nHeadings\n\nThe reason why there are heading tags like <h2> and heading classes like .h2 is due to different use cases. A <h2> tag for instance is an essential SEO tag often used by a CMS like WordPress or Typo3. For these Tools, we can not change the code but we need some styling for the HTML element itself.\nAnother example is the <strong> or <b> tags and the .text-bold class. The heading classes like the .h2 class can be used in a service application, as those are not SEO relevant. As the UIKIT uses an atomic CSS approach, the same style can be achieved when combining .text-size-h2 .text-bold margin-top-10 margin-bottom-20 classes.\n\nHeadline tags\n\nHeading 1\nHeading 2\nHeading 3\nHeading 4\nHeading 5\nHeading 6\n\nHeadline classes\n\nh1\nh2\nh3\nh4\nh5\nh6\n\nMisc tags\n\nThis line of text is meant to be treated as fine print.\nThe following snippet of text is rendered as bold text.\nThe following snippet of text is rendered as italicized text.\nAn abbreviation of the word attribute is attr.\nAlignment\ntext-left\ntext-center\ntext-right\nBlockquote\nLorem ipsum white.Lorem ipsum black.Lorem ipsum decent.Lorem ipsum lightest.Lorem ipsum lighter.Lorem ipsum light.Lorem ipsum gray.Lorem ipsum dark.Lorem ipsum darker.Lorem ipsum darkest.\nCode\nvar test = 'Hello World!';\nThis is an inline Codeblock for use in text.\n\n// This is a JS example\nvar test = \"Hello World\";\nconsole.log(test);\nCursor\nYou can disable all pointer events by addingpointer-events-none\ncursor-default\ncursor-pointer\ncursor-text\ncursor-move\ncursor-grabbing\ncursor-grab\ncursor-not-allowed\ncursor-row-resize\ncursor-col-resize\ncursor-col-resize\ncursor-ew-resize\ncursor-help\ncursor-cell\ncursor-copy\ncursor-crosshair\nEllipsis\nNote: Ellipsis only works with block elements. It does not work withdisplay-grid. Combine the classes withdisplay-block or display-flex\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nLine height\nWhen working with text, it's important to consider the relationship between the text size and the line height. For larger headlines, a line height of 1.2 to 1.25 is recommended to maintain readability and visual balance. For plain body text or text inside promotion blocks, a slightly larger line height of 1.4 to 1.5 is suggested to improve readability and the overall reading experience.\n\nRule of thumb: the larger the text size, the smaller the line height should be.\n\nNote: The listed classes are not necessary for the use of ourtext-size classes. Use them only if you want to have the exact the same line-height as your text-size is.\nline-height-10\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-11\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-12\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-14\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-16\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-18\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-20\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-125rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-130rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-135rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-150rel\n\nLorem ipsum dolor sit amet, dui eget elit.\nline-height-h1\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h2\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h3\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h4\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h5\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h6\n\nLorem ipsum dolor sit amet, dui eget elit.\nUser select\nuser-select-all\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nuser-select-none\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nText box\ntext-box-trim-start\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-trim-both\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-auto\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nno text-box\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nText wrapping\nWord break\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nHyphens\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nBalance\ncaniuse\n\nAllows text to have it's lines broken that each line is roughly the same width.\n\nPretty\ncaniuse\n\nIt evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.\nCols\nNote: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active\ncol-12\n\ncol-6\n\ncol-6\n\ncol-4\n\ncol-4\n\ncol-4\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\nResponsive cols\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\nEqual Height Cols\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nContainer fluid\ncontainer fluid-small\ncontainer fluid-default\ncontainer fluid-large\ncontainer fluid-extra-large\ncontainer fluid-ultra-large\nContainer\nNote: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.\ncontainer\nContainer queries\nWhat are container queries?\nWhile traditional container classes like container and fluid-default respond to the viewport width,container queries respond to the size of the component’s parent container. This allows components to adapt their layout based on context, not just screen size.\n\nBy reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.\nUsage\nThe UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.\n\n1. Define the container: mark an ancestor element as a container using the specific cq-container class. This tells the browser which element's size should be monitored. <div class=\"cq-container\"<!-- content goes here --</div\n2. Apply CQ utility classes: add cq-300:... classes to the descendant elements you want to style conditionally based on the container's. <div class=\"cq-container\"<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"<!-- more content goes here --</div</div\n\nhtml\n<div class=\"cq-container\"\n<!-- content goes here --\n</div\n\nhtml\n<div class=\"cq-container\"\n<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"\n<!-- more content goes here --\n</div\n</div\n\nThe class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]\n\n- cq: is the prefix for all container query utilities.\n- [breakpointValue] is one of the numeric identifiers from the table above (e.g., 300, 400, 500, 600, 700).\n- [property] is the type of property being styled (e.g., padding, margin-top, flex-column, grid-cols).\n- [value] is the value from the library's scale (e.g., 10, 25, auto).\nContainer query breakpoints\nOur container query utilities are based on a set of predefined width breakpoints. The breakpoint value is included directly in the class name for clarity.\n\nWe use a \"max-width\" query for the smallest breakpoint (300px) to target styles up to that size, and \"min-width\" queries for all larger breakpoints to target styles from that size upwards.\nContainer query example and classes\nItem 1\nItem 2\nItem 3\nFlexbox\nCenter\n\nLorem ipsum dolor\n\nTop start\n\nLorem ipsum dolor\n\nBottom start\n\nLorem ipsum dolor\n\nTop end\n\nLorem ipsum dolor\n\nBottom end\n\nLorem ipsum dolor\n\nSpace between\n\nLorem ipsum dolor\nLorem ipsum dolor\nLorem ipsum dolor\n\nEven split columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nMultiple even columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\n\n70/30 columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\nGrid\ngrid-cols-1\n\ngrid-cols-2\ngrid-cols-2\n\ngrid-cols-3\ngrid-cols-3\ngrid-cols-3\n\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\n\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\n\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\n\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\n\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\n\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\n\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\n\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\n\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\nGrid colspan / rowspan\ngrid-colspan-3\nGrid column-start / column-end\nGrid auto-fit\nIn CSS Grid, the auto-fit keyword is used with the repeat() function to automatically adjust the number of columns (or rows) based on the available space in the container. It helps create responsive layouts by filling the container with as many columns (or rows) of a specified size as possible.\n\nDynamic Column Creation: \"auto-fit\" automatically creates as many columns as will fit in the available space, potentially adding or removing columns as the container resizes.\n\nResponsive Design: Ensures that the grid adapts to different screen sizes by adjusting the number of columns.\nGrid max-content / auto content\nThe max-content value sizes the grid column to be as wide as the largest piece of content inside it. Essentially, it takes up as much space as necessary to fit the longest word or item without breaking. This is useful when you want the column to expand to fit its content, ensuring no content is clipped or wrapped unnecessarily.\n\nThe auto value sizes the grid column based on the content, but it can also take into account the available space and other factors. If there's more space available, \"auto\" can expand to fill it, but it won't exceed the available space like \"max-content\". This is useful when you want the column to take up space according to its content but also adapt to the overall layout and available space.\n\nChoosing between max-content and auto depends on whether you want the column to strictly fit its content (potentially ignoring the available space) or to adapt to the content while also being flexible within the grid layout.\nmax-content\n1fr\n\nmax-content\n1fr\nmax-content\n1fr\n\n1fr\nmax-content\n\n1fr\nmax-content\n1fr\nmax-content\n\nauto\n1fr\n\nauto\n1fr\nauto\n1fr\n\n1fr\nauto\n\n1fr\nauto\n1fr\nauto\nGrid rows\nHelper class for 3 rows where the middle row expands and can scroll\nLorem item 0\nLorem ipsum dolor sit amet\n\nLorem item 1\nLorem ipsum dolor sit amet\n\nLorem item 2\nLorem ipsum dolor sit amet\n\nLorem item 3\nLorem ipsum dolor sit amet\n\nLorem item 4\nLorem ipsum dolor sit amet\n\nLorem item 5\nLorem ipsum dolor sit amet\n\nLorem item 6\nLorem ipsum dolor sit amet\n\nLorem item 7\nLorem ipsum dolor sit amet\n\nButton\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGrid placement\nplace-items-center\nGrid stacking\nstack item 1\nstack item 2\n\nstack item 1\nstack item 2\nSubgrid\nThe subgrid value in CSS Grid Layout is a feature that allows a nested grid to inherit the column and/or row definitions from its parent grid container. This means that the subgrid can align its items according to the tracks defined in the parent grid, creating a more consistent and aligned layout structure. It is particularly useful for complex layouts where nested elements need to align with the overall grid structure without redefining the grid tracks. By using subgrid, you can maintain a cohesive design while simplifying the CSS code needed for layout alignment. This feature enhances the flexibility and power of CSS Grid, making it easier to manage nested grid layouts.\nForm example\nConnection\nHostPortReally long label\nCredentials\nUsernamePasswordCheckboxYet another level of nesting\n\nSubgrid enabled\nSubmit\nFull NameEmailMessage\n\nSubgrid enabled\nSubmit\nSubgrid Cards\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla? Consectetur adipisci illum ipsa reprehenderit deleniti quia qui aliquid tempora ea accusamus. Quibusdam.\nby Mia at Company\nLove it\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla?\nby Mia at Company\nLove it\nWhat if we have a much longer article title?\nLorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet, tempore error maxime praesentium eos.\nby Jen \"Boss\" Simmons at Company\nLove it so\nArticle titles aren't consistent\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Deja \"Empathic Dev\" Hodge at Company\nLove it\nThis article title will need to be fixed in Post-Production with a much shorter and catchier click-bait title\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Ryanne \"Fix It In Post\" Hodson at Company\nLove it\nShort title\nLorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim maxime repellat illo!\nby Jay \"Do It\" Dedman at Company\nLove it\n\nSubgrid enabled\nPosition\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGap\nNote: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.\ngap-0\ngap-0\ngap-0\n\ngap-1\ngap-1\ngap-1\n\ngap-2\ngap-2\ngap-2\n\ngap-3\ngap-3\ngap-3\n\ngap-4\ngap-4\ngap-4\n\ngap-5\ngap-5\ngap-5\n\ngap-10\ngap-10\ngap-10\n\ngap-15\ngap-15\ngap-15\n\ngap-20\ngap-20\ngap-20\n\ngap-25\ngap-25\ngap-25\n\ngap-50\ngap-50\ngap-50\nSpace\nNote: For flex or grid solutions please use gap instead.\nspace-y-0\nspace-y-0\nspace-y-0\n\nspace-y-1\nspace-y-1\nspace-y-1\n\nspace-y-2\nspace-y-2\nspace-y-2\n\nspace-y-3\nspace-y-3\nspace-y-3\n\nspace-y-4\nspace-y-4\nspace-y-4\n\nspace-y-5\nspace-y-5\nspace-y-5\n\nspace-y-10\nspace-y-10\nspace-y-10\n\nspace-y-15\nspace-y-15\nspace-y-15\n\nspace-y-20\nspace-y-20\nspace-y-20\n\nspace-y-25\nspace-y-25\nspace-y-25\n\nspace-y-50\nspace-y-50\nspace-y-50\nMargin\nSurrouding\n\nmargin-0\n\nmargin-1\n\nmargin-2\n\nmargin-3\n\nmargin-4\n\nmargin-5\n\nmargin-10\n\nmargin-15\n\nmargin-20\n\nmargin-25\n\nmargin-50\n\nHorizontal\n\nmargin-x-0\n\nmargin-x-1\n\nmargin-x-2\n\nmargin-x-3\n\nmargin-x-4\n\nmargin-x-5\n\nmargin-x-10\n\nmargin-x-15\n\nmargin-x-20\n\nmargin-x-25\n\nmargin-x-50\n\nVertical\n\nmargin-y-0\n\nmargin-y-1\n\nmargin-y-2\n\nmargin-y-3\n\nmargin-y-4\n\nmargin-y-5\n\nmargin-y-10\n\nmargin-y-15\n\nmargin-y-20\n\nmargin-y-25\n\nmargin-y-50\n\nLeft\n\nmargin-left-0\n\nmargin-left-1\n\nmargin-left-2\n\nmargin-left-3\n\nmargin-left-4\n\nmargin-left-5\n\nmargin-left-10\n\nmargin-left-15\n\nmargin-left-20\n\nmargin-left-25\n\nmargin-left-50\n\nRight\n\nmargin-right-0\n\nmargin-right-1\n\nmargin-right-2\n\nmargin-right-3\n\nmargin-right-4\n\nmargin-right-5\n\nmargin-right-10\n\nmargin-right-15\n\nmargin-right-20\n\nmargin-right-25\n\nmargin-right-50\n\nTop\n\nmargin-top-0\n\nmargin-top-1\n\nmargin-top-2\n\nmargin-top-3\n\nmargin-top-4\n\nmargin-top-5\n\nmargin-top-10\n\nmargin-top-15\n\nmargin-top-20\n\nmargin-top-25\n\nmargin-top-50\n\nBottom\n\nmargin-bottom-0\n\nmargin-bottom-1\n\nmargin-bottom-2\n\nmargin-bottom-3\n\nmargin-bottom-4\n\nmargin-bottom-5\n\nmargin-bottom-10\n\nmargin-bottom-15\n\nmargin-bottom-20\n\nmargin-bottom-25\n\nmargin-bottom-50\nMargin helper\nLast child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast child (parent class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (parent class)\n\nChild\nChild\nChild\nChild\nChild\nPadding\nSurrouding\n\npadding-0\n\npadding-1\n\npadding-2\n\npadding-3\n\npadding-4\n\npadding-5\n\npadding-10\n\npadding-15\n\npadding-20\n\npadding-25\n\npadding-50\n\nHorizontal\n\npadding-x-0\n\npadding-x-1\n\npadding-x-2\n\npadding-x-3\n\npadding-x-4\n\npadding-x-5\n\npadding-x-10\n\npadding-x-15\n\npadding-x-20\n\npadding-x-25\n\npadding-x-50\n\nVertical\n\npadding-y-0\n\npadding-y-1\n\npadding-y-2\n\npadding-y-3\n\npadding-y-4\n\npadding-y-5\n\npadding-y-10\n\npadding-y-15\n\npadding-y-20\n\npadding-y-25\n\npadding-y-50\n\nLeft\n\npadding-left-0\n\npadding-left-1\n\npadding-left-2\n\npadding-left-3\n\npadding-left-4\n\npadding-left-5\n\npadding-left-10\n\npadding-left-15\n\npadding-left-20\n\npadding-left-25\n\npadding-left-50\n\nRight\n\npadding-right-0\n\npadding-right-1\n\npadding-right-2\n\npadding-right-3\n\npadding-right-4\n\npadding-right-5\n\npadding-right-10\n\npadding-right-15\n\npadding-right-20\n\npadding-right-25\n\npadding-right-50\n\nTop\n\npadding-top-0\n\npadding-top-1\n\npadding-top-2\n\npadding-top-3\n\npadding-top-4\n\npadding-top-5\n\npadding-top-10\n\npadding-top-15\n\npadding-top-20\n\npadding-top-25\n\npadding-top-50\n\nBottom\n\npadding-bottom-0\n\npadding-bottom-1\n\npadding-bottom-2\n\npadding-bottom-3\n\npadding-bottom-4\n\npadding-bottom-5\n\npadding-bottom-10\n\npadding-bottom-15\n\npadding-bottom-20\n\npadding-bottom-25\n\npadding-bottom-50\nHeight\nWidth\n30px\n35px\n40px\n45px\n50px\n60px\n70px\n80px\n90px\n100px\n\n10pct\n20pct\n25pct\n30pct\n33pct\n40pct\n50pct\n60pct\n66pct\n70pct\n75pct\n80pct\n90pct\n100pct\nContent based min-width\nThe min-width property defines the smallest width an element can shrink to. When using keywords like max-content, min-content, orfit-content, you tell the browser how the element should behave in relation to its content size. These values are especially useful in responsive layouts or flexible components where content-driven sizing is required.\n\n- min-width-min-content The element’s minimum width becomes the smallest possible width without causing content overflow. It allows text wrapping, meaning the element will compress as much as possible while still displaying all content correctly.\n- min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.\n- min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.\nmax-contentThis_is_a_really_long_word_that_will_not_break.\n\nmin-contentThis is a really long text that will break and wrap.\n\nfit-contentThis text fits naturally within the box.\nBreadcrumb\nlevel 1\nlevel 2\nlevel 3\nlevel 4\nPager\nSee Pager for the actual React component.\nPager with label\n\nPrevious\nThe previous chapter\n\nNext\nThe next chapter\n\nCompact Pager without label\n\nPrevious\n\nNext\nPagination\n1\n2\n3\n4\n5\n\nUsage\nUse pagination buttons only for UI elements that benefit from stepping through discrete content pages, such as: Image carousels – where users navigate through multiple slides or multi-step flows – to guide users through a process one step at a time.\nNot for Tables\nTables should use a “Load more” button instead of pagination.\nWhy \"Load more\" is preferred\nContinuous scanning:\nUsers can scroll down and view more data without breaking flow.\nLess disruption:\nAvoids jarring page reloads or resets when switching pages.\nImproved comparability:\nAll previously loaded data stays in view, enabling easier side-by-side comparison of rows.\nLess cognitive load:\nUsers rarely remember what was on “Page 6”, especially when rows are changing. Sequential pages interrupt scanning and exploration.\nNo page size UI:\nYou don’t need to offer dropdowns for rows per page, reducing UI clutter.\nPills\nStandard\n\nPill 1\nPill 2\nPill 3\nDisabled Pill\n\nJustified\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nJustified with icons\n\nPill 1\n\nPill 2\n\nPill 3\n\nDisabled Pill\n\nJustified with word-wrap\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\nFilled\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nFilled with icons only\nStacked\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent menu\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\nTabs\nStandard\n\nTab 1\nTab 2\nTab 3\nDisabled tab\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nBordered content\n\nTab 4\nTab 5\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified with word-wrap\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\nTable\nSee also our Table components like TableToolbar, TableSearch,TableViewToggles, TableCardsSorting, and TableSettingsDialog. For a more advanced table demo checkout our demo service\nCommon table style\nLabelNewAction\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nLabel\n\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable head\nDefault table head\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\n\nTable head filled\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nRounded table\nUse the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nHover table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nBordered table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nStriped table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nGrouped table\nHead columnHead columnHead columnHead column\n\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nSticky table header\nSticky column headSticky column headSticky column headSticky column head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nSticky table columns\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable row span\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumn\nTable double row header\nDouble row header with filled header\nScores\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\n\nDouble row header with border and footer\nYears\n20212022202320242025\n\nProduct 1Income50708090100\nExpense3763708291\nProfit1371089\n\nProduct 2Income5067799054\nExpense3370507930\nProfit17-3191221\n\nTotal Profit304292030\nCondensed table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nFixed table layout\nThe table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.\nHead columnHead columnHead columnHead columnHead column\n\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nResponsive tables\nTables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.\n\nThere are some options to tackle this problem\n\n- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.\n- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.\n- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.\n- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the \"...\" at the end.\nTable cards\nNewButton\n\nFilter\n\nLabel\n\nIdId\nName\nVIN\nStatus\nDuration\n\nIdNameVINStatusDuration\n\n233IpsumNo dataInactive5h 15m\n\n456No data456Active4h 55m\n\n878No data878Active9h 10m\n\n895No data895Active8h 45m\n\n978IpsumNo dataInactive6h 35m\n\n2345Lorem2345Active11h 50m\n\n2445No data2445Active7h 25m\n\n3456No data3456Active12h 00m\n\n4567No data4567Active10h 20m\n\n7354Lorem7354Active10h 30m\n\n70/100\n\nLoad more\nStates in tables\nHead columnHead columnHead columnHead columnHead column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nAlerts\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\nBadges\nUnlike labels, which are used for categorization and emphasis, badges provide quick contextual information in a compact and visually distinct manner.\nUse badges for numeric indicators, such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for small floating highlights on UI elements (e.g., \"New\" or \"Beta\"). Badges are commonly placed on icons, buttons, menus, or navigation elements.\nHome1\nProfile\nMessages3\n\n01234567\n01234567\n1011121314151617\nBadges on Icons\n\n2323232323232323\nBadges as Indicator\n\nInbox3\nInbox99+\nCallouts\nCallout default\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout primary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout secondary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout info\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout success\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout warning\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout danger\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\nCounter\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nKey\nKeys examplePro tip: press m to comment\nPress ctrl + a to select all\n\nUse lower-case namesshiftenterctrlalt\nUnicode symbols⇧⇪↵⌫→←↑↓⇥⇤␣\n\nMac specific keys - see DeviceUtils⌘⌥⌃\nLabels\nNote: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.\nLabels are small, colored indicators used to represent statuses, categories, or highlights in the UI.\nThe standard labels have a light background and are ideal for subtle status indications that blend naturally with the interface.\nThe filled labels use a bold background color, making them more prominent—best suited for drawing attention to critical statuses or highlighting important information.\n\nStandard labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nLabels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed and filled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\nLists\nOrdered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nUnordered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nSquare list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\nList groups\nList group item default\nList group item primary\nList group item secondary\nList group item info\nList group item success\nList group item warning\nList group item danger\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nList group item link (a)List group item link (a)List group item link (a)List group item link (a)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\n\nHeadline default\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndefault\n\nHeadline primary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nprimary\n\nHeadline secondary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsecondary\n\nHeadline info\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ninfo\n\nHeadline success\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsuccess\n\nHeadline warning\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nwarning\n\nHeadline danger\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndanger\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\nPanels\npanel-heading1\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\nProgress bars\nStandard\n\nStriped\n\nAnimated\n\nIndeterminate\n\nStacked\n\nStacked ratings\n\nStacked ratings with custom icon overlay\nPoorExcelent\nWells\nHi, my name is well-sm\n\nHi, my name is well\n\nHi, my name is well-lg\nForms\nLegend\n\nEmail\nPassword\nTextarea\n\nNumber with controls\nNumber without controls\n\nRadiosOption one\nOption two\n\nCheckboxLorem ipsum dolor sit amet.\n\nNative Selects12345\nCancelSubmit\n\nDisabled input\nInput success\nInput warning\nInput error\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nDefault inputSome input info for the user\nInput addon labelLabelLabel\n\nInput addons.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\n\nDefault inputSome input info for the userThis is an error message\nInput addon labelLabelThis is a warning message\nLabel\n\nInput addons\n.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\nForm sized examples\nSize by form-Group class\nform-group-sm\nform-group-smXX\n\nform-group-sm12345\nform-group-sm\nform-group\nform-groupXX\n\nform-group\nform-group12345\nform-group-lgXX\n\nform-group-lg\nform-group-lg\nform-group-lg12345\n\nSize by Input Class\ninput-sm\ninput-group-smXX\n\ninput-sm\ninput-group-sm12345\n\ninput\ninput-groupXX\n\ninput\ninput-group12345\n\ninput-lg\ninput-group-lgXX\n\ninput-lg\ninput-group-lg12345\nForm with fieldset and legend\nAn HTML <fieldsetelement is used to group related elements within a form. It is particularly useful for organizing complex forms by creating logical sections, improving both the form's structure and user experience. The <fieldsetcan be paired with a <legendelement to provide a caption for the grouped content, making the form easier to understand and navigate.\n\nAllows for selective processing of grouped data, making it useful for handling specific sections of a form independently when used with the FormData API.\nA form with fieldsetLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\n\nA form with fieldset disabledLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\nInput resize\nresize-noneresize-vertical\nAnimations\nslide-out\nleftupdownright\n3s2s1s09s08s07s06s05s04s03s02s01s\nlooprestart\nlineareaseease-inease-outease-in-out\ninfiniterepeat-1repeat-2repeat-3\nTest animationReset\nTransition\nTransition properties\n\ntransition-opacity\ntransition-position\ntransition-all\n\nTransition timing functions\n\ntransition-ease\ntransition-ease-in-out\n\nTransition duration\n\ntransition-duration-01\ntransition-duration-02\ntransition-duration-03\ntransition-duration-04\ntransition-duration-05\nBlur\nBackdrop blur\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.\nAspect ratio\nWith fixed width\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\n\nWith fixed height\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\nInset\ninset-0\n\ninset-x-0\n\ninset-y-0\n\nBase element\nShorthand element\nHelper\nclearanceclearfixchildren-first-border-top-nonefirst-child-border-top-nonechildren-last-border-bottom-nonelast-child-border-bottom-nonechildren-first-margin-top-0first-child-margin-top-0children-last-margin-bottom-0last-child-margin-bottom-0\nRotate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nRotate 360°\n\nRotate -5° to 5°\nScale\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nScale\n\nHover scale\nTranslate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.\nDisplay\ndisplay-blockdisplay-inline-blockdisplay-flexdisplay-inline-flexdisplay-inlinedisplay-none\nOverflow\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nVisibility\nVisible only at a certain breakpoint\n\nvisible-xsvisible-lsvisible-smvisible-mdvisible-lgvisible-xl\nVisible from a certain breakpoint\n\nvisible-min-lsvisible-min-smvisible-min-mdvisible-min-lg\nHidden only at a certain breakpoint\n\nhidden-xshidden-lshidden-smhidden-mdhidden-lghidden-xl\nHidden from a certain breakpoint\n\nhidden-min-lshidden-min-smhidden-min-mdhidden-min-lg\nHidden when element is empty\n\nhidden-empty\nscreen-xs: >480pxscreen-ls: 480pxscreen-sm: 768pxscreen-md: 992pxscreen-lg: 1200pxscreen-xl: 1700px\n\n.visible-xsVisibleHiddenHiddenHiddenHiddenHidden\n.visible-lsHiddenVisibleHiddenHiddenHiddenHidden\n.visible-smHiddenHiddenVisibleHiddenHiddenHidden\n.visible-mdHiddenHiddenHiddenVisibleHiddenHidden\n.visible-lgHiddenHiddenHiddenHiddenVisibleHidden\n.visible-xlHiddenHiddenHiddenHiddenHiddenVisible\n\n.hidden-xsHiddenVisibleVisibleVisibleVisibleVisible\n.hidden-lsVisibleHiddenVisibleVisibleVisibleVisible\n.hidden-smVisibleVisibleHiddenVisibleVisibleVisible\n.hidden-mdVisibleVisibleVisibleHiddenVisibleVisible\n.hidden-lgVisibleVisibleVisibleVisibleHiddenVisible\n.hidden-xlVisibleVisibleVisibleVisibleVisibleHidden\n\n.visible-min-lsHiddenVisibleVisibleVisibleVisibleVisible\n.visible-min-smHiddenHiddenVisibleVisibleVisibleVisible\n.visible-min-mdHiddenHiddenHiddenVisibleVisibleVisible\n.visible-min-lgHiddenHiddenHiddenHiddenVisibleVisible\n\n.hidden-min-lsVisibleHiddenHiddenHiddenHiddenHidden\n.hidden-min-smVisibleVisibleHiddenHiddenHiddenHidden\n.hidden-min-mdVisibleVisibleVisibleHiddenHiddenHidden\n.hidden-min-lgVisibleVisibleVisibleVisibleHiddenHidden\n\nPrint\n\nvisible-printvisible-print-inlinehidden-print\n\nVisibility only classes\n\nAll the above classes for hidden and visible are based on \"display: none\". The following class affects only visibility, allowing it to impact surrounding elements.\nvisibility-hidden\nZ-index",
+    "searchText": "Foundations\nYou can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light\nButtons\nSee also our Button component.\n\nNote: For having spacing between buttons in a single row you may want to wrap them with<div class=\"btn-toolbar\"</div\n\nNote: You can use link buttons within text blocks by adding btn-linkbtn-link-inline\nDefault buttons\n\nDefaultDefault\n\nIcon buttons\n\nMuted buttons\n\nMuted filledMuted\n\nLink buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nColored buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nOutline buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nSplit buttons\n\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted-filled\nButton states\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButton sizes\nXS buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nXS icon buttons\n\nSM buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nSM icon buttons\n\nMD buttons (default)\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nMD icon buttons (default)\n\nLG buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nLG icon buttons\nButton examples\nButton toolbar\n\nPrevNext\n\nButton group\n\n1234\n\nButtonButtonButton\n\nMultiline button\n\nThis is a multiline button with a lot of Text\nBlock button\n\nBlock level button\nTooltip buttons\n\nButton with tooltipDisabled button with tooltip\nAction buttons\nClick meClick meClick meClick meClick meClick me\nBackground colors\nBasic\nbg-white\nbg-black\n\nBrand\nbg-primary\nbg-secondary\n\nStatus\nbg-info\nbg-success\nbg-warning\nbg-danger\n\nDriving status\nbg-status-available\nbg-status-driving\nbg-status-resting\nbg-status-working\n\nMap marker\nbg-map-marker-asset\nbg-map-marker-poi\nbg-map-marker-geofence\nbg-map-marker-route\n\nRating\nbg-rating-1\nbg-rating-2\nbg-rating-3\nbg-rating-4\nbg-rating-5\n\nGray\nbg-decent\nbg-lightest\nbg-lighter\nbg-light\nbg-gray\nbg-dark\nbg-darker\nbg-darkest\n\nHighlight\nbg-highlight-decent\nbg-highlight-lightest\nbg-highlight-lighter\nbg-highlight-light\nbg-highlight\nbg-highlight-dark\nbg-highlight-darker\nbg-highlight-darkest\nHover background colors\nBasic\nhover-bg-white\nhover-bg-black\n\nBrand\nhover-bg-primary\nhover-bg-secondary\n\nStatus\nhover-bg-info\nhover-bg-success\nhover-bg-warning\nhover-bg-danger\n\nDriving status\nhover-bg-status-available\nhover-bg-status-driving\nhover-bg-status-resting\nhover-bg-status-working\n\nMap Marker\nhover-bg-map-marker-asset\nhover-bg-map-marker-poi\nhover-bg-map-marker-geofence\nhover-bg-map-marker-route\n\nRating\nhover-bg-rating-1\nhover-bg-rating-2\nhover-bg-rating-3\nhover-bg-rating-4\nhover-bg-rating-5\n\nGray\nhover-bg-decent\nhover-bg-lightest\nhover-bg-lighter\nhover-bg-light\nhover-bg-gray\nhover-bg-dark\nhover-bg-darker\nhover-bg-darkest\n\nHighlight\nhover-bg-highlight-decent\nhover-bg-highlight-lightest\nhover-bg-highlight-lighter\nhover-bg-highlight-light\nhover-bg-highlight\nhover-bg-highlight-dark\nhover-bg-highlight-darker\nhover-bg-highlight-darkest\nText\nBasic\ntext-color-white\ntext-color-black\n\nBrand\ntext-color-primary\ntext-color-secondary\n\nStatus\ntext-color-info\ntext-color-success\ntext-color-warning\ntext-color-danger\n\nDriving status\ntext-color-status-available\ntext-color-status-driving\ntext-color-status-resting\ntext-color-status-working\n\nMap marker\ntext-color-map-marker-asset\ntext-color-map-marker-poi\ntext-color-map-marker-geofence\ntext-color-map-marker-route\n\nRating\ntext-color-rating-1\ntext-color-rating-2\ntext-color-rating-3\ntext-color-rating-4\ntext-color-rating-5\n\nGray\ntext-color-decent\ntext-color-lightest\ntext-color-lighter\ntext-color-light\ntext-color-gray\ntext-color-dark\ntext-color-darker\ntext-color-darkest\n\nHighlight\ntext-color-highlight-decent\ntext-color-highlight-lightest\ntext-color-highlight-lighter\ntext-color-highlight-light\ntext-color-highlight\ntext-color-highlight-dark\ntext-color-highlight-darker\ntext-color-highlight-darkest\nHover text\nBasic\nhover-text-color-white\nhover-text-color-black\n\nBrand\nhover-text-color-primary\nhover-text-color-secondary\n\nStatus\nhover-text-color-info\nhover-text-color-success\nhover-text-color-warning\nhover-text-color-danger\n\nDriving status\nhover-text-color-status-available\nhover-text-color-status-driving\nhover-text-color-status-resting\nhover-text-color-status-working\n\nMap marker\nhover-text-color-map-marker-asset\nhover-text-color-map-marker-poi\nhover-text-color-map-marker-geofence\nhover-text-color-map-marker-route\n\nRating\nhover-text-color-rating-1\nhover-text-color-rating-2\nhover-text-color-rating-3\nhover-text-color-rating-4\nhover-text-color-rating-5\n\nGray\nhover-text-color-decent\nhover-text-color-lightest\nhover-text-color-lighter\nhover-text-color-light\nhover-text-color-gray\nhover-text-color-dark\nhover-text-color-darker\nhover-text-color-darkest\n\nHighlight\nhover-text-color-highlight-decent\nhover-text-color-highlight-lightest\nhover-text-color-highlight-lighter\nhover-text-color-highlight-light\nhover-text-color-highlight\nhover-text-color-highlight-dark\nhover-text-color-highlight-darker\nhover-text-color-highlight-darkest\nSVGs\nBackground\nBackground size\n\nBackground position\n\nBackground repeat\nBorder\nHover Border Color\n\nHover Border Color with Transition\n\nHover Border Style\nLast Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\nDivider\nYou can use the the shorthanddivider-yfor the automatic combination ofdivider-y-1,divider-style-solidanddivider-color-light\ndivider-y-1\ndivider-y-1\ndivider-y-1\ndivider-y-1\n\ndivider-y-2\ndivider-y-2\ndivider-y-2\ndivider-y-2\n\ndivider-y-3\ndivider-y-3\ndivider-y-3\ndivider-y-3\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-2\ndivider-x-2\ndivider-x-2\nOpacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nHover opacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nRounded\nrounded\n...-circle\n\n...-top\n...-bottom\n...-left\n...-right\n\n...-top-left\n...-top-right\n...-bottom-right\n...-bottom-left\n...-small\n...\n...-large\n...-extra-large\nShadows\nThe default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.\n\nDo not use hard shadows on tables, in dialogs, or on elements placed on white background.\n\nThe exception for not using shadows on a white background is for floating elements placed above the content for instance via position absolute.\nshadow-default\nPanel with shadow\nshadow-default\nShadow variants\nSurrounding shadows\n\nshadow-subtle\nshadow-muted\nshadow-accent\nshadow-default\nshadow-smooth\nshadow-hard\n\nDirection shadows\n\nshadow-muted-down\nshadow-default-down\n\nshadow-smooth-up\nshadow-smooth-down\nshadow-hard-up\nshadow-hard-down\n\nAccent shadow for list items\n\nNote\nWhen utilizing the shadow-accent avoid combining it with a border style, as the shadow is optimized for small block items like those in a list and works best without a border.\n\nItem\nItem\nItem\nItem\nItem\nItem\nRIOglyph\nDefault\n\nSized icons\n\nColored icons\nVehicle icons\nVehicle icons\n\nBaseline vehicle icons\nPair icons\nDefault\n\nWith background\n\nDisplay engine types\n\nSized\nAnimated icons\nSpinning icons\n\nPulsing icons\nDisabled icons\nDefault\n\nWith red line\n\nInverse\nFilled icons\nDefault filled icons\n\nColored filled icons\n\nGood use cases examples for icons with a filled circle background\n\nHeadline enhancements: For emphasizing key points in headings or subheadings, like \"New features\" or \"Highlights,\" where the icon in a filled circle draws attention without being too overwhelming.\n\nHelp/Documentation pages: Icons with filled circles are perfect for highlighting actions or key steps in a guide. They help break down text-heavy content and make instructions visually appealing. Example: For \"step-by-step\" instructions, an icon inside a circle could represent each action (e.g., a checkmark icon to signify completed tasks or a question mark for additional help).\n\nFeature lists and cards: Use filled circle icons as design elements for feature lists, product highlights, or feature comparisons. This works especially well when listing distinct features of a product, app, or service.\n\nWhen NOT to use a filled circle icon\nAvoid inconsistent usage in buttons – If some buttons have a filled circle and others don’t, the UI becomes inconsistent.\n\nDon’t use it for simple inline icons – Icons inside text (e.g., \"🔍 Search\") or standalone icons in tables don’t need a background.\n\nNot for decorative or unnecessary elements – If an icon doesn’t need extra emphasis, the filled circle is overkill.\nCustom icons\nUse external svgs as RIOglyph icons. Please read our guidelines\nRIOglyph text alignment\nWhen an icon is used alongside text in a flex, grid, or inline text layout, additional alignment adjustments may be needed. To ensure proper alignment, the following classes are available:\nrioglyph-align-top - assuming a display-flex and default line-height\nrioglyph-align-bottom - assuming a display-flex and line-height 1.25\nrioglyph-align-baseline - assuming an inline text and default line-height\n\nThese classes help align icons correctly within different layouts where they are used alongside text.\nNote: Setting a text line-height class will also affect the icon alignment and may require manual adjustments to ensure proper positioning.\nBaseline-aligned icon with inline text\nLorem ipsum dolor\n\nTop-aligned icon with text inside a flex-box layout\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nBottom-aligned icon inside an inline-flex layout and line-height-125rel\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nIcons inside a link usually don't need to be aligned manually\nLorem ipsum\n\nBaseline-aligned icon inside an inline h3 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\n\nBaseline-aligned icon inside an inline h4 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\nIcon library\nSearch\n\nrioglyph rioglyph-academic-cap\nrioglyph rioglyph-addressbook\nrioglyph rioglyph-ai\nrioglyph rioglyph-air-pay\nrioglyph rioglyph-am\nrioglyph rioglyph-angle-double-down\nrioglyph rioglyph-angle-double-left\nrioglyph rioglyph-angle-double-right\nrioglyph rioglyph-angle-double-up\nrioglyph rioglyph-antenna\nrioglyph rioglyph-api\nrioglyph rioglyph-archive\nrioglyph rioglyph-area-chart\nrioglyph rioglyph-area-in\nrioglyph rioglyph-area-out\nrioglyph rioglyph-arrow-down\nrioglyph rioglyph-arrow-left\nrioglyph rioglyph-arrow-right\nrioglyph rioglyph-arrow-up\nrioglyph rioglyph-arrows-collapse\nrioglyph rioglyph-arrows-combine\nrioglyph rioglyph-arrows-expand\nrioglyph rioglyph-arrows-horizontal\nrioglyph rioglyph-arrows-split\nrioglyph rioglyph-assigned\nrioglyph rioglyph-axis-x\nrioglyph rioglyph-axis-y\nrioglyph rioglyph-axis-z\nrioglyph rioglyph-axle\nrioglyph rioglyph-ban-circle\nrioglyph rioglyph-bar-chart-box\nrioglyph rioglyph-battery-charging\nrioglyph rioglyph-battery-level-empty\nrioglyph rioglyph-battery-level-full\nrioglyph rioglyph-battery-level-low\nrioglyph rioglyph-beacon\nrioglyph rioglyph-book\nrioglyph rioglyph-bookable-poi\nrioglyph rioglyph-bookmark-square\nrioglyph rioglyph-bookmark\nrioglyph rioglyph-border-crossing\nrioglyph rioglyph-brain\nrioglyph rioglyph-brake\nrioglyph rioglyph-branch-horizontal\nrioglyph rioglyph-branch-remove\nrioglyph rioglyph-branch-vertical\nrioglyph rioglyph-broadcast\nrioglyph rioglyph-building\nrioglyph rioglyph-bulb\nrioglyph rioglyph-bus-baseline\nrioglyph rioglyph-bus-breakdown\nrioglyph rioglyph-bus\nrioglyph rioglyph-businessman\nrioglyph rioglyph-calendar-parking\nrioglyph rioglyph-calendar-plus\nrioglyph rioglyph-calendar-today\nrioglyph rioglyph-calendar\nrioglyph rioglyph-camera\nrioglyph rioglyph-car-baseline\nrioglyph rioglyph-car-wash\nrioglyph rioglyph-car\nrioglyph rioglyph-card-hotel\nrioglyph rioglyph-card-reader\nrioglyph rioglyph-cards-add\nrioglyph rioglyph-cards-grid\nrioglyph rioglyph-cards-list\nrioglyph rioglyph-cards-table\nrioglyph rioglyph-cargo\nrioglyph rioglyph-carrier\nrioglyph rioglyph-chat\nrioglyph rioglyph-check-badge\nrioglyph rioglyph-check-shield\nrioglyph rioglyph-checkbox-checked\nrioglyph rioglyph-checkbox\nrioglyph rioglyph-checkboxes\nrioglyph rioglyph-chevron-down\nrioglyph rioglyph-chevron-left\nrioglyph rioglyph-chevron-right\nrioglyph rioglyph-chevron-up\nrioglyph rioglyph-chip\nrioglyph rioglyph-circle-dashed\nrioglyph rioglyph-circle-stack\nrioglyph rioglyph-click\nrioglyph rioglyph-climate-control\nrioglyph rioglyph-clipboard\nrioglyph rioglyph-cloud-download\nrioglyph rioglyph-cloud-not-saved\nrioglyph rioglyph-cloud-progress\nrioglyph rioglyph-cloud-upload\nrioglyph rioglyph-cloud\nrioglyph rioglyph-coasting\nrioglyph rioglyph-code-braces\nrioglyph rioglyph-code-brackets\nrioglyph rioglyph-coffee\nrioglyph rioglyph-cog\nrioglyph rioglyph-color-swatch\nrioglyph rioglyph-comment\nrioglyph rioglyph-compare\nrioglyph rioglyph-compass\nrioglyph rioglyph-component-custom-recurrent\nrioglyph rioglyph-component-custom\nrioglyph rioglyph-construction\nrioglyph rioglyph-convert\nrioglyph rioglyph-conveyor-belt\nrioglyph rioglyph-cookie\nrioglyph rioglyph-cooling\nrioglyph rioglyph-cost-efficiency\nrioglyph rioglyph-crown\nrioglyph rioglyph-cruise-control\nrioglyph rioglyph-csv\nrioglyph rioglyph-cube-dashed\nrioglyph rioglyph-cube\nrioglyph rioglyph-currency-euro\nrioglyph rioglyph-damages\nrioglyph rioglyph-dangerousgoods\nrioglyph rioglyph-dashboard-view\nrioglyph rioglyph-dashboard\nrioglyph rioglyph-delivery-completed\nrioglyph rioglyph-delivery-error\nrioglyph rioglyph-delivery-late\nrioglyph rioglyph-delivery-on-track\nrioglyph rioglyph-delivery-warning\nrioglyph rioglyph-delivery\nrioglyph rioglyph-design\nrioglyph rioglyph-desktop\nrioglyph rioglyph-detail-view-info\nrioglyph rioglyph-detail-view\nrioglyph rioglyph-direction\nrioglyph rioglyph-discount-badge\nrioglyph rioglyph-document-out\nrioglyph rioglyph-document\nrioglyph rioglyph-download\nrioglyph rioglyph-drag-n-drop\nrioglyph rioglyph-drive-history\nrioglyph rioglyph-driver-card\nrioglyph rioglyph-driver\nrioglyph rioglyph-drivercard-in\nrioglyph rioglyph-drivercard-out\nrioglyph rioglyph-duplicate\nrioglyph rioglyph-earphone\nrioglyph rioglyph-emergency-stop\nrioglyph rioglyph-empty\nrioglyph rioglyph-engine\nrioglyph rioglyph-envelope-indicator\nrioglyph rioglyph-envelope-open\nrioglyph rioglyph-envelope\nrioglyph rioglyph-erase\nrioglyph rioglyph-error-sign\nrioglyph rioglyph-euro-note\nrioglyph rioglyph-exclamation-sign\nrioglyph rioglyph-exclamation\nrioglyph rioglyph-eye-close\nrioglyph rioglyph-eye-closed\nrioglyph rioglyph-eye-open\nrioglyph rioglyph-face-frown\nrioglyph rioglyph-face-neutral\nrioglyph rioglyph-face-smile\nrioglyph rioglyph-facetime-video\nrioglyph rioglyph-factory\nrioglyph rioglyph-file-signature\nrioglyph rioglyph-files\nrioglyph rioglyph-fill\nrioglyph rioglyph-filling-e-station\nrioglyph rioglyph-filling-station\nrioglyph rioglyph-filter-active\nrioglyph rioglyph-filter-reset\nrioglyph rioglyph-filter\nrioglyph rioglyph-fingerprint\nrioglyph rioglyph-finish\nrioglyph rioglyph-fire\nrioglyph rioglyph-flag\nrioglyph rioglyph-flash\nrioglyph rioglyph-folder-closed\nrioglyph rioglyph-folder-open\nrioglyph rioglyph-fuel-electric\nrioglyph rioglyph-fuel-gas\nrioglyph rioglyph-fuel-hydrogen\nrioglyph rioglyph-fuel-liquid\nrioglyph rioglyph-fuel-mix\nrioglyph rioglyph-fullscreen\nrioglyph rioglyph-geofence\nrioglyph rioglyph-get\nrioglyph rioglyph-give\nrioglyph rioglyph-globe-alt\nrioglyph rioglyph-globe\nrioglyph rioglyph-group-blocks\nrioglyph rioglyph-group\nrioglyph rioglyph-hand-down\nrioglyph rioglyph-hand-left\nrioglyph rioglyph-hand-right\nrioglyph rioglyph-hand-up\nrioglyph rioglyph-handshake\nrioglyph rioglyph-hash\nrioglyph rioglyph-heart\nrioglyph rioglyph-heating\nrioglyph rioglyph-hierarchy\nrioglyph rioglyph-history\nrioglyph rioglyph-home-sign\nrioglyph rioglyph-home\nrioglyph rioglyph-hour-glass\nrioglyph rioglyph-id\nrioglyph rioglyph-inbox-in\nrioglyph rioglyph-inbox-out\nrioglyph rioglyph-inbox-stack\nrioglyph rioglyph-inbox\nrioglyph rioglyph-info-sign\nrioglyph rioglyph-info\nrioglyph rioglyph-insert\nrioglyph rioglyph-issue-tracking\nrioglyph rioglyph-key\nrioglyph rioglyph-kickdown\nrioglyph rioglyph-language\nrioglyph rioglyph-layer-pois\nrioglyph rioglyph-layer\nrioglyph rioglyph-leafs\nrioglyph rioglyph-light-bulb\nrioglyph rioglyph-line-chart\nrioglyph rioglyph-link\nrioglyph rioglyph-load-unload\nrioglyph rioglyph-load\nrioglyph rioglyph-location-arrow\nrioglyph rioglyph-lock-open\nrioglyph rioglyph-lock\nrioglyph rioglyph-log-in\nrioglyph rioglyph-logout\nrioglyph rioglyph-looking-glass-man\nrioglyph rioglyph-looking-glass\nrioglyph rioglyph-magic-wand\nrioglyph rioglyph-maintenance-components\nrioglyph rioglyph-map-location\nrioglyph rioglyph-map-marker\nrioglyph rioglyph-map\nrioglyph rioglyph-megaphone\nrioglyph rioglyph-menu-hamburger\nrioglyph rioglyph-merge\nrioglyph rioglyph-migrate\nrioglyph rioglyph-milage\nrioglyph rioglyph-minus-light\nrioglyph rioglyph-minus-sign\nrioglyph rioglyph-minus\nrioglyph rioglyph-missing\nrioglyph rioglyph-mode-dark-light\nrioglyph rioglyph-more\nrioglyph rioglyph-new-window\nrioglyph rioglyph-newspaper\nrioglyph rioglyph-note\nrioglyph rioglyph-notification\nrioglyph rioglyph-number-1\nrioglyph rioglyph-number-2\nrioglyph rioglyph-number-3\nrioglyph rioglyph-off\nrioglyph rioglyph-oil-can\nrioglyph rioglyph-ok-circle\nrioglyph rioglyph-ok-dashed\nrioglyph rioglyph-ok-sign\nrioglyph rioglyph-ok\nrioglyph rioglyph-onboarding\nrioglyph rioglyph-ongoing\nrioglyph rioglyph-option-horizontal\nrioglyph rioglyph-option-vertical\nrioglyph rioglyph-order\nrioglyph rioglyph-palette-broken\nrioglyph rioglyph-palette\nrioglyph rioglyph-paper-clip\nrioglyph rioglyph-parcel-broken\nrioglyph rioglyph-parcel\nrioglyph rioglyph-parking\nrioglyph rioglyph-pause-circle\nrioglyph rioglyph-pause\nrioglyph rioglyph-pdf-file\nrioglyph rioglyph-pencil-square\nrioglyph rioglyph-pencil\nrioglyph rioglyph-phone\nrioglyph rioglyph-pictures\nrioglyph rioglyph-pin-range\nrioglyph rioglyph-pin\nrioglyph rioglyph-play-circle\nrioglyph rioglyph-play\nrioglyph rioglyph-plugged-off\nrioglyph rioglyph-plugged-on\nrioglyph rioglyph-plus-light\nrioglyph rioglyph-plus-sign\nrioglyph rioglyph-plus\nrioglyph rioglyph-pm\nrioglyph rioglyph-poi\nrioglyph rioglyph-polygon\nrioglyph rioglyph-position\nrioglyph rioglyph-print\nrioglyph rioglyph-progress-ongoing\nrioglyph rioglyph-progress-remaining\nrioglyph rioglyph-progression\nrioglyph rioglyph-prompt\nrioglyph rioglyph-pto-off\nrioglyph rioglyph-pto-on\nrioglyph rioglyph-pushpin\nrioglyph rioglyph-puzzle\nrioglyph rioglyph-pylon\nrioglyph rioglyph-qr-code\nrioglyph rioglyph-question-sign\nrioglyph rioglyph-question\nrioglyph rioglyph-record\nrioglyph rioglyph-recycle\nrioglyph rioglyph-refresh\nrioglyph rioglyph-remove-circle\nrioglyph rioglyph-remove-sign\nrioglyph rioglyph-remove\nrioglyph rioglyph-repeat-square\nrioglyph rioglyph-repeat\nrioglyph rioglyph-resize-full\nrioglyph rioglyph-resize-horizontal\nrioglyph rioglyph-resize-small\nrioglyph rioglyph-resize-vertical\nrioglyph rioglyph-retrofit\nrioglyph rioglyph-revert\nrioglyph rioglyph-rio-marker\nrioglyph rioglyph-rio\nrioglyph rioglyph-road-restrictions\nrioglyph rioglyph-road\nrioglyph rioglyph-robot\nrioglyph rioglyph-rocket\nrioglyph rioglyph-role-management\nrioglyph rioglyph-route-option\nrioglyph rioglyph-route-view\nrioglyph rioglyph-route\nrioglyph rioglyph-ruler\nrioglyph rioglyph-satellite-radar\nrioglyph rioglyph-save\nrioglyph rioglyph-scale\nrioglyph rioglyph-scan\nrioglyph rioglyph-scissors\nrioglyph rioglyph-search-list\nrioglyph rioglyph-search-truck\nrioglyph rioglyph-search\nrioglyph rioglyph-send\nrioglyph rioglyph-series\nrioglyph rioglyph-server-stack\nrioglyph rioglyph-settings\nrioglyph rioglyph-share-alt\nrioglyph rioglyph-share-nodes\nrioglyph rioglyph-share\nrioglyph rioglyph-shelve\nrioglyph rioglyph-ship\nrioglyph rioglyph-shopping-bag\nrioglyph rioglyph-shopping-cart\nrioglyph rioglyph-signature\nrioglyph rioglyph-slope-down-max\nrioglyph rioglyph-slope-down-min\nrioglyph rioglyph-slope-up-max\nrioglyph rioglyph-slope-up-min\nrioglyph rioglyph-sort-by-attributes-alt\nrioglyph rioglyph-sort-by-attributes\nrioglyph rioglyph-sort\nrioglyph rioglyph-sparkles\nrioglyph rioglyph-speed\nrioglyph rioglyph-sphere\nrioglyph rioglyph-spinner\nrioglyph rioglyph-split-view\nrioglyph rioglyph-square-dashed\nrioglyph rioglyph-stack-add\nrioglyph rioglyph-stack-iso\nrioglyph rioglyph-stack\nrioglyph rioglyph-star-empty\nrioglyph rioglyph-star\nrioglyph rioglyph-stars\nrioglyph rioglyph-start\nrioglyph rioglyph-stats-high\nrioglyph rioglyph-stats-line-dots\nrioglyph rioglyph-stats-low\nrioglyph rioglyph-stats-medium\nrioglyph rioglyph-stats\nrioglyph rioglyph-status-available\nrioglyph rioglyph-status-change-horizontal\nrioglyph rioglyph-status-change\nrioglyph rioglyph-status-driving\nrioglyph rioglyph-status-resting\nrioglyph rioglyph-status-working\nrioglyph rioglyph-steering-wheel\nrioglyph rioglyph-stopover\nrioglyph rioglyph-support\nrioglyph rioglyph-table-view\nrioglyph rioglyph-tachograph-download\nrioglyph rioglyph-tachograph\nrioglyph rioglyph-tag\nrioglyph rioglyph-tasks\nrioglyph rioglyph-temperature\nrioglyph rioglyph-th-list\nrioglyph rioglyph-thumbs-down\nrioglyph rioglyph-thumbs-up\nrioglyph rioglyph-tickets\nrioglyph rioglyph-time-alt\nrioglyph rioglyph-time-cancle\nrioglyph rioglyph-time-incomplete\nrioglyph rioglyph-time\nrioglyph rioglyph-tire\nrioglyph rioglyph-tms\nrioglyph rioglyph-to-bottom\nrioglyph rioglyph-to-left\nrioglyph rioglyph-to-right\nrioglyph rioglyph-to-top\nrioglyph rioglyph-tracking-package\nrioglyph rioglyph-traffic-lights\nrioglyph rioglyph-trailer-baseline\nrioglyph rioglyph-trailer\nrioglyph rioglyph-trailerposition\nrioglyph rioglyph-train\nrioglyph rioglyph-transfer\nrioglyph rioglyph-transition-push-right\nrioglyph rioglyph-transition-right\nrioglyph rioglyph-trash\nrioglyph rioglyph-triangle-bottom\nrioglyph rioglyph-triangle-left\nrioglyph rioglyph-triangle-right\nrioglyph rioglyph-triangle-top\nrioglyph rioglyph-trophy\nrioglyph rioglyph-truck-baseline\nrioglyph rioglyph-truck-breakdown\nrioglyph rioglyph-truck-unit\nrioglyph rioglyph-truck\nrioglyph rioglyph-unassigned\nrioglyph rioglyph-unavailable\nrioglyph rioglyph-unlink\nrioglyph rioglyph-upload\nrioglyph rioglyph-user-add\nrioglyph rioglyph-user-group\nrioglyph rioglyph-user-ok\nrioglyph rioglyph-user-remove\nrioglyph rioglyph-user-sign-off\nrioglyph rioglyph-user-sign\nrioglyph rioglyph-user\nrioglyph rioglyph-van-baseline\nrioglyph rioglyph-van\nrioglyph rioglyph-variable\nrioglyph rioglyph-video\nrioglyph rioglyph-volume\nrioglyph rioglyph-wallet\nrioglyph rioglyph-warehouse\nrioglyph rioglyph-warning-sign\nrioglyph rioglyph-weather-cloudy\nrioglyph rioglyph-weather-icy\nrioglyph rioglyph-weather-overcast\nrioglyph rioglyph-weather-raining\nrioglyph rioglyph-weather-snowing\nrioglyph rioglyph-weather-stormy\nrioglyph rioglyph-weather-sunny\nrioglyph rioglyph-weather-thundering\nrioglyph rioglyph-weather-windy\nrioglyph rioglyph-weight\nrioglyph rioglyph-width\nrioglyph rioglyph-wifi\nrioglyph rioglyph-window\nrioglyph rioglyph-workflow-step\nrioglyph rioglyph-workflow\nrioglyph rioglyph-workshop\nrioglyph rioglyph-wrench\nrioglyph rioglyph-xmas-raindeer\nrioglyph rioglyph-xmas-santa\nText styles\nHeadline size\n\ntext-size-h1\ntext-size-h2\ntext-size-h3\ntext-size-h4\ntext-size-h5\ntext-size-h6\n\nText size\n\ntext-size-10\ntext-size-11\ntext-size-12\ntext-size-14\ntext-size-16\ntext-size-18\ntext-size-20\n\nText weight\n\ntext-thin\ntext-light\ntext-normal\ntext-medium\ntext-bold\nText style\n\ntext-style-normal\ntext-style-italic\n\nText decoration\n\ntext-decoration-none\nhover-text-decoration-none\ntext-decoration-line-through\ntext-decoration-underline\nunderline-offset-2\nunderline-offset-3\nunderline-offset-4\nunderline-offset-5\n\nText wrapping\n\nwhite-space-nowrap\nwhite-space-normal\n\nText transform\n\ntext-capitalize\nTEXT-LOWERCASE\ntext-uppercase\ntext capitalize first word\ntext-transform-none\nHeadings\n\nThe reason why there are heading tags like <h2> and heading classes like .h2 is due to different use cases. A <h2> tag for instance is an essential SEO tag often used by a CMS like WordPress or Typo3. For these Tools, we can not change the code but we need some styling for the HTML element itself.\nAnother example is the <strong> or <b> tags and the .text-bold class. The heading classes like the .h2 class can be used in a service application, as those are not SEO relevant. As the UIKIT uses an atomic CSS approach, the same style can be achieved when combining .text-size-h2 .text-bold margin-top-10 margin-bottom-20 classes.\n\nHeadline tags\n\nHeading 1\nHeading 2\nHeading 3\nHeading 4\nHeading 5\nHeading 6\n\nHeadline classes\n\nh1\nh2\nh3\nh4\nh5\nh6\n\nMisc tags\n\nThis line of text is meant to be treated as fine print.\nThe following snippet of text is rendered as bold text.\nThe following snippet of text is rendered as italicized text.\nAn abbreviation of the word attribute is attr.\nAlignment\ntext-left\ntext-center\ntext-right\nBlockquote\nLorem ipsum white.Lorem ipsum black.Lorem ipsum decent.Lorem ipsum lightest.Lorem ipsum lighter.Lorem ipsum light.Lorem ipsum gray.Lorem ipsum dark.Lorem ipsum darker.Lorem ipsum darkest.\nCode\nvar test = 'Hello World!';\nThis is an inline Codeblock for use in text.\n\n// This is a JS example\nvar test = \"Hello World\";\nconsole.log(test);\nCursor\nYou can disable all pointer events by addingpointer-events-none\ncursor-default\ncursor-pointer\ncursor-text\ncursor-move\ncursor-grabbing\ncursor-grab\ncursor-not-allowed\ncursor-row-resize\ncursor-col-resize\ncursor-col-resize\ncursor-ew-resize\ncursor-help\ncursor-cell\ncursor-copy\ncursor-crosshair\nEllipsis\nNote: Ellipsis only works with block elements. It does not work withdisplay-grid. Combine the classes withdisplay-block or display-flex\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nLine height\nWhen working with text, it's important to consider the relationship between the text size and the line height. For larger headlines, a line height of 1.2 to 1.25 is recommended to maintain readability and visual balance. For plain body text or text inside promotion blocks, a slightly larger line height of 1.4 to 1.5 is suggested to improve readability and the overall reading experience.\n\nRule of thumb: the larger the text size, the smaller the line height should be.\n\nNote: The listed classes are not necessary for the use of ourtext-size classes. Use them only if you want to have the exact the same line-height as your text-size is.\nline-height-10\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-11\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-12\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-14\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-16\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-18\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-20\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-125rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-130rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-135rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-150rel\n\nLorem ipsum dolor sit amet, dui eget elit.\nline-height-h1\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h2\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h3\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h4\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h5\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h6\n\nLorem ipsum dolor sit amet, dui eget elit.\nUser select\nuser-select-all\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nuser-select-none\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nText box\ntext-box-trim-start\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-trim-both\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-auto\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nno text-box\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nText wrapping\nWord break\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nHyphens\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nBalance\ncaniuse\n\nAllows text to have it's lines broken that each line is roughly the same width.\n\nPretty\ncaniuse\n\nIt evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.\nCols\nNote: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active\ncol-12\n\ncol-6\n\ncol-6\n\ncol-4\n\ncol-4\n\ncol-4\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\nResponsive cols\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\nEqual Height Cols\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nContainer fluid\ncontainer fluid-small\ncontainer fluid-default\ncontainer fluid-large\ncontainer fluid-extra-large\ncontainer fluid-ultra-large\nContainer\nNote: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.\ncontainer\nContainer queries\nWhat are container queries?\nWhile traditional container classes like container and fluid-default respond to the viewport width,container queries respond to the size of the component’s parent container. This allows components to adapt their layout based on context, not just screen size.\n\nBy reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.\nUsage\nThe UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.\n\n1. Define the container: mark an ancestor element as a container using the specific cq-container class. This tells the browser which element's size should be monitored. <div class=\"cq-container\"<!-- content goes here --</div\n2. Apply CQ utility classes: add cq-300:... classes to the descendant elements you want to style conditionally based on the container's. <div class=\"cq-container\"<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"<!-- more content goes here --</div</div\n\nhtml\n<div class=\"cq-container\"\n<!-- content goes here --\n</div\n\nhtml\n<div class=\"cq-container\"\n<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"\n<!-- more content goes here --\n</div\n</div\n\nThe class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]\n\n- cq: is the prefix for all container query utilities.\n- [breakpointValue] is one of the numeric identifiers from the table above (e.g., 300, 400, 500, 600, 700).\n- [property] is the type of property being styled (e.g., padding, margin-top, flex-column, grid-cols).\n- [value] is the value from the library's scale (e.g., 10, 25, auto).\nContainer query breakpoints\nOur container query utilities are based on a set of predefined width breakpoints. The breakpoint value is included directly in the class name for clarity.\n\nWe use a \"max-width\" query for the smallest breakpoint (300px) to target styles up to that size, and \"min-width\" queries for all larger breakpoints to target styles from that size upwards.\nContainer query example and classes\nItem 1\nItem 2\nItem 3\nFlexbox\nCenter\n\nLorem ipsum dolor\n\nTop start\n\nLorem ipsum dolor\n\nBottom start\n\nLorem ipsum dolor\n\nTop end\n\nLorem ipsum dolor\n\nBottom end\n\nLorem ipsum dolor\n\nSpace between\n\nLorem ipsum dolor\nLorem ipsum dolor\nLorem ipsum dolor\n\nEven split columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nMultiple even columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\n\n70/30 columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\nGrid\ngrid-cols-1\n\ngrid-cols-2\ngrid-cols-2\n\ngrid-cols-3\ngrid-cols-3\ngrid-cols-3\n\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\n\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\n\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\n\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\n\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\n\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\n\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\n\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\n\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\nGrid colspan / rowspan\ngrid-colspan-3\nGrid column-start / column-end\nGrid auto-fit\nIn CSS Grid, the auto-fit keyword is used with the repeat() function to automatically adjust the number of columns (or rows) based on the available space in the container. It helps create responsive layouts by filling the container with as many columns (or rows) of a specified size as possible.\n\nDynamic Column Creation: \"auto-fit\" automatically creates as many columns as will fit in the available space, potentially adding or removing columns as the container resizes.\n\nResponsive Design: Ensures that the grid adapts to different screen sizes by adjusting the number of columns.\nGrid max-content / auto content\nThe max-content value sizes the grid column to be as wide as the largest piece of content inside it. Essentially, it takes up as much space as necessary to fit the longest word or item without breaking. This is useful when you want the column to expand to fit its content, ensuring no content is clipped or wrapped unnecessarily.\n\nThe auto value sizes the grid column based on the content, but it can also take into account the available space and other factors. If there's more space available, \"auto\" can expand to fill it, but it won't exceed the available space like \"max-content\". This is useful when you want the column to take up space according to its content but also adapt to the overall layout and available space.\n\nChoosing between max-content and auto depends on whether you want the column to strictly fit its content (potentially ignoring the available space) or to adapt to the content while also being flexible within the grid layout.\nmax-content\n1fr\n\nmax-content\n1fr\nmax-content\n1fr\n\n1fr\nmax-content\n\n1fr\nmax-content\n1fr\nmax-content\n\nauto\n1fr\n\nauto\n1fr\nauto\n1fr\n\n1fr\nauto\n\n1fr\nauto\n1fr\nauto\nGrid rows\nHelper class for 3 rows where the middle row expands and can scroll\nLorem item 0\nLorem ipsum dolor sit amet\n\nLorem item 1\nLorem ipsum dolor sit amet\n\nLorem item 2\nLorem ipsum dolor sit amet\n\nLorem item 3\nLorem ipsum dolor sit amet\n\nLorem item 4\nLorem ipsum dolor sit amet\n\nLorem item 5\nLorem ipsum dolor sit amet\n\nLorem item 6\nLorem ipsum dolor sit amet\n\nLorem item 7\nLorem ipsum dolor sit amet\n\nButton\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGrid placement\nplace-items-center\nGrid stacking\nstack item 1\nstack item 2\n\nstack item 1\nstack item 2\nSubgrid\nThe subgrid value in CSS Grid Layout is a feature that allows a nested grid to inherit the column and/or row definitions from its parent grid container. This means that the subgrid can align its items according to the tracks defined in the parent grid, creating a more consistent and aligned layout structure. It is particularly useful for complex layouts where nested elements need to align with the overall grid structure without redefining the grid tracks. By using subgrid, you can maintain a cohesive design while simplifying the CSS code needed for layout alignment. This feature enhances the flexibility and power of CSS Grid, making it easier to manage nested grid layouts.\nForm example\nConnection\nHostPortReally long label\nCredentials\nUsernamePasswordCheckboxYet another level of nesting\n\nSubgrid enabled\nSubmit\nFull NameEmailMessage\n\nSubgrid enabled\nSubmit\nSubgrid Cards\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla? Consectetur adipisci illum ipsa reprehenderit deleniti quia qui aliquid tempora ea accusamus. Quibusdam.\nby Mia at Company\nLove it\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla?\nby Mia at Company\nLove it\nWhat if we have a much longer article title?\nLorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet, tempore error maxime praesentium eos.\nby Jen \"Boss\" Simmons at Company\nLove it so\nArticle titles aren't consistent\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Deja \"Empathic Dev\" Hodge at Company\nLove it\nThis article title will need to be fixed in Post-Production with a much shorter and catchier click-bait title\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Ryanne \"Fix It In Post\" Hodson at Company\nLove it\nShort title\nLorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim maxime repellat illo!\nby Jay \"Do It\" Dedman at Company\nLove it\n\nSubgrid enabled\nPosition\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGap\nNote: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.\ngap-0\ngap-0\ngap-0\n\ngap-1\ngap-1\ngap-1\n\ngap-2\ngap-2\ngap-2\n\ngap-3\ngap-3\ngap-3\n\ngap-4\ngap-4\ngap-4\n\ngap-5\ngap-5\ngap-5\n\ngap-10\ngap-10\ngap-10\n\ngap-15\ngap-15\ngap-15\n\ngap-20\ngap-20\ngap-20\n\ngap-25\ngap-25\ngap-25\n\ngap-50\ngap-50\ngap-50\nSpace\nNote: For flex or grid solutions please use gap instead.\nspace-y-0\nspace-y-0\nspace-y-0\n\nspace-y-1\nspace-y-1\nspace-y-1\n\nspace-y-2\nspace-y-2\nspace-y-2\n\nspace-y-3\nspace-y-3\nspace-y-3\n\nspace-y-4\nspace-y-4\nspace-y-4\n\nspace-y-5\nspace-y-5\nspace-y-5\n\nspace-y-10\nspace-y-10\nspace-y-10\n\nspace-y-15\nspace-y-15\nspace-y-15\n\nspace-y-20\nspace-y-20\nspace-y-20\n\nspace-y-25\nspace-y-25\nspace-y-25\n\nspace-y-50\nspace-y-50\nspace-y-50\nMargin\nSurrouding\n\nmargin-0\n\nmargin-1\n\nmargin-2\n\nmargin-3\n\nmargin-4\n\nmargin-5\n\nmargin-10\n\nmargin-15\n\nmargin-20\n\nmargin-25\n\nmargin-50\n\nHorizontal\n\nmargin-x-0\n\nmargin-x-1\n\nmargin-x-2\n\nmargin-x-3\n\nmargin-x-4\n\nmargin-x-5\n\nmargin-x-10\n\nmargin-x-15\n\nmargin-x-20\n\nmargin-x-25\n\nmargin-x-50\n\nVertical\n\nmargin-y-0\n\nmargin-y-1\n\nmargin-y-2\n\nmargin-y-3\n\nmargin-y-4\n\nmargin-y-5\n\nmargin-y-10\n\nmargin-y-15\n\nmargin-y-20\n\nmargin-y-25\n\nmargin-y-50\n\nLeft\n\nmargin-left-0\n\nmargin-left-1\n\nmargin-left-2\n\nmargin-left-3\n\nmargin-left-4\n\nmargin-left-5\n\nmargin-left-10\n\nmargin-left-15\n\nmargin-left-20\n\nmargin-left-25\n\nmargin-left-50\n\nRight\n\nmargin-right-0\n\nmargin-right-1\n\nmargin-right-2\n\nmargin-right-3\n\nmargin-right-4\n\nmargin-right-5\n\nmargin-right-10\n\nmargin-right-15\n\nmargin-right-20\n\nmargin-right-25\n\nmargin-right-50\n\nTop\n\nmargin-top-0\n\nmargin-top-1\n\nmargin-top-2\n\nmargin-top-3\n\nmargin-top-4\n\nmargin-top-5\n\nmargin-top-10\n\nmargin-top-15\n\nmargin-top-20\n\nmargin-top-25\n\nmargin-top-50\n\nBottom\n\nmargin-bottom-0\n\nmargin-bottom-1\n\nmargin-bottom-2\n\nmargin-bottom-3\n\nmargin-bottom-4\n\nmargin-bottom-5\n\nmargin-bottom-10\n\nmargin-bottom-15\n\nmargin-bottom-20\n\nmargin-bottom-25\n\nmargin-bottom-50\nMargin helper\nLast child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast child (parent class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (parent class)\n\nChild\nChild\nChild\nChild\nChild\nPadding\nSurrouding\n\npadding-0\n\npadding-1\n\npadding-2\n\npadding-3\n\npadding-4\n\npadding-5\n\npadding-10\n\npadding-15\n\npadding-20\n\npadding-25\n\npadding-50\n\nHorizontal\n\npadding-x-0\n\npadding-x-1\n\npadding-x-2\n\npadding-x-3\n\npadding-x-4\n\npadding-x-5\n\npadding-x-10\n\npadding-x-15\n\npadding-x-20\n\npadding-x-25\n\npadding-x-50\n\nVertical\n\npadding-y-0\n\npadding-y-1\n\npadding-y-2\n\npadding-y-3\n\npadding-y-4\n\npadding-y-5\n\npadding-y-10\n\npadding-y-15\n\npadding-y-20\n\npadding-y-25\n\npadding-y-50\n\nLeft\n\npadding-left-0\n\npadding-left-1\n\npadding-left-2\n\npadding-left-3\n\npadding-left-4\n\npadding-left-5\n\npadding-left-10\n\npadding-left-15\n\npadding-left-20\n\npadding-left-25\n\npadding-left-50\n\nRight\n\npadding-right-0\n\npadding-right-1\n\npadding-right-2\n\npadding-right-3\n\npadding-right-4\n\npadding-right-5\n\npadding-right-10\n\npadding-right-15\n\npadding-right-20\n\npadding-right-25\n\npadding-right-50\n\nTop\n\npadding-top-0\n\npadding-top-1\n\npadding-top-2\n\npadding-top-3\n\npadding-top-4\n\npadding-top-5\n\npadding-top-10\n\npadding-top-15\n\npadding-top-20\n\npadding-top-25\n\npadding-top-50\n\nBottom\n\npadding-bottom-0\n\npadding-bottom-1\n\npadding-bottom-2\n\npadding-bottom-3\n\npadding-bottom-4\n\npadding-bottom-5\n\npadding-bottom-10\n\npadding-bottom-15\n\npadding-bottom-20\n\npadding-bottom-25\n\npadding-bottom-50\nHeight\nWidth\n30px\n35px\n40px\n45px\n50px\n60px\n70px\n80px\n90px\n100px\n\n10pct\n20pct\n25pct\n30pct\n33pct\n40pct\n50pct\n60pct\n66pct\n70pct\n75pct\n80pct\n90pct\n100pct\nContent based min-width\nThe min-width property defines the smallest width an element can shrink to. When using keywords like max-content, min-content, orfit-content, you tell the browser how the element should behave in relation to its content size. These values are especially useful in responsive layouts or flexible components where content-driven sizing is required.\n\n- min-width-min-content The element’s minimum width becomes the smallest possible width without causing content overflow. It allows text wrapping, meaning the element will compress as much as possible while still displaying all content correctly.\n- min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.\n- min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.\nmax-contentThis_is_a_really_long_word_that_will_not_break.\n\nmin-contentThis is a really long text that will break and wrap.\n\nfit-contentThis text fits naturally within the box.\nBreadcrumb\nlevel 1\nlevel 2\nlevel 3\nlevel 4\nPager\nSee Pager for the actual React component.\nPager with label\n\nPrevious\nThe previous chapter\n\nNext\nThe next chapter\n\nCompact Pager without label\n\nPrevious\n\nNext\nPagination\n1\n2\n3\n4\n5\n\nUsage\nUse pagination buttons only for UI elements that benefit from stepping through discrete content pages, such as: Image carousels – where users navigate through multiple slides or multi-step flows – to guide users through a process one step at a time.\nNot for Tables\nTables should use a “Load more” button instead of pagination.\nWhy \"Load more\" is preferred\nContinuous scanning:\nUsers can scroll down and view more data without breaking flow.\nLess disruption:\nAvoids jarring page reloads or resets when switching pages.\nImproved comparability:\nAll previously loaded data stays in view, enabling easier side-by-side comparison of rows.\nLess cognitive load:\nUsers rarely remember what was on “Page 6”, especially when rows are changing. Sequential pages interrupt scanning and exploration.\nNo page size UI:\nYou don’t need to offer dropdowns for rows per page, reducing UI clutter.\nPills\nStandard\n\nPill 1\nPill 2\nPill 3\nDisabled Pill\n\nJustified\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nJustified with icons\n\nPill 1\n\nPill 2\n\nPill 3\n\nDisabled Pill\n\nJustified with word-wrap\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\nFilled\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nFilled with icons only\nStacked\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent menu\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\nTabs\nStandard\n\nTab 1\nTab 2\nTab 3\nDisabled tab\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nBordered content\n\nTab 4\nTab 5\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified with word-wrap\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\nTable\nSee also our Table components like TableToolbar, TableSearch,TableViewToggles, TableCardsSorting, and TableSettingsDialog. For a more advanced table demo checkout our demo service\nCommon table style\nLabelNewAction\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nLabel\n\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable head\nDefault table head\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\n\nTable head filled\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nRounded table\nUse the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nHover table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nBordered table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nStriped table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nGrouped table\nHead columnHead columnHead columnHead column\n\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nSticky table header\nSticky column headSticky column headSticky column headSticky column head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nSticky table columns\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable row span\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumn\nTable double row header\nDouble row header with filled header\nScores\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\n\nDouble row header with border and footer\nYears\n20212022202320242025\n\nProduct 1Income50708090100\nExpense3763708291\nProfit1371089\n\nProduct 2Income5067799054\nExpense3370507930\nProfit17-3191221\n\nTotal Profit304292030\nCondensed table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nFixed table layout\nThe table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.\nHead columnHead columnHead columnHead columnHead column\n\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nResponsive tables\nTables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.\n\nThere are some options to tackle this problem\n\n- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.\n- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.\n- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.\n- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the \"...\" at the end.\nTable cards\nNewButton\n\nFilter\n\nLabel\n\nIdId\nName\nVIN\nStatus\nDuration\n\nIdNameVINStatusDuration\n\n233IpsumNo dataInactive5h 15m\n\n456No data456Active4h 55m\n\n878No data878Active9h 10m\n\n895No data895Active8h 45m\n\n978IpsumNo dataInactive6h 35m\n\n2345Lorem2345Active11h 50m\n\n2445No data2445Active7h 25m\n\n3456No data3456Active12h 00m\n\n4567No data4567Active10h 20m\n\n7354Lorem7354Active10h 30m\n\n70/100\n\nLoad more\nStates in tables\nHead columnHead columnHead columnHead columnHead column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nAlerts\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\nBadges\nUnlike labels, which are used for categorization and emphasis, badges provide quick contextual information in a compact and visually distinct manner.\nUse badges for numeric indicators, such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for small floating highlights on UI elements (e.g., \"New\" or \"Beta\"). Badges are commonly placed on icons, buttons, menus, or navigation elements.\nHome1\nProfile\nMessages3\n\n01234567\n01234567\n1011121314151617\nBadges on Icons\n\n2323232323232323\nBadges as Indicator\n\nInbox3\nInbox99+\nCallouts\nCallout default\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout primary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout secondary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout info\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout success\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout warning\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout danger\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\nCounter\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nKey\nKeys examplePro tip: press m to comment\nPress ctrl + a to select all\n\nUse lower-case namesshiftenterctrlalt\nUnicode symbols⇧⇪↵⌫→←↑↓⇥⇤␣\n\nMac specific keys - see DeviceUtils⌘⌥⌃\nLabels\nNote: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.\nLabels are small, colored indicators used to represent statuses, categories, or highlights in the UI.\nThe standard labels have a light background and are ideal for subtle status indications that blend naturally with the interface.\nThe filled labels use a bold background color, making them more prominent—best suited for drawing attention to critical statuses or highlighting important information.\n\nStandard labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nLabels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed and filled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\nLists\nOrdered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nUnordered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nSquare list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\nList groups\nList group item default\nList group item primary\nList group item secondary\nList group item info\nList group item success\nList group item warning\nList group item danger\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nList group item link (a)List group item link (a)List group item link (a)List group item link (a)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\n\nHeadline default\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndefault\n\nHeadline primary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nprimary\n\nHeadline secondary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsecondary\n\nHeadline info\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ninfo\n\nHeadline success\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsuccess\n\nHeadline warning\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nwarning\n\nHeadline danger\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndanger\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\nPanels\npanel-heading1\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\nProgress bars\nStandard\n\nStriped\n\nAnimated\n\nIndeterminate\n\nStacked\n\nStacked ratings\n\nStacked ratings with custom icon overlay\nPoorExcelent\nWells\nHi, my name is well-sm\n\nHi, my name is well\n\nHi, my name is well-lg\nForms\nLegend\n\nEmail\nPassword\nTextarea\n\nNumber with controls\nNumber without controls\n\nRadiosOption one\nOption two\n\nCheckboxLorem ipsum dolor sit amet.\n\nNative Selects12345\nCancelSubmit\n\nDisabled input\nInput success\nInput warning\nInput error\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nDefault inputSome input info for the user\nInput addon labelLabelLabel\n\nInput addons.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\n\nDefault inputSome input info for the userThis is an error message\nInput addon labelLabelThis is a warning message\nLabel\n\nInput addons\n.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\nForm sized examples\nSize by form-Group class\nform-group-sm\nform-group-smXX\n\nform-group-sm12345\nform-group-sm\nform-group\nform-groupXX\n\nform-group\nform-group12345\nform-group-lgXX\n\nform-group-lg\nform-group-lg\nform-group-lg12345\n\nSize by Input Class\ninput-sm\ninput-group-smXX\n\ninput-sm\ninput-group-sm12345\n\ninput\ninput-groupXX\n\ninput\ninput-group12345\n\ninput-lg\ninput-group-lgXX\n\ninput-lg\ninput-group-lg12345\nForm with fieldset and legend\nAn HTML <fieldsetelement is used to group related elements within a form. It is particularly useful for organizing complex forms by creating logical sections, improving both the form's structure and user experience. The <fieldsetcan be paired with a <legendelement to provide a caption for the grouped content, making the form easier to understand and navigate.\n\nAllows for selective processing of grouped data, making it useful for handling specific sections of a form independently when used with the FormData API.\nA form with fieldsetLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\n\nA form with fieldset disabledLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\nInput resize\nresize-noneresize-vertical\nAnimations\nslide-out\nleftupdownright\n3s2s1s09s08s07s06s05s04s03s02s01s\nlooprestart\nlineareaseease-inease-outease-in-out\ninfiniterepeat-1repeat-2repeat-3\nTest animationReset\nTransition\nTransition properties\n\ntransition-opacity\ntransition-position\ntransition-all\n\nTransition timing functions\n\ntransition-ease\ntransition-ease-in-out\n\nTransition duration\n\ntransition-duration-01\ntransition-duration-02\ntransition-duration-03\ntransition-duration-04\ntransition-duration-05\nBlur\nBackdrop blur\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.\nAspect ratio\nWith fixed width\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\n\nWith fixed height\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\nInset\ninset-0\n\ninset-x-0\n\ninset-y-0\n\nBase element\nShorthand element\nHelper\nclearanceclearfixchildren-first-border-top-nonefirst-child-border-top-nonechildren-last-border-bottom-nonelast-child-border-bottom-nonechildren-first-margin-top-0first-child-margin-top-0children-last-margin-bottom-0last-child-margin-bottom-0\nRotate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nRotate 360°\n\nRotate -5° to 5°\nScale\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nScale\n\nHover scale\nTranslate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.\nDisplay\ndisplay-blockdisplay-inline-blockdisplay-flexdisplay-inline-flexdisplay-inlinedisplay-none\nOverflow\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nVisibility\nVisible only at a certain breakpoint\n\nvisible-xsvisible-lsvisible-smvisible-mdvisible-lgvisible-xl\nVisible from a certain breakpoint\n\nvisible-min-lsvisible-min-smvisible-min-mdvisible-min-lg\nHidden only at a certain breakpoint\n\nhidden-xshidden-lshidden-smhidden-mdhidden-lghidden-xl\nHidden from a certain breakpoint\n\nhidden-min-lshidden-min-smhidden-min-mdhidden-min-lg\nHidden when element is empty\n\nhidden-empty\nscreen-xs: >480pxscreen-ls: 480pxscreen-sm: 768pxscreen-md: 992pxscreen-lg: 1200pxscreen-xl: 1700px\n\n.visible-xsVisibleHiddenHiddenHiddenHiddenHidden\n.visible-lsHiddenVisibleHiddenHiddenHiddenHidden\n.visible-smHiddenHiddenVisibleHiddenHiddenHidden\n.visible-mdHiddenHiddenHiddenVisibleHiddenHidden\n.visible-lgHiddenHiddenHiddenHiddenVisibleHidden\n.visible-xlHiddenHiddenHiddenHiddenHiddenVisible\n\n.hidden-xsHiddenVisibleVisibleVisibleVisibleVisible\n.hidden-lsVisibleHiddenVisibleVisibleVisibleVisible\n.hidden-smVisibleVisibleHiddenVisibleVisibleVisible\n.hidden-mdVisibleVisibleVisibleHiddenVisibleVisible\n.hidden-lgVisibleVisibleVisibleVisibleHiddenVisible\n.hidden-xlVisibleVisibleVisibleVisibleVisibleHidden\n\n.visible-min-lsHiddenVisibleVisibleVisibleVisibleVisible\n.visible-min-smHiddenHiddenVisibleVisibleVisibleVisible\n.visible-min-mdHiddenHiddenHiddenVisibleVisibleVisible\n.visible-min-lgHiddenHiddenHiddenHiddenVisibleVisible\n\n.hidden-min-lsVisibleHiddenHiddenHiddenHiddenHidden\n.hidden-min-smVisibleVisibleHiddenHiddenHiddenHidden\n.hidden-min-mdVisibleVisibleVisibleHiddenHiddenHidden\n.hidden-min-lgVisibleVisibleVisibleVisibleHiddenHidden\n\nPrint\n\nvisible-printvisible-print-inlinehidden-print\n\nVisibility only classes\n\nAll the above classes for hidden and visible are based on \"display: none\". The following class affects only visibility, allowing it to impact surrounding elements.\nvisibility-hidden\nZ-index",
     "category": "Foundations",
     "section": "Interaction",
     "boost": "Foundations foundations #foundations Foundations Interaction"
@@ -1284,7 +1274,7 @@
     "title": "Feature cards",
     "lead": null,
     "summary": "Lorem ipsum dolor sit amet",
-    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nDeludo cubicularis commodi demo.\nAccommodo demergo derelinquo vestrum itaque pectus universe.\nAbsum adiuvo vito sufficio victoria.\nSuasoria conculco bibo undique trans vir.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nVespillo reiciendis quasi.\nTamquam apto repellat inflammatio cito audio arx dolorum tenetur.\nAger benevolentia tot video ait coerceo varius sumo ducimus caelestis.\nCanto appello absconditus nihil.\nRead more\nLorem ipsum dolor sit amet\nVulgivagus adhuc aliquam voluptate quasi chirographum tantillus ipsam arto.\nAuxilium nihil tunc absens suffoco.\nBenigne tum antiquus tondeo utrum uredo ratione turpis tumultus.\nVociferor velit atrocitas.\nQuas timor defetiscor administratio uter cur subito capitulus.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nCaritas coaegresco desparatus corporis decet vigilo speculum.\nAudax conduco stultus damnatio cumque ventito enim aduro infit una.\nVulgivagus defungo angustus demum communis deserunt ipsum alii.\nVigor desolo aequitas odit cupiditas crur socius tardus tunc commemoro.\nVos adsidue defleo.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
+    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nPeccatus speciosus demergo textilis vulticulus agnitio tum thalassinus tristis.\nEa repellat averto crepusculum architecto quas alioqui aestivus anser.\nVelit animus officiis valens laboriosam substantia usus abeo adimpleo desino.\nAer vulgus coma arceo.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nAscit vero atrocitas caveo delinquo torqueo.\nCuro aliquid appositus.\nCapto acsi approbo strues conculco aggero.\nVolup titulus sed claustrum sol vinitor pecus dolorem depopulo degusto.\nRead more\nLorem ipsum dolor sit amet\nTutis aegrus dolores truculenter ulterius molestias.\nCarcer sophismata tumultus vacuus dolores nihil ut vociferor virtus.\nConsectetur vix virgo tamdiu.\nQuisquam subnecto civis adsum terror.\nTabesco architecto decretum ambulo cunae quas curtus thema dens.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nBos temporibus perspiciatis.\nDeficio termes curto dolorum cunae agnitio copiose maiores defero culpa.\nAdipisci tumultus aperio.\nTimor cohibeo vigilo tempore cubitum.\nUtroque voveo accommodo blanditiis clarus curia claro tonsor bardus voluptatibus.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
     "category": "Templates",
     "section": "Content",
     "boost": "Feature cards templates/feature-cards #templates/feature-cards Templates Content"
@@ -1294,7 +1284,7 @@
     "title": "Form summary",
     "lead": null,
     "summary": "Request summary",
-    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personBeulah Stoltenberg\nRequested roleSenior Communications Developer\nContact emailDortha.Lesch23@hotmail.com\nAnnual budget€150,465.00\nProject descriptionSuspendo curis despecto tabella numquam defendo vorax adipiscor summa vomica.\nAgo reprehenderit eos thymbra.\nDebilito caries pecco cenaculum absum corrigo vergo debilito usus.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
+    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personGerardo Osinski\nRequested roleInternational Response Director\nContact emailWerner.Lindgren@hotmail.com\nAnnual budget€162,294.00\nProject descriptionSpeculum terebro ducimus surculus benevolentia fuga tricesimus auctor.\nThema aedificium quod.\nPecto autus vinum adhuc venio.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
     "category": "Templates",
     "section": "Forms",
     "boost": "Form summary templates/form-summary #templates/form-summary Templates Forms"
@@ -1314,7 +1304,7 @@
     "title": "List blocks",
     "lead": null,
     "summary": "Lorem ipsum dolor",
-    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nDelego adfectus via sortitus corporis tollo corroboro timidus adstringo vigor.\n\nOrtiz - Armstrong\nPecco tredecim tandem admoneo.\n\nConnect\n\nHansen Inc\nAbbas confugo conspergo annus.\nBaiulus admoneo hic quam villa.\n\nConnect\n\nKuphal - Pfannerstill\nAt et summopere considero benigne antepono carmen canto clarus averto.\n\nConnect\nMeeting type\n\nChoose the logistics session that fits your process\nFreight pickup\nSchedule cargo collection at origin\n\n30 min\n\nRoute planning\nDiscuss optimal route and ETA\n\n45 min\n\nDelivery coordination\nAlign final drop-off and documents\n\n60 min\nLorem ipsum dolor\nAccendo calcar curatio tonsor.\n\nPaucek, Conroy and Dare\nSummisse vulticulus cohaero quo canto ver.\n\nJones, Kessler and Little\nNihil adeo admoneo absum.\nSuscipit amor delicate tibi debilito antea.\n\nPowlowski, Romaguera and Bergstrom\nAngustus debeo thesis damnatio commodo tollo.\nAlter quo cupiditate barba distinctio arbustum amoveo.\nLorem ipsum dolor sit amet\nAdvenio adflicto paens viridis tunc.\nViduo creta modi dapifer.\n\nKoss, Stanton and Gibson\nEligendi crepusculum iure triumphus cunabula considero.\nRepudiandae suggero cognatus placeat.\nAmiculum quo copiose calco accusamus cura civitas hic turbo tergum.\n\nJones - Hane\nCena cena audeo.\nAdamo adstringo thymbra temeritas statim combibo temeritas absconditus color.\nDeporto dolorum atque cariosus placeat arbitro at amet solum.\n\nSchamberger and Sons\nVehemens conduco neque accusator.\nAqua vilis comitatus damnatio adsuesco textilis.\nCena colo vinum dolorem eius tenetur.\n\nWillms - Hirthe\nAuctus urbanus cibus.\nCorrigo debeo conitor conqueror.\nSono argentum sumo vel.\nEnhance your application with powerful add-ons!\n\nAwesome Rubber Table\nOur flamingo-friendly Ball ensures appropriate comfort for your pets\n\n€17.35\nTotal per user / month\n\nGet Add-on\n\nLicensed Silk Table\nNew Keyboard model with 82 GB RAM, 557 GB storage, and everlasting features\n\n€66.29\nPer 1000 messages / month\n\nGet Add-on\n\nPractical Plastic Pizza\nOur juicy-inspired Ball brings a taste of luxury to your jubilant lifestyle\n\n€72.89\nTotal per user / month\n\nGet Add-on\n\nGeneric Plastic Chicken\nSavor the juicy essence in our Chair, designed for realistic culinary adventures\n\n€66.03\nTotal per user / month\n\nGet Add-on\n\nFresh Bronze Chair\nThe sleek and victorious Bike comes with tan LED lighting for smart functionality\n\n€39.19\nPer 1000 messages / month\n\nGet Add-on\nFeatures\n\nElegant Rubber Shoes\nThe Arvilla Bike is the latest in a series of unwelcome products from Emmerich - Torp\n\nElegant Steel Computer\nThe Janessa Towels is the latest in a series of electric products from Romaguera - Quitzon\n\nUnbranded Concrete Sausages\nThe Operative tangible conglomeration Chips offers reliable performance and shocked design\n\nRecycled Marble Bike\nOur elephant-friendly Chicken ensures cheerful comfort for your pets\n\nBespoke Silk Chips\nLicensed Pizza designed with Rubber for sneaky performance\n\nElectronic Cotton Ball\nProfessional-grade Cheese perfect for avaricious training and recreational use",
+    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nCenaculum aegrus deprimo viriliter autem sumptus paens.\n\nJacobi Group\nSit aeger dedico uxor audax quaerat volaticus sumptus.\n\nConnect\n\nGorczany LLC\nAutus terebro cibus tantillus comitatus consequuntur itaque deporto.\nContego viscus celebrer cetera sopor tres tubineus arguo curso.\n\nConnect\n\nKessler - Reichert\nSol umbra vilis calamitas.\n\nConnect\nMeeting type\n\nChoose the logistics session that fits your process\nFreight pickup\nSchedule cargo collection at origin\n\n30 min\n\nRoute planning\nDiscuss optimal route and ETA\n\n45 min\n\nDelivery coordination\nAlign final drop-off and documents\n\n60 min\nLorem ipsum dolor\nDespecto carbo sonitus tum ambitus necessitatibus vitium.\n\nRomaguera, Prohaska and Predovic\nComminor suppono arbitro cognomen.\n\nWalter LLC\nDebeo vestrum bibo accedo auctus aperiam calamitas reiciendis colo cinis.\nAuctor verumtamen culpo.\n\nProsacco Inc\nDefluo trucido vomer calcar.\nDesidero theologus bonus termes umquam uter deprimo.\nLorem ipsum dolor sit amet\nVorago volutabrum culpo denuo.\nCurvo numquam demulceo cavus stultus.\n\nKoelpin, Schuppe and Mueller\nIllum deleniti nemo colo decor corporis vere soleo advoco.\nSum culpo spectaculum communis deorsum ager somnus.\nReiciendis terga confugo pauci dignissimos decet copia velut.\n\nHomenick, Johnston and Will\nTot adamo nihil deporto.\nStips vallum tenus volup cervus aperte theatrum conspergo capio.\nAbduco spiritus vereor decerno aureus suggero doloribus audentia acervus conscendo.\n\nBlanda, Kessler and Mueller\nTaceo surculus paens non adstringo strues thema solio facere fugit.\nCruentus adipiscor vindico magnam venio tenus cupiditate.\nAdeptio teneo calco calcar veritatis optio succurro ipsam decerno adipiscor.\n\nZemlak Group\nSolum subito speculum.\nAdulescens et tempus utilis.\nDesolo autus cognomen.\nEnhance your application with powerful add-ons!\n\nUnbranded Plastic Chair\nExperience the grey brilliance of our Shirt, perfect for gaseous environments\n\n€91.30\nTotal per month\n\nGet Add-on\n\nSleek Rubber Cheese\nProfessional-grade Chicken perfect for criminal training and recreational use\n\n€41.79\nPer 1000 messages / month\n\nGet Add-on\n\nElegant Silk Towels\nThe Isaiah Shoes is the latest in a series of flashy products from Fahey Group\n\n€38.79\nPer 1000 messages / month\n\nGet Add-on\n\nTasty Rubber Chicken\nInnovative Chair featuring puzzled technology and Ceramic construction\n\n€83.95\nTotal per user / month\n\nGet Add-on\n\nModern Bamboo Ball\nSpencer LLC's most advanced Car technology increases known capabilities\n\n€74.20\nTotal per month\n\nGet Add-on\nFeatures\n\nLuxurious Plastic Tuna\nFeaturing Ytterbium-enhanced technology, our Ball offers unparalleled decent performance\n\nGorgeous Ceramic Chair\nFeaturing Moscovium-enhanced technology, our Cheese offers unparalleled idealistic performance\n\nBespoke Plastic Pizza\nIntroducing the Saint Martin-inspired Soap, blending wilted style with local craftsmanship\n\nFantastic Bamboo Bike\nStylish Pants designed to make you stand out with haunting looks\n\nElegant Silk Keyboard\nInnovative Shirt featuring firm technology and Ceramic construction\n\nBespoke Aluminum Sausages\nThe Organic intangible algorithm Bike offers reliable performance and married design",
     "category": "Templates",
     "section": "Content",
     "boost": "List blocks templates/list-blocks #templates/list-blocks Templates Content"
@@ -1374,7 +1364,7 @@
     "title": "Form blocks",
     "lead": null,
     "summary": "SettingsCompany display name",
-    "searchText": "Form blocks\nForm blocks\nSettingsCompany display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\nOptional interactive attitude\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nNebraskaNebraska\nSouth Carolina\n\nBosnia and HerzegovinaBosnia and Herzegovina\nBermuda\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
+    "searchText": "Form blocks\nForm blocks\nSettingsCompany display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\nIntuitive methodical artificial intelligence\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nPennsylvaniaPennsylvania\nUtah\n\nTurks and Caicos IslandsTurks and Caicos Islands\nDominican Republic\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
     "category": "Templates",
     "section": "Forms",
     "boost": "Form blocks templates/settings-form #templates/settings-form Templates Forms"
@@ -1384,7 +1374,7 @@
     "title": "Stats blocks",
     "lead": null,
     "summary": "Stats page",
-    "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n991 units\n\n12%from last month\n\nOpen orders\n76\n\n5%from last month\n\nIn transit\n22\n\n-3%from last month\n\nIssues\n10\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuaryFebruaryMarchAprilMayJune\n\nLorem ipsum dolor\n\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
+    "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n1405 units\n\n12%from last month\n\nOpen orders\n57\n\n5%from last month\n\nIn transit\n12\n\n-3%from last month\n\nIssues\n4\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuaryFebruaryMarchAprilMayJune\n\nLorem ipsum dolor\n\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
     "category": "Templates",
     "section": "Content",
     "boost": "Stats blocks templates/stats-blocks #templates/stats-blocks Templates Content"
@@ -1534,7 +1524,7 @@
     "title": "useDebugInfo",
     "lead": "The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.",
     "summary": "The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.",
-    "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props:isToggled: false\ncount: 0\n\nDebug Info:{\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 1765811030338\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
+    "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props:isToggled: false\ncount: 0\n\nDebug Info:{\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 1767787967247\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
     "category": "Utilities",
     "section": "UI state & input hooks",
     "boost": "useDebugInfo utilities/useDebugInfo #utilities/useDebugInfo Utilities UI state & input hooks"
@@ -1824,7 +1814,7 @@
     "title": "useTableExport",
     "lead": "The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.",
     "summary": "The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.",
-    "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nIdFirst nameLast nameE-mail\n\n1AlbertaBartonFanny_Bernhard78@hotmail.com\n2ZeldaGibsonJarvis87@gmail.com\n3DomenicaArmstrongKyleigh56@gmail.com\n4VanTreutelCristian70@yahoo.com\n5OfeliaSchuppeStewart10@gmail.com\n6ArlieHeaneyRetta30@yahoo.com\n7MargaritaSipesJaylen.Kunde@hotmail.com\n8MarcosLarsonCora.Wisoky25@hotmail.com\n9StefanHettingerLeonora5@gmail.com\n10AnnettaChamplinSylvia_Kshlerin@hotmail.com\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
+    "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nIdFirst nameLast nameE-mail\n\n1PaxtonHeidenreichBrice.Leannon@yahoo.com\n2CatalinaKihnFrancesco.Ondricka40@yahoo.com\n3FletcherHowellSidney.Abshire4@gmail.com\n4JosefaCartwrightJackeline97@gmail.com\n5RoyLednerLillian_McCullough@hotmail.com\n6ShakiraMillerGene_Bergstrom40@gmail.com\n7LeolaRathThad.Blick@hotmail.com\n8DamonTillmanDonna.Streich@hotmail.com\n9NyahRueckerSterling_Roob@hotmail.com\n10SimoneManteTyrell.Tillman44@hotmail.com\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableExport utilities/useTableExport #utilities/useTableExport Utilities Table & data hooks"
@@ -1834,7 +1824,7 @@
     "title": "useTableSelection",
     "lead": "The useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.",
     "summary": "The useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.",
-    "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nIdFirst nameLast nameE-mail\n\n1KarleeSchambergerBradley_Quigley@hotmail.com\n2LornaGulgowskiKaelyn_Durgan@hotmail.com\n3KevenNicolasTimmy59@hotmail.com\n4BusterNikolausAddison_Renner@hotmail.com\n5StefanPaucekSincere49@yahoo.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1EudoraBeckerAnderson_Christiansen80@hotmail.com\n\n2GenevieveToyNicklaus83@gmail.com\n\n3ForestMacGyverFelix.Herzog84@hotmail.com\n\n4IsidroNikolausCorine_Hane@hotmail.com\n\n5LaurenMayerGreg_Breitenberg@yahoo.com\n\n6KarleyHermanKiara48@yahoo.com\n\n7LondonLangoshBrandt8@hotmail.com\n\n8BlancheFraneckiTerence_Reinger83@yahoo.com\n\n9DomenicaWeimannIsidro_Thiel40@gmail.com\n\n10KorbinSchinnerLuciano_Hackett16@yahoo.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
+    "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nIdFirst nameLast nameE-mail\n\n1VinniePredovicDorris.Hilpert2@hotmail.com\n2FlorencioRitchieLucius.Walker@gmail.com\n3BennieMetzCatharine35@gmail.com\n4NiaBotsfordDuncan_Kling@gmail.com\n5DennisToyMargot_Schoen@gmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1RayLebsackDonavon70@yahoo.com\n\n2CynthiaKesslerCamron.Heathcote41@hotmail.com\n\n3AlekDenesikTanner3@hotmail.com\n\n4LeifKeelingAkeem85@hotmail.com\n\n5JaredKlockoRupert.Hilll48@hotmail.com\n\n6ShirleyGrahamRuthie_Gorczany9@hotmail.com\n\n7RoxanneBeahanMarion.Shields@gmail.com\n\n8TyraWalterJanae73@gmail.com\n\n9ClintonWeimannAndre_Hoeger@hotmail.com\n\n10OnieChristiansenTristin88@gmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"