@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/category-cards.html ADDED
@@ -0,0 +1,1950 @@
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>Category 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">Category 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-category-cards-are-used-everywhere-on-the-website-to-link-between-pages">The category 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 category 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
+ <li class="document__unordered-list-item">
105
+ <a class="msds-link"href="#states">States</a>
106
+ </li>
107
+ </ul>
108
+ <li class="document__unordered-list-item">
109
+ <a class="msds-link"href="#category-card-default">Category Card Default</a>
110
+ </li>
111
+ <ul class="document__unordered-list">
112
+ <ul class="document__unordered-list">
113
+ <li class="document__unordered-list-item">
114
+ <a class="msds-link"href="#category-cards-default-large">Category Cards Default Large</a>
115
+ </li>
116
+ <li class="document__unordered-list-item">
117
+ <a class="msds-link"href="#category-cards-default-small">Category Cards Default Small</a>
118
+ </li>
119
+ <li class="document__unordered-list-item">
120
+ <a class="msds-link"href="#category-cards-default-disabled">Category Cards Default Disabled</a>
121
+ </li>
122
+ <li class="document__unordered-list-item">
123
+ <a class="msds-link"href="#category-states-default">Category States Default</a>
124
+ </li>
125
+ </ul>
126
+ </ul>
127
+ <li class="document__unordered-list-item">
128
+ <a class="msds-link"href="#category-cards-dark-themed">Category Card Dark Themed</a>
129
+ </li>
130
+ <ul class="document__unordered-list">
131
+ <ul class="document__unordered-list">
132
+ <li class="document__unordered-list-item">
133
+ <a class="msds-link"href="#category-cards-large-dark-themed">Category Cards Large Dark Themed</a>
134
+ </li>
135
+ <li class="document__unordered-list-item">
136
+ <a class="msds-link"href="#category-cards-small-dark-themed">Category Cards Small Dark Themed</a>
137
+ </li>
138
+ <li class="document__unordered-list-item">
139
+ <a class="msds-link"href="#category-cards-disabled-dark-themed">Category Cards Disabled Dark Themed</a>
140
+ </li>
141
+ <li class="document__unordered-list-item">
142
+ <a class="msds-link"href="#category-states-dark-themed">Category States Dark Themed</a>
143
+ </li>
144
+ </ul>
145
+ </ul>
146
+ </ul>
147
+ </div>
148
+ </div>
149
+
150
+ <h2 id="overview">Overview</h2>
151
+ <h3 id="global-definition">Global Definition</h3>
152
+ <p>Each category card is based on a global CSS class called <code>"msds-category-card"</code>. It is important to include it first as it is the main CSS class. Without this HTML class, you cannot utalize component.
153
+ There are 2 types of category cards, the primary category card, that has a content body below the headline, and the category card with no body below the headline. </p>
154
+ <ul>
155
+ <li>Delete <code>"msds-category-card__content"</code> div to remove the body below the headline.</li>
156
+ </ul>
157
+ <div class="element-preview">
158
+ <div class="element-preview__inner"><div class="container">
159
+ <div class="row card-row">
160
+ <div class="col-12 col-md-4">
161
+ <div class="msds-category-card ">
162
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
163
+ <div class="msds-category-card__header">
164
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
165
+ <div class="msds-category-card__header-icon-container">
166
+ <svg class="msds-category-card__header-icon">
167
+ <use href="../../../msds-spritemap.svg#right-arrow" />
168
+ </svg>
169
+ </div>
170
+ </div>
171
+ <div class="msds-category-card__content">
172
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
173
+ </div>
174
+ </a>
175
+ </div>
176
+ </div>
177
+ <div class="col-12 col-md-4">
178
+ <div class="msds-category-card">
179
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
180
+ <div class="msds-category-card__header">
181
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
182
+ <div class="msds-category-card__header-icon-container">
183
+ <svg class="msds-category-card__header-icon">
184
+ <use href="../../../msds-spritemap.svg#right-arrow" />
185
+ </svg>
186
+ </div>
187
+ </div>
188
+ </a>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div></div>
193
+ </div>
194
+
195
+ <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>
196
+ <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>
197
+ <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>
198
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card "</span>&gt;</span>
199
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
200
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
201
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
202
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
203
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
204
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
205
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
206
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
207
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
208
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
209
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
210
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
211
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
212
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
213
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
214
+ <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>
215
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card"</span>&gt;</span>
216
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
217
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
218
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
219
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
220
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
221
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
222
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
223
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
224
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
225
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
226
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
227
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
228
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
229
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="sizes">Sizes</h3>
230
+ <p>Our cards can be rendered in 2 different sizes, large, and small as followed. In order to use small cards, add the following</p>
231
+ <ul>
232
+ <li><code>"col-md-3"</code> instead of <code>"col-md-4"</code></li>
233
+ <li><code>"msds-category-card--small"</code> to the same group of classes that has <code>"msds-category-card"</code></li>
234
+ </ul>
235
+ <div class="element-preview">
236
+ <div class="element-preview__inner"><div class="container">
237
+ <div class="row card-row">
238
+ <div class="col-12 col-md-4">
239
+ <div class="msds-category-card">
240
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
241
+ <div class="msds-category-card__header">
242
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
243
+ <div class="msds-category-card__header-icon-container">
244
+ <svg class="msds-category-card__header-icon">
245
+ <use href="../../../msds-spritemap.svg#right-arrow" />
246
+ </svg>
247
+ </div>
248
+ </div>
249
+ <div class="msds-category-card__content">
250
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
251
+ </div>
252
+ </a>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="col-12 col-md-3">
257
+ <div class="msds-category-card msds-category-card--small">
258
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
259
+ <div class="msds-category-card__header">
260
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
261
+ <div class="msds-category-card__header-icon-container">
262
+ <svg class="msds-category-card__header-icon">
263
+ <use href="../../../msds-spritemap.svg#right-arrow" />
264
+ </svg>
265
+ </div>
266
+ </div>
267
+ <div class="msds-category-card__content">
268
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
269
+ </div>
270
+ </a>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div></div>
275
+ </div>
276
+
277
+ <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>
278
+ <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>
279
+ <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>
280
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card"</span>&gt;</span>
281
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
282
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
283
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
284
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
285
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
286
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
287
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
288
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
289
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
290
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
291
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
292
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
293
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
294
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
295
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
296
+
297
+ <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>
298
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--small"</span>&gt;</span>
299
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
300
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
301
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
302
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
303
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
304
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
305
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
306
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
307
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
308
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
309
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
310
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
311
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
312
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
313
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
314
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
315
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="states">States</h3>
316
+ <p>Each button has different states which are applied automatically: <i>enabled, hover, active, focus and disabled.</i>
317
+ You can see the different state by hovering, activating and focusing on them on the example below. The last button would disabled by default.</p>
318
+ <div class="element-preview">
319
+ <div class="element-preview__inner"><div class="container">
320
+ <div class="row card-row">
321
+ <div class="col-12 col-md-4">
322
+ <div class="msds-category-card">
323
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
324
+ <div class="msds-category-card__header">
325
+ <div class="msds-category-card__header-body">HOVER ON ME</div>
326
+ <div class="msds-category-card__header-icon-container">
327
+ <svg class="msds-category-card__header-icon">
328
+ <use href="../../../msds-spritemap.svg#right-arrow" />
329
+ </svg>
330
+ </div>
331
+ </div>
332
+ <div class="msds-category-card__content">
333
+ <div class="msds-category-card__content-body">Hover on this card to see its hover state</div>
334
+ </div>
335
+ </a>
336
+ </div>
337
+ </div>
338
+ <div class="col-12 col-md-4">
339
+ <div class="msds-category-card">
340
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
341
+ <div class="msds-category-card__header">
342
+ <div class="msds-category-card__header-body">CLICK ON ME</div>
343
+ <div class="msds-category-card__header-icon-container">
344
+ <svg class="msds-category-card__header-icon">
345
+ <use href="../../../msds-spritemap.svg#right-arrow" />
346
+ </svg>
347
+ </div>
348
+ </div>
349
+ <div class="msds-category-card__content">
350
+ <div class="msds-category-card__content-body">Click on this card to see its active/focus states</div>
351
+ </div>
352
+ </a>
353
+ </div>
354
+ </div>
355
+ <div class="col-12 col-md-4">
356
+ <div class="msds-category-card msds-category-card--disabled">
357
+ <div class="msds-category-card__header">
358
+ <div class="msds-category-card__header-body">DISABLED CARD</div>
359
+ <div class="msds-category-card__header-icon-container">
360
+ <svg class="msds-category-card__header-icon">
361
+ <use href="../../../msds-spritemap.svg#right-arrow" />
362
+ </svg>
363
+ </div>
364
+ </div>
365
+ <div class="msds-category-card__content">
366
+ <div class="msds-category-card__content-body">You can not click on disabled category cards</div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div></div>
372
+ </div>
373
+
374
+ <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>
375
+ <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>
376
+ <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>
377
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card"</span>&gt;</span>
378
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
379
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
380
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>HOVER ON ME<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
381
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
382
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
383
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
384
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
385
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
386
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
387
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
388
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Hover on this card to see its hover state<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
389
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
390
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
391
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
392
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
393
+ <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>
394
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card"</span>&gt;</span>
395
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
396
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
397
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>CLICK ON ME<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
398
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
399
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
400
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
401
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
402
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
403
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
404
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
405
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Click on this card to see its active/focus states<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
406
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
407
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
408
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
409
+ <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">"col-12 col-md-4"</span>&gt;</span>
411
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--disabled"</span>&gt;</span>
412
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</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-category-card__header-body"</span>&gt;</span>DISABLED CARD<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
414
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
415
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
416
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
417
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
418
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
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-category-card__content"</span>&gt;</span>
421
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>You can not click on disabled category cards<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
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>&gt;</span>
424
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
425
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
426
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h2 id="category-card-default">Category Card Default</h2>
427
+ <p>The default category card is a light themed, blue card.</p>
428
+ <h3 id="category-cards-default-large">Category Cards Default Large</h3>
429
+ <p>The default large category card can be used by wrapping your <code>"msds-category-card"</code> block with a <code>"col-md-4"</code> from Bootstrap.
430
+ Below is a example of the Milestone Large Category Card. </p>
431
+ <ul>
432
+ <li>The default has content in the body of the card and has a preset width based on bootstrap columns <code>"col-md-4"</code>.</li>
433
+ <li>The alternative has no body, to achieve this you can remove the body from the card.</li>
434
+ </ul>
435
+ <div class="element-preview">
436
+ <div class="element-preview__inner"><div class="container">
437
+ <div class="row card-row">
438
+ <div class="col-12 col-md-4">
439
+ <div class="msds-category-card ">
440
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
441
+ <div class="msds-category-card__header">
442
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
443
+ <div class="msds-category-card__header-icon-container">
444
+ <svg class="msds-category-card__header-icon">
445
+ <use href="../../../msds-spritemap.svg#right-arrow" />
446
+ </svg>
447
+ </div>
448
+ </div>
449
+ <div class="msds-category-card__content">
450
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
451
+ </div>
452
+ </a>
453
+ </div>
454
+ </div>
455
+ <div class="col-12 col-md-4">
456
+ <div class="msds-category-card">
457
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
458
+ <div class="msds-category-card__header">
459
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
460
+ <div class="msds-category-card__header-icon-container">
461
+ <svg class="msds-category-card__header-icon">
462
+ <use href="../../../msds-spritemap.svg#right-arrow" />
463
+ </svg>
464
+ </div>
465
+ </div>
466
+ </a>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div></div>
471
+ </div>
472
+
473
+ <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>
474
+ <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>
475
+ <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>
476
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card "</span>&gt;</span>
477
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
478
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
479
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
480
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
481
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
482
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
483
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
484
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
485
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
486
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
487
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
488
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
489
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
490
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
491
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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-4"</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-category-card"</span>&gt;</span>
494
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</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-category-card__header"</span>&gt;</span>
496
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
497
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
498
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
499
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
500
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
501
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
502
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
503
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
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>&gt;</span>
506
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
507
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="category-cards-default-small">Category Cards Default Small</h3>
508
+ <p>Below is a example of the Milestone Small Themed Category Card. </p>
509
+ <ul>
510
+ <li>The small cards have preset width based on bootstrap columns <code>"col-md-3"</code> and <code>"msds-category-card--small"</code> as an extra class at the same level as <code>"msds-category-card"</code>.</li>
511
+ <li>The alternative has no body, to achieve this you can remove the body from the card.</li>
512
+ </ul>
513
+ <div class="element-preview">
514
+ <div class="element-preview__inner"><div class="container">
515
+ <div class="row card-row">
516
+ <div class="col-12 col-md-3">
517
+ <div class="msds-category-card msds-category-card--small">
518
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
519
+ <div class="msds-category-card__header">
520
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
521
+ <div class="msds-category-card__header-icon-container">
522
+ <svg class="msds-category-card__header-icon">
523
+ <use href="../../../msds-spritemap.svg#right-arrow" />
524
+ </svg>
525
+ </div>
526
+ </div>
527
+ <div class="msds-category-card__content">
528
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
529
+ </div>
530
+ </a>
531
+ </div>
532
+ </div>
533
+ <div class="col-12 col-md-3">
534
+ <div class="msds-category-card msds-category-card--small">
535
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
536
+ <div class="msds-category-card__header">
537
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
538
+ <div class="msds-category-card__header-icon-container">
539
+ <svg class="msds-category-card__header-icon">
540
+ <use href="../../../msds-spritemap.svg#right-arrow" />
541
+ </svg>
542
+ </div>
543
+ </div>
544
+ </a>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div></div>
549
+ </div>
550
+
551
+ <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>
552
+ <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>
553
+ <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>
554
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--small"</span>&gt;</span>
555
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
556
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
557
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
558
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
559
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
560
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
561
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
562
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
563
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
564
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
565
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
566
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
567
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
568
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
569
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
570
+ <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>
571
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--small"</span>&gt;</span>
572
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
573
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
574
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
575
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
576
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
577
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
578
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
579
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
580
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
581
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
582
+ <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>&gt;</span>
584
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
585
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="category-cards-default-disabled">Category Cards Default Disabled</h3>
586
+ <p>Below is a example of the Milestone Disabled Category Card. </p>
587
+ <ul>
588
+ <li>The disabled cards must have the <code>"msds-category-card--disabled"</code> modifier as an extra class at the same level as <code>"msds-category-card"</code> in order to disable the card. This applies to both large and small category cards.</li>
589
+ </ul>
590
+ <div class="element-preview">
591
+ <div class="element-preview__inner"><div class="container">
592
+ <div class="row card-row">
593
+ <div class="col-12 col-md-4">
594
+ <div class="msds-category-card msds-category-card--disabled">
595
+ <div class="msds-category-card__header">
596
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
597
+ <div class="msds-category-card__header-icon-container">
598
+ <svg class="msds-category-card__header-icon">
599
+ <use href="../../../msds-spritemap.svg#right-arrow" />
600
+ </svg>
601
+ </div>
602
+ </div>
603
+ <div class="msds-category-card__content">
604
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ <div class="col-12 col-md-4">
609
+ <div class="msds-category-card msds-category-card--disabled">
610
+ <div class="msds-category-card__header">
611
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
612
+ <div class="msds-category-card__header-icon-container">
613
+ <svg class="msds-category-card__header-icon">
614
+ <use href="../../../msds-spritemap.svg#right-arrow" />
615
+ </svg>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </div></div>
622
+ </div>
623
+
624
+ <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>
625
+ <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>
626
+ <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>
627
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--disabled"</span>&gt;</span>
628
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
629
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
630
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
631
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
632
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
633
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
634
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
635
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
636
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
637
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
638
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
639
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
640
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
641
+ <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>
642
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--disabled"</span>&gt;</span>
643
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
644
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
645
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
646
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
647
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
648
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
649
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
650
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
651
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
652
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
653
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
654
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><div class="element-preview">
655
+ <div class="element-preview__inner"><div class="container">
656
+ <div class="row card-row">
657
+ <div class="col-12 col-md-3">
658
+ <div class="msds-category-card msds-category-card--small msds-category-card--disabled">
659
+ <div class="msds-category-card__header">
660
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
661
+ <div class="msds-category-card__header-icon-container">
662
+ <svg class="msds-category-card__header-icon">
663
+ <use href="../../../msds-spritemap.svg#right-arrow" />
664
+ </svg>
665
+ </div>
666
+ </div>
667
+ <div class="msds-category-card__content">
668
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
669
+ </div>
670
+ </div>
671
+ </div>
672
+ <div class="col-12 col-md-3">
673
+ <div class="msds-category-card msds-category-card--small msds-category-card--disabled">
674
+ <div class="msds-category-card__header">
675
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
676
+ <div class="msds-category-card__header-icon-container">
677
+ <svg class="msds-category-card__header-icon">
678
+ <use href="../../../msds-spritemap.svg#right-arrow" />
679
+ </svg>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div></div>
686
+ </div>
687
+
688
+ <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>
689
+ <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>
690
+ <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>
691
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--small msds-category-card--disabled"</span>&gt;</span>
692
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
693
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
694
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
695
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
696
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
697
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
698
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
699
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
700
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
701
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
702
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
703
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
704
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
705
+ <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>
706
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--small msds-category-card--disabled"</span>&gt;</span>
707
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
708
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
709
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
710
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
711
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
712
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
713
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
714
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
715
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
716
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
717
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
718
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="category-states-default">Category States Default</h3>
719
+ <p>Each button has different states which are applied automatically: <i>enabled, hover, active, focus and disabled.</i>
720
+ You can see the different state by hovering, activating and focusing on them on the example below. The last button would disabled by default.</p>
721
+ <div class="element-preview">
722
+ <div class="element-preview__inner"><div class="container">
723
+ <div class="row card-row">
724
+ <div class="col-12 col-md-4">
725
+ <div class="msds-category-card">
726
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
727
+ <div class="msds-category-card__header">
728
+ <div class="msds-category-card__header-body">HOVER ON ME</div>
729
+ <div class="msds-category-card__header-icon-container">
730
+ <svg class="msds-category-card__header-icon">
731
+ <use href="../../../msds-spritemap.svg#right-arrow" />
732
+ </svg>
733
+ </div>
734
+ </div>
735
+ <div class="msds-category-card__content">
736
+ <div class="msds-category-card__content-body">Hover on this card to see its hover state</div>
737
+ </div>
738
+ </a>
739
+ </div>
740
+ </div>
741
+ <div class="col-12 col-md-4">
742
+ <div class="msds-category-card">
743
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
744
+ <div class="msds-category-card__header">
745
+ <div class="msds-category-card__header-body">CLICK ON ME</div>
746
+ <div class="msds-category-card__header-icon-container">
747
+ <svg class="msds-category-card__header-icon">
748
+ <use href="../../../msds-spritemap.svg#right-arrow" />
749
+ </svg>
750
+ </div>
751
+ </div>
752
+ <div class="msds-category-card__content">
753
+ <div class="msds-category-card__content-body">Click on this card to see its active/focus states</div>
754
+ </div>
755
+ </a>
756
+ </div>
757
+ </div>
758
+ <div class="col-12 col-md-4">
759
+ <div class="msds-category-card msds-category-card--disabled">
760
+ <div class="msds-category-card__header">
761
+ <div class="msds-category-card__header-body">DISABLED CARD</div>
762
+ <div class="msds-category-card__header-icon-container">
763
+ <svg class="msds-category-card__header-icon">
764
+ <use href="../../../msds-spritemap.svg#right-arrow" />
765
+ </svg>
766
+ </div>
767
+ </div>
768
+ <div class="msds-category-card__content">
769
+ <div class="msds-category-card__content-body">You can not click on disabled category cards</div>
770
+ </div>
771
+ </div>
772
+ </div>
773
+ </div>
774
+ </div></div>
775
+ </div>
776
+
777
+ <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>
778
+ <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>
779
+ <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>
780
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card"</span>&gt;</span>
781
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
782
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
783
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>HOVER ON ME<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
784
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
785
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
786
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
787
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
788
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
789
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
790
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
791
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Hover on this card to see its hover state<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
792
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
793
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
794
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
795
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
796
+ <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>
797
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card"</span>&gt;</span>
798
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
799
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
800
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>CLICK ON ME<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
801
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
802
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
803
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
804
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
805
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
806
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
807
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
808
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Click on this card to see its active/focus states<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
809
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
810
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
811
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
812
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
813
+ <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>
814
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--disabled"</span>&gt;</span>
815
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
816
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>DISABLED CARD<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
817
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
818
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
819
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
820
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
821
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
822
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
823
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
824
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>You can not click on disabled category cards<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
825
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
826
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
827
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
828
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
829
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h2 id="category-cards-dark-themed">Category Cards Dark Themed</h2>
830
+ <p>To use “dark themed category card” you need to add the following CCS class: <code>"msds-category-card--dark"</code>. </p>
831
+ <p>Below is a example of the Milestone Large Dark Themed Category Card. </p>
832
+ <ul>
833
+ <li>The default has content in the body of the card and has a preset width based on bootstrap columns <code>"col-md-4"</code>.</li>
834
+ <li>The alternative has no body, to achieve this you can remove the body from the card.</li>
835
+ </ul>
836
+ <h3 id="category-cards-large-dark-themed">Category Cards Large Dark Themed</h3>
837
+ <div class="element-preview-dark">
838
+ <div class="element-preview__inner"><div class="container">
839
+ <div class="row card-row">
840
+ <div class="col-12 col-md-4">
841
+ <div class="msds-category-card msds-category-card--dark">
842
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
843
+ <div class="msds-category-card__header">
844
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
845
+ <div class="msds-category-card__header-icon-container">
846
+ <svg class="msds-category-card__header-icon">
847
+ <use href="../../../msds-spritemap.svg#right-arrow" />
848
+ </svg>
849
+ </div>
850
+ </div>
851
+ <div class="msds-category-card__content">
852
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
853
+ </div>
854
+ </a>
855
+ </div>
856
+ </div>
857
+ <div class="col-12 col-md-4">
858
+ <div class="msds-category-card msds-category-card--dark">
859
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
860
+ <div class="msds-category-card__header">
861
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
862
+ <div class="msds-category-card__header-icon-container">
863
+ <svg class="msds-category-card__header-icon">
864
+ <use href="../../../msds-spritemap.svg#right-arrow" />
865
+ </svg>
866
+ </div>
867
+ </div>
868
+ </a>
869
+ </div>
870
+ </div>
871
+ </div>
872
+ </div></div>
873
+ </div>
874
+
875
+ <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>
876
+ <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>
877
+ <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>
878
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--dark"</span>&gt;</span>
879
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
880
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
881
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
882
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
883
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
884
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
885
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
886
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
887
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
888
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
889
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
890
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
891
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
892
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
893
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
894
+ <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>
895
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--dark"</span>&gt;</span>
896
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
897
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
898
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
899
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
900
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
901
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
902
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
903
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
904
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
905
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
906
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
907
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
908
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
909
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="category-cards-small-dark-themed">Category Cards Small Dark Themed</h3>
910
+ <p>Below is a example of the Milestone Small Dark Themed Category Card. </p>
911
+ <ul>
912
+ <li>The small cards have preset width based on bootstrap columns <code>"col-md-3"</code> and <code>"msds-category-card--small"</code> as an extra class at the same level as <code>"msds-category-card"</code>.</li>
913
+ <li>The alternative has no body, to achieve this you can remove the body from the card.</li>
914
+ </ul>
915
+ <div class="element-preview-dark">
916
+ <div class="element-preview__inner"><div class="container">
917
+ <div class="row card-row">
918
+ <div class="col-12 col-md-3">
919
+ <div class="msds-category-card msds-category-card--small msds-category-card--dark">
920
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
921
+ <div class="msds-category-card__header">
922
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
923
+ <div class="msds-category-card__header-icon-container">
924
+ <svg class="msds-category-card__header-icon">
925
+ <use href="../../../msds-spritemap.svg#right-arrow" />
926
+ </svg>
927
+ </div>
928
+ </div>
929
+ <div class="msds-category-card__content">
930
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
931
+ </div>
932
+ </a>
933
+ </div>
934
+ </div>
935
+ <div class="col-12 col-md-3">
936
+ <div class="msds-category-card msds-category-card--small msds-category-card--dark">
937
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
938
+ <div class="msds-category-card__header">
939
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
940
+ <div class="msds-category-card__header-icon-container">
941
+ <svg class="msds-category-card__header-icon">
942
+ <use href="../../../msds-spritemap.svg#right-arrow" />
943
+ </svg>
944
+ </div>
945
+ </div>
946
+ </a>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ </div></div>
951
+ </div>
952
+
953
+ <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>
954
+ <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>
955
+ <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>
956
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--small msds-category-card--dark"</span>&gt;</span>
957
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
958
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
959
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
960
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
961
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
962
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
963
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
964
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
965
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
966
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
967
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
968
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
969
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
970
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
971
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
972
+ <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>
973
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--small msds-category-card--dark"</span>&gt;</span>
974
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
975
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
976
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
977
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
978
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
979
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
980
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
981
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
982
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
983
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
984
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
985
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
986
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
987
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="category-cards-disabled-dark-themed">Category Cards Disabled Dark Themed</h3>
988
+ <p>Below is a example of the Milestone Disabled Dark Themed Category Card. </p>
989
+ <ul>
990
+ <li>The disabled cards must have the <code>"msds-category-card--disabled"</code> modifier as an extra class at the same level as <code>"msds-category-card"</code> in order to disable the card. This applies to both large and small category cards.</li>
991
+ </ul>
992
+ <div class="element-preview-dark">
993
+ <div class="element-preview__inner"><div class="container">
994
+ <div class="row card-row">
995
+ <div class="col-12 col-md-4">
996
+ <div class="msds-category-card msds-category-card--dark msds-category-card--disabled">
997
+ <div class="msds-category-card__header">
998
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
999
+ <div class="msds-category-card__header-icon-container">
1000
+ <svg class="msds-category-card__header-icon">
1001
+ <use href="../../../msds-spritemap.svg#right-arrow" />
1002
+ </svg>
1003
+ </div>
1004
+ </div>
1005
+ <div class="msds-category-card__content">
1006
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
1007
+ </div>
1008
+ </div>
1009
+ </div>
1010
+ <div class="col-12 col-md-4">
1011
+ <div class="msds-category-card msds-category-card--dark msds-category-card--disabled">
1012
+ <div class="msds-category-card__header">
1013
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
1014
+ <div class="msds-category-card__header-icon-container">
1015
+ <svg class="msds-category-card__header-icon">
1016
+ <use href="../../../msds-spritemap.svg#right-arrow" />
1017
+ </svg>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+ </div></div>
1024
+ </div>
1025
+
1026
+ <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>
1027
+ <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>
1028
+ <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>
1029
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--dark msds-category-card--disabled"</span>&gt;</span>
1030
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
1031
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1032
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
1033
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
1034
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
1035
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1036
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1037
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1038
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
1039
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1040
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1041
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1042
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1043
+ <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>
1044
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--dark msds-category-card--disabled"</span>&gt;</span>
1045
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
1046
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1047
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
1048
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
1049
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
1050
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1051
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1052
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1053
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1054
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1055
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1056
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><div class="element-preview-dark">
1057
+ <div class="element-preview__inner"><div class="container">
1058
+ <div class="row card-row">
1059
+ <div class="col-12 col-md-3">
1060
+ <div class="msds-category-card msds-category-card--small msds-category-card--dark msds-category-card--disabled">
1061
+ <div class="msds-category-card__header">
1062
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
1063
+ <div class="msds-category-card__header-icon-container">
1064
+ <svg class="msds-category-card__header-icon">
1065
+ <use href="../../../msds-spritemap.svg#right-arrow" />
1066
+ </svg>
1067
+ </div>
1068
+ </div>
1069
+ <div class="msds-category-card__content">
1070
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
1071
+ </div>
1072
+ </div>
1073
+ </div>
1074
+ <div class="col-12 col-md-3">
1075
+ <div class="msds-category-card msds-category-card--dark msds-category-card--small msds-category-card--disabled">
1076
+ <div class="msds-category-card__header">
1077
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
1078
+ <div class="msds-category-card__header-icon-container">
1079
+ <svg class="msds-category-card__header-icon">
1080
+ <use href="../../../msds-spritemap.svg#right-arrow" />
1081
+ </svg>
1082
+ </div>
1083
+ </div>
1084
+ </div>
1085
+ </div>
1086
+ </div>
1087
+ </div></div>
1088
+ </div>
1089
+
1090
+ <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>
1091
+ <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>
1092
+ <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>
1093
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--small msds-category-card--dark msds-category-card--disabled"</span>&gt;</span>
1094
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
1095
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1096
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
1097
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
1098
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
1099
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1100
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1101
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1102
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
1103
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Ask ideas and share ideas and experiences.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1104
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1105
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1106
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1107
+ <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>
1108
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--dark msds-category-card--small msds-category-card--disabled"</span>&gt;</span>
1109
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
1110
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>Deployment Best Practices<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1111
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
1112
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
1113
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
1114
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1115
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1116
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1117
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1118
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1119
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1120
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="category-states-dark-themed">Category States Dark Themed</h3>
1121
+ <p>Each button has different states which are applied automatically: <i>hover, active, focus and disabled.</i>
1122
+ You can see the different state by hovering, activating and focusing on them on the example below. The last button would disabled by default.</p>
1123
+ <div class="element-preview-dark">
1124
+ <div class="element-preview__inner"><div class="container">
1125
+ <div class="row card-row">
1126
+ <div class="col-12 col-md-4">
1127
+ <div class="msds-category-card msds-category-card--dark">
1128
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
1129
+ <div class="msds-category-card__header">
1130
+ <div class="msds-category-card__header-body">HOVER ON ME</div>
1131
+ <div class="msds-category-card__header-icon-container">
1132
+ <svg class="msds-category-card__header-icon">
1133
+ <use href="../../../msds-spritemap.svg#right-arrow" />
1134
+ </svg>
1135
+ </div>
1136
+ </div>
1137
+ <div class="msds-category-card__content">
1138
+ <div class="msds-category-card__content-body">Hover on this card to see its hover state</div>
1139
+ </div>
1140
+ </a>
1141
+ </div>
1142
+ </div>
1143
+ <div class="col-12 col-md-4">
1144
+ <div class="msds-category-card msds-category-card--dark">
1145
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
1146
+ <div class="msds-category-card__header">
1147
+ <div class="msds-category-card__header-body">CLICK ON ME</div>
1148
+ <div class="msds-category-card__header-icon-container">
1149
+ <svg class="msds-category-card__header-icon">
1150
+ <use href="../../../msds-spritemap.svg#right-arrow" />
1151
+ </svg>
1152
+ </div>
1153
+ </div>
1154
+ <div class="msds-category-card__content">
1155
+ <div class="msds-category-card__content-body">Click on this card to see its active/focus states</div>
1156
+ </div>
1157
+ </a>
1158
+ </div>
1159
+ </div>
1160
+ <div class="col-12 col-md-4">
1161
+ <div class="msds-category-card msds-category-card--dark msds-category-card--disabled">
1162
+ <div class="msds-category-card__header">
1163
+ <div class="msds-category-card__header-body">DISABLED CARD</div>
1164
+ <div class="msds-category-card__header-icon-container">
1165
+ <svg class="msds-category-card__header-icon">
1166
+ <use href="../../../msds-spritemap.svg#right-arrow" />
1167
+ </svg>
1168
+ </div>
1169
+ </div>
1170
+ <div class="msds-category-card__content">
1171
+ <div class="msds-category-card__content-body">You can not click on disabled category cards</div>
1172
+ </div>
1173
+ </div>
1174
+ </div>
1175
+ </div>
1176
+ </div></div>
1177
+ </div>
1178
+
1179
+ <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>
1180
+ <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>
1181
+ <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>
1182
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--dark"</span>&gt;</span>
1183
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
1184
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
1185
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>HOVER ON ME<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1186
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
1187
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
1188
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
1189
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1190
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1191
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1192
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
1193
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Hover on this card to see its hover state<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1194
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1195
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1196
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1197
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1198
+ <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>
1199
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--dark"</span>&gt;</span>
1200
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"msds-category-cards"</span>&gt;</span>
1201
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
1202
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>CLICK ON ME<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1203
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
1204
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
1205
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
1206
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1207
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1208
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1209
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
1210
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>Click on this card to see its active/focus states<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1211
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1212
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1213
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1214
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1215
+ <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>
1216
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card msds-category-card--dark msds-category-card--disabled"</span>&gt;</span>
1217
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header"</span>&gt;</span>
1218
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-body"</span>&gt;</span>DISABLED CARD<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1219
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon-container"</span>&gt;</span>
1220
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__header-icon"</span>&gt;</span>
1221
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
1222
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1223
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1224
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1225
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content"</span>&gt;</span>
1226
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-category-card__content-body"</span>&gt;</span>You can not click on disabled category cards<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1227
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1228
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1229
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1230
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1231
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><script>
1232
+ //Iniliazes JS each time a user changes the page - this is for fractle v1.3.0
1233
+ dispatchEvent(new Event('load'));
1234
+ </script>
1235
+
1236
+
1237
+
1238
+
1239
+ </div>
1240
+
1241
+
1242
+
1243
+ </div>
1244
+
1245
+ </div>
1246
+
1247
+
1248
+ </div>
1249
+ </div>
1250
+
1251
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
1252
+
1253
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
1254
+ <nav class="Navigation">
1255
+
1256
+
1257
+ <div class="Navigation-group">
1258
+
1259
+ <div class="Tree" data-behaviour="tree" id="tree-components">
1260
+ <div class="Tree-header">
1261
+ <h3 class="Tree-title">components</h3>
1262
+
1263
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
1264
+ <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>
1265
+
1266
+ </button>
1267
+ </div>
1268
+ <ul class="Tree-items Tree-depth-1">
1269
+
1270
+
1271
+
1272
+
1273
+ <li class="Tree-item Tree-entity" data-role="item">
1274
+ <a class="Tree-entityLink" href="../../../components/detail/tab-tile.html" data-pjax>
1275
+ <span>Tab Tile</span>
1276
+
1277
+
1278
+ <div class="Status Status--unlabelled">
1279
+
1280
+ <div class="Status-dots">
1281
+
1282
+
1283
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
1284
+
1285
+
1286
+ </div>
1287
+
1288
+ </div>
1289
+
1290
+
1291
+ </a>
1292
+ </li>
1293
+
1294
+
1295
+
1296
+ </ul>
1297
+ </div>
1298
+
1299
+ </div>
1300
+
1301
+
1302
+
1303
+
1304
+ <div class="Navigation-group">
1305
+
1306
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
1307
+ <div class="Tree-header">
1308
+ <h3 class="Tree-title">documentation</h3>
1309
+
1310
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
1311
+ <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>
1312
+
1313
+ </button>
1314
+ </div>
1315
+ <ul class="Tree-items Tree-depth-1">
1316
+
1317
+
1318
+
1319
+
1320
+ <li class="Tree-item Tree-entity" data-role="item">
1321
+ <a class="Tree-entityLink" href="../../../index.html" data-pjax>
1322
+ <span>Overview</span>
1323
+
1324
+ </a>
1325
+ </li>
1326
+
1327
+
1328
+
1329
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
1330
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
1331
+ Content
1332
+ </button>
1333
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
1334
+
1335
+
1336
+
1337
+
1338
+
1339
+
1340
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
1341
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
1342
+ Icons
1343
+ </button>
1344
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
1345
+
1346
+
1347
+
1348
+
1349
+
1350
+
1351
+
1352
+ <li class="Tree-item Tree-entity" data-role="item">
1353
+ <a class="Tree-entityLink" href="../../content/icons/-overview.html" data-pjax>
1354
+ <span>Overview</span>
1355
+
1356
+ </a>
1357
+ </li>
1358
+
1359
+
1360
+
1361
+
1362
+ <li class="Tree-item Tree-entity" data-role="item">
1363
+ <a class="Tree-entityLink" href="../../content/icons/icons-flat.html" data-pjax>
1364
+ <span>Icons Flat</span>
1365
+
1366
+ </a>
1367
+ </li>
1368
+
1369
+
1370
+
1371
+
1372
+ <li class="Tree-item Tree-entity" data-role="item">
1373
+ <a class="Tree-entityLink" href="../../content/icons/icons-rich.html" data-pjax>
1374
+ <span>Icons Rich</span>
1375
+
1376
+ </a>
1377
+ </li>
1378
+
1379
+
1380
+
1381
+ </ul>
1382
+ </li>
1383
+
1384
+
1385
+
1386
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
1387
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
1388
+ Typography
1389
+ </button>
1390
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
1391
+
1392
+
1393
+
1394
+
1395
+
1396
+
1397
+
1398
+ <li class="Tree-item Tree-entity" data-role="item">
1399
+ <a class="Tree-entityLink" href="../../content/typography/-overview.html" data-pjax>
1400
+ <span>Overview</span>
1401
+
1402
+ </a>
1403
+ </li>
1404
+
1405
+
1406
+
1407
+
1408
+ <li class="Tree-item Tree-entity" data-role="item">
1409
+ <a class="Tree-entityLink" href="../../content/typography/font-colors.html" data-pjax>
1410
+ <span>Font Colors</span>
1411
+
1412
+ </a>
1413
+ </li>
1414
+
1415
+
1416
+
1417
+
1418
+ <li class="Tree-item Tree-entity" data-role="item">
1419
+ <a class="Tree-entityLink" href="../../content/typography/links.html" data-pjax>
1420
+ <span>Links</span>
1421
+
1422
+ </a>
1423
+ </li>
1424
+
1425
+
1426
+
1427
+
1428
+ <li class="Tree-item Tree-entity" data-role="item">
1429
+ <a class="Tree-entityLink" href="../../content/typography/lists.html" data-pjax>
1430
+ <span>Lists</span>
1431
+
1432
+ </a>
1433
+ </li>
1434
+
1435
+
1436
+
1437
+
1438
+ <li class="Tree-item Tree-entity" data-role="item">
1439
+ <a class="Tree-entityLink" href="../../content/typography/text.html" data-pjax>
1440
+ <span>Text</span>
1441
+
1442
+ </a>
1443
+ </li>
1444
+
1445
+
1446
+
1447
+ </ul>
1448
+ </li>
1449
+
1450
+
1451
+
1452
+ </ul>
1453
+ </li>
1454
+
1455
+
1456
+
1457
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
1458
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
1459
+ Component Documentation
1460
+ </button>
1461
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
1462
+
1463
+
1464
+
1465
+
1466
+
1467
+
1468
+
1469
+ <li class="Tree-item Tree-entity" data-role="item">
1470
+ <a class="Tree-entityLink" href="../alerts.html" data-pjax>
1471
+ <span>Alerts</span>
1472
+
1473
+ </a>
1474
+ </li>
1475
+
1476
+
1477
+
1478
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
1479
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
1480
+ Buttons
1481
+ </button>
1482
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
1483
+
1484
+
1485
+
1486
+
1487
+
1488
+
1489
+
1490
+ <li class="Tree-item Tree-entity" data-role="item">
1491
+ <a class="Tree-entityLink" href="../buttons/buttons.html" data-pjax>
1492
+ <span>Buttons</span>
1493
+
1494
+ </a>
1495
+ </li>
1496
+
1497
+
1498
+
1499
+
1500
+ <li class="Tree-item Tree-entity" data-role="item">
1501
+ <a class="Tree-entityLink" href="../buttons/buttons-floating.html" data-pjax>
1502
+ <span>Buttons Floating</span>
1503
+
1504
+ </a>
1505
+ </li>
1506
+
1507
+
1508
+
1509
+ </ul>
1510
+ </li>
1511
+
1512
+
1513
+
1514
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
1515
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
1516
+ Cards
1517
+ </button>
1518
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
1519
+
1520
+
1521
+
1522
+
1523
+
1524
+
1525
+
1526
+ <li class="Tree-item Tree-entity" data-role="item">
1527
+ <a class="Tree-entityLink" href="basic-cards.html" data-pjax>
1528
+ <span>Basic Cards</span>
1529
+
1530
+ </a>
1531
+ </li>
1532
+
1533
+
1534
+
1535
+
1536
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
1537
+ <a class="Tree-entityLink" href="" data-pjax>
1538
+ <span>Category Cards</span>
1539
+
1540
+ </a>
1541
+ </li>
1542
+
1543
+
1544
+
1545
+
1546
+ <li class="Tree-item Tree-entity" data-role="item">
1547
+ <a class="Tree-entityLink" href="contact-cards.html" data-pjax>
1548
+ <span>Contact Cards</span>
1549
+
1550
+ </a>
1551
+ </li>
1552
+
1553
+
1554
+
1555
+
1556
+ <li class="Tree-item Tree-entity" data-role="item">
1557
+ <a class="Tree-entityLink" href="generic-cards.html" data-pjax>
1558
+ <span>Generic Cards</span>
1559
+
1560
+ </a>
1561
+ </li>
1562
+
1563
+
1564
+
1565
+
1566
+ <li class="Tree-item Tree-entity" data-role="item">
1567
+ <a class="Tree-entityLink" href="solution-cards.html" data-pjax>
1568
+ <span>Solution Cards</span>
1569
+
1570
+ </a>
1571
+ </li>
1572
+
1573
+
1574
+
1575
+ </ul>
1576
+ </li>
1577
+
1578
+
1579
+
1580
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
1581
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
1582
+ Dividers
1583
+ </button>
1584
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
1585
+
1586
+
1587
+
1588
+
1589
+
1590
+
1591
+
1592
+ <li class="Tree-item Tree-entity" data-role="item">
1593
+ <a class="Tree-entityLink" href="../dividers/dividers.html" data-pjax>
1594
+ <span>Dividers</span>
1595
+
1596
+ </a>
1597
+ </li>
1598
+
1599
+
1600
+
1601
+ </ul>
1602
+ </li>
1603
+
1604
+
1605
+
1606
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
1607
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
1608
+ Expanding Components
1609
+ </button>
1610
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
1611
+
1612
+
1613
+
1614
+
1615
+
1616
+
1617
+
1618
+ <li class="Tree-item Tree-entity" data-role="item">
1619
+ <a class="Tree-entityLink" href="../expanding-components/accordion.html" data-pjax>
1620
+ <span>Accordion</span>
1621
+
1622
+ </a>
1623
+ </li>
1624
+
1625
+
1626
+
1627
+
1628
+ <li class="Tree-item Tree-entity" data-role="item">
1629
+ <a class="Tree-entityLink" href="../expanding-components/section.html" data-pjax>
1630
+ <span>Section</span>
1631
+
1632
+ </a>
1633
+ </li>
1634
+
1635
+
1636
+
1637
+ </ul>
1638
+ </li>
1639
+
1640
+
1641
+
1642
+
1643
+ <li class="Tree-item Tree-entity" data-role="item">
1644
+ <a class="Tree-entityLink" href="../modal.html" data-pjax>
1645
+ <span>Modal</span>
1646
+
1647
+ </a>
1648
+ </li>
1649
+
1650
+
1651
+
1652
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
1653
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
1654
+ Popover
1655
+ </button>
1656
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
1657
+
1658
+
1659
+
1660
+
1661
+
1662
+
1663
+
1664
+ <li class="Tree-item Tree-entity" data-role="item">
1665
+ <a class="Tree-entityLink" href="../popover/popover.html" data-pjax>
1666
+ <span>Popover</span>
1667
+
1668
+ </a>
1669
+ </li>
1670
+
1671
+
1672
+
1673
+ </ul>
1674
+ </li>
1675
+
1676
+
1677
+
1678
+
1679
+ <li class="Tree-item Tree-entity" data-role="item">
1680
+ <a class="Tree-entityLink" href="../progress-bar.html" data-pjax>
1681
+ <span>Progress Bar</span>
1682
+
1683
+ </a>
1684
+ </li>
1685
+
1686
+
1687
+
1688
+
1689
+ <li class="Tree-item Tree-entity" data-role="item">
1690
+ <a class="Tree-entityLink" href="../spacing.html" data-pjax>
1691
+ <span>Spacing</span>
1692
+
1693
+ </a>
1694
+ </li>
1695
+
1696
+
1697
+
1698
+
1699
+ <li class="Tree-item Tree-entity" data-role="item">
1700
+ <a class="Tree-entityLink" href="../table.html" data-pjax>
1701
+ <span>Table</span>
1702
+
1703
+ </a>
1704
+ </li>
1705
+
1706
+
1707
+
1708
+ </ul>
1709
+ </li>
1710
+
1711
+
1712
+
1713
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
1714
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
1715
+ Forms
1716
+ </button>
1717
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
1718
+
1719
+
1720
+
1721
+
1722
+
1723
+
1724
+
1725
+ <li class="Tree-item Tree-entity" data-role="item">
1726
+ <a class="Tree-entityLink" href="../../forms/-overview.html" data-pjax>
1727
+ <span>Overview</span>
1728
+
1729
+ </a>
1730
+ </li>
1731
+
1732
+
1733
+
1734
+
1735
+ <li class="Tree-item Tree-entity" data-role="item">
1736
+ <a class="Tree-entityLink" href="../../forms/checkbox.html" data-pjax>
1737
+ <span>Checkbox</span>
1738
+
1739
+ </a>
1740
+ </li>
1741
+
1742
+
1743
+
1744
+
1745
+ <li class="Tree-item Tree-entity" data-role="item">
1746
+ <a class="Tree-entityLink" href="../../forms/drop-down-list.html" data-pjax>
1747
+ <span>Drop Down List</span>
1748
+
1749
+ </a>
1750
+ </li>
1751
+
1752
+
1753
+
1754
+
1755
+ <li class="Tree-item Tree-entity" data-role="item">
1756
+ <a class="Tree-entityLink" href="../../forms/input-field.html" data-pjax>
1757
+ <span>Input Field</span>
1758
+
1759
+ </a>
1760
+ </li>
1761
+
1762
+
1763
+
1764
+
1765
+ <li class="Tree-item Tree-entity" data-role="item">
1766
+ <a class="Tree-entityLink" href="../../forms/radio-button.html" data-pjax>
1767
+ <span>Radio Button</span>
1768
+
1769
+ </a>
1770
+ </li>
1771
+
1772
+
1773
+
1774
+
1775
+ <li class="Tree-item Tree-entity" data-role="item">
1776
+ <a class="Tree-entityLink" href="../../forms/switch.html" data-pjax>
1777
+ <span>Switch</span>
1778
+
1779
+ </a>
1780
+ </li>
1781
+
1782
+
1783
+
1784
+
1785
+ <li class="Tree-item Tree-entity" data-role="item">
1786
+ <a class="Tree-entityLink" href="../../forms/text-area.html" data-pjax>
1787
+ <span>Text Area</span>
1788
+
1789
+ </a>
1790
+ </li>
1791
+
1792
+
1793
+
1794
+ </ul>
1795
+ </li>
1796
+
1797
+
1798
+
1799
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
1800
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
1801
+ Utilities
1802
+ </button>
1803
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
1804
+
1805
+
1806
+
1807
+
1808
+
1809
+
1810
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
1811
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
1812
+ Colors
1813
+ </button>
1814
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
1815
+
1816
+
1817
+
1818
+
1819
+
1820
+
1821
+
1822
+ <li class="Tree-item Tree-entity" data-role="item">
1823
+ <a class="Tree-entityLink" href="../../utilities/colors/overview.html" data-pjax>
1824
+ <span>Overview</span>
1825
+
1826
+ </a>
1827
+ </li>
1828
+
1829
+
1830
+
1831
+
1832
+ <li class="Tree-item Tree-entity" data-role="item">
1833
+ <a class="Tree-entityLink" href="../../utilities/colors/font-colors.html" data-pjax>
1834
+ <span>Font Colors</span>
1835
+
1836
+ </a>
1837
+ </li>
1838
+
1839
+
1840
+
1841
+
1842
+ <li class="Tree-item Tree-entity" data-role="item">
1843
+ <a class="Tree-entityLink" href="../../utilities/colors/background-colors.html" data-pjax>
1844
+ <span>Background Colors</span>
1845
+
1846
+ </a>
1847
+ </li>
1848
+
1849
+
1850
+
1851
+ </ul>
1852
+ </li>
1853
+
1854
+
1855
+
1856
+
1857
+ <li class="Tree-item Tree-entity" data-role="item">
1858
+ <a class="Tree-entityLink" href="../../utilities/spacing.html" data-pjax>
1859
+ <span>Spacing</span>
1860
+
1861
+ </a>
1862
+ </li>
1863
+
1864
+
1865
+
1866
+ </ul>
1867
+ </li>
1868
+
1869
+
1870
+
1871
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1872
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1873
+ Guidelines And Guides
1874
+ </button>
1875
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1876
+
1877
+
1878
+
1879
+
1880
+
1881
+
1882
+
1883
+ <li class="Tree-item Tree-entity" data-role="item">
1884
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/creating-a-new-release.html" data-pjax>
1885
+ <span>Creating A New Release</span>
1886
+
1887
+ </a>
1888
+ </li>
1889
+
1890
+
1891
+
1892
+
1893
+ <li class="Tree-item Tree-entity" data-role="item">
1894
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
1895
+ <span>Css And Scss Guidelines</span>
1896
+
1897
+ </a>
1898
+ </li>
1899
+
1900
+
1901
+
1902
+
1903
+ <li class="Tree-item Tree-entity" data-role="item">
1904
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
1905
+ <span>Git Cheat Sheet</span>
1906
+
1907
+ </a>
1908
+ </li>
1909
+
1910
+
1911
+
1912
+
1913
+ <li class="Tree-item Tree-entity" data-role="item">
1914
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/installation-and-usage.html" data-pjax>
1915
+ <span>Installation And Usage</span>
1916
+
1917
+ </a>
1918
+ </li>
1919
+
1920
+
1921
+
1922
+ </ul>
1923
+ </li>
1924
+
1925
+
1926
+
1927
+ </ul>
1928
+ </div>
1929
+
1930
+ </div>
1931
+
1932
+
1933
+
1934
+ </nav>
1935
+
1936
+ </div>
1937
+ </div>
1938
+ </div>
1939
+
1940
+
1941
+
1942
+
1943
+ <script src="../../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
1944
+
1945
+ <script src="../../../design-system.js?cachebust=1.4.0"></script>
1946
+
1947
+
1948
+
1949
+ </body>
1950
+ </html>