@milestone-sys/web-design-system 3.6.2 → 3.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (1102) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +7 -7
  3. package/assets.html +13 -0
  4. package/colors.list.js +65 -65
  5. package/components/detail/accordion-checkbox-large.html +1051 -0
  6. package/components/detail/accordion-checkbox-medium-dark.html +1051 -0
  7. package/components/detail/accordion-checkbox-medium-disabled.html +1051 -0
  8. package/components/detail/accordion-checkbox-medium-filtered-list-items.html +1055 -0
  9. package/components/detail/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +1077 -0
  10. package/components/detail/accordion-checkbox-medium-icon-left-floating.html +1077 -0
  11. package/components/detail/accordion-checkbox-medium-icon-left.html +1065 -0
  12. package/components/detail/accordion-checkbox-medium.html +1060 -0
  13. package/components/detail/accordion-checkbox-overview.html +1051 -0
  14. package/components/detail/accordion-input.html +949 -0
  15. package/components/detail/accordion-label.html +949 -0
  16. package/components/detail/accordion-modifier-icon-floating.html +949 -0
  17. package/components/detail/accordion-modifier-icon-left.html +949 -0
  18. package/components/detail/accordion-radio.html +1053 -0
  19. package/components/detail/alert-dark-theme-default.html +1009 -0
  20. package/components/detail/alert-dark-theme-solution.html +1009 -0
  21. package/components/detail/alert-default-extra-attention.html +1007 -0
  22. package/components/detail/alert-default-generic.html +1006 -0
  23. package/components/detail/alert-default-solution-with-badge-and-ready-state.html +1018 -0
  24. package/components/detail/alert-default-solution.html +1010 -0
  25. package/components/detail/alert-default-without-image.html +1004 -0
  26. package/components/detail/alert-default.html +1006 -0
  27. package/components/detail/alert-hidden-after-refresh-checkbox.html +1016 -0
  28. package/components/detail/alert-hidden-after-refresh.html +1005 -0
  29. package/components/detail/alert-layouts.html +1560 -0
  30. package/components/detail/alert-visible-after-refresh.html +1005 -0
  31. package/components/detail/background-colors.html +1287 -0
  32. package/components/detail/basic-card-default-dark.html +1014 -0
  33. package/components/detail/basic-card-default-without-caption-with-header-icon.html +1005 -0
  34. package/components/detail/basic-card-default-without-caption-with-header-image.html +1001 -0
  35. package/components/detail/basic-card-default-without-caption.html +997 -0
  36. package/components/detail/basic-card-default.html +1014 -0
  37. package/components/detail/basic-card-grouping-center.html +1014 -0
  38. package/components/detail/basic-card-grouping-left-with-flat-icon.html +1024 -0
  39. package/components/detail/basic-card-grouping-left.html +1014 -0
  40. package/components/detail/basic-card-grouping.html +1122 -0
  41. package/components/detail/basic-card-layouts.html +1886 -0
  42. package/components/detail/button-danger-dark-icon.html +999 -0
  43. package/components/detail/button-danger-dark.html +975 -0
  44. package/components/detail/button-danger-default.html +975 -0
  45. package/components/detail/button-danger-icon.html +999 -0
  46. package/components/detail/button-disabled-dark-icon.html +999 -0
  47. package/components/detail/button-disabled-dark.html +975 -0
  48. package/components/detail/button-floating-aligned-column.html +1005 -0
  49. package/components/detail/button-floating-aligned-right.html +1005 -0
  50. package/components/detail/button-floating-dark-aligned-column.html +1005 -0
  51. package/components/detail/button-floating-dark-aligned-right.html +1005 -0
  52. package/components/detail/button-floating-dark-default.html +1005 -0
  53. package/components/detail/button-floating-dark-disabled.html +1005 -0
  54. package/components/detail/button-floating-dark-secondary-aligned-column.html +1005 -0
  55. package/components/detail/button-floating-dark-secondary-aligned-right.html +1005 -0
  56. package/components/detail/button-floating-dark-secondary.html +1005 -0
  57. package/components/detail/button-floating-default.html +1005 -0
  58. package/components/detail/button-floating-disabled.html +1005 -0
  59. package/components/detail/button-floating-overview.html +969 -0
  60. package/components/detail/button-floating-positioning.html +1007 -0
  61. package/components/detail/button-floating-secondary-aligned-column.html +1005 -0
  62. package/components/detail/button-floating-secondary-aligned-right.html +1005 -0
  63. package/components/detail/button-floating-secondary.html +1005 -0
  64. package/components/detail/button-floating-states.html +987 -0
  65. package/components/detail/button-gray-default.html +975 -0
  66. package/components/detail/button-gray-icon.html +999 -0
  67. package/components/detail/button-group-center-alignment.html +965 -0
  68. package/components/detail/button-group-left-alignment.html +965 -0
  69. package/components/detail/button-group-right-alignment.html +965 -0
  70. package/components/detail/button-overview-direction.html +983 -0
  71. package/components/detail/button-overview-global-definition.html +975 -0
  72. package/components/detail/button-overview-sizes.html +987 -0
  73. package/components/detail/button-overview-states.html +1019 -0
  74. package/components/detail/button-primary-dark-icon.html +999 -0
  75. package/components/detail/button-primary-dark.html +975 -0
  76. package/components/detail/button-primary-default.html +975 -0
  77. package/components/detail/button-primary-icon.html +999 -0
  78. package/components/detail/button-secondary-dark-icon.html +999 -0
  79. package/components/detail/button-secondary-dark.html +975 -0
  80. package/components/detail/button-secondary-default.html +975 -0
  81. package/components/detail/button-secondary-icon.html +999 -0
  82. package/components/detail/button-tertiary-default.html +975 -0
  83. package/components/detail/button-tertiary-icon.html +999 -0
  84. package/components/detail/buttons-overview.html +2069 -0
  85. package/components/detail/category-dark.html +1022 -0
  86. package/components/detail/category-disabled-dark.html +1014 -0
  87. package/components/detail/category-disabled.html +1014 -0
  88. package/components/detail/category-full-row.html +1178 -0
  89. package/components/detail/category-overview-dark-states.html +1058 -0
  90. package/components/detail/category-overview-dark.html +1022 -0
  91. package/components/detail/category-overview-sizes.html +1030 -0
  92. package/components/detail/category-overview-states.html +1058 -0
  93. package/components/detail/category-small-dark.html +1022 -0
  94. package/components/detail/category-small-disabled-dark.html +1014 -0
  95. package/components/detail/category-small-disabled.html +1014 -0
  96. package/components/detail/category-small-full-row.html +1250 -0
  97. package/components/detail/category-small.html +1022 -0
  98. package/components/detail/category.html +1022 -0
  99. package/components/detail/checkbox-checked.html +968 -0
  100. package/components/detail/checkbox-disabled.html +968 -0
  101. package/components/detail/checkbox-focus.html +968 -0
  102. package/components/detail/checkbox-global-definition.html +968 -0
  103. package/components/detail/checkbox-hover.html +968 -0
  104. package/components/detail/checkbox-inline.html +974 -0
  105. package/components/detail/checkbox-readonly.html +969 -0
  106. package/components/detail/colors-and-shadows.html +1403 -0
  107. package/components/detail/contact-cards.html +2151 -0
  108. package/components/detail/contact-content.html +1017 -0
  109. package/components/detail/contact-overview.html +1147 -0
  110. package/components/detail/contact-sizes.html +1108 -0
  111. package/components/detail/contact-small.html +1038 -0
  112. package/components/detail/contact-without-image-small.html +1028 -0
  113. package/components/detail/contact-without-image.html +1028 -0
  114. package/components/detail/contact.html +1038 -0
  115. package/components/detail/divider-dark-blue.html +949 -0
  116. package/components/detail/divider-default.html +949 -0
  117. package/components/detail/divider-gray-5.html +949 -0
  118. package/components/detail/divider-white-50.html +949 -0
  119. package/components/detail/divider-white.html +949 -0
  120. package/components/detail/divider-yellow.html +949 -0
  121. package/components/detail/generic-card-aspect-16by9.html +1001 -0
  122. package/components/detail/generic-card-aspect-2by1-small.html +1116 -0
  123. package/components/detail/generic-card-aspect-2by1.html +1110 -0
  124. package/components/detail/generic-card-aspect.html +1050 -0
  125. package/components/detail/generic-card-default-small-dark-theme.html +1000 -0
  126. package/components/detail/generic-card-default-small-svg.html +1000 -0
  127. package/components/detail/generic-card-default-small.html +999 -0
  128. package/components/detail/generic-card-default-svg-dark.html +999 -0
  129. package/components/detail/generic-card-default-svg.html +998 -0
  130. package/components/detail/generic-card-default.html +999 -0
  131. package/components/detail/generic-card-media-dark-theme.html +1031 -0
  132. package/components/detail/generic-card-media-floating-icon.html +1042 -0
  133. package/components/detail/generic-card-media-small.html +1027 -0
  134. package/components/detail/generic-card-media.html +1027 -0
  135. package/components/detail/generic-card-overview.html +1062 -0
  136. package/components/detail/generic-flat-icons.html +951 -0
  137. package/components/detail/generic-rich-icons.html +951 -0
  138. package/components/detail/global-colors-alternative.html +1301 -0
  139. package/components/detail/global-colors-gradients.html +1305 -0
  140. package/components/detail/global-colors-gray-white-black.html +1304 -0
  141. package/components/detail/global-colors-primary.html +1295 -0
  142. package/components/detail/global-colors-shadows.html +1295 -0
  143. package/components/detail/global-colors-transparency.html +1306 -0
  144. package/components/detail/global-margins.html +995 -0
  145. package/components/detail/global-paddings.html +951 -0
  146. package/components/detail/gradient-background-colors.html +1517 -0
  147. package/components/detail/input-disabled.html +1003 -0
  148. package/components/detail/input-field.html +1226 -0
  149. package/components/detail/input-focus.html +1003 -0
  150. package/components/detail/input-hover.html +1003 -0
  151. package/components/detail/input-readonly.html +1003 -0
  152. package/components/detail/input-sizes.html +1007 -0
  153. package/components/detail/input-state-error.html +1003 -0
  154. package/components/detail/input-state-success.html +1003 -0
  155. package/components/detail/input.html +981 -0
  156. package/components/detail/large-section-spacing-definitions.html +1011 -0
  157. package/components/detail/large-section-spacing.html +977 -0
  158. package/components/detail/links.html +977 -0
  159. package/components/detail/lists.html +973 -0
  160. package/components/detail/marketplace-flat-icons.html +951 -0
  161. package/components/detail/marketplace-rich-icons.html +951 -0
  162. package/components/detail/matching-content-height-card.html +1599 -0
  163. package/components/detail/medium-section-spacing-definitions.html +1011 -0
  164. package/components/detail/medium-section-spacing.html +977 -0
  165. package/components/detail/modal-on-click.html +1017 -0
  166. package/components/detail/modal-on-load-demo.html +1012 -0
  167. package/components/detail/modal-on-load.html +1012 -0
  168. package/components/detail/msds-text-alt-blue-1.html +1287 -0
  169. package/components/detail/msds-text-alt-blue-2.html +1287 -0
  170. package/components/detail/msds-text-alt-blue-3.html +1287 -0
  171. package/components/detail/msds-text-alt-yellow-1.html +1287 -0
  172. package/components/detail/msds-text-alt-yellow-2.html +1287 -0
  173. package/components/detail/msds-text-black.html +1287 -0
  174. package/components/detail/msds-text-clear-blue.html +1287 -0
  175. package/components/detail/msds-text-confirm-green.html +1287 -0
  176. package/components/detail/msds-text-danger-red-1.html +1287 -0
  177. package/components/detail/msds-text-danger-red-2.html +1287 -0
  178. package/components/detail/msds-text-dark-blue.html +1287 -0
  179. package/components/detail/msds-text-gray-1.html +1287 -0
  180. package/components/detail/msds-text-gray-10.html +1287 -0
  181. package/components/detail/msds-text-gray-2.html +1287 -0
  182. package/components/detail/msds-text-gray-3.html +1287 -0
  183. package/components/detail/msds-text-gray-4.html +1287 -0
  184. package/components/detail/msds-text-gray-5.html +1287 -0
  185. package/components/detail/msds-text-gray-6.html +1287 -0
  186. package/components/detail/msds-text-gray-7.html +1287 -0
  187. package/components/detail/msds-text-gray-8.html +1287 -0
  188. package/components/detail/msds-text-gray-9.html +1287 -0
  189. package/components/detail/msds-text-sand.html +1287 -0
  190. package/components/detail/msds-text-white.html +1287 -0
  191. package/components/detail/msds-text-yellow.html +1287 -0
  192. package/components/detail/popover-bottom.html +1018 -0
  193. package/components/detail/popover-global-definition.html +1018 -0
  194. package/components/detail/popover-left.html +1018 -0
  195. package/components/detail/popover-top.html +1018 -0
  196. package/components/detail/preview-dark.html +1014 -0
  197. package/components/detail/preview.html +1001 -0
  198. package/components/detail/progress-bar-dark-theme.html +997 -0
  199. package/components/detail/progress-bar-features.html +1023 -0
  200. package/components/detail/progress-bar-global-definition.html +973 -0
  201. package/components/detail/progress-bar-light-theme.html +997 -0
  202. package/components/detail/progress-bar-sizes.html +999 -0
  203. package/components/detail/radio-button-disabled.html +963 -0
  204. package/components/detail/radio-button-focus.html +963 -0
  205. package/components/detail/radio-button-global-definition.html +975 -0
  206. package/components/detail/radio-button-hover.html +963 -0
  207. package/components/detail/radio-button-readonly.html +964 -0
  208. package/components/detail/radio-button-selected.html +963 -0
  209. package/components/detail/section-checkbox-dark.html +1019 -0
  210. package/components/detail/section-checkbox-nested-accordion.html +1124 -0
  211. package/components/detail/section-checkbox.html +1083 -0
  212. package/components/detail/section-radio-dark.html +1083 -0
  213. package/components/detail/section-radio-nested-accordion.html +1135 -0
  214. package/components/detail/section-radio.html +1081 -0
  215. package/components/detail/select-input-default.html +973 -0
  216. package/components/detail/select-input-error.html +971 -0
  217. package/components/detail/select-input-global-definition.html +983 -0
  218. package/components/detail/select-input-not-required.html +973 -0
  219. package/components/detail/select-input-required.html +973 -0
  220. package/components/detail/select-input-small.html +969 -0
  221. package/components/detail/small-section-spacing-definitions.html +1017 -0
  222. package/components/detail/small-section-spacing.html +977 -0
  223. package/components/detail/solid-background-colors.html +1457 -0
  224. package/components/detail/solution-card-default-layout.html +1210 -0
  225. package/components/detail/solution-card-default.html +1040 -0
  226. package/components/detail/solution-card-layouts.html +2085 -0
  227. package/components/detail/solution-card-optional-certification-badges.html +1054 -0
  228. package/components/detail/solution-card-optional-solution-badges.html +1054 -0
  229. package/components/detail/solution-card-sizes.html +1125 -0
  230. package/components/detail/solution-card-small.html +1040 -0
  231. package/components/detail/switch-checked.html +973 -0
  232. package/components/detail/switch-default.html +973 -0
  233. package/components/detail/switch-disabled-readonly.html +973 -0
  234. package/components/detail/switch-disabled.html +973 -0
  235. package/components/detail/switch-global.html +983 -0
  236. package/components/detail/tab-tile.html +2409 -0
  237. package/components/detail/table-dark-theme-default-expandable-rows.html +1204 -0
  238. package/components/detail/table-dark-theme-default.html +1228 -0
  239. package/components/detail/table-default-dark.html +1179 -0
  240. package/components/detail/table-default-expandable-rows.html +1203 -0
  241. package/components/detail/table-default-medium.html +1179 -0
  242. package/components/detail/table-default-small.html +1179 -0
  243. package/components/detail/table-default.html +1227 -0
  244. package/components/detail/text-area-disabled.html +1011 -0
  245. package/components/detail/text-area-error.html +1011 -0
  246. package/components/detail/text-area-field.html +985 -0
  247. package/components/detail/text-area-focus.html +1011 -0
  248. package/components/detail/text-area-hover.html +1011 -0
  249. package/components/detail/text-area-readonly.html +1011 -0
  250. package/components/detail/text-area-sizes.html +1011 -0
  251. package/components/detail/text-area-success.html +1011 -0
  252. package/components/detail/text-area.html +1167 -0
  253. package/components/detail/text-colors.html +1287 -0
  254. package/components/detail/text.html +1037 -0
  255. package/components/detail/typography-body-texts.html +993 -0
  256. package/components/detail/typography-displays.html +959 -0
  257. package/components/detail/typography-headers.html +965 -0
  258. package/components/detail/typography-leads.html +951 -0
  259. package/components/detail/typography-links-dark-theme.html +1159 -0
  260. package/components/detail/typography-links-light-theme.html +1123 -0
  261. package/components/detail/typography-links-secondary.html +1011 -0
  262. package/components/detail/typography-unordered-lists.html +973 -0
  263. package/components/preview/accordion-checkbox-large.html +81 -0
  264. package/components/preview/accordion-checkbox-medium-dark.html +81 -0
  265. package/components/preview/accordion-checkbox-medium-disabled.html +82 -0
  266. package/components/preview/accordion-checkbox-medium-filtered-list-items.html +84 -0
  267. package/components/preview/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +95 -0
  268. package/components/preview/accordion-checkbox-medium-icon-left-floating.html +95 -0
  269. package/components/preview/accordion-checkbox-medium-icon-left.html +90 -0
  270. package/components/preview/accordion-checkbox-medium.html +81 -0
  271. package/components/preview/accordion-checkbox-overview.html +83 -0
  272. package/components/preview/accordion-input.html +30 -0
  273. package/components/preview/accordion-label.html +30 -0
  274. package/components/preview/accordion-modifier-icon-floating.html +30 -0
  275. package/components/preview/accordion-modifier-icon-left.html +31 -0
  276. package/components/preview/accordion-radio.html +83 -0
  277. package/components/preview/alert-dark-theme-default.html +59 -0
  278. package/components/preview/alert-dark-theme-solution.html +59 -0
  279. package/components/preview/alert-default-extra-attention.html +58 -0
  280. package/components/preview/alert-default-generic.html +58 -0
  281. package/components/preview/alert-default-solution-with-badge-and-ready-state.html +64 -0
  282. package/components/preview/alert-default-solution.html +60 -0
  283. package/components/preview/alert-default-without-image.html +57 -0
  284. package/components/preview/alert-default.html +58 -0
  285. package/components/preview/alert-hidden-after-refresh-checkbox.html +63 -0
  286. package/components/preview/alert-hidden-after-refresh.html +57 -0
  287. package/components/preview/alert-layouts.html +341 -0
  288. package/components/preview/alert-visible-after-refresh.html +57 -0
  289. package/components/preview/background-colors.html +50 -0
  290. package/components/preview/basic-card-default-dark.html +55 -0
  291. package/components/preview/basic-card-default-without-caption-with-header-icon.html +50 -0
  292. package/components/preview/basic-card-default-without-caption-with-header-image.html +48 -0
  293. package/components/preview/basic-card-default-without-caption.html +46 -0
  294. package/components/preview/basic-card-default.html +55 -0
  295. package/components/preview/basic-card-grouping-center.html +55 -0
  296. package/components/preview/basic-card-grouping-left-with-flat-icon.html +60 -0
  297. package/components/preview/basic-card-grouping-left.html +55 -0
  298. package/components/preview/basic-card-grouping.html +110 -0
  299. package/components/preview/basic-card-layouts.html +494 -0
  300. package/components/preview/button-danger-dark-icon.html +51 -0
  301. package/components/preview/button-danger-dark.html +44 -0
  302. package/components/preview/button-danger-default.html +42 -0
  303. package/components/preview/button-danger-icon.html +51 -0
  304. package/components/preview/button-disabled-dark-icon.html +51 -0
  305. package/components/preview/button-disabled-dark.html +44 -0
  306. package/components/preview/button-floating-aligned-column.html +57 -0
  307. package/components/preview/button-floating-aligned-right.html +57 -0
  308. package/components/preview/button-floating-dark-aligned-column.html +57 -0
  309. package/components/preview/button-floating-dark-aligned-right.html +57 -0
  310. package/components/preview/button-floating-dark-default.html +57 -0
  311. package/components/preview/button-floating-dark-disabled.html +57 -0
  312. package/components/preview/button-floating-dark-secondary-aligned-column.html +57 -0
  313. package/components/preview/button-floating-dark-secondary-aligned-right.html +57 -0
  314. package/components/preview/button-floating-dark-secondary.html +57 -0
  315. package/components/preview/button-floating-default.html +57 -0
  316. package/components/preview/button-floating-disabled.html +57 -0
  317. package/components/preview/button-floating-overview.html +39 -0
  318. package/components/preview/button-floating-positioning.html +58 -0
  319. package/components/preview/button-floating-secondary-aligned-column.html +57 -0
  320. package/components/preview/button-floating-secondary-aligned-right.html +57 -0
  321. package/components/preview/button-floating-secondary.html +57 -0
  322. package/components/preview/button-floating-states.html +48 -0
  323. package/components/preview/button-gray-default.html +43 -0
  324. package/components/preview/button-gray-icon.html +51 -0
  325. package/components/preview/button-group-center-alignment.html +37 -0
  326. package/components/preview/button-group-left-alignment.html +37 -0
  327. package/components/preview/button-group-right-alignment.html +37 -0
  328. package/components/preview/button-overview-direction.html +45 -0
  329. package/components/preview/button-overview-global-definition.html +41 -0
  330. package/components/preview/button-overview-sizes.html +48 -0
  331. package/components/preview/button-overview-states.html +59 -0
  332. package/components/preview/button-primary-dark-icon.html +51 -0
  333. package/components/preview/button-primary-dark.html +44 -0
  334. package/components/preview/button-primary-default.html +42 -0
  335. package/components/preview/button-primary-icon.html +52 -0
  336. package/components/preview/button-secondary-dark-icon.html +51 -0
  337. package/components/preview/button-secondary-dark.html +44 -0
  338. package/components/preview/button-secondary-default.html +44 -0
  339. package/components/preview/button-secondary-icon.html +51 -0
  340. package/components/preview/button-tertiary-default.html +42 -0
  341. package/components/preview/button-tertiary-icon.html +51 -0
  342. package/components/preview/buttons-overview.html +510 -0
  343. package/components/preview/category-dark.html +67 -0
  344. package/components/preview/category-disabled-dark.html +63 -0
  345. package/components/preview/category-disabled.html +59 -0
  346. package/components/preview/category-full-row.html +139 -0
  347. package/components/preview/category-overview-dark-states.html +85 -0
  348. package/components/preview/category-overview-dark.html +67 -0
  349. package/components/preview/category-overview-sizes.html +67 -0
  350. package/components/preview/category-overview-states.html +81 -0
  351. package/components/preview/category-small-dark.html +67 -0
  352. package/components/preview/category-small-disabled-dark.html +63 -0
  353. package/components/preview/category-small-disabled.html +59 -0
  354. package/components/preview/category-small-full-row.html +175 -0
  355. package/components/preview/category-small.html +63 -0
  356. package/components/preview/category.html +63 -0
  357. package/components/preview/checkbox-checked.html +38 -0
  358. package/components/preview/checkbox-disabled.html +38 -0
  359. package/components/preview/checkbox-focus.html +38 -0
  360. package/components/preview/checkbox-global-definition.html +38 -0
  361. package/components/preview/checkbox-hover.html +38 -0
  362. package/components/preview/checkbox-inline.html +41 -0
  363. package/components/preview/checkbox-readonly.html +39 -0
  364. package/components/preview/colors-and-shadows.html +126 -0
  365. package/components/preview/contact-cards.html +622 -0
  366. package/components/preview/contact-content.html +56 -0
  367. package/components/preview/contact-overview.html +121 -0
  368. package/components/preview/contact-sizes.html +102 -0
  369. package/components/preview/contact-small.html +67 -0
  370. package/components/preview/contact-without-image-small.html +62 -0
  371. package/components/preview/contact-without-image.html +62 -0
  372. package/components/preview/contact.html +67 -0
  373. package/components/preview/divider-dark-blue.html +29 -0
  374. package/components/preview/divider-default.html +30 -0
  375. package/components/preview/divider-gray-5.html +29 -0
  376. package/components/preview/divider-white-50.html +29 -0
  377. package/components/preview/divider-white.html +29 -0
  378. package/components/preview/divider-yellow.html +30 -0
  379. package/components/preview/generic-card-aspect-16by9.html +49 -0
  380. package/components/preview/generic-card-aspect-2by1-small.html +110 -0
  381. package/components/preview/generic-card-aspect-2by1.html +106 -0
  382. package/components/preview/generic-card-aspect.html +74 -0
  383. package/components/preview/generic-card-default-small-dark-theme.html +48 -0
  384. package/components/preview/generic-card-default-small-svg.html +48 -0
  385. package/components/preview/generic-card-default-small.html +49 -0
  386. package/components/preview/generic-card-default-svg-dark.html +48 -0
  387. package/components/preview/generic-card-default-svg.html +47 -0
  388. package/components/preview/generic-card-default.html +50 -0
  389. package/components/preview/generic-card-media-dark-theme.html +64 -0
  390. package/components/preview/generic-card-media-floating-icon.html +70 -0
  391. package/components/preview/generic-card-media-small.html +62 -0
  392. package/components/preview/generic-card-media.html +62 -0
  393. package/components/preview/generic-card-overview.html +80 -0
  394. package/components/preview/generic-flat-icons.html +54 -0
  395. package/components/preview/generic-rich-icons.html +54 -0
  396. package/components/preview/global-colors-alternative.html +59 -0
  397. package/components/preview/global-colors-gradients.html +63 -0
  398. package/components/preview/global-colors-gray-white-black.html +62 -0
  399. package/components/preview/global-colors-primary.html +53 -0
  400. package/components/preview/global-colors-shadows.html +54 -0
  401. package/components/preview/global-colors-transparency.html +64 -0
  402. package/components/preview/global-margins.html +51 -0
  403. package/components/preview/global-paddings.html +30 -0
  404. package/components/preview/gradient-background-colors.html +164 -0
  405. package/components/preview/input-disabled.html +56 -0
  406. package/components/preview/input-field.html +164 -0
  407. package/components/preview/input-focus.html +56 -0
  408. package/components/preview/input-hover.html +56 -0
  409. package/components/preview/input-readonly.html +56 -0
  410. package/components/preview/input-sizes.html +58 -0
  411. package/components/preview/input-state-error.html +56 -0
  412. package/components/preview/input-state-success.html +56 -0
  413. package/components/preview/input.html +45 -0
  414. package/components/preview/large-section-spacing-definitions.html +59 -0
  415. package/components/preview/large-section-spacing.html +42 -0
  416. package/components/preview/links.html +44 -0
  417. package/components/preview/lists.html +42 -0
  418. package/components/preview/marketplace-flat-icons.html +54 -0
  419. package/components/preview/marketplace-rich-icons.html +54 -0
  420. package/components/preview/matching-content-height-card.html +354 -0
  421. package/components/preview/medium-section-spacing-definitions.html +59 -0
  422. package/components/preview/medium-section-spacing.html +42 -0
  423. package/components/preview/modal-on-click.html +63 -0
  424. package/components/preview/modal-on-load-demo.html +61 -0
  425. package/components/preview/modal-on-load.html +61 -0
  426. package/components/preview/msds-text-alt-blue-1.html +49 -0
  427. package/components/preview/msds-text-alt-blue-2.html +49 -0
  428. package/components/preview/msds-text-alt-blue-3.html +49 -0
  429. package/components/preview/msds-text-alt-yellow-1.html +49 -0
  430. package/components/preview/msds-text-alt-yellow-2.html +49 -0
  431. package/components/preview/msds-text-black.html +49 -0
  432. package/components/preview/msds-text-clear-blue.html +49 -0
  433. package/components/preview/msds-text-confirm-green.html +49 -0
  434. package/components/preview/msds-text-danger-red-1.html +49 -0
  435. package/components/preview/msds-text-danger-red-2.html +49 -0
  436. package/components/preview/msds-text-dark-blue.html +49 -0
  437. package/components/preview/msds-text-gray-1.html +49 -0
  438. package/components/preview/msds-text-gray-10.html +49 -0
  439. package/components/preview/msds-text-gray-2.html +49 -0
  440. package/components/preview/msds-text-gray-3.html +49 -0
  441. package/components/preview/msds-text-gray-4.html +49 -0
  442. package/components/preview/msds-text-gray-5.html +49 -0
  443. package/components/preview/msds-text-gray-6.html +49 -0
  444. package/components/preview/msds-text-gray-7.html +49 -0
  445. package/components/preview/msds-text-gray-8.html +49 -0
  446. package/components/preview/msds-text-gray-9.html +49 -0
  447. package/components/preview/msds-text-sand.html +49 -0
  448. package/components/preview/msds-text-white.html +49 -0
  449. package/components/preview/msds-text-yellow.html +49 -0
  450. package/components/preview/popover-bottom.html +61 -0
  451. package/components/preview/popover-global-definition.html +61 -0
  452. package/components/preview/popover-left.html +61 -0
  453. package/components/preview/popover-top.html +61 -0
  454. package/components/preview/preview-dark.html +59 -0
  455. package/components/preview/preview.html +29 -0
  456. package/components/preview/progress-bar-dark-theme.html +57 -0
  457. package/components/preview/progress-bar-features.html +66 -0
  458. package/components/preview/progress-bar-global-definition.html +41 -0
  459. package/components/preview/progress-bar-light-theme.html +53 -0
  460. package/components/preview/progress-bar-sizes.html +55 -0
  461. package/components/preview/radio-button-disabled.html +36 -0
  462. package/components/preview/radio-button-focus.html +36 -0
  463. package/components/preview/radio-button-global-definition.html +42 -0
  464. package/components/preview/radio-button-hover.html +36 -0
  465. package/components/preview/radio-button-readonly.html +37 -0
  466. package/components/preview/radio-button-selected.html +36 -0
  467. package/components/preview/section-checkbox-dark.html +64 -0
  468. package/components/preview/section-checkbox-nested-accordion.html +119 -0
  469. package/components/preview/section-checkbox.html +96 -0
  470. package/components/preview/section-radio-dark.html +96 -0
  471. package/components/preview/section-radio-nested-accordion.html +144 -0
  472. package/components/preview/section-radio.html +95 -0
  473. package/components/preview/select-input-default.html +41 -0
  474. package/components/preview/select-input-error.html +40 -0
  475. package/components/preview/select-input-global-definition.html +46 -0
  476. package/components/preview/select-input-not-required.html +41 -0
  477. package/components/preview/select-input-required.html +41 -0
  478. package/components/preview/select-input-small.html +38 -0
  479. package/components/preview/small-section-spacing-definitions.html +62 -0
  480. package/components/preview/small-section-spacing.html +42 -0
  481. package/components/preview/solid-background-colors.html +135 -0
  482. package/components/preview/solution-card-default-layout.html +158 -0
  483. package/components/preview/solution-card-default.html +74 -0
  484. package/components/preview/solution-card-layouts.html +587 -0
  485. package/components/preview/solution-card-optional-certification-badges.html +82 -0
  486. package/components/preview/solution-card-optional-solution-badges.html +82 -0
  487. package/components/preview/solution-card-sizes.html +116 -0
  488. package/components/preview/solution-card-small.html +74 -0
  489. package/components/preview/switch-checked.html +41 -0
  490. package/components/preview/switch-default.html +41 -0
  491. package/components/preview/switch-disabled-readonly.html +41 -0
  492. package/components/preview/switch-disabled.html +41 -0
  493. package/components/preview/switch-global.html +46 -0
  494. package/components/preview/tab-tile.html +1128 -0
  495. package/components/preview/table-dark-theme-default-expandable-rows.html +160 -0
  496. package/components/preview/table-dark-theme-default.html +172 -0
  497. package/components/preview/table-default-dark.html +144 -0
  498. package/components/preview/table-default-expandable-rows.html +156 -0
  499. package/components/preview/table-default-medium.html +144 -0
  500. package/components/preview/table-default-small.html +144 -0
  501. package/components/preview/table-default.html +168 -0
  502. package/components/preview/text-area-disabled.html +60 -0
  503. package/components/preview/text-area-error.html +60 -0
  504. package/components/preview/text-area-field.html +47 -0
  505. package/components/preview/text-area-focus.html +60 -0
  506. package/components/preview/text-area-hover.html +60 -0
  507. package/components/preview/text-area-readonly.html +60 -0
  508. package/components/preview/text-area-sizes.html +60 -0
  509. package/components/preview/text-area-success.html +60 -0
  510. package/components/preview/text-area.html +147 -0
  511. package/components/preview/text-colors.html +49 -0
  512. package/components/preview/text.html +74 -0
  513. package/components/preview/typography-body-texts.html +52 -0
  514. package/components/preview/typography-displays.html +34 -0
  515. package/components/preview/typography-headers.html +37 -0
  516. package/components/preview/typography-leads.html +30 -0
  517. package/components/preview/typography-links-dark-theme.html +135 -0
  518. package/components/preview/typography-links-light-theme.html +117 -0
  519. package/components/preview/typography-links-secondary.html +61 -0
  520. package/components/preview/typography-unordered-lists.html +41 -0
  521. package/components/raw/tab-tile/tab-tile.js +139 -0
  522. package/components/raw/tab-tile/tab-tile.scss +256 -0
  523. package/components/render/accordion-checkbox-large.html +55 -0
  524. package/components/render/accordion-checkbox-medium-dark.html +55 -0
  525. package/components/render/accordion-checkbox-medium-disabled.html +56 -0
  526. package/components/render/accordion-checkbox-medium-filtered-list-items.html +58 -0
  527. package/components/render/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +69 -0
  528. package/components/render/accordion-checkbox-medium-icon-left-floating.html +69 -0
  529. package/components/render/accordion-checkbox-medium-icon-left.html +64 -0
  530. package/components/render/accordion-checkbox-medium.html +55 -0
  531. package/components/render/accordion-checkbox-overview.html +57 -0
  532. package/components/render/accordion-input.html +4 -0
  533. package/components/render/accordion-label.html +4 -0
  534. package/components/render/accordion-modifier-icon-floating.html +4 -0
  535. package/components/render/accordion-modifier-icon-left.html +5 -0
  536. package/components/render/accordion-radio.html +57 -0
  537. package/components/render/alert-dark-theme-default.html +33 -0
  538. package/components/render/alert-dark-theme-solution.html +33 -0
  539. package/components/render/alert-default-extra-attention.html +32 -0
  540. package/components/render/alert-default-generic.html +32 -0
  541. package/components/render/alert-default-solution-with-badge-and-ready-state.html +38 -0
  542. package/components/render/alert-default-solution.html +34 -0
  543. package/components/render/alert-default-without-image.html +31 -0
  544. package/components/render/alert-default.html +32 -0
  545. package/components/render/alert-hidden-after-refresh-checkbox.html +37 -0
  546. package/components/render/alert-hidden-after-refresh.html +31 -0
  547. package/components/render/alert-layouts.html +315 -0
  548. package/components/render/alert-visible-after-refresh.html +31 -0
  549. package/components/render/background-colors.html +4 -0
  550. package/components/render/basic-card-default-dark.html +29 -0
  551. package/components/render/basic-card-default-without-caption-with-header-icon.html +24 -0
  552. package/components/render/basic-card-default-without-caption-with-header-image.html +22 -0
  553. package/components/render/basic-card-default-without-caption.html +20 -0
  554. package/components/render/basic-card-default.html +29 -0
  555. package/components/render/basic-card-grouping-center.html +29 -0
  556. package/components/render/basic-card-grouping-left-with-flat-icon.html +34 -0
  557. package/components/render/basic-card-grouping-left.html +29 -0
  558. package/components/render/basic-card-grouping.html +84 -0
  559. package/components/render/basic-card-layouts.html +468 -0
  560. package/components/render/button-danger-dark-icon.html +25 -0
  561. package/components/render/button-danger-dark.html +18 -0
  562. package/components/render/button-danger-default.html +16 -0
  563. package/components/render/button-danger-icon.html +25 -0
  564. package/components/render/button-disabled-dark-icon.html +25 -0
  565. package/components/render/button-disabled-dark.html +18 -0
  566. package/components/render/button-floating-aligned-column.html +31 -0
  567. package/components/render/button-floating-aligned-right.html +31 -0
  568. package/components/render/button-floating-dark-aligned-column.html +31 -0
  569. package/components/render/button-floating-dark-aligned-right.html +31 -0
  570. package/components/render/button-floating-dark-default.html +31 -0
  571. package/components/render/button-floating-dark-disabled.html +31 -0
  572. package/components/render/button-floating-dark-secondary-aligned-column.html +31 -0
  573. package/components/render/button-floating-dark-secondary-aligned-right.html +31 -0
  574. package/components/render/button-floating-dark-secondary.html +31 -0
  575. package/components/render/button-floating-default.html +31 -0
  576. package/components/render/button-floating-disabled.html +31 -0
  577. package/components/render/button-floating-overview.html +13 -0
  578. package/components/render/button-floating-positioning.html +32 -0
  579. package/components/render/button-floating-secondary-aligned-column.html +31 -0
  580. package/components/render/button-floating-secondary-aligned-right.html +31 -0
  581. package/components/render/button-floating-secondary.html +31 -0
  582. package/components/render/button-floating-states.html +22 -0
  583. package/components/render/button-gray-default.html +17 -0
  584. package/components/render/button-gray-icon.html +25 -0
  585. package/components/render/button-group-center-alignment.html +11 -0
  586. package/components/render/button-group-left-alignment.html +11 -0
  587. package/components/render/button-group-right-alignment.html +11 -0
  588. package/components/render/button-overview-direction.html +19 -0
  589. package/components/render/button-overview-global-definition.html +15 -0
  590. package/components/render/button-overview-sizes.html +22 -0
  591. package/components/render/button-overview-states.html +33 -0
  592. package/components/render/button-primary-dark-icon.html +25 -0
  593. package/components/render/button-primary-dark.html +18 -0
  594. package/components/render/button-primary-default.html +16 -0
  595. package/components/render/button-primary-icon.html +26 -0
  596. package/components/render/button-secondary-dark-icon.html +25 -0
  597. package/components/render/button-secondary-dark.html +18 -0
  598. package/components/render/button-secondary-default.html +18 -0
  599. package/components/render/button-secondary-icon.html +25 -0
  600. package/components/render/button-tertiary-default.html +16 -0
  601. package/components/render/button-tertiary-icon.html +25 -0
  602. package/components/render/buttons-overview.html +484 -0
  603. package/components/render/category-dark.html +37 -0
  604. package/components/render/category-disabled-dark.html +33 -0
  605. package/components/render/category-disabled.html +33 -0
  606. package/components/render/category-full-row.html +113 -0
  607. package/components/render/category-overview-dark-states.html +55 -0
  608. package/components/render/category-overview-dark.html +37 -0
  609. package/components/render/category-overview-sizes.html +41 -0
  610. package/components/render/category-overview-states.html +55 -0
  611. package/components/render/category-small-dark.html +37 -0
  612. package/components/render/category-small-disabled-dark.html +33 -0
  613. package/components/render/category-small-disabled.html +33 -0
  614. package/components/render/category-small-full-row.html +149 -0
  615. package/components/render/category-small.html +37 -0
  616. package/components/render/category.html +37 -0
  617. package/components/render/checkbox-checked.html +12 -0
  618. package/components/render/checkbox-disabled.html +12 -0
  619. package/components/render/checkbox-focus.html +12 -0
  620. package/components/render/checkbox-global-definition.html +12 -0
  621. package/components/render/checkbox-hover.html +12 -0
  622. package/components/render/checkbox-inline.html +15 -0
  623. package/components/render/checkbox-readonly.html +13 -0
  624. package/components/render/colors-and-shadows.html +80 -0
  625. package/components/render/contact-cards.html +596 -0
  626. package/components/render/contact-content.html +30 -0
  627. package/components/render/contact-overview.html +95 -0
  628. package/components/render/contact-sizes.html +76 -0
  629. package/components/render/contact-small.html +41 -0
  630. package/components/render/contact-without-image-small.html +36 -0
  631. package/components/render/contact-without-image.html +36 -0
  632. package/components/render/contact.html +41 -0
  633. package/components/render/divider-dark-blue.html +3 -0
  634. package/components/render/divider-default.html +4 -0
  635. package/components/render/divider-gray-5.html +3 -0
  636. package/components/render/divider-white-50.html +3 -0
  637. package/components/render/divider-white.html +3 -0
  638. package/components/render/divider-yellow.html +4 -0
  639. package/components/render/generic-card-aspect-16by9.html +23 -0
  640. package/components/render/generic-card-aspect-2by1-small.html +84 -0
  641. package/components/render/generic-card-aspect-2by1.html +80 -0
  642. package/components/render/generic-card-aspect.html +48 -0
  643. package/components/render/generic-card-default-small-dark-theme.html +22 -0
  644. package/components/render/generic-card-default-small-svg.html +22 -0
  645. package/components/render/generic-card-default-small.html +23 -0
  646. package/components/render/generic-card-default-svg-dark.html +22 -0
  647. package/components/render/generic-card-default-svg.html +21 -0
  648. package/components/render/generic-card-default.html +24 -0
  649. package/components/render/generic-card-media-dark-theme.html +38 -0
  650. package/components/render/generic-card-media-floating-icon.html +44 -0
  651. package/components/render/generic-card-media-small.html +36 -0
  652. package/components/render/generic-card-media.html +36 -0
  653. package/components/render/generic-card-overview.html +54 -0
  654. package/components/render/generic-flat-icons.html +3 -0
  655. package/components/render/generic-rich-icons.html +3 -0
  656. package/components/render/global-colors-alternative.html +13 -0
  657. package/components/render/global-colors-gradients.html +17 -0
  658. package/components/render/global-colors-gray-white-black.html +16 -0
  659. package/components/render/global-colors-primary.html +7 -0
  660. package/components/render/global-colors-shadows.html +8 -0
  661. package/components/render/global-colors-transparency.html +18 -0
  662. package/components/render/global-margins.html +25 -0
  663. package/components/render/global-paddings.html +4 -0
  664. package/components/render/gradient-background-colors.html +118 -0
  665. package/components/render/input-disabled.html +30 -0
  666. package/components/render/input-field.html +138 -0
  667. package/components/render/input-focus.html +30 -0
  668. package/components/render/input-hover.html +30 -0
  669. package/components/render/input-readonly.html +30 -0
  670. package/components/render/input-sizes.html +32 -0
  671. package/components/render/input-state-error.html +30 -0
  672. package/components/render/input-state-success.html +30 -0
  673. package/components/render/input.html +19 -0
  674. package/components/render/large-section-spacing-definitions.html +33 -0
  675. package/components/render/large-section-spacing.html +16 -0
  676. package/components/render/links.html +18 -0
  677. package/components/render/lists.html +16 -0
  678. package/components/render/marketplace-flat-icons.html +3 -0
  679. package/components/render/marketplace-rich-icons.html +3 -0
  680. package/components/render/matching-content-height-card.html +328 -0
  681. package/components/render/medium-section-spacing-definitions.html +33 -0
  682. package/components/render/medium-section-spacing.html +16 -0
  683. package/components/render/modal-on-click.html +37 -0
  684. package/components/render/modal-on-load-demo.html +35 -0
  685. package/components/render/modal-on-load.html +35 -0
  686. package/components/render/msds-text-alt-blue-1.html +3 -0
  687. package/components/render/msds-text-alt-blue-2.html +3 -0
  688. package/components/render/msds-text-alt-blue-3.html +3 -0
  689. package/components/render/msds-text-alt-yellow-1.html +3 -0
  690. package/components/render/msds-text-alt-yellow-2.html +3 -0
  691. package/components/render/msds-text-black.html +3 -0
  692. package/components/render/msds-text-clear-blue.html +3 -0
  693. package/components/render/msds-text-confirm-green.html +3 -0
  694. package/components/render/msds-text-danger-red-1.html +3 -0
  695. package/components/render/msds-text-danger-red-2.html +3 -0
  696. package/components/render/msds-text-dark-blue.html +3 -0
  697. package/components/render/msds-text-gray-1.html +3 -0
  698. package/components/render/msds-text-gray-10.html +3 -0
  699. package/components/render/msds-text-gray-2.html +3 -0
  700. package/components/render/msds-text-gray-3.html +3 -0
  701. package/components/render/msds-text-gray-4.html +3 -0
  702. package/components/render/msds-text-gray-5.html +3 -0
  703. package/components/render/msds-text-gray-6.html +3 -0
  704. package/components/render/msds-text-gray-7.html +3 -0
  705. package/components/render/msds-text-gray-8.html +3 -0
  706. package/components/render/msds-text-gray-9.html +3 -0
  707. package/components/render/msds-text-sand.html +3 -0
  708. package/components/render/msds-text-white.html +3 -0
  709. package/components/render/msds-text-yellow.html +3 -0
  710. package/components/render/popover-bottom.html +35 -0
  711. package/components/render/popover-global-definition.html +35 -0
  712. package/components/render/popover-left.html +35 -0
  713. package/components/render/popover-top.html +35 -0
  714. package/components/render/preview-dark.html +33 -0
  715. package/components/render/preview.html +29 -0
  716. package/components/render/progress-bar-dark-theme.html +27 -0
  717. package/components/render/progress-bar-features.html +40 -0
  718. package/components/render/progress-bar-global-definition.html +15 -0
  719. package/components/render/progress-bar-light-theme.html +27 -0
  720. package/components/render/progress-bar-sizes.html +29 -0
  721. package/components/render/radio-button-disabled.html +10 -0
  722. package/components/render/radio-button-focus.html +10 -0
  723. package/components/render/radio-button-global-definition.html +16 -0
  724. package/components/render/radio-button-hover.html +10 -0
  725. package/components/render/radio-button-readonly.html +11 -0
  726. package/components/render/radio-button-selected.html +10 -0
  727. package/components/render/section-checkbox-dark.html +38 -0
  728. package/components/render/section-checkbox-nested-accordion.html +93 -0
  729. package/components/render/section-checkbox.html +70 -0
  730. package/components/render/section-radio-dark.html +70 -0
  731. package/components/render/section-radio-nested-accordion.html +118 -0
  732. package/components/render/section-radio.html +69 -0
  733. package/components/render/select-input-default.html +15 -0
  734. package/components/render/select-input-error.html +14 -0
  735. package/components/render/select-input-global-definition.html +20 -0
  736. package/components/render/select-input-not-required.html +15 -0
  737. package/components/render/select-input-required.html +15 -0
  738. package/components/render/select-input-small.html +12 -0
  739. package/components/render/small-section-spacing-definitions.html +36 -0
  740. package/components/render/small-section-spacing.html +16 -0
  741. package/components/render/solid-background-colors.html +89 -0
  742. package/components/render/solution-card-default-layout.html +132 -0
  743. package/components/render/solution-card-default.html +48 -0
  744. package/components/render/solution-card-layouts.html +561 -0
  745. package/components/render/solution-card-optional-certification-badges.html +56 -0
  746. package/components/render/solution-card-optional-solution-badges.html +56 -0
  747. package/components/render/solution-card-sizes.html +90 -0
  748. package/components/render/solution-card-small.html +48 -0
  749. package/components/render/switch-checked.html +15 -0
  750. package/components/render/switch-default.html +15 -0
  751. package/components/render/switch-disabled-readonly.html +15 -0
  752. package/components/render/switch-disabled.html +15 -0
  753. package/components/render/switch-global.html +20 -0
  754. package/components/render/tab-tile.html +1102 -0
  755. package/components/render/table-dark-theme-default-expandable-rows.html +130 -0
  756. package/components/render/table-dark-theme-default.html +142 -0
  757. package/components/render/table-default-dark.html +118 -0
  758. package/components/render/table-default-expandable-rows.html +130 -0
  759. package/components/render/table-default-medium.html +118 -0
  760. package/components/render/table-default-small.html +118 -0
  761. package/components/render/table-default.html +142 -0
  762. package/components/render/text-area-disabled.html +34 -0
  763. package/components/render/text-area-error.html +34 -0
  764. package/components/render/text-area-field.html +21 -0
  765. package/components/render/text-area-focus.html +34 -0
  766. package/components/render/text-area-hover.html +34 -0
  767. package/components/render/text-area-readonly.html +34 -0
  768. package/components/render/text-area-sizes.html +34 -0
  769. package/components/render/text-area-success.html +34 -0
  770. package/components/render/text-area.html +121 -0
  771. package/components/render/text-colors.html +3 -0
  772. package/components/render/text.html +48 -0
  773. package/components/render/typography-body-texts.html +26 -0
  774. package/components/render/typography-displays.html +8 -0
  775. package/components/render/typography-headers.html +11 -0
  776. package/components/render/typography-leads.html +4 -0
  777. package/components/render/typography-links-dark-theme.html +109 -0
  778. package/components/render/typography-links-light-theme.html +91 -0
  779. package/components/render/typography-links-secondary.html +35 -0
  780. package/components/render/typography-unordered-lists.html +15 -0
  781. package/components.html +13 -0
  782. package/design-system.css +1 -1
  783. package/docs/component-documentation/alerts.html +1657 -0
  784. package/docs/component-documentation/buttons/buttons-floating.html +1676 -0
  785. package/docs/component-documentation/buttons/buttons.html +1908 -0
  786. package/docs/component-documentation/cards/basic-cards.html +1424 -0
  787. package/docs/component-documentation/cards/category-cards.html +1950 -0
  788. package/docs/component-documentation/cards/contact-cards.html +1474 -0
  789. package/docs/component-documentation/cards/generic-cards.html +1534 -0
  790. package/docs/component-documentation/cards/solution-cards.html +1595 -0
  791. package/docs/component-documentation/dividers/dividers.html +839 -0
  792. package/docs/component-documentation/expanding-components/accordion.html +1832 -0
  793. package/docs/component-documentation/expanding-components/section.html +1511 -0
  794. package/docs/component-documentation/modal.html +983 -0
  795. package/docs/component-documentation/popover/popover.html +1082 -0
  796. package/docs/component-documentation/progress-bar.html +1143 -0
  797. package/docs/component-documentation/spacing.html +831 -0
  798. package/docs/component-documentation/table.html +2336 -0
  799. package/docs/content/icons/-overview.html +848 -0
  800. package/docs/content/icons/icons-flat.html +839 -0
  801. package/docs/content/icons/icons-rich.html +839 -0
  802. package/docs/content/typography/-overview.html +860 -0
  803. package/docs/content/typography/font-colors.html +900 -0
  804. package/docs/content/typography/links.html +1113 -0
  805. package/docs/content/typography/lists.html +854 -0
  806. package/docs/content/typography/text.html +919 -0
  807. package/docs/forms/-overview.html +881 -0
  808. package/docs/forms/checkbox.html +1007 -0
  809. package/docs/forms/drop-down-list.html +981 -0
  810. package/docs/forms/input-field.html +1316 -0
  811. package/docs/forms/radio-button.html +966 -0
  812. package/docs/forms/switch.html +964 -0
  813. package/docs/forms/text-area.html +1371 -0
  814. package/docs/guidelines-and-guides/creating-a-new-release.html +825 -0
  815. package/docs/guidelines-and-guides/css-and-scss-guidelines.html +814 -0
  816. package/docs/guidelines-and-guides/git-cheat-sheet.html +898 -0
  817. package/docs/guidelines-and-guides/installation-and-usage.html +812 -0
  818. package/docs/utilities/colors/background-colors.html +1029 -0
  819. package/docs/utilities/colors/font-colors.html +1002 -0
  820. package/docs/utilities/colors/overview.html +952 -0
  821. package/docs/utilities/spacing.html +1112 -0
  822. package/docs.html +13 -0
  823. package/icons.list.js +2432 -2432
  824. package/index.html +807 -0
  825. package/main.css +1 -1
  826. package/package.json +58 -58
  827. package/scss/_variables.scss +124 -124
  828. package/spacing.list.js +11 -11
  829. package/svg/rich/Okay.svg +33 -33
  830. package/svg/rich/acceleration.svg +39 -39
  831. package/svg/rich/add-content.svg +37 -37
  832. package/svg/rich/add-solution.svg +29 -29
  833. package/svg/rich/advanced-super-surveillance.svg +42 -42
  834. package/svg/rich/advocacy .svg +60 -60
  835. package/svg/rich/airplane.svg +67 -67
  836. package/svg/rich/ambition.svg +46 -46
  837. package/svg/rich/analytics-devices.svg +68 -68
  838. package/svg/rich/applications.svg +97 -97
  839. package/svg/rich/backup-important.svg +157 -157
  840. package/svg/rich/black-screens.svg +43 -43
  841. package/svg/rich/blueprint.svg +22 -22
  842. package/svg/rich/body-worn.svg +45 -45
  843. package/svg/rich/book-a-demo-notification.svg +38 -38
  844. package/svg/rich/book-a-demo.svg +34 -34
  845. package/svg/rich/booking.svg +49 -49
  846. package/svg/rich/browser.svg +32 -32
  847. package/svg/rich/build.svg +34 -34
  848. package/svg/rich/building-medium.svg +66 -66
  849. package/svg/rich/cal-monthly.svg +324 -324
  850. package/svg/rich/cal-weekly.svg +173 -173
  851. package/svg/rich/calendar.svg +25 -25
  852. package/svg/rich/cam-group-small.svg +84 -84
  853. package/svg/rich/camera-analogue.svg +27 -27
  854. package/svg/rich/camera-memory.svg +25 -25
  855. package/svg/rich/car.svg +41 -41
  856. package/svg/rich/care.svg +16 -16
  857. package/svg/rich/catalogue.svg +22 -22
  858. package/svg/rich/certification.svg +25 -25
  859. package/svg/rich/checklist.svg +22 -22
  860. package/svg/rich/checkmark-badge.svg +11 -11
  861. package/svg/rich/checkmark.svg +11 -11
  862. package/svg/rich/clock-24-7.svg +77 -77
  863. package/svg/rich/co-working.svg +104 -104
  864. package/svg/rich/coffee.svg +60 -60
  865. package/svg/rich/community.svg +184 -184
  866. package/svg/rich/company.svg +32 -32
  867. package/svg/rich/complete-flow.svg +30 -30
  868. package/svg/rich/consumer.svg +47 -47
  869. package/svg/rich/contact-illustration.svg +13 -13
  870. package/svg/rich/contact-notification.svg +17 -17
  871. package/svg/rich/crime.svg +29 -29
  872. package/svg/rich/crowd-management.svg +47 -47
  873. package/svg/rich/customer-stories.svg +23 -23
  874. package/svg/rich/customizable.svg +19 -19
  875. package/svg/rich/cyber-security.svg +131 -131
  876. package/svg/rich/dashboard.svg +43 -43
  877. package/svg/rich/decision-making.svg +19 -19
  878. package/svg/rich/deployment-device.svg +66 -66
  879. package/svg/rich/design-animated.svg +51 -51
  880. package/svg/rich/design.svg +24 -24
  881. package/svg/rich/devices-web.svg +56 -56
  882. package/svg/rich/devices.svg +29 -29
  883. package/svg/rich/discount.svg +22 -22
  884. package/svg/rich/document.svg +24 -24
  885. package/svg/rich/documentation.svg +79 -79
  886. package/svg/rich/dome-cam-8.svg +84 -84
  887. package/svg/rich/dome-cam.svg +16 -16
  888. package/svg/rich/download-illustration.svg +49 -49
  889. package/svg/rich/e-learning.svg +42 -42
  890. package/svg/rich/emergency.svg +44 -44
  891. package/svg/rich/employees.svg +37 -37
  892. package/svg/rich/end-user.svg +28 -28
  893. package/svg/rich/expertise.svg +47 -47
  894. package/svg/rich/explore.svg +50 -50
  895. package/svg/rich/extension.svg +63 -63
  896. package/svg/rich/failover.svg +33 -33
  897. package/svg/rich/faq.svg +23 -23
  898. package/svg/rich/feedback-notification.svg +21 -21
  899. package/svg/rich/feedback.svg +17 -17
  900. package/svg/rich/find.svg +28 -28
  901. package/svg/rich/flexibility.svg +13 -13
  902. package/svg/rich/form.svg +26 -26
  903. package/svg/rich/get-leads.svg +73 -73
  904. package/svg/rich/getting-started.svg +29 -29
  905. package/svg/rich/global-partner-network.svg +978 -978
  906. package/svg/rich/growth-data.svg +56 -56
  907. package/svg/rich/happiness.svg +29 -29
  908. package/svg/rich/hardware-applications-software.svg +165 -165
  909. package/svg/rich/hardware-services-documentation.svg +47 -47
  910. package/svg/rich/hardware.svg +22 -22
  911. package/svg/rich/intelligence.svg +43 -43
  912. package/svg/rich/interconnect.svg +39 -39
  913. package/svg/rich/investigation.svg +34 -34
  914. package/svg/rich/join.svg +78 -78
  915. package/svg/rich/key-features.svg +38 -38
  916. package/svg/rich/languages.svg +49 -49
  917. package/svg/rich/license-governance.svg +45 -45
  918. package/svg/rich/license-key.svg +13 -13
  919. package/svg/rich/like-notification.svg +43 -43
  920. package/svg/rich/listen.svg +13 -13
  921. package/svg/rich/live-streaming.svg +93 -93
  922. package/svg/rich/logged-in.svg +14 -14
  923. package/svg/rich/lpr.svg +59 -59
  924. package/svg/rich/marketplace-challenges-assist-people-feel-safe-leaving.svg +105 -105
  925. package/svg/rich/marketplace-challenges-assist-people-in-finding-their-vehicles.svg +124 -124
  926. package/svg/rich/marketplace-challenges-avoid-employee-theft.svg +169 -169
  927. package/svg/rich/marketplace-challenges-control-access-to-restricted-areas.svg +104 -104
  928. package/svg/rich/marketplace-challenges-discover-inefficiencies-in-cargo-movement.svg +130 -130
  929. package/svg/rich/marketplace-challenges-find-lost-children.svg +87 -87
  930. package/svg/rich/marketplace-challenges-gather-evidence-for-criminal-investigation.svg +172 -172
  931. package/svg/rich/marketplace-challenges-improve-wait-time-in-lines.svg +375 -375
  932. package/svg/rich/marketplace-challenges-money-disputes-with-customers.svg +157 -157
  933. package/svg/rich/marketplace-challenges-personalized-customer-experience.svg +127 -127
  934. package/svg/rich/marketplace-challenges-prevent-multiple-people-from-entering-a-door-on-a-single-access-badge.svg +245 -245
  935. package/svg/rich/marketplace-challenges-provide-evidence-against-lawsuit.svg +270 -270
  936. package/svg/rich/marketplace-challenges-react-to-confrontations-before-they-escalate.svg +176 -176
  937. package/svg/rich/marketplace-challenges-reduce-property-damage.svg +381 -381
  938. package/svg/rich/marketplace-challenges-reduce-workplace-accidents.svg +172 -172
  939. package/svg/rich/marketplace-challenges-respond-to-medical-emergencies.svg +179 -179
  940. package/svg/rich/marketplace-challenges-situational-awareness-to-response-teams.svg +330 -330
  941. package/svg/rich/marketplace-challenges-understand-customer-behavior.svg +455 -455
  942. package/svg/rich/marketplace-challenges-vandalism.svg +120 -120
  943. package/svg/rich/marketplace-collect.svg +121 -121
  944. package/svg/rich/marketplace-filter.svg +54 -54
  945. package/svg/rich/marketplace-industries-airports.svg +380 -380
  946. package/svg/rich/marketplace-industries-art-and-entertainment.svg +170 -170
  947. package/svg/rich/marketplace-industries-city-surveillance.svg +572 -572
  948. package/svg/rich/marketplace-industries-construction.svg +253 -253
  949. package/svg/rich/marketplace-industries-critical-infrastructure.svg +292 -292
  950. package/svg/rich/marketplace-industries-education.svg +291 -291
  951. package/svg/rich/marketplace-industries-finance-and-insurance.svg +140 -140
  952. package/svg/rich/marketplace-industries-healthcare.svg +207 -207
  953. package/svg/rich/marketplace-industries-information-technology.svg +250 -250
  954. package/svg/rich/marketplace-industries-manufacturing.svg +175 -175
  955. package/svg/rich/marketplace-industries-public-administration.svg +349 -349
  956. package/svg/rich/marketplace-industries-public-transport.svg +303 -303
  957. package/svg/rich/marketplace-industries-retail.svg +392 -392
  958. package/svg/rich/marketplace-industries-seaports.svg +335 -335
  959. package/svg/rich/marketplace-industries-trafic-monitoring.svg +255 -255
  960. package/svg/rich/marketplace-industries-utilities.svg +211 -211
  961. package/svg/rich/marketplace-interface.svg +76 -76
  962. package/svg/rich/marketplace-practice-access-control.svg +117 -117
  963. package/svg/rich/marketplace-practice-business-intelligence.svg +89 -89
  964. package/svg/rich/marketplace-practice-business-solutions.svg +195 -195
  965. package/svg/rich/marketplace-practice-central-monitoring.svg +505 -505
  966. package/svg/rich/marketplace-practice-cloud-and-managed-services.svg +75 -75
  967. package/svg/rich/marketplace-practice-communication.svg +187 -187
  968. package/svg/rich/marketplace-practice-crisis-emergency.svg +160 -160
  969. package/svg/rich/marketplace-practice-cyber-security.svg +141 -141
  970. package/svg/rich/marketplace-practice-detection-and-deterrence.svg +164 -164
  971. package/svg/rich/marketplace-practice-digital-infrastructure.svg +197 -197
  972. package/svg/rich/marketplace-practice-facilities-management.svg +332 -332
  973. package/svg/rich/marketplace-practice-fire-and-life-safety.svg +168 -168
  974. package/svg/rich/marketplace-practice-home-automation-iot.svg +161 -161
  975. package/svg/rich/marketplace-practice-intrusion-and-alarm.svg +301 -301
  976. package/svg/rich/marketplace-practice-investigation.svg +157 -157
  977. package/svg/rich/marketplace-practice-it-hardware-and-equipment.svg +254 -254
  978. package/svg/rich/marketplace-practice-privacy-protection.svg +118 -118
  979. package/svg/rich/marketplace-practice-smart-city.svg +351 -351
  980. package/svg/rich/marketplace-practice-surveillance.svg +72 -72
  981. package/svg/rich/marketplace-practice-tracking-and-monitoring.svg +178 -178
  982. package/svg/rich/marketplace-practice-vehicles-and-traffic.svg +227 -227
  983. package/svg/rich/marketplace-solution-service.svg +75 -75
  984. package/svg/rich/milestone-global-offices-illustration.svg +49 -49
  985. package/svg/rich/milestone-in the-media.svg +49 -49
  986. package/svg/rich/mobile-support.svg +40 -40
  987. package/svg/rich/my-milestone.svg +28 -28
  988. package/svg/rich/network.svg +24 -24
  989. package/svg/rich/newspaper.svg +20 -20
  990. package/svg/rich/no-1.svg +50 -50
  991. package/svg/rich/no-backup.svg +30 -30
  992. package/svg/rich/one-hub.svg +71 -71
  993. package/svg/rich/open-platform-community.svg +144 -144
  994. package/svg/rich/open-platform.svg +10 -10
  995. package/svg/rich/outdated-hardware.svg +53 -53
  996. package/svg/rich/partnership.svg +39 -39
  997. package/svg/rich/passion.svg +41 -41
  998. package/svg/rich/planet.svg +75 -75
  999. package/svg/rich/play.svg +10 -10
  1000. package/svg/rich/press-release.svg +30 -30
  1001. package/svg/rich/product-overview-illustration.svg +49 -49
  1002. package/svg/rich/project-animated.svg +99 -99
  1003. package/svg/rich/project.svg +18 -18
  1004. package/svg/rich/promotion.svg +25 -25
  1005. package/svg/rich/publish.svg +12 -12
  1006. package/svg/rich/quote.svg +104 -104
  1007. package/svg/rich/reaction-mode.svg +54 -54
  1008. package/svg/rich/releases.svg +17 -17
  1009. package/svg/rich/reliable.svg +24 -24
  1010. package/svg/rich/reminder.svg +33 -33
  1011. package/svg/rich/save-money.svg +27 -27
  1012. package/svg/rich/scalable.svg +16 -16
  1013. package/svg/rich/scale-balance.svg +101 -101
  1014. package/svg/rich/scale-up.svg +11 -11
  1015. package/svg/rich/screen-recording.svg +259 -259
  1016. package/svg/rich/searching.svg +115 -115
  1017. package/svg/rich/secure-gdpr.svg +52 -52
  1018. package/svg/rich/secure.svg +49 -49
  1019. package/svg/rich/self-service-support.svg +15 -15
  1020. package/svg/rich/service-coding.svg +44 -44
  1021. package/svg/rich/sign-up.svg +37 -37
  1022. package/svg/rich/single-site.svg +31 -31
  1023. package/svg/rich/smart-wall-person.svg +135 -135
  1024. package/svg/rich/smart-wall.svg +96 -96
  1025. package/svg/rich/solutions-design-tool.svg +234 -234
  1026. package/svg/rich/submit-for-feedback.svg +28 -28
  1027. package/svg/rich/subscriptions.svg +37 -37
  1028. package/svg/rich/support-call.svg +29 -29
  1029. package/svg/rich/support-chat-female.svg +48 -48
  1030. package/svg/rich/support-chat-male.svg +48 -48
  1031. package/svg/rich/support-technical.svg +17 -17
  1032. package/svg/rich/system-builder.svg +24 -24
  1033. package/svg/rich/tags.svg +24 -24
  1034. package/svg/rich/target.svg +15 -15
  1035. package/svg/rich/time-to-market.svg +53 -53
  1036. package/svg/rich/tools.svg +37 -37
  1037. package/svg/rich/trade-show.svg +90 -90
  1038. package/svg/rich/transaction.svg +56 -56
  1039. package/svg/rich/translation.svg +17 -17
  1040. package/svg/rich/update-content-then-publish.svg +77 -77
  1041. package/svg/rich/update-content.svg +55 -55
  1042. package/svg/rich/user-review.svg +22 -22
  1043. package/svg/rich/verification.svg +37 -37
  1044. package/svg/rich/video-cookie.svg +78 -78
  1045. package/svg/rich/vps.svg +39 -39
  1046. package/svg/rich/warning.svg +48 -48
  1047. package/svg/rich/watch.svg +19 -19
  1048. package/svg/rich/webinar.svg +49 -49
  1049. package/svg/rich/well-being.svg +67 -67
  1050. package/svg/rich/world-leading.svg +258 -258
  1051. package/svg/rich/xprotect-access-anywhere.svg +86 -86
  1052. package/svg/rich/xprotect-compare-matrix.svg +40 -40
  1053. package/svg/rich/xprotect-compare-products.svg +232 -232
  1054. package/svg/rich/xprotect-compare-releases.svg +208 -208
  1055. package/svg/rich/xprotect.svg +31 -31
  1056. package/svg/rich/youtube.svg +12 -12
  1057. package/text.list.js +47 -47
  1058. package/themes/mandelbrot/css/aqua.css +1 -0
  1059. package/themes/mandelbrot/css/black.css +1 -0
  1060. package/themes/mandelbrot/css/blue.css +1 -0
  1061. package/themes/mandelbrot/css/default.css +1 -0
  1062. package/themes/mandelbrot/css/fuchsia.css +1 -0
  1063. package/themes/mandelbrot/css/green.css +1 -0
  1064. package/themes/mandelbrot/css/grey.css +1 -0
  1065. package/themes/mandelbrot/css/highlight.css +1 -0
  1066. package/themes/mandelbrot/css/lime.css +1 -0
  1067. package/themes/mandelbrot/css/maroon.css +1 -0
  1068. package/themes/mandelbrot/css/navy.css +1 -0
  1069. package/themes/mandelbrot/css/olive.css +1 -0
  1070. package/themes/mandelbrot/css/orange.css +1 -0
  1071. package/themes/mandelbrot/css/purple.css +1 -0
  1072. package/themes/mandelbrot/css/red.css +1 -0
  1073. package/themes/mandelbrot/css/teal.css +1 -0
  1074. package/themes/mandelbrot/css/white.css +1 -0
  1075. package/themes/mandelbrot/css/yellow.css +1 -0
  1076. package/themes/mandelbrot/favicon.ico +0 -0
  1077. package/themes/mandelbrot/fonts/OpenSans-Italic.woff +0 -0
  1078. package/themes/mandelbrot/fonts/OpenSans-Italic.woff2 +0 -0
  1079. package/themes/mandelbrot/fonts/OpenSans-Regular.woff +0 -0
  1080. package/themes/mandelbrot/fonts/OpenSans-Regular.woff2 +0 -0
  1081. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff +0 -0
  1082. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff2 +0 -0
  1083. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff +0 -0
  1084. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff2 +0 -0
  1085. package/themes/mandelbrot/fonts/hack-bold-webfont.woff +0 -0
  1086. package/themes/mandelbrot/fonts/hack-bold-webfont.woff2 +0 -0
  1087. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff +0 -0
  1088. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff2 +0 -0
  1089. package/themes/mandelbrot/fonts/hack-italic-webfont.woff +0 -0
  1090. package/themes/mandelbrot/fonts/hack-italic-webfont.woff2 +0 -0
  1091. package/themes/mandelbrot/fonts/hack-regular-webfont.woff +0 -0
  1092. package/themes/mandelbrot/fonts/hack-regular-webfont.woff2 +0 -0
  1093. package/themes/mandelbrot/img/favicon.png +0 -0
  1094. package/themes/mandelbrot/img/icon-drag--horizontal.svg +3 -0
  1095. package/themes/mandelbrot/img/icon-drag--vertical.svg +3 -0
  1096. package/themes/mandelbrot/img/icon-navigation-closed-ltr.svg +3 -0
  1097. package/themes/mandelbrot/img/icon-navigation-closed-rtl.svg +3 -0
  1098. package/themes/mandelbrot/img/icon-navigation-opened.svg +3 -0
  1099. package/themes/mandelbrot/img/icon-window.svg +3 -0
  1100. package/themes/mandelbrot/img/loader.svg +37 -0
  1101. package/themes/mandelbrot/js/mandelbrot.js +2 -0
  1102. package/themes/mandelbrot/js/mandelbrot.js.map +1 -0
package/components/preview/tab-tile.html ADDED
@@ -0,0 +1,1128 @@
1
+
2
+
3
+ <!DOCTYPE html>
4
+ <html class="msds-enable-font-family">
5
+ <head>
6
+ <meta charset="utf-8">
7
+ <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600,700,800' rel='stylesheet' type='text/css' />
8
+ <link media="all" rel="stylesheet" href="../../rich-icons-bundle.css">
9
+ <link media="all" rel="stylesheet" href="../../main.css">
10
+ <title>Preview Layout</title>
11
+ <script defer src="../../main.js"></script>
12
+
13
+ <style>
14
+ body {
15
+ margin: 10px 0 10px 0;
16
+ padding: 0;
17
+ background-color: #fff;
18
+ background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
19
+ background-size: 20px 20px;
20
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0;
21
+ }
22
+
23
+ </style>
24
+ </head>
25
+ <body>
26
+ <h2>Tabs with Icons</h2>
27
+ <div class="msds-tabs">
28
+ <div class="msds-tabs__container">
29
+ <div class="msds-tabs__spacer"></div>
30
+
31
+ <div class="msds-tabs__tabs-container container">
32
+
33
+ <div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
34
+ <div class="msds-tabs__tab-svg msds-download-illustration" title="Download Illustration"></div>
35
+ <div class="msds-tabs__tab-text">
36
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
37
+ </div>
38
+ </div>
39
+
40
+ <div class="msds-tabs__tab" data-index="1" tabindex="1">
41
+ <div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
42
+ <div class="msds-tabs__tab-text">
43
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
44
+ </div>
45
+ </div>
46
+
47
+ <div class="msds-tabs__tab" data-index="2" tabindex="1">
48
+ <div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
49
+ <div class="msds-tabs__tab-text">
50
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
51
+ </div>
52
+ </div>
53
+
54
+ <div class="msds-tabs__tab" data-index="3" tabindex="1">
55
+ <div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
56
+ <div class="msds-tabs__tab-text">
57
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
58
+ </div>
59
+ </div>
60
+
61
+ <div class="msds-tabs__tab" data-index="4" tabindex="1">
62
+ <div class="msds-tabs__tab-svg msds-interconnect" title="Interconnect"></div>
63
+ <div class="msds-tabs__tab-text">
64
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
65
+ </div>
66
+ </div>
67
+
68
+ <div class="msds-tabs__tab" data-index="5" tabindex="1">
69
+ <div class="msds-tabs__tab-svg msds-xprotect" title="XProtect"></div>
70
+ <div class="msds-tabs__tab-text">
71
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <div class="msds-tabs__spacer"></div>
77
+ </div>
78
+ </div>
79
+
80
+ <h2>Disabled Tabs with Icons</h2>
81
+ <div class="msds-tabs">
82
+ <div class="msds-tabs__container">
83
+ <div class="msds-tabs__spacer"></div>
84
+ <div class="msds-tabs__tabs-container container">
85
+ <div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="0">
86
+ <div class="msds-tabs__tab-svg msds-download-illustration" title="Download Illustration"></div>
87
+ <div class="msds-tabs__tab-text">
88
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
89
+ </div>
90
+ </div>
91
+
92
+ <div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="1">
93
+ <div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
94
+ <div class="msds-tabs__tab-text">
95
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
96
+ </div>
97
+ </div>
98
+
99
+ <div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="2">
100
+ <div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
101
+ <div class="msds-tabs__tab-text">
102
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
103
+ </div>
104
+ </div>
105
+
106
+ <div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="3">
107
+ <div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
108
+ <div class="msds-tabs__tab-text">
109
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
110
+ </div>
111
+ </div>
112
+
113
+ <div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="4">
114
+ <div class="msds-tabs__tab-svg msds-interconnect" title="Interconnect"></div>
115
+ <div class="msds-tabs__tab-text">
116
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
117
+ </div>
118
+ </div>
119
+
120
+ <div class="msds-tabs__tab msds-tabs__tab--disabled" data-index="5">
121
+ <div class="msds-tabs__tab-svg msds-xprotect" title="XProtect"></div>
122
+ <div class="msds-tabs__tab-text">
123
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <div class="msds-tabs__spacer"></div>
128
+ </div>
129
+ </div>
130
+
131
+ <h2>2 Tabs</h2>
132
+ <div class="msds-tabs">
133
+ <div class="msds-tabs__container">
134
+ <div class="msds-tabs__spacer"></div>
135
+ <div class="msds-tabs__tabs-container">
136
+
137
+ <div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
138
+ <div class="msds-tabs__tab-svg msds-download-illustration" title="Donwload Illustration"></div>
139
+ <div class="msds-tabs__tab-text">
140
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
141
+ </div>
142
+ </div>
143
+
144
+ <div class="msds-tabs__tab" data-index="1" tabindex="1">
145
+ <div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
146
+ <div class="msds-tabs__tab-text">
147
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
148
+ </div>
149
+ </div>
150
+ </div>
151
+ <div class="msds-tabs__spacer"></div>
152
+ </div>
153
+ </div>
154
+
155
+ <h2>Fewer Than 6 Tabs</h2>
156
+ <div class="msds-tabs">
157
+ <div class="msds-tabs__container">
158
+ <div class="msds-tabs__spacer"></div>
159
+ <div class="msds-tabs__tabs-container container">
160
+
161
+ <div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
162
+ <div class="msds-tabs__tab-svg msds-download-illustration" title="Donwload Illustration"></div>
163
+ <div class="msds-tabs__tab-text">
164
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
165
+ </div>
166
+ </div>
167
+
168
+ <div class="msds-tabs__tab" data-index="1" tabindex="1">
169
+ <div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
170
+ <div class="msds-tabs__tab-text">
171
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
172
+ </div>
173
+ </div>
174
+
175
+ <div class="msds-tabs__tab" data-index="2" tabindex="1">
176
+ <div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
177
+ <div class="msds-tabs__tab-text">
178
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
179
+ </div>
180
+ </div>
181
+
182
+ <div class="msds-tabs__tab" data-index="3" tabindex="1">
183
+ <div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
184
+ <div class="msds-tabs__tab-text">
185
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <div class="msds-tabs__spacer"></div>
190
+ </div>
191
+ </div>
192
+
193
+ <h2>Tabs Without Icons</h2>
194
+ <div class="msds-tabs">
195
+
196
+ <div class="msds-tabs__container">
197
+ <div class="msds-tabs__spacer"></div>
198
+ <div class="msds-tabs__tabs-container container">
199
+
200
+ <div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
201
+ <div class="msds-tabs__tab-text">
202
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
203
+ </div>
204
+ </div>
205
+
206
+ <div class="msds-tabs__tab" data-index="1" tabindex="1">
207
+ <div class="msds-tabs__tab-text">
208
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
209
+ </div>
210
+ </div>
211
+
212
+ <div class="msds-tabs__tab" data-index="2" tabindex="1">
213
+ <div class="msds-tabs__tab-text">
214
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
215
+ </div>
216
+ </div>
217
+
218
+ <div class="msds-tabs__tab" data-index="3" tabindex="1">
219
+ <div class="msds-tabs__tab-text">
220
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
221
+ </div>
222
+ </div>
223
+
224
+ <div class="msds-tabs__tab" data-index="4" tabindex="1">
225
+ <div class="msds-tabs__tab-text">
226
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
227
+ </div>
228
+ </div>
229
+
230
+ <div class="msds-tabs__tab" data-index="5" tabindex="1">
231
+ <div class="msds-tabs__tab-text">
232
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <div class="msds-tabs__spacer"></div>
237
+ </div>
238
+ </div>
239
+
240
+ <h2>Tabs Without Icons Disabled</h2>
241
+ <div class="msds-tabs">
242
+ <div class="msds-tabs__container">
243
+ <div class="msds-tabs__spacer"></div>
244
+
245
+ <div class="msds-tabs__tabs-container container">
246
+ <div class="msds-tabs__tab msds-tabs__tab--disabled">
247
+ <div class="msds-tabs__tab-text">
248
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
249
+ </div>
250
+ </div>
251
+
252
+ <div class="msds-tabs__tab msds-tabs__tab--disabled">
253
+ <div class="msds-tabs__tab-text">
254
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
255
+ </div>
256
+ </div>
257
+
258
+ <div class="msds-tabs__tab msds-tabs__tab--disabled">
259
+ <div class="msds-tabs__tab-text">
260
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
261
+ </div>
262
+ </div>
263
+
264
+ <div class="msds-tabs__tab msds-tabs__tab--disabled">
265
+ <div class="msds-tabs__tab-text">
266
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
267
+ </div>
268
+ </div>
269
+
270
+ <div class="msds-tabs__tab msds-tabs__tab--disabled">
271
+ <div class="msds-tabs__tab-text">
272
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
273
+ </div>
274
+ </div>
275
+
276
+ <div class="msds-tabs__tab msds-tabs__tab--disabled">
277
+ <div class="msds-tabs__tab-text">
278
+ Self-Service &amp; Support Lorem Ipsum Dolorem Pellentesque
279
+ </div>
280
+ </div>
281
+
282
+ </div>
283
+ <div class="msds-tabs__spacer"></div>
284
+ </div>
285
+ </div>
286
+
287
+ <h2>Sticky Tabs With Spacer On Desktop</h2>
288
+ <br>
289
+ <div class="msds-tabs">
290
+ <div class="msds-tabs__sticky-container">
291
+ <div class="msds-tabs__container msds-bg-gray-gradient-2">
292
+ <div class="msds-tabs__spacer"></div>
293
+ <div class="msds-tabs__tabs-container container">
294
+ <div class="msds-tabs__tab msds-tabs__tab--active" data-index="0" tabindex="1">
295
+ <div class="msds-tabs__tab-svg msds-download-illustration" title="Download Illustration"></div>
296
+ <div class="msds-tabs__tab-text">
297
+ Small Category Cards
298
+ </div>
299
+ </div>
300
+
301
+ <div class="msds-tabs__tab" data-index="1" tabindex="1">
302
+ <div class="msds-tabs__tab-svg msds-reliable" title="Reliable"></div>
303
+ <div class="msds-tabs__tab-text">
304
+ Large Category Cards
305
+ </div>
306
+ </div>
307
+
308
+ <div class="msds-tabs__tab" data-index="2" tabindex="1">
309
+ <div class="msds-tabs__tab-svg msds-scalable" title="Scalable"></div>
310
+ <div class="msds-tabs__tab-text">
311
+ Small Category Cards
312
+ </div>
313
+ </div>
314
+
315
+ <div class="msds-tabs__tab" data-index="3" tabindex="1">
316
+ <div class="msds-tabs__tab-svg msds-end-user" title="End User"></div>
317
+ <div class="msds-tabs__tab-text">
318
+ Large Category Cards
319
+ </div>
320
+ </div>
321
+
322
+ <div class="msds-tabs__tab" data-index="4" tabindex="1">
323
+ <div class="msds-tabs__tab-svg msds-interconnect" title="Interconnect"></div>
324
+ <div class="msds-tabs__tab-text">
325
+ Small Category Cards
326
+ </div>
327
+ </div>
328
+
329
+ <div class="msds-tabs__tab" data-index="5" tabindex="1">
330
+ <div class="msds-tabs__tab-svg msds-xprotect" title="XProtect"></div>
331
+ <div class="msds-tabs__tab-text">
332
+ Large Category Cards
333
+ </div>
334
+ </div>
335
+ </div>
336
+ <div class="msds-tabs__spacer"></div>
337
+ </div>
338
+ <div class="msds-tabs__content-container msds-tabs__content-container--visible msds-bg-white">
339
+ <div class="container">
340
+ <div class="row card-row">
341
+ <div class="col-12 col-md-3">
342
+ <div class="msds-category-card msds-category-card--small">
343
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
344
+ <div class="msds-category-card__header">
345
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
346
+ <div class="msds-category-card__header-icon-container">
347
+ <svg class="msds-category-card__header-icon">
348
+ <use href="../../msds-spritemap.svg#right-arrow" />
349
+ </svg>
350
+ </div>
351
+ </div>
352
+ <div class="msds-category-card__content">
353
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
354
+ </div>
355
+ </a>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="col-12 col-md-3">
360
+ <div class="msds-category-card msds-category-card--small">
361
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
362
+ <div class="msds-category-card__header">
363
+ <div class="msds-category-card__header-body">Lorem ipsum dolor sit</div>
364
+ <div class="msds-category-card__header-icon-container">
365
+ <svg class="msds-category-card__header-icon">
366
+ <use href="../../msds-spritemap.svg#right-arrow" />
367
+ </svg>
368
+ </div>
369
+ </div>
370
+ <div class="msds-category-card__content">
371
+ <div class="msds-category-card__content-body">Lorem ipsum dotari gink</div>
372
+ </div>
373
+ </a>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="col-12 col-md-3">
378
+ <div class="msds-category-card msds-category-card--small">
379
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
380
+ <div class="msds-category-card__header">
381
+ <div class="msds-category-card__header-body">Amet consectetur</div>
382
+ <div class="msds-category-card__header-icon-container">
383
+ <svg class="msds-category-card__header-icon">
384
+ <use href="../../msds-spritemap.svg#right-arrow" />
385
+ </svg>
386
+ </div>
387
+ </div>
388
+ <div class="msds-category-card__content">
389
+ <div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
390
+ </div>
391
+ </a>
392
+ </div>
393
+ </div>
394
+
395
+ <div class="col-12 col-md-3">
396
+ <div class="msds-category-card msds-category-card--small">
397
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
398
+ <div class="msds-category-card__header">
399
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
400
+ <div class="msds-category-card__header-icon-container">
401
+ <svg class="msds-category-card__header-icon">
402
+ <use href="../../msds-spritemap.svg#right-arrow" />
403
+ </svg>
404
+ </div>
405
+ </div>
406
+ <div class="msds-category-card__content">
407
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
408
+ </div>
409
+ </a>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="col-12 col-md-3">
414
+ <div class="msds-category-card msds-category-card--small">
415
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
416
+ <div class="msds-category-card__header">
417
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
418
+ <div class="msds-category-card__header-icon-container">
419
+ <svg class="msds-category-card__header-icon">
420
+ <use href="../../msds-spritemap.svg#right-arrow" />
421
+ </svg>
422
+ </div>
423
+ </div>
424
+ <div class="msds-category-card__content">
425
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
426
+ </div>
427
+ </a>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="col-12 col-md-3">
432
+ <div class="msds-category-card msds-category-card--small">
433
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
434
+ <div class="msds-category-card__header">
435
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
436
+ <div class="msds-category-card__header-icon-container">
437
+ <svg class="msds-category-card__header-icon">
438
+ <use href="../../msds-spritemap.svg#right-arrow" />
439
+ </svg>
440
+ </div>
441
+ </div>
442
+ <div class="msds-category-card__content">
443
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
444
+ </div>
445
+ </a>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="col-12 col-md-3">
450
+ <div class="msds-category-card msds-category-card--small">
451
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
452
+ <div class="msds-category-card__header">
453
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
454
+ <div class="msds-category-card__header-icon-container">
455
+ <svg class="msds-category-card__header-icon">
456
+ <use href="../../msds-spritemap.svg#right-arrow" />
457
+ </svg>
458
+ </div>
459
+ </div>
460
+ <div class="msds-category-card__content">
461
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
462
+ </div>
463
+ </a>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="col-12 col-md-3">
468
+ <div class="msds-category-card msds-category-card--small">
469
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
470
+ <div class="msds-category-card__header">
471
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
472
+ <div class="msds-category-card__header-icon-container">
473
+ <svg class="msds-category-card__header-icon">
474
+ <use href="../../msds-spritemap.svg#right-arrow" />
475
+ </svg>
476
+ </div>
477
+ </div>
478
+ <div class="msds-category-card__content">
479
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
480
+ </div>
481
+ </a>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div> </div>
486
+
487
+ <div class="msds-tabs__content-container msds-bg-white">
488
+ <div class="container">
489
+ <div class="row card-row">
490
+ <div class="col-12 col-md-4">
491
+ <div class="msds-category-card">
492
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
493
+ <div class="msds-category-card__header">
494
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
495
+ <div class="msds-category-card__header-icon-container">
496
+ <svg class="msds-category-card__header-icon">
497
+ <use href="../../msds-spritemap.svg#right-arrow" />
498
+ </svg>
499
+ </div>
500
+ </div>
501
+ <div class="msds-category-card__content">
502
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
503
+ </div>
504
+ </a>
505
+ </div>
506
+ </div>
507
+
508
+ <div class="col-12 col-md-4">
509
+ <div class="msds-category-card">
510
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
511
+ <div class="msds-category-card__header">
512
+ <div class="msds-category-card__header-body">Lorem ipsum dolor sit amet consectetur</div>
513
+ <div class="msds-category-card__header-icon-container">
514
+ <svg class="msds-category-card__header-icon">
515
+ <use href="../../msds-spritemap.svg#right-arrow" />
516
+ </svg>
517
+ </div>
518
+ </div>
519
+ <div class="msds-category-card__content">
520
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque</div>
521
+ </div>
522
+ </a>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="col-12 col-md-4">
527
+ <div class="msds-category-card">
528
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
529
+ <div class="msds-category-card__header">
530
+ <div class="msds-category-card__header-body">Amet consectetur</div>
531
+ <div class="msds-category-card__header-icon-container">
532
+ <svg class="msds-category-card__header-icon">
533
+ <use href="../../msds-spritemap.svg#right-arrow" />
534
+ </svg>
535
+ </div>
536
+ </div>
537
+ <div class="msds-category-card__content">
538
+ <div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
539
+ </div>
540
+ </a>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="col-12 col-md-4">
545
+ <div class="msds-category-card">
546
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
547
+ <div class="msds-category-card__header">
548
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
549
+ <div class="msds-category-card__header-icon-container">
550
+ <svg class="msds-category-card__header-icon">
551
+ <use href="../../msds-spritemap.svg#right-arrow" />
552
+ </svg>
553
+ </div>
554
+ </div>
555
+ <div class="msds-category-card__content">
556
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
557
+ </div>
558
+ </a>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="col-12 col-md-4">
563
+ <div class="msds-category-card">
564
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
565
+ <div class="msds-category-card__header">
566
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
567
+ <div class="msds-category-card__header-icon-container">
568
+ <svg class="msds-category-card__header-icon">
569
+ <use href="../../msds-spritemap.svg#right-arrow" />
570
+ </svg>
571
+ </div>
572
+ </div>
573
+ <div class="msds-category-card__content">
574
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
575
+ </div>
576
+ </a>
577
+ </div>
578
+ </div>
579
+
580
+ <div class="col-12 col-md-4">
581
+ <div class="msds-category-card">
582
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
583
+ <div class="msds-category-card__header">
584
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
585
+ <div class="msds-category-card__header-icon-container">
586
+ <svg class="msds-category-card__header-icon">
587
+ <use href="../../msds-spritemap.svg#right-arrow" />
588
+ </svg>
589
+ </div>
590
+ </div>
591
+ <div class="msds-category-card__content">
592
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
593
+ </div>
594
+ </a>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div> </div>
599
+
600
+ <div class="msds-tabs__content-container msds-bg-white">
601
+ <div class="container">
602
+ <div class="row card-row">
603
+ <div class="col-12 col-md-3">
604
+ <div class="msds-category-card msds-category-card--small">
605
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
606
+ <div class="msds-category-card__header">
607
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
608
+ <div class="msds-category-card__header-icon-container">
609
+ <svg class="msds-category-card__header-icon">
610
+ <use href="../../msds-spritemap.svg#right-arrow" />
611
+ </svg>
612
+ </div>
613
+ </div>
614
+ <div class="msds-category-card__content">
615
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
616
+ </div>
617
+ </a>
618
+ </div>
619
+ </div>
620
+
621
+ <div class="col-12 col-md-3">
622
+ <div class="msds-category-card msds-category-card--small">
623
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
624
+ <div class="msds-category-card__header">
625
+ <div class="msds-category-card__header-body">Lorem ipsum dolor sit</div>
626
+ <div class="msds-category-card__header-icon-container">
627
+ <svg class="msds-category-card__header-icon">
628
+ <use href="../../msds-spritemap.svg#right-arrow" />
629
+ </svg>
630
+ </div>
631
+ </div>
632
+ <div class="msds-category-card__content">
633
+ <div class="msds-category-card__content-body">Lorem ipsum dotari gink</div>
634
+ </div>
635
+ </a>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="col-12 col-md-3">
640
+ <div class="msds-category-card msds-category-card--small">
641
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
642
+ <div class="msds-category-card__header">
643
+ <div class="msds-category-card__header-body">Amet consectetur</div>
644
+ <div class="msds-category-card__header-icon-container">
645
+ <svg class="msds-category-card__header-icon">
646
+ <use href="../../msds-spritemap.svg#right-arrow" />
647
+ </svg>
648
+ </div>
649
+ </div>
650
+ <div class="msds-category-card__content">
651
+ <div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
652
+ </div>
653
+ </a>
654
+ </div>
655
+ </div>
656
+
657
+ <div class="col-12 col-md-3">
658
+ <div class="msds-category-card msds-category-card--small">
659
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
660
+ <div class="msds-category-card__header">
661
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
662
+ <div class="msds-category-card__header-icon-container">
663
+ <svg class="msds-category-card__header-icon">
664
+ <use href="../../msds-spritemap.svg#right-arrow" />
665
+ </svg>
666
+ </div>
667
+ </div>
668
+ <div class="msds-category-card__content">
669
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
670
+ </div>
671
+ </a>
672
+ </div>
673
+ </div>
674
+
675
+ <div class="col-12 col-md-3">
676
+ <div class="msds-category-card msds-category-card--small">
677
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
678
+ <div class="msds-category-card__header">
679
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
680
+ <div class="msds-category-card__header-icon-container">
681
+ <svg class="msds-category-card__header-icon">
682
+ <use href="../../msds-spritemap.svg#right-arrow" />
683
+ </svg>
684
+ </div>
685
+ </div>
686
+ <div class="msds-category-card__content">
687
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
688
+ </div>
689
+ </a>
690
+ </div>
691
+ </div>
692
+
693
+ <div class="col-12 col-md-3">
694
+ <div class="msds-category-card msds-category-card--small">
695
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
696
+ <div class="msds-category-card__header">
697
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
698
+ <div class="msds-category-card__header-icon-container">
699
+ <svg class="msds-category-card__header-icon">
700
+ <use href="../../msds-spritemap.svg#right-arrow" />
701
+ </svg>
702
+ </div>
703
+ </div>
704
+ <div class="msds-category-card__content">
705
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
706
+ </div>
707
+ </a>
708
+ </div>
709
+ </div>
710
+
711
+ <div class="col-12 col-md-3">
712
+ <div class="msds-category-card msds-category-card--small">
713
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
714
+ <div class="msds-category-card__header">
715
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
716
+ <div class="msds-category-card__header-icon-container">
717
+ <svg class="msds-category-card__header-icon">
718
+ <use href="../../msds-spritemap.svg#right-arrow" />
719
+ </svg>
720
+ </div>
721
+ </div>
722
+ <div class="msds-category-card__content">
723
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
724
+ </div>
725
+ </a>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="col-12 col-md-3">
730
+ <div class="msds-category-card msds-category-card--small">
731
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
732
+ <div class="msds-category-card__header">
733
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
734
+ <div class="msds-category-card__header-icon-container">
735
+ <svg class="msds-category-card__header-icon">
736
+ <use href="../../msds-spritemap.svg#right-arrow" />
737
+ </svg>
738
+ </div>
739
+ </div>
740
+ <div class="msds-category-card__content">
741
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
742
+ </div>
743
+ </a>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </div> </div>
748
+
749
+ <div class="msds-tabs__content-container msds-bg-white">
750
+ <div class="container">
751
+ <div class="row card-row">
752
+ <div class="col-12 col-md-4">
753
+ <div class="msds-category-card">
754
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
755
+ <div class="msds-category-card__header">
756
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
757
+ <div class="msds-category-card__header-icon-container">
758
+ <svg class="msds-category-card__header-icon">
759
+ <use href="../../msds-spritemap.svg#right-arrow" />
760
+ </svg>
761
+ </div>
762
+ </div>
763
+ <div class="msds-category-card__content">
764
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
765
+ </div>
766
+ </a>
767
+ </div>
768
+ </div>
769
+
770
+ <div class="col-12 col-md-4">
771
+ <div class="msds-category-card">
772
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
773
+ <div class="msds-category-card__header">
774
+ <div class="msds-category-card__header-body">Lorem ipsum dolor sit amet consectetur</div>
775
+ <div class="msds-category-card__header-icon-container">
776
+ <svg class="msds-category-card__header-icon">
777
+ <use href="../../msds-spritemap.svg#right-arrow" />
778
+ </svg>
779
+ </div>
780
+ </div>
781
+ <div class="msds-category-card__content">
782
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque</div>
783
+ </div>
784
+ </a>
785
+ </div>
786
+ </div>
787
+
788
+ <div class="col-12 col-md-4">
789
+ <div class="msds-category-card">
790
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
791
+ <div class="msds-category-card__header">
792
+ <div class="msds-category-card__header-body">Amet consectetur</div>
793
+ <div class="msds-category-card__header-icon-container">
794
+ <svg class="msds-category-card__header-icon">
795
+ <use href="../../msds-spritemap.svg#right-arrow" />
796
+ </svg>
797
+ </div>
798
+ </div>
799
+ <div class="msds-category-card__content">
800
+ <div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
801
+ </div>
802
+ </a>
803
+ </div>
804
+ </div>
805
+
806
+ <div class="col-12 col-md-4">
807
+ <div class="msds-category-card">
808
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
809
+ <div class="msds-category-card__header">
810
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
811
+ <div class="msds-category-card__header-icon-container">
812
+ <svg class="msds-category-card__header-icon">
813
+ <use href="../../msds-spritemap.svg#right-arrow" />
814
+ </svg>
815
+ </div>
816
+ </div>
817
+ <div class="msds-category-card__content">
818
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
819
+ </div>
820
+ </a>
821
+ </div>
822
+ </div>
823
+
824
+ <div class="col-12 col-md-4">
825
+ <div class="msds-category-card">
826
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
827
+ <div class="msds-category-card__header">
828
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
829
+ <div class="msds-category-card__header-icon-container">
830
+ <svg class="msds-category-card__header-icon">
831
+ <use href="../../msds-spritemap.svg#right-arrow" />
832
+ </svg>
833
+ </div>
834
+ </div>
835
+ <div class="msds-category-card__content">
836
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
837
+ </div>
838
+ </a>
839
+ </div>
840
+ </div>
841
+
842
+ <div class="col-12 col-md-4">
843
+ <div class="msds-category-card">
844
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
845
+ <div class="msds-category-card__header">
846
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
847
+ <div class="msds-category-card__header-icon-container">
848
+ <svg class="msds-category-card__header-icon">
849
+ <use href="../../msds-spritemap.svg#right-arrow" />
850
+ </svg>
851
+ </div>
852
+ </div>
853
+ <div class="msds-category-card__content">
854
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
855
+ </div>
856
+ </a>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </div> </div>
861
+
862
+ <div class="msds-tabs__content-container msds-bg-white">
863
+ <div class="container">
864
+ <div class="row card-row">
865
+ <div class="col-12 col-md-3">
866
+ <div class="msds-category-card msds-category-card--small">
867
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
868
+ <div class="msds-category-card__header">
869
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
870
+ <div class="msds-category-card__header-icon-container">
871
+ <svg class="msds-category-card__header-icon">
872
+ <use href="../../msds-spritemap.svg#right-arrow" />
873
+ </svg>
874
+ </div>
875
+ </div>
876
+ <div class="msds-category-card__content">
877
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
878
+ </div>
879
+ </a>
880
+ </div>
881
+ </div>
882
+
883
+ <div class="col-12 col-md-3">
884
+ <div class="msds-category-card msds-category-card--small">
885
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
886
+ <div class="msds-category-card__header">
887
+ <div class="msds-category-card__header-body">Lorem ipsum dolor sit</div>
888
+ <div class="msds-category-card__header-icon-container">
889
+ <svg class="msds-category-card__header-icon">
890
+ <use href="../../msds-spritemap.svg#right-arrow" />
891
+ </svg>
892
+ </div>
893
+ </div>
894
+ <div class="msds-category-card__content">
895
+ <div class="msds-category-card__content-body">Lorem ipsum dotari gink</div>
896
+ </div>
897
+ </a>
898
+ </div>
899
+ </div>
900
+
901
+ <div class="col-12 col-md-3">
902
+ <div class="msds-category-card msds-category-card--small">
903
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
904
+ <div class="msds-category-card__header">
905
+ <div class="msds-category-card__header-body">Amet consectetur</div>
906
+ <div class="msds-category-card__header-icon-container">
907
+ <svg class="msds-category-card__header-icon">
908
+ <use href="../../msds-spritemap.svg#right-arrow" />
909
+ </svg>
910
+ </div>
911
+ </div>
912
+ <div class="msds-category-card__content">
913
+ <div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
914
+ </div>
915
+ </a>
916
+ </div>
917
+ </div>
918
+
919
+ <div class="col-12 col-md-3">
920
+ <div class="msds-category-card msds-category-card--small">
921
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
922
+ <div class="msds-category-card__header">
923
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
924
+ <div class="msds-category-card__header-icon-container">
925
+ <svg class="msds-category-card__header-icon">
926
+ <use href="../../msds-spritemap.svg#right-arrow" />
927
+ </svg>
928
+ </div>
929
+ </div>
930
+ <div class="msds-category-card__content">
931
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
932
+ </div>
933
+ </a>
934
+ </div>
935
+ </div>
936
+
937
+ <div class="col-12 col-md-3">
938
+ <div class="msds-category-card msds-category-card--small">
939
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
940
+ <div class="msds-category-card__header">
941
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
942
+ <div class="msds-category-card__header-icon-container">
943
+ <svg class="msds-category-card__header-icon">
944
+ <use href="../../msds-spritemap.svg#right-arrow" />
945
+ </svg>
946
+ </div>
947
+ </div>
948
+ <div class="msds-category-card__content">
949
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
950
+ </div>
951
+ </a>
952
+ </div>
953
+ </div>
954
+
955
+ <div class="col-12 col-md-3">
956
+ <div class="msds-category-card msds-category-card--small">
957
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
958
+ <div class="msds-category-card__header">
959
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
960
+ <div class="msds-category-card__header-icon-container">
961
+ <svg class="msds-category-card__header-icon">
962
+ <use href="../../msds-spritemap.svg#right-arrow" />
963
+ </svg>
964
+ </div>
965
+ </div>
966
+ <div class="msds-category-card__content">
967
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
968
+ </div>
969
+ </a>
970
+ </div>
971
+ </div>
972
+
973
+ <div class="col-12 col-md-3">
974
+ <div class="msds-category-card msds-category-card--small">
975
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
976
+ <div class="msds-category-card__header">
977
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
978
+ <div class="msds-category-card__header-icon-container">
979
+ <svg class="msds-category-card__header-icon">
980
+ <use href="../../msds-spritemap.svg#right-arrow" />
981
+ </svg>
982
+ </div>
983
+ </div>
984
+ <div class="msds-category-card__content">
985
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
986
+ </div>
987
+ </a>
988
+ </div>
989
+ </div>
990
+
991
+ <div class="col-12 col-md-3">
992
+ <div class="msds-category-card msds-category-card--small">
993
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
994
+ <div class="msds-category-card__header">
995
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
996
+ <div class="msds-category-card__header-icon-container">
997
+ <svg class="msds-category-card__header-icon">
998
+ <use href="../../msds-spritemap.svg#right-arrow" />
999
+ </svg>
1000
+ </div>
1001
+ </div>
1002
+ <div class="msds-category-card__content">
1003
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
1004
+ </div>
1005
+ </a>
1006
+ </div>
1007
+ </div>
1008
+ </div>
1009
+ </div> </div>
1010
+
1011
+ <div class="msds-tabs__content-container msds-bg-white">
1012
+ <div class="container">
1013
+ <div class="row card-row">
1014
+ <div class="col-12 col-md-4">
1015
+ <div class="msds-category-card">
1016
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
1017
+ <div class="msds-category-card__header">
1018
+ <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
1019
+ <div class="msds-category-card__header-icon-container">
1020
+ <svg class="msds-category-card__header-icon">
1021
+ <use href="../../msds-spritemap.svg#right-arrow" />
1022
+ </svg>
1023
+ </div>
1024
+ </div>
1025
+ <div class="msds-category-card__content">
1026
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
1027
+ </div>
1028
+ </a>
1029
+ </div>
1030
+ </div>
1031
+
1032
+ <div class="col-12 col-md-4">
1033
+ <div class="msds-category-card">
1034
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
1035
+ <div class="msds-category-card__header">
1036
+ <div class="msds-category-card__header-body">Lorem ipsum dolor sit amet consectetur</div>
1037
+ <div class="msds-category-card__header-icon-container">
1038
+ <svg class="msds-category-card__header-icon">
1039
+ <use href="../../msds-spritemap.svg#right-arrow" />
1040
+ </svg>
1041
+ </div>
1042
+ </div>
1043
+ <div class="msds-category-card__content">
1044
+ <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque</div>
1045
+ </div>
1046
+ </a>
1047
+ </div>
1048
+ </div>
1049
+
1050
+ <div class="col-12 col-md-4">
1051
+ <div class="msds-category-card">
1052
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
1053
+ <div class="msds-category-card__header">
1054
+ <div class="msds-category-card__header-body">Amet consectetur</div>
1055
+ <div class="msds-category-card__header-icon-container">
1056
+ <svg class="msds-category-card__header-icon">
1057
+ <use href="../../msds-spritemap.svg#right-arrow" />
1058
+ </svg>
1059
+ </div>
1060
+ </div>
1061
+ <div class="msds-category-card__content">
1062
+ <div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
1063
+ </div>
1064
+ </a>
1065
+ </div>
1066
+ </div>
1067
+
1068
+ <div class="col-12 col-md-4">
1069
+ <div class="msds-category-card">
1070
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
1071
+ <div class="msds-category-card__header">
1072
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
1073
+ <div class="msds-category-card__header-icon-container">
1074
+ <svg class="msds-category-card__header-icon">
1075
+ <use href="../../msds-spritemap.svg#right-arrow" />
1076
+ </svg>
1077
+ </div>
1078
+ </div>
1079
+ <div class="msds-category-card__content">
1080
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
1081
+ </div>
1082
+ </a>
1083
+ </div>
1084
+ </div>
1085
+
1086
+ <div class="col-12 col-md-4">
1087
+ <div class="msds-category-card">
1088
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
1089
+ <div class="msds-category-card__header">
1090
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
1091
+ <div class="msds-category-card__header-icon-container">
1092
+ <svg class="msds-category-card__header-icon">
1093
+ <use href="../../msds-spritemap.svg#right-arrow" />
1094
+ </svg>
1095
+ </div>
1096
+ </div>
1097
+ <div class="msds-category-card__content">
1098
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
1099
+ </div>
1100
+ </a>
1101
+ </div>
1102
+ </div>
1103
+
1104
+ <div class="col-12 col-md-4">
1105
+ <div class="msds-category-card">
1106
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
1107
+ <div class="msds-category-card__header">
1108
+ <div class="msds-category-card__header-body">Lorem, ipsum</div>
1109
+ <div class="msds-category-card__header-icon-container">
1110
+ <svg class="msds-category-card__header-icon">
1111
+ <use href="../../msds-spritemap.svg#right-arrow" />
1112
+ </svg>
1113
+ </div>
1114
+ </div>
1115
+ <div class="msds-category-card__content">
1116
+ <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
1117
+ </div>
1118
+ </a>
1119
+ </div>
1120
+ </div>
1121
+ </div>
1122
+ </div> </div>
1123
+ </div>
1124
+ </div>
1125
+ <div class="msds-tabs-other-content"></div>
1126
+ </body>
1127
+ </html>
1128
+