@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/docs/component-documentation/cards/solution-cards.html ADDED
@@ -0,0 +1,1595 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr" class="no-js">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <script>
7
+ window.frctl = {
8
+ env: 'static'
9
+ };
10
+ </script>
11
+ <script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script>
12
+ <link rel="shortcut icon" href="../../../src/demo-img/favicon.ico" type="image/ico">
13
+
14
+ <link rel="stylesheet" href="../../../themes/mandelbrot/css/default.css?cachebust=1.4.0" type="text/css">
15
+
16
+ <link rel="stylesheet" href="../../../rich-icons-bundle.css?cachebust=1.4.0" type="text/css">
17
+
18
+ <link rel="stylesheet" href="../../../theme-overrides/styles.css?cachebust=1.4.0" type="text/css">
19
+
20
+ <link rel="stylesheet" href="../../../main.css?cachebust=1.4.0" type="text/css">
21
+
22
+ <link rel="stylesheet" href="../../../themes/mandelbrot/css/highlight.css?cachebust=1.4.0" type="text/css">
23
+
24
+
25
+ <title>Solution Cards | Milestone Web Design System</title>
26
+
27
+ </head>
28
+ <body>
29
+
30
+
31
+
32
+ <div class="Frame" id="frame">
33
+
34
+ <div class="Frame-header">
35
+ <div class="Header">
36
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">
37
+ <button class="Header-button Header-navToggle" data-action="toggle-sidebar">
38
+ <svg class="Header-navToggleIcon Header-navToggleIcon--open" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
39
+ <path d="M0 0h24v24H0z" fill="none"></path>
40
+ <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
41
+ </svg>
42
+ <svg class="Header-navToggleIcon Header-navToggleIcon--closed" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
43
+ <path d="M0 0h24v24H0z" fill="none"></path>
44
+ <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
45
+ </svg>
46
+ </button>
47
+ <div class="flex-child-header-txt">
48
+ <a href="../../../index.html" class="Header-title" data-pjax>
49
+ <img class="logo-test" src="../../../src/demo-img/milestone-logo-white.png" alt="logo"></a>
50
+ </a>
51
+ <h6 class="header-txt ">Digital Design System</h6>
52
+ </div>
53
+ <div class="github-milestone-system">
54
+ <a class="github-milestonesys-design-system" href="https://github.com/milestone-sys/web-design-system" target="_blank">
55
+ <img class="git-icon" src="../../../src/demo-img/giticon.png" alt="git icon"></a>
56
+ </a>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="Frame-body" data-role="body">
62
+
63
+ <div class="Frame-panel Frame-panel--main" data-role="main">
64
+ <div class="Frame-inner" id="pjax-container">
65
+
66
+
67
+ <div class="Document">
68
+
69
+ <div class="Document-header">
70
+
71
+ <h1 class="Document-title">Solution Cards</h1>
72
+
73
+
74
+
75
+
76
+ </div>
77
+
78
+ <div class="Document-content">
79
+
80
+
81
+
82
+ <div class="Prose">
83
+
84
+
85
+
86
+
87
+
88
+ <h2 id="the-solution-cards-are-used-everywhere-on-the-website-to-link-between-pages-and-demo-optional-solutions-within-milestone-systems">The solution cards are used everywhere on the website to link between pages and demo optional solutions within Milestone Systems</h2>
89
+ <p>Below you will find the different definitions and options to create your solution cards</p>
90
+ <h3 id="table-of-contents">Table of contents</h3>
91
+ <div class="row">
92
+ <div class="col-6">
93
+ <ul class="document__unordered-list">
94
+ <li class="document__unordered-list-item">
95
+ <a class="msds-link"href="#overview">Overview</a>
96
+ </li>
97
+ <ul class="document__unordered-list">
98
+ <li class="document__unordered-list-item">
99
+ <a class="msds-link"href="#global-definition">Global Definition</a>
100
+ </li>
101
+ <li class="document__unordered-list-item">
102
+ <a class="msds-link"href="#sizes">Sizes</a>
103
+ </li>
104
+ <ul class="document__unordered-list">
105
+ <li class="document__unordered-list-item">
106
+ <a class="msds-link"href="#large">Large</a>
107
+ </li>
108
+ <li class="document__unordered-list-item">
109
+ <a class="msds-link"href="#small">Small</a>
110
+ </li>
111
+ </ul>
112
+ </ul>
113
+ <li class="document__unordered-list-item">
114
+ <a class="msds-link"href="#solution-card-layouts">Solution Card Layouts</a>
115
+ </li>
116
+ <ul class="document__unordered-list">
117
+ <li class="document__unordered-list-item">
118
+ <a class="msds-link"href="#solution-card-default">Solution Card Default</a>
119
+ </li>
120
+ <li class="document__unordered-list-item">
121
+ <a class="msds-link"href="#solution-cards-with-optional-solution-badges">Solution Card With Optional Solution Badges</a>
122
+ </li>
123
+ <li class="document__unordered-list-item">
124
+ <a class="msds-link"href="#solution-cards-with-optional-certification-badges">Solution Card With Optional Certification Badges</a>
125
+ </li>
126
+ </ul>
127
+ </ul>
128
+ </div>
129
+ </div>
130
+
131
+ <h2 id="overview">Overview</h2>
132
+ <h3 id="global-definition">Global Definition</h3>
133
+ <p>Each solution card is based on a global CSS class called <code>“msds-solution-card”</code>. It is important to include this class first as it is the main CSS class of the component. Without this HTML class, you cannot utilize component.
134
+ There are 4 types of solution cards:</p>
135
+ <ul>
136
+ <li>The default Solution Cards</li>
137
+ <li>Solution Cards with optional solution badges</li>
138
+ <li>Solution Cards without a certification badges</li>
139
+ </ul>
140
+ <div class="element-preview">
141
+ <div class="element-preview__inner"><div class="container">
142
+ <div class="row card-row">
143
+ <div class="col-12 col-md-4">
144
+ <div class="msds-solution-card">
145
+ <div class="msds-solution-card__header">
146
+ <div class="msds-solution-card__header-logo-container">
147
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
148
+ class="msds-solution-card__header-logo-container-logo">
149
+ </div>
150
+ <div class="msds-solution-card__header-tag-container">
151
+ <div class="msds-tag msds-bg-dusty-green msds-text-white">
152
+ <div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
153
+ </div>
154
+ </div>
155
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
156
+ VisionLabs Face Recognition Plug-in
157
+ </h3>
158
+ </div>
159
+ <div class="msds-solution-card__body">
160
+ <div class="msds-solution-card__body-headline">
161
+ By xPrime
162
+ </div>
163
+ <p class="msds-solution-card__body-description ">
164
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
165
+ </p>
166
+ </div>
167
+ <div class="msds-solution-card__footer">
168
+ <div class="msds-solution-card__badge">
169
+ <div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified">
170
+ <svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
171
+ </div>
172
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
173
+ </div>
174
+ <div class="msds-solution-card__footer-buttons">
175
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
176
+ GET IN TOUCH
177
+ </div>
178
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
179
+ EXPLORE
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div class="col-12 col-md-4">
186
+ <div class="msds-solution-card">
187
+ <div class="msds-solution-card__header">
188
+ <div class="msds-solution-card__header-logo-container">
189
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
190
+ class="msds-solution-card__header-logo-container-logo">
191
+ </div>
192
+ <div class="msds-solution-card__header-tag-container">
193
+ <div class="msds-tag msds-bg-dusty-green msds-text-white">
194
+ <div class="msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
195
+ </div>
196
+ </div>
197
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
198
+ VisionLabs Face Recognition Plug-in
199
+ </h3>
200
+ </div>
201
+ <div class="msds-solution-card__body">
202
+ <div class="msds-solution-card__body-headline">
203
+ By xPrime
204
+ </div>
205
+ <p class="msds-solution-card__body-description ">
206
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
207
+ </p>
208
+ </div>
209
+ <div class="msds-solution-card__footer">
210
+ <div class="msds-solution-card__badge">
211
+ <div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--verified">
212
+ <svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
213
+ </div>
214
+ <span class="msds-solution-card__badge-text">Milestone Verified</span>
215
+ </div>
216
+ <div class="msds-solution-card__footer-buttons">
217
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
218
+ GET IN TOUCH
219
+ </div>
220
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
221
+ EXPLORE
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ <div class="col-12 col-md-4">
228
+ <div class="msds-solution-card">
229
+ <div class="msds-solution-card__header">
230
+ <div class="msds-solution-card__header-logo-container">
231
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
232
+ class="msds-solution-card__header-logo-container-logo">
233
+ </div>
234
+ <div class="msds-solution-card__header-tag-container">
235
+ <div class="msds-tag msds-bg-orange msds-text-white">
236
+ <div class="msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
237
+ </div>
238
+ </div>
239
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
240
+ VisionLabs Face Recognition Plug-in
241
+ </h3>
242
+ </div>
243
+ <div class="msds-solution-card__body">
244
+ <div class="msds-solution-card__body-headline">
245
+ By xPrime
246
+ </div>
247
+ <p class="msds-solution-card__body-description ">
248
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
249
+ </p>
250
+ </div>
251
+ <div class="msds-solution-card__footer">
252
+ <div class="msds-solution-card__badge">
253
+ <div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--verified">
254
+ <svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
255
+ </div>
256
+ <span class="msds-solution-card__badge-text">Milestone Verified</span>
257
+ </div>
258
+ <div class="msds-solution-card__footer-buttons">
259
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
260
+ GET IN TOUCH
261
+ </div>
262
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
263
+ EXPLORE
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div></div>
271
+ </div>
272
+
273
+ <h3 id="sizes">Sizes</h3>
274
+ <p>Solution Cards have two different sizes</p>
275
+ <div class="element-preview">
276
+ <div class="element-preview__inner"><div class="container">
277
+ <div class="row card-row">
278
+ <div class="col-12 col-md-4">
279
+ <div class="msds-solution-card">
280
+ <div class="msds-solution-card__header">
281
+ <div class="msds-solution-card__header-logo-container">
282
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
283
+ class="msds-solution-card__header-logo-container-logo">
284
+ </div>
285
+ <div class="msds-solution-card__header-tag-container">
286
+ <div class="msds-tag msds-bg-dusty-green msds-text-white">
287
+ <div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
288
+ </div>
289
+ </div>
290
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
291
+ VisionLabs Face Recognition Plug-in
292
+ </h3>
293
+ </div>
294
+ <div class="msds-solution-card__body">
295
+ <div class="msds-solution-card__body-headline">
296
+ By xPrime
297
+ </div>
298
+ <p class="msds-solution-card__body-description ">
299
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
300
+ </p>
301
+ </div>
302
+ <div class="msds-solution-card__footer">
303
+ <div class="msds-solution-card__badge">
304
+ <div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified">
305
+ <svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
306
+ </div>
307
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
308
+ </div>
309
+ <div class="msds-solution-card__footer-buttons">
310
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
311
+ GET IN TOUCH
312
+ </div>
313
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
314
+ EXPLORE
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ <div class="col-12 col-md-3">
321
+ <div class="msds-solution-card">
322
+ <div class="msds-solution-card__header">
323
+ <div class="msds-solution-card__header-logo-container">
324
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
325
+ class="msds-solution-card__header-logo-container-logo">
326
+ </div>
327
+ <div class="msds-solution-card__header-tag-container">
328
+ <div class="msds-tag msds-bg-dusty-green msds-text-white">
329
+ <div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
330
+ </div>
331
+ </div>
332
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
333
+ VisionLabs Face Recognition Plug-in
334
+ </h3>
335
+ </div>
336
+ <div class="msds-solution-card__body">
337
+ <div class="msds-solution-card__body-headline">
338
+ By xPrime
339
+ </div>
340
+ <p class="msds-solution-card__body-description ">
341
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
342
+ </p>
343
+ </div>
344
+ <div class="msds-solution-card__footer">
345
+ <div class="msds-solution-card__badge">
346
+ <div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified">
347
+ <svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
348
+ </div>
349
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
350
+ </div>
351
+ <div class="msds-solution-card__footer-buttons">
352
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
353
+ GET IN TOUCH
354
+ </div>
355
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
356
+ EXPLORE
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div></div>
364
+ </div>
365
+
366
+ <h4 id="large-solution-cards">Large Solution Cards</h4>
367
+ <p>When using large solution cards, make use of the bootstrap column <code>col-md-4<code>.</p>
368
+ <div class="element-preview">
369
+ <div class="element-preview__inner"><div class="container">
370
+ <div class="row card-row">
371
+ <div class="col-12 col-md-4">
372
+ <div class="msds-solution-card">
373
+ <div class="msds-solution-card__header">
374
+ <div class="msds-solution-card__header-logo-container">
375
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
376
+ class="msds-solution-card__header-logo-container-logo">
377
+ </div>
378
+ <div class="msds-solution-card__header-tag-container">
379
+ <div class="msds-tag msds-bg-dusty-green msds-text-white">
380
+ <div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
381
+ </div>
382
+ </div>
383
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
384
+ VisionLabs Face Recognition Plug-in
385
+ </h3>
386
+ </div>
387
+ <div class="msds-solution-card__body">
388
+ <div class="msds-solution-card__body-headline">
389
+ By xPrime
390
+ </div>
391
+ <p class="msds-solution-card__body-description ">
392
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
393
+ </p>
394
+ </div>
395
+ <div class="msds-solution-card__footer">
396
+ <div class="msds-solution-card__badge">
397
+ <div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified">
398
+ <svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
399
+ </div>
400
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
401
+ </div>
402
+ <div class="msds-solution-card__footer-buttons">
403
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
404
+ GET IN TOUCH
405
+ </div>
406
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
407
+ EXPLORE
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div></div>
415
+ </div>
416
+
417
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
418
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row card-row"</span>&gt;</span>
419
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
420
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card"</span>&gt;</span>
421
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header"</span>&gt;</span>
422
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container"</span>&gt;</span>
423
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">" ../../../src/demo-img/visionlabs.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"solution card image"</span>
424
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container-logo"</span>&gt;</span>
425
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
426
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-tag-container"</span>&gt;</span>
427
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-tag msds-bg-dusty-green msds-text-white"</span>&gt;</span>
428
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-msds-tag-text msds-text-body-3-bold text-nowrap"</span>&gt;</span>Hardware &amp; software<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
429
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
430
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
431
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-headline msds-text-header-4"</span>&gt;</span>
432
+ VisionLabs Face Recognition Plug-in
433
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
434
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
435
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body"</span>&gt;</span>
436
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-headline"</span>&gt;</span>
437
+ By xPrime
438
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
439
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-description "</span>&gt;</span>
440
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
441
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
442
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
443
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer"</span>&gt;</span>
444
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge"</span>&gt;</span>
445
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified"</span>&gt;</span>
446
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#checkmark"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
447
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
448
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-text"</span>&gt;</span>Milestone Certified<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
449
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
450
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons"</span>&gt;</span>
451
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8"</span>&gt;</span>
452
+ GET IN TOUCH
453
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
454
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue"</span>&gt;</span>
455
+ EXPLORE
456
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
457
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
458
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
459
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
460
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
461
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
462
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h4 id="small-solution-cards">Small Solution Cards</h4>
463
+ <p>When using small solution cards, make use of the bootstrap column <code>col-md-3<code>.</p>
464
+ <div class="element-preview">
465
+ <div class="element-preview__inner"><div class="container">
466
+ <div class="row card-row">
467
+ <div class="col-12 col-md-3">
468
+ <div class="msds-solution-card">
469
+ <div class="msds-solution-card__header">
470
+ <div class="msds-solution-card__header-logo-container">
471
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
472
+ class="msds-solution-card__header-logo-container-logo">
473
+ </div>
474
+ <div class="msds-solution-card__header-tag-container">
475
+ <div class="msds-tag msds-bg-dusty-green msds-text-white">
476
+ <div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
477
+ </div>
478
+ </div>
479
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
480
+ VisionLabs Face Recognition Plug-in
481
+ </h3>
482
+ </div>
483
+ <div class="msds-solution-card__body">
484
+ <div class="msds-solution-card__body-headline">
485
+ By xPrime
486
+ </div>
487
+ <p class="msds-solution-card__body-description ">
488
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
489
+ </p>
490
+ </div>
491
+ <div class="msds-solution-card__footer">
492
+ <div class="msds-solution-card__badge">
493
+ <div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified">
494
+ <svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
495
+ </div>
496
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
497
+ </div>
498
+ <div class="msds-solution-card__footer-buttons">
499
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
500
+ GET IN TOUCH
501
+ </div>
502
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
503
+ EXPLORE
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div></div>
511
+ </div>
512
+
513
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
514
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row card-row"</span>&gt;</span>
515
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-3"</span>&gt;</span>
516
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card"</span>&gt;</span>
517
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header"</span>&gt;</span>
518
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container"</span>&gt;</span>
519
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">" ../../../src/demo-img/visionlabs.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"solution card image"</span>
520
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container-logo"</span>&gt;</span>
521
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
522
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-tag-container"</span>&gt;</span>
523
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-tag msds-bg-dusty-green msds-text-white"</span>&gt;</span>
524
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-msds-tag-text msds-text-body-3-bold text-nowrap"</span>&gt;</span>Hardware &amp; software<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
525
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
526
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
527
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-headline msds-text-header-4"</span>&gt;</span>
528
+ VisionLabs Face Recognition Plug-in
529
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
530
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
531
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body"</span>&gt;</span>
532
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-headline"</span>&gt;</span>
533
+ By xPrime
534
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
535
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-description "</span>&gt;</span>
536
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
537
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
538
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
539
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer"</span>&gt;</span>
540
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge"</span>&gt;</span>
541
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified"</span>&gt;</span>
542
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#checkmark"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
543
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
544
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-text"</span>&gt;</span>Milestone Certified<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
545
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
546
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons"</span>&gt;</span>
547
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8"</span>&gt;</span>
548
+ GET IN TOUCH
549
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
550
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue"</span>&gt;</span>
551
+ EXPLORE
552
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
553
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
554
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
555
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
556
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
557
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
558
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="solution-card-layouts">Solution Card Layouts</h3>
559
+ <p>Below are the different Solution Card layouts</p>
560
+ <h4 id="solution-card-default">Solution Card Default</h4>
561
+ <p>Below is an example of the default Solution Card </p>
562
+ <div class="element-preview">
563
+ <div class="element-preview__inner"><div class="container">
564
+ <div class="row card-row">
565
+ <div class="col-12 col-md-4">
566
+ <div class="msds-solution-card">
567
+ <div class="msds-solution-card__header">
568
+ <div class="msds-solution-card__header-logo-container">
569
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
570
+ class="msds-solution-card__header-logo-container-logo">
571
+ </div>
572
+ <div class="msds-solution-card__header-tag-container">
573
+ <div class="msds-tag msds-bg-dusty-green msds-text-white">
574
+ <div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
575
+ </div>
576
+ </div>
577
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
578
+ VisionLabs Face Recognition Plug-in
579
+ </h3>
580
+ </div>
581
+ <div class="msds-solution-card__body">
582
+ <div class="msds-solution-card__body-headline">
583
+ By xPrime
584
+ </div>
585
+ <p class="msds-solution-card__body-description ">
586
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
587
+ </p>
588
+ </div>
589
+ <div class="msds-solution-card__footer">
590
+ <div class="msds-solution-card__badge">
591
+ <div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified">
592
+ <svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
593
+ </div>
594
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
595
+ </div>
596
+ <div class="msds-solution-card__footer-buttons">
597
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
598
+ GET IN TOUCH
599
+ </div>
600
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
601
+ EXPLORE
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div></div>
609
+ </div>
610
+
611
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
612
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row card-row"</span>&gt;</span>
613
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
614
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card"</span>&gt;</span>
615
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header"</span>&gt;</span>
616
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container"</span>&gt;</span>
617
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">" ../../../src/demo-img/visionlabs.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"solution card image"</span>
618
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container-logo"</span>&gt;</span>
619
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
620
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-tag-container"</span>&gt;</span>
621
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-tag msds-bg-dusty-green msds-text-white"</span>&gt;</span>
622
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-msds-tag-text msds-text-body-3-bold text-nowrap"</span>&gt;</span>Hardware &amp; software<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
623
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
624
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
625
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-headline msds-text-header-4"</span>&gt;</span>
626
+ VisionLabs Face Recognition Plug-in
627
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
628
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
629
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body"</span>&gt;</span>
630
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-headline"</span>&gt;</span>
631
+ By xPrime
632
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
633
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-description "</span>&gt;</span>
634
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
635
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
636
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
637
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer"</span>&gt;</span>
638
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge"</span>&gt;</span>
639
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified"</span>&gt;</span>
640
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#checkmark"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
641
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
642
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-text"</span>&gt;</span>Milestone Certified<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
643
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
644
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons"</span>&gt;</span>
645
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8"</span>&gt;</span>
646
+ GET IN TOUCH
647
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
648
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue"</span>&gt;</span>
649
+ EXPLORE
650
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
651
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
652
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
653
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
654
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
655
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
656
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h4 id="solution-cards-with-optional-solution-badges">Solution Cards With Optional Solution Badges</h4>
657
+ <p>Solution Cards can have option solution badges</p>
658
+ <div class="element-preview">
659
+ <div class="element-preview__inner"><div class="container">
660
+ <div class="col-12 col-md-4">
661
+ <div class="msds-solution-card">
662
+ <div class="msds-solution-card__header">
663
+ <div class="msds-solution-card__header-logo-container">
664
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
665
+ class="msds-solution-card__header-logo-container-logo">
666
+ </div>
667
+ <div class="msds-solution-card__header-tag-container">
668
+ <div class="msds-tag msds-bg-dusty-green msds-text-white">
669
+ <div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
670
+ </div>
671
+ </div>
672
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
673
+ VisionLabs Face Recognition Plug-in
674
+ </h3>
675
+ </div>
676
+ <div class="msds-solution-card__body">
677
+ <div class="msds-solution-card__body-headline">
678
+ By xPrime
679
+ </div>
680
+ <p class="msds-solution-card__body-description ">
681
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
682
+ </p>
683
+ <div class="msds-solution-card__badge">
684
+ <div class="msds-solution-card__badge-icon-container">
685
+ <svg class="msds-icon msds-text-gray-9">
686
+ <use href="../../../msds-spritemap.svg#certification" />
687
+ </svg>
688
+ </div>
689
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
690
+ </div>
691
+ <div class="msds-solution-card__badge">
692
+ <div class="msds-solution-card__badge-icon-container">
693
+ <svg class="msds-icon msds-text-gray-9">
694
+ <use href="../../../msds-spritemap.svg#location" />
695
+ </svg>
696
+ </div>
697
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
698
+ </div>
699
+ </div>
700
+ <div class="msds-solution-card__footer">
701
+ <div class="msds-solution-card__footer-buttons">
702
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
703
+ GET IN TOUCH
704
+ </div>
705
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
706
+ EXPLORE
707
+ </div>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </div></div>
713
+ </div>
714
+
715
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
716
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
717
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card"</span>&gt;</span>
718
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header"</span>&gt;</span>
719
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container"</span>&gt;</span>
720
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">" ../../../src/demo-img/visionlabs.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"solution card image"</span>
721
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container-logo"</span>&gt;</span>
722
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
723
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-tag-container"</span>&gt;</span>
724
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-tag msds-bg-dusty-green msds-text-white"</span>&gt;</span>
725
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-msds-tag-text msds-text-body-3-bold text-nowrap"</span>&gt;</span>Hardware &amp; software<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
726
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
727
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
728
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-headline msds-text-header-4"</span>&gt;</span>
729
+ VisionLabs Face Recognition Plug-in
730
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
731
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
732
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body"</span>&gt;</span>
733
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-headline"</span>&gt;</span>
734
+ By xPrime
735
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
736
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-description "</span>&gt;</span>
737
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
738
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
739
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge"</span>&gt;</span>
740
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-icon-container"</span>&gt;</span>
741
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon msds-text-gray-9"</span>&gt;</span>
742
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#certification"</span> /&gt;</span>
743
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
744
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
745
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-text"</span>&gt;</span>Milestone Certified<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
746
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
747
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge"</span>&gt;</span>
748
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-icon-container"</span>&gt;</span>
749
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon msds-text-gray-9"</span>&gt;</span>
750
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#location"</span> /&gt;</span>
751
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
752
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
753
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-text"</span>&gt;</span>Milestone Certified<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
754
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
755
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
756
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer"</span>&gt;</span>
757
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons"</span>&gt;</span>
758
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8"</span>&gt;</span>
759
+ GET IN TOUCH
760
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
761
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue"</span>&gt;</span>
762
+ EXPLORE
763
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
764
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
765
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
766
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
767
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
768
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h4 id="solution-cards-with-optional-certification-badges">Solution Cards With Optional Certification Badges</h4>
769
+ <p>Solution Cards can have option certification badges</p>
770
+ <div class="element-preview">
771
+ <div class="element-preview__inner"><div class="container">
772
+ <div class="col-12 col-md-4">
773
+ <div class="msds-solution-card">
774
+ <div class="msds-solution-card__header">
775
+ <div class="msds-solution-card__header-logo-container">
776
+ <img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
777
+ class="msds-solution-card__header-logo-container-logo">
778
+ </div>
779
+ <div class="msds-solution-card__header-tag-container">
780
+ <div class="msds-tag msds-bg-dusty-green msds-text-white">
781
+ <div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
782
+ </div>
783
+ </div>
784
+ <h3 class="msds-solution-card__header-headline msds-text-header-4">
785
+ VisionLabs Face Recognition Plug-in
786
+ </h3>
787
+ </div>
788
+ <div class="msds-solution-card__body">
789
+ <div class="msds-solution-card__body-headline">
790
+ By xPrime
791
+ </div>
792
+ <p class="msds-solution-card__body-description ">
793
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
794
+ </p>
795
+ <div class="msds-solution-card__badge">
796
+ <div class="msds-solution-card__badge-icon-container">
797
+ <svg class="msds-icon msds-text-gray-9">
798
+ <use href="../../../msds-spritemap.svg#certification" />
799
+ </svg>
800
+ </div>
801
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
802
+ </div>
803
+ <div class="msds-solution-card__badge">
804
+ <div class="msds-solution-card__badge-icon-container">
805
+ <svg class="msds-icon msds-text-gray-9">
806
+ <use href="../../../msds-spritemap.svg#location" />
807
+ </svg>
808
+ </div>
809
+ <span class="msds-solution-card__badge-text">Milestone Certified</span>
810
+ </div>
811
+ </div>
812
+ <div class="msds-solution-card__footer">
813
+ <div class="msds-solution-card__footer-buttons">
814
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
815
+ GET IN TOUCH
816
+ </div>
817
+ <div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
818
+ EXPLORE
819
+ </div>
820
+ </div>
821
+ </div>
822
+ </div>
823
+ </div>
824
+ </div></div>
825
+ </div>
826
+
827
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
828
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
829
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card"</span>&gt;</span>
830
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header"</span>&gt;</span>
831
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container"</span>&gt;</span>
832
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">" ../../../src/demo-img/visionlabs.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"solution card image"</span>
833
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-logo-container-logo"</span>&gt;</span>
834
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
835
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-tag-container"</span>&gt;</span>
836
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-tag msds-bg-dusty-green msds-text-white"</span>&gt;</span>
837
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-msds-tag-text msds-text-body-3-bold text-nowrap"</span>&gt;</span>Hardware &amp; software<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
838
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
839
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
840
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__header-headline msds-text-header-4"</span>&gt;</span>
841
+ VisionLabs Face Recognition Plug-in
842
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
843
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
844
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body"</span>&gt;</span>
845
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-headline"</span>&gt;</span>
846
+ By xPrime
847
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
848
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__body-description "</span>&gt;</span>
849
+ Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
850
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
851
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge"</span>&gt;</span>
852
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-icon-container"</span>&gt;</span>
853
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon msds-text-gray-9"</span>&gt;</span>
854
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#certification"</span> /&gt;</span>
855
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
856
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
857
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-text"</span>&gt;</span>Milestone Certified<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
858
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
859
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge"</span>&gt;</span>
860
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-icon-container"</span>&gt;</span>
861
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon msds-text-gray-9"</span>&gt;</span>
862
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#location"</span> /&gt;</span>
863
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
864
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
865
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__badge-text"</span>&gt;</span>Milestone Certified<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
866
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
867
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
868
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer"</span>&gt;</span>
869
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons"</span>&gt;</span>
870
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8"</span>&gt;</span>
871
+ GET IN TOUCH
872
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
873
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue"</span>&gt;</span>
874
+ EXPLORE
875
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
876
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
877
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
878
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
879
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
880
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
881
+
882
+
883
+
884
+ </div>
885
+
886
+
887
+
888
+ </div>
889
+
890
+ </div>
891
+
892
+
893
+ </div>
894
+ </div>
895
+
896
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
897
+
898
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
899
+ <nav class="Navigation">
900
+
901
+
902
+ <div class="Navigation-group">
903
+
904
+ <div class="Tree" data-behaviour="tree" id="tree-components">
905
+ <div class="Tree-header">
906
+ <h3 class="Tree-title">components</h3>
907
+
908
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
909
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z"/></svg>
910
+
911
+ </button>
912
+ </div>
913
+ <ul class="Tree-items Tree-depth-1">
914
+
915
+
916
+
917
+
918
+ <li class="Tree-item Tree-entity" data-role="item">
919
+ <a class="Tree-entityLink" href="../../../components/detail/tab-tile.html" data-pjax>
920
+ <span>Tab Tile</span>
921
+
922
+
923
+ <div class="Status Status--unlabelled">
924
+
925
+ <div class="Status-dots">
926
+
927
+
928
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
929
+
930
+
931
+ </div>
932
+
933
+ </div>
934
+
935
+
936
+ </a>
937
+ </li>
938
+
939
+
940
+
941
+ </ul>
942
+ </div>
943
+
944
+ </div>
945
+
946
+
947
+
948
+
949
+ <div class="Navigation-group">
950
+
951
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
952
+ <div class="Tree-header">
953
+ <h3 class="Tree-title">documentation</h3>
954
+
955
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
956
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z"/></svg>
957
+
958
+ </button>
959
+ </div>
960
+ <ul class="Tree-items Tree-depth-1">
961
+
962
+
963
+
964
+
965
+ <li class="Tree-item Tree-entity" data-role="item">
966
+ <a class="Tree-entityLink" href="../../../index.html" data-pjax>
967
+ <span>Overview</span>
968
+
969
+ </a>
970
+ </li>
971
+
972
+
973
+
974
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
975
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
976
+ Content
977
+ </button>
978
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
979
+
980
+
981
+
982
+
983
+
984
+
985
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
986
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
987
+ Icons
988
+ </button>
989
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
990
+
991
+
992
+
993
+
994
+
995
+
996
+
997
+ <li class="Tree-item Tree-entity" data-role="item">
998
+ <a class="Tree-entityLink" href="../../content/icons/-overview.html" data-pjax>
999
+ <span>Overview</span>
1000
+
1001
+ </a>
1002
+ </li>
1003
+
1004
+
1005
+
1006
+
1007
+ <li class="Tree-item Tree-entity" data-role="item">
1008
+ <a class="Tree-entityLink" href="../../content/icons/icons-flat.html" data-pjax>
1009
+ <span>Icons Flat</span>
1010
+
1011
+ </a>
1012
+ </li>
1013
+
1014
+
1015
+
1016
+
1017
+ <li class="Tree-item Tree-entity" data-role="item">
1018
+ <a class="Tree-entityLink" href="../../content/icons/icons-rich.html" data-pjax>
1019
+ <span>Icons Rich</span>
1020
+
1021
+ </a>
1022
+ </li>
1023
+
1024
+
1025
+
1026
+ </ul>
1027
+ </li>
1028
+
1029
+
1030
+
1031
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
1032
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
1033
+ Typography
1034
+ </button>
1035
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
1036
+
1037
+
1038
+
1039
+
1040
+
1041
+
1042
+
1043
+ <li class="Tree-item Tree-entity" data-role="item">
1044
+ <a class="Tree-entityLink" href="../../content/typography/-overview.html" data-pjax>
1045
+ <span>Overview</span>
1046
+
1047
+ </a>
1048
+ </li>
1049
+
1050
+
1051
+
1052
+
1053
+ <li class="Tree-item Tree-entity" data-role="item">
1054
+ <a class="Tree-entityLink" href="../../content/typography/font-colors.html" data-pjax>
1055
+ <span>Font Colors</span>
1056
+
1057
+ </a>
1058
+ </li>
1059
+
1060
+
1061
+
1062
+
1063
+ <li class="Tree-item Tree-entity" data-role="item">
1064
+ <a class="Tree-entityLink" href="../../content/typography/links.html" data-pjax>
1065
+ <span>Links</span>
1066
+
1067
+ </a>
1068
+ </li>
1069
+
1070
+
1071
+
1072
+
1073
+ <li class="Tree-item Tree-entity" data-role="item">
1074
+ <a class="Tree-entityLink" href="../../content/typography/lists.html" data-pjax>
1075
+ <span>Lists</span>
1076
+
1077
+ </a>
1078
+ </li>
1079
+
1080
+
1081
+
1082
+
1083
+ <li class="Tree-item Tree-entity" data-role="item">
1084
+ <a class="Tree-entityLink" href="../../content/typography/text.html" data-pjax>
1085
+ <span>Text</span>
1086
+
1087
+ </a>
1088
+ </li>
1089
+
1090
+
1091
+
1092
+ </ul>
1093
+ </li>
1094
+
1095
+
1096
+
1097
+ </ul>
1098
+ </li>
1099
+
1100
+
1101
+
1102
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
1103
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
1104
+ Component Documentation
1105
+ </button>
1106
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
1107
+
1108
+
1109
+
1110
+
1111
+
1112
+
1113
+
1114
+ <li class="Tree-item Tree-entity" data-role="item">
1115
+ <a class="Tree-entityLink" href="../alerts.html" data-pjax>
1116
+ <span>Alerts</span>
1117
+
1118
+ </a>
1119
+ </li>
1120
+
1121
+
1122
+
1123
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
1124
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
1125
+ Buttons
1126
+ </button>
1127
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
1128
+
1129
+
1130
+
1131
+
1132
+
1133
+
1134
+
1135
+ <li class="Tree-item Tree-entity" data-role="item">
1136
+ <a class="Tree-entityLink" href="../buttons/buttons.html" data-pjax>
1137
+ <span>Buttons</span>
1138
+
1139
+ </a>
1140
+ </li>
1141
+
1142
+
1143
+
1144
+
1145
+ <li class="Tree-item Tree-entity" data-role="item">
1146
+ <a class="Tree-entityLink" href="../buttons/buttons-floating.html" data-pjax>
1147
+ <span>Buttons Floating</span>
1148
+
1149
+ </a>
1150
+ </li>
1151
+
1152
+
1153
+
1154
+ </ul>
1155
+ </li>
1156
+
1157
+
1158
+
1159
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
1160
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
1161
+ Cards
1162
+ </button>
1163
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
1164
+
1165
+
1166
+
1167
+
1168
+
1169
+
1170
+
1171
+ <li class="Tree-item Tree-entity" data-role="item">
1172
+ <a class="Tree-entityLink" href="basic-cards.html" data-pjax>
1173
+ <span>Basic Cards</span>
1174
+
1175
+ </a>
1176
+ </li>
1177
+
1178
+
1179
+
1180
+
1181
+ <li class="Tree-item Tree-entity" data-role="item">
1182
+ <a class="Tree-entityLink" href="category-cards.html" data-pjax>
1183
+ <span>Category Cards</span>
1184
+
1185
+ </a>
1186
+ </li>
1187
+
1188
+
1189
+
1190
+
1191
+ <li class="Tree-item Tree-entity" data-role="item">
1192
+ <a class="Tree-entityLink" href="contact-cards.html" data-pjax>
1193
+ <span>Contact Cards</span>
1194
+
1195
+ </a>
1196
+ </li>
1197
+
1198
+
1199
+
1200
+
1201
+ <li class="Tree-item Tree-entity" data-role="item">
1202
+ <a class="Tree-entityLink" href="generic-cards.html" data-pjax>
1203
+ <span>Generic Cards</span>
1204
+
1205
+ </a>
1206
+ </li>
1207
+
1208
+
1209
+
1210
+
1211
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
1212
+ <a class="Tree-entityLink" href="" data-pjax>
1213
+ <span>Solution Cards</span>
1214
+
1215
+ </a>
1216
+ </li>
1217
+
1218
+
1219
+
1220
+ </ul>
1221
+ </li>
1222
+
1223
+
1224
+
1225
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
1226
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
1227
+ Dividers
1228
+ </button>
1229
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
1230
+
1231
+
1232
+
1233
+
1234
+
1235
+
1236
+
1237
+ <li class="Tree-item Tree-entity" data-role="item">
1238
+ <a class="Tree-entityLink" href="../dividers/dividers.html" data-pjax>
1239
+ <span>Dividers</span>
1240
+
1241
+ </a>
1242
+ </li>
1243
+
1244
+
1245
+
1246
+ </ul>
1247
+ </li>
1248
+
1249
+
1250
+
1251
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
1252
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
1253
+ Expanding Components
1254
+ </button>
1255
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
1256
+
1257
+
1258
+
1259
+
1260
+
1261
+
1262
+
1263
+ <li class="Tree-item Tree-entity" data-role="item">
1264
+ <a class="Tree-entityLink" href="../expanding-components/accordion.html" data-pjax>
1265
+ <span>Accordion</span>
1266
+
1267
+ </a>
1268
+ </li>
1269
+
1270
+
1271
+
1272
+
1273
+ <li class="Tree-item Tree-entity" data-role="item">
1274
+ <a class="Tree-entityLink" href="../expanding-components/section.html" data-pjax>
1275
+ <span>Section</span>
1276
+
1277
+ </a>
1278
+ </li>
1279
+
1280
+
1281
+
1282
+ </ul>
1283
+ </li>
1284
+
1285
+
1286
+
1287
+
1288
+ <li class="Tree-item Tree-entity" data-role="item">
1289
+ <a class="Tree-entityLink" href="../modal.html" data-pjax>
1290
+ <span>Modal</span>
1291
+
1292
+ </a>
1293
+ </li>
1294
+
1295
+
1296
+
1297
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
1298
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
1299
+ Popover
1300
+ </button>
1301
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
1302
+
1303
+
1304
+
1305
+
1306
+
1307
+
1308
+
1309
+ <li class="Tree-item Tree-entity" data-role="item">
1310
+ <a class="Tree-entityLink" href="../popover/popover.html" data-pjax>
1311
+ <span>Popover</span>
1312
+
1313
+ </a>
1314
+ </li>
1315
+
1316
+
1317
+
1318
+ </ul>
1319
+ </li>
1320
+
1321
+
1322
+
1323
+
1324
+ <li class="Tree-item Tree-entity" data-role="item">
1325
+ <a class="Tree-entityLink" href="../progress-bar.html" data-pjax>
1326
+ <span>Progress Bar</span>
1327
+
1328
+ </a>
1329
+ </li>
1330
+
1331
+
1332
+
1333
+
1334
+ <li class="Tree-item Tree-entity" data-role="item">
1335
+ <a class="Tree-entityLink" href="../spacing.html" data-pjax>
1336
+ <span>Spacing</span>
1337
+
1338
+ </a>
1339
+ </li>
1340
+
1341
+
1342
+
1343
+
1344
+ <li class="Tree-item Tree-entity" data-role="item">
1345
+ <a class="Tree-entityLink" href="../table.html" data-pjax>
1346
+ <span>Table</span>
1347
+
1348
+ </a>
1349
+ </li>
1350
+
1351
+
1352
+
1353
+ </ul>
1354
+ </li>
1355
+
1356
+
1357
+
1358
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
1359
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
1360
+ Forms
1361
+ </button>
1362
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
1363
+
1364
+
1365
+
1366
+
1367
+
1368
+
1369
+
1370
+ <li class="Tree-item Tree-entity" data-role="item">
1371
+ <a class="Tree-entityLink" href="../../forms/-overview.html" data-pjax>
1372
+ <span>Overview</span>
1373
+
1374
+ </a>
1375
+ </li>
1376
+
1377
+
1378
+
1379
+
1380
+ <li class="Tree-item Tree-entity" data-role="item">
1381
+ <a class="Tree-entityLink" href="../../forms/checkbox.html" data-pjax>
1382
+ <span>Checkbox</span>
1383
+
1384
+ </a>
1385
+ </li>
1386
+
1387
+
1388
+
1389
+
1390
+ <li class="Tree-item Tree-entity" data-role="item">
1391
+ <a class="Tree-entityLink" href="../../forms/drop-down-list.html" data-pjax>
1392
+ <span>Drop Down List</span>
1393
+
1394
+ </a>
1395
+ </li>
1396
+
1397
+
1398
+
1399
+
1400
+ <li class="Tree-item Tree-entity" data-role="item">
1401
+ <a class="Tree-entityLink" href="../../forms/input-field.html" data-pjax>
1402
+ <span>Input Field</span>
1403
+
1404
+ </a>
1405
+ </li>
1406
+
1407
+
1408
+
1409
+
1410
+ <li class="Tree-item Tree-entity" data-role="item">
1411
+ <a class="Tree-entityLink" href="../../forms/radio-button.html" data-pjax>
1412
+ <span>Radio Button</span>
1413
+
1414
+ </a>
1415
+ </li>
1416
+
1417
+
1418
+
1419
+
1420
+ <li class="Tree-item Tree-entity" data-role="item">
1421
+ <a class="Tree-entityLink" href="../../forms/switch.html" data-pjax>
1422
+ <span>Switch</span>
1423
+
1424
+ </a>
1425
+ </li>
1426
+
1427
+
1428
+
1429
+
1430
+ <li class="Tree-item Tree-entity" data-role="item">
1431
+ <a class="Tree-entityLink" href="../../forms/text-area.html" data-pjax>
1432
+ <span>Text Area</span>
1433
+
1434
+ </a>
1435
+ </li>
1436
+
1437
+
1438
+
1439
+ </ul>
1440
+ </li>
1441
+
1442
+
1443
+
1444
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
1445
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
1446
+ Utilities
1447
+ </button>
1448
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
1449
+
1450
+
1451
+
1452
+
1453
+
1454
+
1455
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
1456
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
1457
+ Colors
1458
+ </button>
1459
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
1460
+
1461
+
1462
+
1463
+
1464
+
1465
+
1466
+
1467
+ <li class="Tree-item Tree-entity" data-role="item">
1468
+ <a class="Tree-entityLink" href="../../utilities/colors/overview.html" data-pjax>
1469
+ <span>Overview</span>
1470
+
1471
+ </a>
1472
+ </li>
1473
+
1474
+
1475
+
1476
+
1477
+ <li class="Tree-item Tree-entity" data-role="item">
1478
+ <a class="Tree-entityLink" href="../../utilities/colors/font-colors.html" data-pjax>
1479
+ <span>Font Colors</span>
1480
+
1481
+ </a>
1482
+ </li>
1483
+
1484
+
1485
+
1486
+
1487
+ <li class="Tree-item Tree-entity" data-role="item">
1488
+ <a class="Tree-entityLink" href="../../utilities/colors/background-colors.html" data-pjax>
1489
+ <span>Background Colors</span>
1490
+
1491
+ </a>
1492
+ </li>
1493
+
1494
+
1495
+
1496
+ </ul>
1497
+ </li>
1498
+
1499
+
1500
+
1501
+
1502
+ <li class="Tree-item Tree-entity" data-role="item">
1503
+ <a class="Tree-entityLink" href="../../utilities/spacing.html" data-pjax>
1504
+ <span>Spacing</span>
1505
+
1506
+ </a>
1507
+ </li>
1508
+
1509
+
1510
+
1511
+ </ul>
1512
+ </li>
1513
+
1514
+
1515
+
1516
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1517
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1518
+ Guidelines And Guides
1519
+ </button>
1520
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1521
+
1522
+
1523
+
1524
+
1525
+
1526
+
1527
+
1528
+ <li class="Tree-item Tree-entity" data-role="item">
1529
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/creating-a-new-release.html" data-pjax>
1530
+ <span>Creating A New Release</span>
1531
+
1532
+ </a>
1533
+ </li>
1534
+
1535
+
1536
+
1537
+
1538
+ <li class="Tree-item Tree-entity" data-role="item">
1539
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
1540
+ <span>Css And Scss Guidelines</span>
1541
+
1542
+ </a>
1543
+ </li>
1544
+
1545
+
1546
+
1547
+
1548
+ <li class="Tree-item Tree-entity" data-role="item">
1549
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
1550
+ <span>Git Cheat Sheet</span>
1551
+
1552
+ </a>
1553
+ </li>
1554
+
1555
+
1556
+
1557
+
1558
+ <li class="Tree-item Tree-entity" data-role="item">
1559
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/installation-and-usage.html" data-pjax>
1560
+ <span>Installation And Usage</span>
1561
+
1562
+ </a>
1563
+ </li>
1564
+
1565
+
1566
+
1567
+ </ul>
1568
+ </li>
1569
+
1570
+
1571
+
1572
+ </ul>
1573
+ </div>
1574
+
1575
+ </div>
1576
+
1577
+
1578
+
1579
+ </nav>
1580
+
1581
+ </div>
1582
+ </div>
1583
+ </div>
1584
+
1585
+
1586
+
1587
+
1588
+ <script src="../../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
1589
+
1590
+ <script src="../../../design-system.js?cachebust=1.4.0"></script>
1591
+
1592
+
1593
+
1594
+ </body>
1595
+ </html>