@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/contact-cards.html ADDED
@@ -0,0 +1,1474 @@
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>Contact 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">Contact 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-contact-cards-are-used-everywhere-on-the-website-to-link-between-pages">The Contact Cards are used everywhere on the website to link between pages</h2>
89
+ <p>Below you will find the different definitions and options to create your Contact 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>
105
+ <li class="document__unordered-list-item">
106
+ <a class="msds-link"href="#default-contact-card">Contact Card Default</a>
107
+ </li>
108
+ <ul class="document__unordered-list">
109
+ <li class="document__unordered-list-item">
110
+ <a class="msds-link"href="#default-contact-card-large">Contact Cards Default Large</a>
111
+ </li>
112
+ <li class="document__unordered-list-item">
113
+ <a class="msds-link"href="#default-contact-card-small">Contact Cards Default Small</a>
114
+ </li>
115
+ </ul>
116
+ <li class="document__unordered-list-item">
117
+ <a class="msds-link"href="#contact-card-without-an-image">Contact Card Without An Image</a>
118
+ </li>
119
+ <ul class="document__unordered-list">
120
+ <li class="document__unordered-list-item">
121
+ <a class="msds-link"href="#contact-card-large-without-an-image">Contact Cards Without An Image Large</a>
122
+ </li>
123
+ <li class="document__unordered-list-item">
124
+ <a class="msds-link"href="#contact-card-small-without-an-image">Contact Cards Without An Image Small</a>
125
+ </li>
126
+ </ul>
127
+ <li class="document__unordered-list-item">
128
+ <a class="msds-link"href="#content-contact-card">Content Card</a>
129
+ </li>
130
+ </ul>
131
+ </div>
132
+ </div>
133
+
134
+ <h2 id="overview">Overview</h2>
135
+ <h3 id="global-definition">Global Definition</h3>
136
+ <p>Each Contact Card is based on a global CSS class called <code>"msds-contact-card"</code>. It is important to include this class first as it is the main CSS class. Without this HTML class, you cannot utalize component.
137
+ There are 3 types of Contact Cards:</p>
138
+ <ol>
139
+ <li>The default Contact Card, the <i>default Contact Card</i> is used for lists of contacts</li>
140
+ <li>The second Contact Card has no image of the contact but has all the other information about the contact. The <i>Contact Card without an image</i> is used for lists of contacts</li>
141
+ <li>The third is a Content Contact Card has the following:<ul>
142
+ <li>An image of the contact</li>
143
+ <li>The contacts name</li>
144
+ <li>A description of the contacts position</li>
145
+ <li>A button that can be used to forward a user to another page</li>
146
+ </ul>
147
+ </li>
148
+ </ol>
149
+ <div class="element-preview">
150
+ <div class="element-preview__inner"><div class="container">
151
+ <div class="row card-row">
152
+ <div class="col-12 col-md-4">
153
+ <div class="msds-contact-card msds-contact-card--vertically-aligned">
154
+ <div class="msds-contact-card__overlay"></div>
155
+ <div class="msds-contact-card__headline">
156
+ President &amp; CEO
157
+ </div>
158
+ <div class="msds-contact-card__caption">
159
+ <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
160
+ </div>
161
+ <div class="msds-contact-card__body">
162
+ <div class="msds-contact-card__body-contact-person">
163
+ Lars Thinggaard
164
+ </div>
165
+ <div class="msds-contact-card__body-contact-position">
166
+ President &amp; CEO, Milestone Systems
167
+ </div>
168
+ <div class="msds-contact-card__body-contact-details">
169
+ <div class="msds-contact-card__body-contact-details-wrapper">
170
+ <a class="msds-contact-card__link" href="#">
171
+ <svg title="email" class="msds-contact-card__icon">
172
+ <use href="../../../msds-spritemap.svg#email" />
173
+ </svg>
174
+ Contact
175
+ </a>
176
+ <a class="msds-contact-card__link" href="#">
177
+ <svg title="linkedin" class="msds-contact-card__icon">
178
+ <use href="../../../msds-spritemap.svg#linkedin" />
179
+ </svg>
180
+ Visit on LinkedIn
181
+ </a>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div></div>
189
+ </div>
190
+
191
+ <div class="element-preview">
192
+ <div class="element-preview__inner"><div class="container">
193
+ <div class="row">
194
+ <div class="col-12 col-md-4">
195
+ <div class="msds-contact-card msds-contact-card--without-image msds-contact-card--vertically-aligned">
196
+ <div class="msds-contact-card__overlay"></div>
197
+ <div class="msds-contact-card__headline">
198
+ APAC &amp; Corporate
199
+ </div>
200
+ <div class="msds-contact-card__body">
201
+ <div class="msds-contact-card__body-contact-person">
202
+ Pernille Larsen
203
+ </div>
204
+ <div class="msds-contact-card__body-contact-position">
205
+ Corporate Communications Manager and PR &amp; Communications Manager APAC
206
+ </div>
207
+ <div class="msds-contact-card__body-contact-details">
208
+ <a class="msds-contact-card__link" href="#">
209
+ <svg title="email" class="msds-contact-card__icon">
210
+ <use href="../../../msds-spritemap.svg#email" />
211
+ </svg>
212
+ Contact
213
+ </a>
214
+ <a class="msds-contact-card__link" href="#">
215
+ <svg title="linkedin" class="msds-contact-card__icon">
216
+ <use href="../../../msds-spritemap.svg#linkedin" />
217
+ </svg>
218
+ Visit on LinkedIn
219
+ </a>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div></div>
226
+ </div>
227
+
228
+ <div class="element-preview">
229
+ <div class="element-preview__inner"><div class="container">
230
+ <div class="row card-row">
231
+ <div class="col-12 col-md-4">
232
+ <div class="msds-contact-card msds-contact-card--content msds-contact-card--vertically-aligned">
233
+ <div class="msds-contact-card__caption">
234
+ <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
235
+ </div>
236
+ <div class="msds-contact-card__body">
237
+ <div class="msds-contact-card__body-contact-person">
238
+ Lars Thinggaard
239
+ </div>
240
+ <div class="msds-contact-card__body-contact-position">
241
+ President &amp; CEO, Milestone Systems
242
+ </div>
243
+ <div class="msds-contact-card__body-contact-details">
244
+ <div class="msds-contact-card__body-contact-details-wrapper">
245
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--icon">
246
+ get in contact
247
+ <div class="msds-icon"><svg>
248
+ <use href="../../../msds-spritemap.svg#email" /></svg></div>
249
+ </button>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div></div>
257
+ </div>
258
+
259
+
260
+ <h3 id="sizes">Sizes</h3>
261
+ <p>Our cards can be rendered in 2 different sizes, large, and small. In order to use small cards, add the following</p>
262
+ <ul>
263
+ <li><code>"col-md-3"</code> instead of <code>"col-md-4"</code></li>
264
+ <li><code>"msds-contact-card--small"</code> to the same group of classes that has <code>"msds-contact-card"</code></li>
265
+ </ul>
266
+ <div class="element-preview">
267
+ <div class="element-preview__inner"><div class="container">
268
+ <div class="row card-row">
269
+ <div class="col-12 col-md-4">
270
+ <div class="msds-contact-card msds-contact-card--vertically-aligned">
271
+ <div class="msds-contact-card__overlay"></div>
272
+ <div class="msds-contact-card__headline">
273
+ President &amp; CEO
274
+ </div>
275
+ <div class="msds-contact-card__caption">
276
+ <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
277
+ </div>
278
+ <div class="msds-contact-card__body">
279
+ <div class="msds-contact-card__body-contact-person">
280
+ Lars Thinggaard
281
+ </div>
282
+ <div class="msds-contact-card__body-contact-position">
283
+ President &amp; CEO, Milestone Systems
284
+ </div>
285
+ <div class="msds-contact-card__body-contact-details">
286
+ <div class="msds-contact-card__body-contact-details-wrapper">
287
+ <a class="msds-contact-card__link" href="#">
288
+ <svg title="email" class="msds-contact-card__icon">
289
+ <use href="../../../msds-spritemap.svg#email" />
290
+ </svg>
291
+ Contact
292
+ </a>
293
+ <a class="msds-contact-card__link" href="#">
294
+ <svg title="linkedin" class="msds-contact-card__icon">
295
+ <use href="../../../msds-spritemap.svg#linkedin" />
296
+ </svg>
297
+ Visit on LinkedIn
298
+ </a>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div></div>
306
+ </div>
307
+
308
+ <div class="element-preview">
309
+ <div class="element-preview__inner"><div class="container">
310
+ <div class="row card-row">
311
+ <div class="col-12 col-md-3">
312
+ <div class="msds-contact-card msds-contact-card--small msds-contact-card--vertically-aligned">
313
+ <div class="msds-contact-card__overlay"></div>
314
+ <div class="msds-contact-card__headline">
315
+ President &amp; CEO
316
+ </div>
317
+ <div class="msds-contact-card__caption">
318
+ <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
319
+ </div>
320
+ <div class="msds-contact-card__body">
321
+ <div class="msds-contact-card__body-contact-person">
322
+ Lars Thinggaard
323
+ </div>
324
+ <div class="msds-contact-card__body-contact-position">
325
+ President &amp; CEO, Milestone Systems
326
+ </div>
327
+ <div class="msds-contact-card__body-contact-details">
328
+ <div class="msds-contact-card__body-contact-details-wrapper">
329
+ <a class="msds-contact-card__link" href="#">
330
+ <svg title="email" class="msds-contact-card__icon">
331
+ <use href="../../../msds-spritemap.svg#email" />
332
+ </svg>
333
+ Contact
334
+ </a>
335
+ <a class="msds-contact-card__link" href="#">
336
+ <svg title="linkedin" class="msds-contact-card__icon">
337
+ <use href="../../../msds-spritemap.svg#linkedin" />
338
+ </svg>
339
+ Visit on LinkedIn
340
+ </a>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div></div>
348
+ </div>
349
+
350
+ <h2 id="default-contact-card">Default Contact Card</h2>
351
+ <p>The default Contact Card has the following elements:</p>
352
+ <ul>
353
+ <li>A headline for the contacts position</li>
354
+ <li>An image of the contact</li>
355
+ <li>The contacts name</li>
356
+ <li>A description of the contacts position</li>
357
+ <li>Links to reach the contact</li>
358
+ </ul>
359
+ <h3 id="default-contact-card-large">Default Contact Card Large</h3>
360
+ <p>The default large Contact Card can be used by wrapping your <code>"msds-contact-card"</code> block with a <code>"col-md-4"</code> from Bootstrap.
361
+ Below is a example of the Milestone Large Contact Card. </p>
362
+ <p>As mentioned before, these Contact Cards are intended to be used in lists.</p>
363
+ <div class="element-preview">
364
+ <div class="element-preview__inner"><div class="container">
365
+ <div class="row card-row">
366
+ <div class="col-12 col-md-4">
367
+ <div class="msds-contact-card msds-contact-card--vertically-aligned">
368
+ <div class="msds-contact-card__overlay"></div>
369
+ <div class="msds-contact-card__headline">
370
+ President &amp; CEO
371
+ </div>
372
+ <div class="msds-contact-card__caption">
373
+ <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
374
+ </div>
375
+ <div class="msds-contact-card__body">
376
+ <div class="msds-contact-card__body-contact-person">
377
+ Lars Thinggaard
378
+ </div>
379
+ <div class="msds-contact-card__body-contact-position">
380
+ President &amp; CEO, Milestone Systems
381
+ </div>
382
+ <div class="msds-contact-card__body-contact-details">
383
+ <div class="msds-contact-card__body-contact-details-wrapper">
384
+ <a class="msds-contact-card__link" href="#">
385
+ <svg title="email" class="msds-contact-card__icon">
386
+ <use href="../../../msds-spritemap.svg#email" />
387
+ </svg>
388
+ Contact
389
+ </a>
390
+ <a class="msds-contact-card__link" href="#">
391
+ <svg title="linkedin" class="msds-contact-card__icon">
392
+ <use href="../../../msds-spritemap.svg#linkedin" />
393
+ </svg>
394
+ Visit on LinkedIn
395
+ </a>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div></div>
403
+ </div>
404
+
405
+ <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>
406
+ <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>
407
+ <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>
408
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card msds-contact-card--vertically-aligned"</span>&gt;</span>
409
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__overlay"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
410
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__headline"</span>&gt;</span>
411
+ President <span class="hljs-symbol">&amp;amp;</span> CEO
412
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
413
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__caption"</span>&gt;</span>
414
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__caption-image rounded-circle"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../../src/demo-img/contact-card-image.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
415
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
416
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body"</span>&gt;</span>
417
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-person"</span>&gt;</span>
418
+ Lars Thinggaard
419
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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-contact-card__body-contact-position"</span>&gt;</span>
421
+ President <span class="hljs-symbol">&amp;amp;</span> CEO, Milestone Systems
422
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
423
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-details"</span>&gt;</span>
424
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-details-wrapper"</span>&gt;</span>
425
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
426
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__icon"</span>&gt;</span>
427
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#email"</span> /&gt;</span>
428
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
429
+ Contact
430
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
431
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
432
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"linkedin"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__icon"</span>&gt;</span>
433
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#linkedin"</span> /&gt;</span>
434
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
435
+ Visit on LinkedIn
436
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
437
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
438
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
439
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
440
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
441
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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>&gt;</span></code></pre><h3 id="default-contact-card-small">Default Contact Card Small</h3>
444
+ <p>Below is a example of the Milestone Small Themed Contact Card. The small cards have reduced element sizes and reduced padding.</p>
445
+ <ul>
446
+ <li>The small cards have preset width based on bootstrap columns <code>"col-md-3"</code> and <code>"msds-contact-card--small"</code> as an extra class at the same level as <code>"msds-contact-card"</code>.</li>
447
+ </ul>
448
+ <div class="element-preview">
449
+ <div class="element-preview__inner"><div class="container">
450
+ <div class="row card-row">
451
+ <div class="col-12 col-md-3">
452
+ <div class="msds-contact-card msds-contact-card--small msds-contact-card--vertically-aligned">
453
+ <div class="msds-contact-card__overlay"></div>
454
+ <div class="msds-contact-card__headline">
455
+ President &amp; CEO
456
+ </div>
457
+ <div class="msds-contact-card__caption">
458
+ <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
459
+ </div>
460
+ <div class="msds-contact-card__body">
461
+ <div class="msds-contact-card__body-contact-person">
462
+ Lars Thinggaard
463
+ </div>
464
+ <div class="msds-contact-card__body-contact-position">
465
+ President &amp; CEO, Milestone Systems
466
+ </div>
467
+ <div class="msds-contact-card__body-contact-details">
468
+ <div class="msds-contact-card__body-contact-details-wrapper">
469
+ <a class="msds-contact-card__link" href="#">
470
+ <svg title="email" class="msds-contact-card__icon">
471
+ <use href="../../../msds-spritemap.svg#email" />
472
+ </svg>
473
+ Contact
474
+ </a>
475
+ <a class="msds-contact-card__link" href="#">
476
+ <svg title="linkedin" class="msds-contact-card__icon">
477
+ <use href="../../../msds-spritemap.svg#linkedin" />
478
+ </svg>
479
+ Visit on LinkedIn
480
+ </a>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div></div>
488
+ </div>
489
+
490
+ <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>
491
+ <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>
492
+ <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>
493
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card msds-contact-card--small msds-contact-card--vertically-aligned"</span>&gt;</span>
494
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__overlay"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
495
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__headline"</span>&gt;</span>
496
+ President <span class="hljs-symbol">&amp;amp;</span> CEO
497
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
498
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__caption"</span>&gt;</span>
499
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__caption-image rounded-circle"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../../src/demo-img/contact-card-image.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
500
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
501
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body"</span>&gt;</span>
502
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-person"</span>&gt;</span>
503
+ Lars Thinggaard
504
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
505
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-position"</span>&gt;</span>
506
+ President <span class="hljs-symbol">&amp;amp;</span> CEO, Milestone Systems
507
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
508
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-details"</span>&gt;</span>
509
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-details-wrapper"</span>&gt;</span>
510
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
511
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__icon"</span>&gt;</span>
512
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#email"</span> /&gt;</span>
513
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
514
+ Contact
515
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
516
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
517
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"linkedin"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__icon"</span>&gt;</span>
518
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#linkedin"</span> /&gt;</span>
519
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
520
+ Visit on LinkedIn
521
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
522
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
523
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
524
+ <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">div</span>&gt;</span>
528
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h2 id="contact-card-without-an-image">Contact Card Without An Image</h2>
529
+ <p>This Contact Card has a different layout to the default Contact Card</p>
530
+ <p>The Contact Card without an image has the following elements:</p>
531
+ <ul>
532
+ <li>A headline for the contacts position</li>
533
+ <li>The contacts name</li>
534
+ <li>A description of the contacts position</li>
535
+ <li>Links to reach the contact</li>
536
+ </ul>
537
+ <p>As mentioned before, these Contact Cards are intended to be used in lists.</p>
538
+ <h3 id="contact-card-large-without-an-image">Contact Card Large Without An Image</h3>
539
+ <p>The large Contact Card without an image can be used by wrapping your <code>"msds-contact-card"</code> block with a <code>"col-md-4"</code> from Bootstrap.
540
+ Below is a example of the Milestone Large Contact Card. </p>
541
+ <div class="element-preview">
542
+ <div class="element-preview__inner"><div class="container">
543
+ <div class="row">
544
+ <div class="col-12 col-md-4">
545
+ <div class="msds-contact-card msds-contact-card--without-image msds-contact-card--vertically-aligned">
546
+ <div class="msds-contact-card__overlay"></div>
547
+ <div class="msds-contact-card__headline">
548
+ APAC &amp; Corporate
549
+ </div>
550
+ <div class="msds-contact-card__body">
551
+ <div class="msds-contact-card__body-contact-person">
552
+ Pernille Larsen
553
+ </div>
554
+ <div class="msds-contact-card__body-contact-position">
555
+ Corporate Communications Manager and PR &amp; Communications Manager APAC
556
+ </div>
557
+ <div class="msds-contact-card__body-contact-details">
558
+ <a class="msds-contact-card__link" href="#">
559
+ <svg title="email" class="msds-contact-card__icon">
560
+ <use href="../../../msds-spritemap.svg#email" />
561
+ </svg>
562
+ Contact
563
+ </a>
564
+ <a class="msds-contact-card__link" href="#">
565
+ <svg title="linkedin" class="msds-contact-card__icon">
566
+ <use href="../../../msds-spritemap.svg#linkedin" />
567
+ </svg>
568
+ Visit on LinkedIn
569
+ </a>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div></div>
576
+ </div>
577
+
578
+ <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>
579
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
580
+ <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>
581
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card msds-contact-card--without-image msds-contact-card--vertically-aligned"</span>&gt;</span>
582
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__overlay"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
583
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__headline"</span>&gt;</span>
584
+ APAC <span class="hljs-symbol">&amp;amp;</span> Corporate
585
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
586
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body"</span>&gt;</span>
587
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-person"</span>&gt;</span>
588
+ Pernille Larsen
589
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
590
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-position"</span>&gt;</span>
591
+ Corporate Communications Manager and PR <span class="hljs-symbol">&amp;amp;</span> Communications Manager APAC
592
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
593
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-details"</span>&gt;</span>
594
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
595
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__icon"</span>&gt;</span>
596
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#email"</span> /&gt;</span>
597
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
598
+ Contact
599
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
600
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
601
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"linkedin"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__icon"</span>&gt;</span>
602
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#linkedin"</span> /&gt;</span>
603
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
604
+ Visit on LinkedIn
605
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
606
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
607
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
608
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
609
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
610
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
611
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="contact-card-small-without-an-image">Contact Card Small Without An Image</h3>
612
+ <p>Below is a example of the Milestone Small Themed Contact Card. The small cards have reduced element sizes and reduced padding.</p>
613
+ <ul>
614
+ <li>The small cards have preset width based on bootstrap columns <code>"col-md-3"</code> and <code>"msds-contact-card--small"</code> as an extra class at the same level as <code>"msds-contact-card"</code>.</li>
615
+ </ul>
616
+ <div class="element-preview">
617
+ <div class="element-preview__inner"><div class="container">
618
+ <div class="row">
619
+ <div class="col-12 col-md-3">
620
+ <div class="msds-contact-card msds-contact-card--small-without-image msds-contact-card--vertically-aligned">
621
+ <div class="msds-contact-card__overlay"></div>
622
+ <div class="msds-contact-card__headline">
623
+ APAC &amp; Corporate
624
+ </div>
625
+ <div class="msds-contact-card__body">
626
+ <div class="msds-contact-card__body-contact-person">
627
+ Pernille Larsen
628
+ </div>
629
+ <div class="msds-contact-card__body-contact-position">
630
+ Corporate Communications Manager and PR &amp; Communications Manager APAC
631
+ </div>
632
+ <div class="msds-contact-card__body-contact-details">
633
+ <a class="msds-contact-card__link" href="#">
634
+ <svg title="email" class="msds-contact-card__icon">
635
+ <use href="../../../msds-spritemap.svg#email" />
636
+ </svg>
637
+ Contact
638
+ </a>
639
+ <a class="msds-contact-card__link" href="#">
640
+ <svg title="linkedin" class="msds-contact-card__icon">
641
+ <use href="../../../msds-spritemap.svg#linkedin" />
642
+ </svg>
643
+ Visit on LinkedIn
644
+ </a>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div></div>
651
+ </div>
652
+
653
+ <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>
654
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
655
+ <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>
656
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card msds-contact-card--small-without-image msds-contact-card--vertically-aligned"</span>&gt;</span>
657
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__overlay"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
658
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__headline"</span>&gt;</span>
659
+ APAC <span class="hljs-symbol">&amp;amp;</span> Corporate
660
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
661
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body"</span>&gt;</span>
662
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-person"</span>&gt;</span>
663
+ Pernille Larsen
664
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
665
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-position"</span>&gt;</span>
666
+ Corporate Communications Manager and PR <span class="hljs-symbol">&amp;amp;</span> Communications Manager APAC
667
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
668
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-details"</span>&gt;</span>
669
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
670
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__icon"</span>&gt;</span>
671
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#email"</span> /&gt;</span>
672
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
673
+ Contact
674
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
675
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
676
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"linkedin"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__icon"</span>&gt;</span>
677
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#linkedin"</span> /&gt;</span>
678
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
679
+ Visit on LinkedIn
680
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
681
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
682
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
683
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
684
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
685
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
686
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h2 id="content-contact-card">Content Contact Card</h2>
687
+ <p>The Content Contact Card has the following elements:</p>
688
+ <ul>
689
+ <li>An image of the contact</li>
690
+ <li>The contacts name</li>
691
+ <li>A description of the contacts position</li>
692
+ <li>A button that can be used to forward users to another page</li>
693
+ </ul>
694
+ <p>The Content Contact Card can be used by wrapping your adding <code>"msds-contact-card--content"</code> to the wrapper class containing <code>"msds-contact-card"</code>.</p>
695
+ <p>The Content Contact Card is intended to be used when you want to represent an author of a page or article.</p>
696
+ <p>Below is a example of the Milestone Large Contact Card. </p>
697
+ <div class="element-preview">
698
+ <div class="element-preview__inner"><div class="container">
699
+ <div class="row card-row">
700
+ <div class="col-12 col-md-4">
701
+ <div class="msds-contact-card msds-contact-card--content msds-contact-card--vertically-aligned">
702
+ <div class="msds-contact-card__caption">
703
+ <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
704
+ </div>
705
+ <div class="msds-contact-card__body">
706
+ <div class="msds-contact-card__body-contact-person">
707
+ Lars Thinggaard
708
+ </div>
709
+ <div class="msds-contact-card__body-contact-position">
710
+ President &amp; CEO, Milestone Systems
711
+ </div>
712
+ <div class="msds-contact-card__body-contact-details">
713
+ <div class="msds-contact-card__body-contact-details-wrapper">
714
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--icon">
715
+ get in contact
716
+ <div class="msds-icon"><svg>
717
+ <use href="../../../msds-spritemap.svg#email" /></svg></div>
718
+ </button>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ </div>
723
+ </div>
724
+ </div>
725
+ </div></div>
726
+ </div>
727
+
728
+ <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>
729
+ <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>
730
+ <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>
731
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card msds-contact-card--content msds-contact-card--vertically-aligned"</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-contact-card__caption"</span>&gt;</span>
733
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__caption-image rounded-circle"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../../src/demo-img/contact-card-image.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
734
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
735
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body"</span>&gt;</span>
736
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-person"</span>&gt;</span>
737
+ Lars Thinggaard
738
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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-contact-card__body-contact-position"</span>&gt;</span>
740
+ President <span class="hljs-symbol">&amp;amp;</span> CEO, Milestone Systems
741
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
742
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-details"</span>&gt;</span>
743
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-contact-card__body-contact-details-wrapper"</span>&gt;</span>
744
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--icon"</span>&gt;</span>
745
+ get in contact
746
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</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">svg</span>&gt;</span>
747
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#email"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
748
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
749
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
750
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
751
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">div</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></code></pre><script>
756
+ //Iniliazes JS each time a user changes the page - this is for fractle v1.3.0
757
+ dispatchEvent(new Event('load'));
758
+ </script>
759
+
760
+
761
+
762
+
763
+ </div>
764
+
765
+
766
+
767
+ </div>
768
+
769
+ </div>
770
+
771
+
772
+ </div>
773
+ </div>
774
+
775
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
776
+
777
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
778
+ <nav class="Navigation">
779
+
780
+
781
+ <div class="Navigation-group">
782
+
783
+ <div class="Tree" data-behaviour="tree" id="tree-components">
784
+ <div class="Tree-header">
785
+ <h3 class="Tree-title">components</h3>
786
+
787
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
788
+ <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>
789
+
790
+ </button>
791
+ </div>
792
+ <ul class="Tree-items Tree-depth-1">
793
+
794
+
795
+
796
+
797
+ <li class="Tree-item Tree-entity" data-role="item">
798
+ <a class="Tree-entityLink" href="../../../components/detail/tab-tile.html" data-pjax>
799
+ <span>Tab Tile</span>
800
+
801
+
802
+ <div class="Status Status--unlabelled">
803
+
804
+ <div class="Status-dots">
805
+
806
+
807
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
808
+
809
+
810
+ </div>
811
+
812
+ </div>
813
+
814
+
815
+ </a>
816
+ </li>
817
+
818
+
819
+
820
+ </ul>
821
+ </div>
822
+
823
+ </div>
824
+
825
+
826
+
827
+
828
+ <div class="Navigation-group">
829
+
830
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
831
+ <div class="Tree-header">
832
+ <h3 class="Tree-title">documentation</h3>
833
+
834
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
835
+ <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>
836
+
837
+ </button>
838
+ </div>
839
+ <ul class="Tree-items Tree-depth-1">
840
+
841
+
842
+
843
+
844
+ <li class="Tree-item Tree-entity" data-role="item">
845
+ <a class="Tree-entityLink" href="../../../index.html" data-pjax>
846
+ <span>Overview</span>
847
+
848
+ </a>
849
+ </li>
850
+
851
+
852
+
853
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
854
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
855
+ Content
856
+ </button>
857
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
858
+
859
+
860
+
861
+
862
+
863
+
864
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
865
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
866
+ Icons
867
+ </button>
868
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
869
+
870
+
871
+
872
+
873
+
874
+
875
+
876
+ <li class="Tree-item Tree-entity" data-role="item">
877
+ <a class="Tree-entityLink" href="../../content/icons/-overview.html" data-pjax>
878
+ <span>Overview</span>
879
+
880
+ </a>
881
+ </li>
882
+
883
+
884
+
885
+
886
+ <li class="Tree-item Tree-entity" data-role="item">
887
+ <a class="Tree-entityLink" href="../../content/icons/icons-flat.html" data-pjax>
888
+ <span>Icons Flat</span>
889
+
890
+ </a>
891
+ </li>
892
+
893
+
894
+
895
+
896
+ <li class="Tree-item Tree-entity" data-role="item">
897
+ <a class="Tree-entityLink" href="../../content/icons/icons-rich.html" data-pjax>
898
+ <span>Icons Rich</span>
899
+
900
+ </a>
901
+ </li>
902
+
903
+
904
+
905
+ </ul>
906
+ </li>
907
+
908
+
909
+
910
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
911
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
912
+ Typography
913
+ </button>
914
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
915
+
916
+
917
+
918
+
919
+
920
+
921
+
922
+ <li class="Tree-item Tree-entity" data-role="item">
923
+ <a class="Tree-entityLink" href="../../content/typography/-overview.html" data-pjax>
924
+ <span>Overview</span>
925
+
926
+ </a>
927
+ </li>
928
+
929
+
930
+
931
+
932
+ <li class="Tree-item Tree-entity" data-role="item">
933
+ <a class="Tree-entityLink" href="../../content/typography/font-colors.html" data-pjax>
934
+ <span>Font Colors</span>
935
+
936
+ </a>
937
+ </li>
938
+
939
+
940
+
941
+
942
+ <li class="Tree-item Tree-entity" data-role="item">
943
+ <a class="Tree-entityLink" href="../../content/typography/links.html" data-pjax>
944
+ <span>Links</span>
945
+
946
+ </a>
947
+ </li>
948
+
949
+
950
+
951
+
952
+ <li class="Tree-item Tree-entity" data-role="item">
953
+ <a class="Tree-entityLink" href="../../content/typography/lists.html" data-pjax>
954
+ <span>Lists</span>
955
+
956
+ </a>
957
+ </li>
958
+
959
+
960
+
961
+
962
+ <li class="Tree-item Tree-entity" data-role="item">
963
+ <a class="Tree-entityLink" href="../../content/typography/text.html" data-pjax>
964
+ <span>Text</span>
965
+
966
+ </a>
967
+ </li>
968
+
969
+
970
+
971
+ </ul>
972
+ </li>
973
+
974
+
975
+
976
+ </ul>
977
+ </li>
978
+
979
+
980
+
981
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
982
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
983
+ Component Documentation
984
+ </button>
985
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
986
+
987
+
988
+
989
+
990
+
991
+
992
+
993
+ <li class="Tree-item Tree-entity" data-role="item">
994
+ <a class="Tree-entityLink" href="../alerts.html" data-pjax>
995
+ <span>Alerts</span>
996
+
997
+ </a>
998
+ </li>
999
+
1000
+
1001
+
1002
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
1003
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
1004
+ Buttons
1005
+ </button>
1006
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
1007
+
1008
+
1009
+
1010
+
1011
+
1012
+
1013
+
1014
+ <li class="Tree-item Tree-entity" data-role="item">
1015
+ <a class="Tree-entityLink" href="../buttons/buttons.html" data-pjax>
1016
+ <span>Buttons</span>
1017
+
1018
+ </a>
1019
+ </li>
1020
+
1021
+
1022
+
1023
+
1024
+ <li class="Tree-item Tree-entity" data-role="item">
1025
+ <a class="Tree-entityLink" href="../buttons/buttons-floating.html" data-pjax>
1026
+ <span>Buttons Floating</span>
1027
+
1028
+ </a>
1029
+ </li>
1030
+
1031
+
1032
+
1033
+ </ul>
1034
+ </li>
1035
+
1036
+
1037
+
1038
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
1039
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
1040
+ Cards
1041
+ </button>
1042
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
1043
+
1044
+
1045
+
1046
+
1047
+
1048
+
1049
+
1050
+ <li class="Tree-item Tree-entity" data-role="item">
1051
+ <a class="Tree-entityLink" href="basic-cards.html" data-pjax>
1052
+ <span>Basic Cards</span>
1053
+
1054
+ </a>
1055
+ </li>
1056
+
1057
+
1058
+
1059
+
1060
+ <li class="Tree-item Tree-entity" data-role="item">
1061
+ <a class="Tree-entityLink" href="category-cards.html" data-pjax>
1062
+ <span>Category Cards</span>
1063
+
1064
+ </a>
1065
+ </li>
1066
+
1067
+
1068
+
1069
+
1070
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
1071
+ <a class="Tree-entityLink" href="" data-pjax>
1072
+ <span>Contact Cards</span>
1073
+
1074
+ </a>
1075
+ </li>
1076
+
1077
+
1078
+
1079
+
1080
+ <li class="Tree-item Tree-entity" data-role="item">
1081
+ <a class="Tree-entityLink" href="generic-cards.html" data-pjax>
1082
+ <span>Generic Cards</span>
1083
+
1084
+ </a>
1085
+ </li>
1086
+
1087
+
1088
+
1089
+
1090
+ <li class="Tree-item Tree-entity" data-role="item">
1091
+ <a class="Tree-entityLink" href="solution-cards.html" data-pjax>
1092
+ <span>Solution Cards</span>
1093
+
1094
+ </a>
1095
+ </li>
1096
+
1097
+
1098
+
1099
+ </ul>
1100
+ </li>
1101
+
1102
+
1103
+
1104
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
1105
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
1106
+ Dividers
1107
+ </button>
1108
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
1109
+
1110
+
1111
+
1112
+
1113
+
1114
+
1115
+
1116
+ <li class="Tree-item Tree-entity" data-role="item">
1117
+ <a class="Tree-entityLink" href="../dividers/dividers.html" data-pjax>
1118
+ <span>Dividers</span>
1119
+
1120
+ </a>
1121
+ </li>
1122
+
1123
+
1124
+
1125
+ </ul>
1126
+ </li>
1127
+
1128
+
1129
+
1130
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
1131
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
1132
+ Expanding Components
1133
+ </button>
1134
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
1135
+
1136
+
1137
+
1138
+
1139
+
1140
+
1141
+
1142
+ <li class="Tree-item Tree-entity" data-role="item">
1143
+ <a class="Tree-entityLink" href="../expanding-components/accordion.html" data-pjax>
1144
+ <span>Accordion</span>
1145
+
1146
+ </a>
1147
+ </li>
1148
+
1149
+
1150
+
1151
+
1152
+ <li class="Tree-item Tree-entity" data-role="item">
1153
+ <a class="Tree-entityLink" href="../expanding-components/section.html" data-pjax>
1154
+ <span>Section</span>
1155
+
1156
+ </a>
1157
+ </li>
1158
+
1159
+
1160
+
1161
+ </ul>
1162
+ </li>
1163
+
1164
+
1165
+
1166
+
1167
+ <li class="Tree-item Tree-entity" data-role="item">
1168
+ <a class="Tree-entityLink" href="../modal.html" data-pjax>
1169
+ <span>Modal</span>
1170
+
1171
+ </a>
1172
+ </li>
1173
+
1174
+
1175
+
1176
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
1177
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
1178
+ Popover
1179
+ </button>
1180
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
1181
+
1182
+
1183
+
1184
+
1185
+
1186
+
1187
+
1188
+ <li class="Tree-item Tree-entity" data-role="item">
1189
+ <a class="Tree-entityLink" href="../popover/popover.html" data-pjax>
1190
+ <span>Popover</span>
1191
+
1192
+ </a>
1193
+ </li>
1194
+
1195
+
1196
+
1197
+ </ul>
1198
+ </li>
1199
+
1200
+
1201
+
1202
+
1203
+ <li class="Tree-item Tree-entity" data-role="item">
1204
+ <a class="Tree-entityLink" href="../progress-bar.html" data-pjax>
1205
+ <span>Progress Bar</span>
1206
+
1207
+ </a>
1208
+ </li>
1209
+
1210
+
1211
+
1212
+
1213
+ <li class="Tree-item Tree-entity" data-role="item">
1214
+ <a class="Tree-entityLink" href="../spacing.html" data-pjax>
1215
+ <span>Spacing</span>
1216
+
1217
+ </a>
1218
+ </li>
1219
+
1220
+
1221
+
1222
+
1223
+ <li class="Tree-item Tree-entity" data-role="item">
1224
+ <a class="Tree-entityLink" href="../table.html" data-pjax>
1225
+ <span>Table</span>
1226
+
1227
+ </a>
1228
+ </li>
1229
+
1230
+
1231
+
1232
+ </ul>
1233
+ </li>
1234
+
1235
+
1236
+
1237
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
1238
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
1239
+ Forms
1240
+ </button>
1241
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
1242
+
1243
+
1244
+
1245
+
1246
+
1247
+
1248
+
1249
+ <li class="Tree-item Tree-entity" data-role="item">
1250
+ <a class="Tree-entityLink" href="../../forms/-overview.html" data-pjax>
1251
+ <span>Overview</span>
1252
+
1253
+ </a>
1254
+ </li>
1255
+
1256
+
1257
+
1258
+
1259
+ <li class="Tree-item Tree-entity" data-role="item">
1260
+ <a class="Tree-entityLink" href="../../forms/checkbox.html" data-pjax>
1261
+ <span>Checkbox</span>
1262
+
1263
+ </a>
1264
+ </li>
1265
+
1266
+
1267
+
1268
+
1269
+ <li class="Tree-item Tree-entity" data-role="item">
1270
+ <a class="Tree-entityLink" href="../../forms/drop-down-list.html" data-pjax>
1271
+ <span>Drop Down List</span>
1272
+
1273
+ </a>
1274
+ </li>
1275
+
1276
+
1277
+
1278
+
1279
+ <li class="Tree-item Tree-entity" data-role="item">
1280
+ <a class="Tree-entityLink" href="../../forms/input-field.html" data-pjax>
1281
+ <span>Input Field</span>
1282
+
1283
+ </a>
1284
+ </li>
1285
+
1286
+
1287
+
1288
+
1289
+ <li class="Tree-item Tree-entity" data-role="item">
1290
+ <a class="Tree-entityLink" href="../../forms/radio-button.html" data-pjax>
1291
+ <span>Radio Button</span>
1292
+
1293
+ </a>
1294
+ </li>
1295
+
1296
+
1297
+
1298
+
1299
+ <li class="Tree-item Tree-entity" data-role="item">
1300
+ <a class="Tree-entityLink" href="../../forms/switch.html" data-pjax>
1301
+ <span>Switch</span>
1302
+
1303
+ </a>
1304
+ </li>
1305
+
1306
+
1307
+
1308
+
1309
+ <li class="Tree-item Tree-entity" data-role="item">
1310
+ <a class="Tree-entityLink" href="../../forms/text-area.html" data-pjax>
1311
+ <span>Text Area</span>
1312
+
1313
+ </a>
1314
+ </li>
1315
+
1316
+
1317
+
1318
+ </ul>
1319
+ </li>
1320
+
1321
+
1322
+
1323
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
1324
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
1325
+ Utilities
1326
+ </button>
1327
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
1328
+
1329
+
1330
+
1331
+
1332
+
1333
+
1334
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
1335
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
1336
+ Colors
1337
+ </button>
1338
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
1339
+
1340
+
1341
+
1342
+
1343
+
1344
+
1345
+
1346
+ <li class="Tree-item Tree-entity" data-role="item">
1347
+ <a class="Tree-entityLink" href="../../utilities/colors/overview.html" data-pjax>
1348
+ <span>Overview</span>
1349
+
1350
+ </a>
1351
+ </li>
1352
+
1353
+
1354
+
1355
+
1356
+ <li class="Tree-item Tree-entity" data-role="item">
1357
+ <a class="Tree-entityLink" href="../../utilities/colors/font-colors.html" data-pjax>
1358
+ <span>Font Colors</span>
1359
+
1360
+ </a>
1361
+ </li>
1362
+
1363
+
1364
+
1365
+
1366
+ <li class="Tree-item Tree-entity" data-role="item">
1367
+ <a class="Tree-entityLink" href="../../utilities/colors/background-colors.html" data-pjax>
1368
+ <span>Background Colors</span>
1369
+
1370
+ </a>
1371
+ </li>
1372
+
1373
+
1374
+
1375
+ </ul>
1376
+ </li>
1377
+
1378
+
1379
+
1380
+
1381
+ <li class="Tree-item Tree-entity" data-role="item">
1382
+ <a class="Tree-entityLink" href="../../utilities/spacing.html" data-pjax>
1383
+ <span>Spacing</span>
1384
+
1385
+ </a>
1386
+ </li>
1387
+
1388
+
1389
+
1390
+ </ul>
1391
+ </li>
1392
+
1393
+
1394
+
1395
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1396
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1397
+ Guidelines And Guides
1398
+ </button>
1399
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1400
+
1401
+
1402
+
1403
+
1404
+
1405
+
1406
+
1407
+ <li class="Tree-item Tree-entity" data-role="item">
1408
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/creating-a-new-release.html" data-pjax>
1409
+ <span>Creating A New Release</span>
1410
+
1411
+ </a>
1412
+ </li>
1413
+
1414
+
1415
+
1416
+
1417
+ <li class="Tree-item Tree-entity" data-role="item">
1418
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
1419
+ <span>Css And Scss Guidelines</span>
1420
+
1421
+ </a>
1422
+ </li>
1423
+
1424
+
1425
+
1426
+
1427
+ <li class="Tree-item Tree-entity" data-role="item">
1428
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
1429
+ <span>Git Cheat Sheet</span>
1430
+
1431
+ </a>
1432
+ </li>
1433
+
1434
+
1435
+
1436
+
1437
+ <li class="Tree-item Tree-entity" data-role="item">
1438
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/installation-and-usage.html" data-pjax>
1439
+ <span>Installation And Usage</span>
1440
+
1441
+ </a>
1442
+ </li>
1443
+
1444
+
1445
+
1446
+ </ul>
1447
+ </li>
1448
+
1449
+
1450
+
1451
+ </ul>
1452
+ </div>
1453
+
1454
+ </div>
1455
+
1456
+
1457
+
1458
+ </nav>
1459
+
1460
+ </div>
1461
+ </div>
1462
+ </div>
1463
+
1464
+
1465
+
1466
+
1467
+ <script src="../../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
1468
+
1469
+ <script src="../../../design-system.js?cachebust=1.4.0"></script>
1470
+
1471
+
1472
+
1473
+ </body>
1474
+ </html>