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

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 (867) hide show
  1. package/design-system.css +1 -1
  2. package/main.css +1 -1
  3. package/package.json +1 -1
  4. package/assets.html +0 -13
  5. package/components/detail/accordion-checkbox-large.html +0 -1051
  6. package/components/detail/accordion-checkbox-medium-dark.html +0 -1051
  7. package/components/detail/accordion-checkbox-medium-disabled.html +0 -1051
  8. package/components/detail/accordion-checkbox-medium-filtered-list-items.html +0 -1055
  9. package/components/detail/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +0 -1077
  10. package/components/detail/accordion-checkbox-medium-icon-left-floating.html +0 -1077
  11. package/components/detail/accordion-checkbox-medium-icon-left.html +0 -1065
  12. package/components/detail/accordion-checkbox-medium.html +0 -1060
  13. package/components/detail/accordion-checkbox-overview.html +0 -1051
  14. package/components/detail/accordion-input.html +0 -949
  15. package/components/detail/accordion-label.html +0 -949
  16. package/components/detail/accordion-modifier-icon-floating.html +0 -949
  17. package/components/detail/accordion-modifier-icon-left.html +0 -949
  18. package/components/detail/accordion-radio.html +0 -1053
  19. package/components/detail/alert-dark-theme-default.html +0 -1009
  20. package/components/detail/alert-dark-theme-solution.html +0 -1009
  21. package/components/detail/alert-default-extra-attention.html +0 -1007
  22. package/components/detail/alert-default-generic.html +0 -1006
  23. package/components/detail/alert-default-solution-with-badge-and-ready-state.html +0 -1018
  24. package/components/detail/alert-default-solution.html +0 -1010
  25. package/components/detail/alert-default-without-image.html +0 -1004
  26. package/components/detail/alert-default.html +0 -1006
  27. package/components/detail/alert-hidden-after-refresh-checkbox.html +0 -1016
  28. package/components/detail/alert-hidden-after-refresh.html +0 -1005
  29. package/components/detail/alert-layouts.html +0 -1560
  30. package/components/detail/alert-visible-after-refresh.html +0 -1005
  31. package/components/detail/background-colors.html +0 -1287
  32. package/components/detail/basic-card-default-dark.html +0 -1014
  33. package/components/detail/basic-card-default-without-caption-with-header-icon.html +0 -1005
  34. package/components/detail/basic-card-default-without-caption-with-header-image.html +0 -1001
  35. package/components/detail/basic-card-default-without-caption.html +0 -997
  36. package/components/detail/basic-card-default.html +0 -1014
  37. package/components/detail/basic-card-grouping-center.html +0 -1014
  38. package/components/detail/basic-card-grouping-left-with-flat-icon.html +0 -1024
  39. package/components/detail/basic-card-grouping-left.html +0 -1014
  40. package/components/detail/basic-card-grouping.html +0 -1122
  41. package/components/detail/basic-card-layouts.html +0 -1886
  42. package/components/detail/button-danger-dark-icon.html +0 -999
  43. package/components/detail/button-danger-dark.html +0 -975
  44. package/components/detail/button-danger-default.html +0 -975
  45. package/components/detail/button-danger-icon.html +0 -999
  46. package/components/detail/button-disabled-dark-icon.html +0 -999
  47. package/components/detail/button-disabled-dark.html +0 -975
  48. package/components/detail/button-floating-aligned-column.html +0 -1005
  49. package/components/detail/button-floating-aligned-right.html +0 -1005
  50. package/components/detail/button-floating-dark-aligned-column.html +0 -1005
  51. package/components/detail/button-floating-dark-aligned-right.html +0 -1005
  52. package/components/detail/button-floating-dark-default.html +0 -1005
  53. package/components/detail/button-floating-dark-disabled.html +0 -1005
  54. package/components/detail/button-floating-dark-secondary-aligned-column.html +0 -1005
  55. package/components/detail/button-floating-dark-secondary-aligned-right.html +0 -1005
  56. package/components/detail/button-floating-dark-secondary.html +0 -1005
  57. package/components/detail/button-floating-default.html +0 -1005
  58. package/components/detail/button-floating-disabled.html +0 -1005
  59. package/components/detail/button-floating-overview.html +0 -969
  60. package/components/detail/button-floating-positioning.html +0 -1007
  61. package/components/detail/button-floating-secondary-aligned-column.html +0 -1005
  62. package/components/detail/button-floating-secondary-aligned-right.html +0 -1005
  63. package/components/detail/button-floating-secondary.html +0 -1005
  64. package/components/detail/button-floating-states.html +0 -987
  65. package/components/detail/button-gray-default.html +0 -975
  66. package/components/detail/button-gray-icon.html +0 -999
  67. package/components/detail/button-group-center-alignment.html +0 -965
  68. package/components/detail/button-group-left-alignment.html +0 -965
  69. package/components/detail/button-group-right-alignment.html +0 -965
  70. package/components/detail/button-overview-direction.html +0 -983
  71. package/components/detail/button-overview-global-definition.html +0 -975
  72. package/components/detail/button-overview-sizes.html +0 -987
  73. package/components/detail/button-overview-states.html +0 -1019
  74. package/components/detail/button-primary-dark-icon.html +0 -999
  75. package/components/detail/button-primary-dark.html +0 -975
  76. package/components/detail/button-primary-default.html +0 -975
  77. package/components/detail/button-primary-icon.html +0 -999
  78. package/components/detail/button-secondary-dark-icon.html +0 -999
  79. package/components/detail/button-secondary-dark.html +0 -975
  80. package/components/detail/button-secondary-default.html +0 -975
  81. package/components/detail/button-secondary-icon.html +0 -999
  82. package/components/detail/button-tertiary-default.html +0 -975
  83. package/components/detail/button-tertiary-icon.html +0 -999
  84. package/components/detail/buttons-overview.html +0 -2069
  85. package/components/detail/category-dark.html +0 -1022
  86. package/components/detail/category-disabled-dark.html +0 -1014
  87. package/components/detail/category-disabled.html +0 -1014
  88. package/components/detail/category-full-row.html +0 -1178
  89. package/components/detail/category-overview-dark-states.html +0 -1058
  90. package/components/detail/category-overview-dark.html +0 -1022
  91. package/components/detail/category-overview-sizes.html +0 -1030
  92. package/components/detail/category-overview-states.html +0 -1058
  93. package/components/detail/category-small-dark.html +0 -1022
  94. package/components/detail/category-small-disabled-dark.html +0 -1014
  95. package/components/detail/category-small-disabled.html +0 -1014
  96. package/components/detail/category-small-full-row.html +0 -1250
  97. package/components/detail/category-small.html +0 -1022
  98. package/components/detail/category.html +0 -1022
  99. package/components/detail/checkbox-checked.html +0 -968
  100. package/components/detail/checkbox-disabled.html +0 -968
  101. package/components/detail/checkbox-focus.html +0 -968
  102. package/components/detail/checkbox-global-definition.html +0 -968
  103. package/components/detail/checkbox-hover.html +0 -968
  104. package/components/detail/checkbox-inline.html +0 -974
  105. package/components/detail/checkbox-readonly.html +0 -969
  106. package/components/detail/colors-and-shadows.html +0 -1403
  107. package/components/detail/contact-cards.html +0 -2151
  108. package/components/detail/contact-content.html +0 -1017
  109. package/components/detail/contact-overview.html +0 -1147
  110. package/components/detail/contact-sizes.html +0 -1108
  111. package/components/detail/contact-small.html +0 -1038
  112. package/components/detail/contact-without-image-small.html +0 -1028
  113. package/components/detail/contact-without-image.html +0 -1028
  114. package/components/detail/contact.html +0 -1038
  115. package/components/detail/divider-dark-blue.html +0 -949
  116. package/components/detail/divider-default.html +0 -949
  117. package/components/detail/divider-gray-5.html +0 -949
  118. package/components/detail/divider-white-50.html +0 -949
  119. package/components/detail/divider-white.html +0 -949
  120. package/components/detail/divider-yellow.html +0 -949
  121. package/components/detail/generic-card-aspect-16by9.html +0 -1001
  122. package/components/detail/generic-card-aspect-2by1-small.html +0 -1116
  123. package/components/detail/generic-card-aspect-2by1.html +0 -1110
  124. package/components/detail/generic-card-aspect.html +0 -1050
  125. package/components/detail/generic-card-default-small-dark-theme.html +0 -1000
  126. package/components/detail/generic-card-default-small-svg.html +0 -1000
  127. package/components/detail/generic-card-default-small.html +0 -999
  128. package/components/detail/generic-card-default-svg-dark.html +0 -999
  129. package/components/detail/generic-card-default-svg.html +0 -998
  130. package/components/detail/generic-card-default.html +0 -999
  131. package/components/detail/generic-card-media-dark-theme.html +0 -1031
  132. package/components/detail/generic-card-media-floating-icon.html +0 -1042
  133. package/components/detail/generic-card-media-small.html +0 -1027
  134. package/components/detail/generic-card-media.html +0 -1027
  135. package/components/detail/generic-card-overview.html +0 -1062
  136. package/components/detail/generic-flat-icons.html +0 -951
  137. package/components/detail/generic-rich-icons.html +0 -951
  138. package/components/detail/global-colors-alternative.html +0 -1301
  139. package/components/detail/global-colors-gradients.html +0 -1305
  140. package/components/detail/global-colors-gray-white-black.html +0 -1304
  141. package/components/detail/global-colors-primary.html +0 -1295
  142. package/components/detail/global-colors-shadows.html +0 -1295
  143. package/components/detail/global-colors-transparency.html +0 -1306
  144. package/components/detail/global-margins.html +0 -995
  145. package/components/detail/global-paddings.html +0 -951
  146. package/components/detail/gradient-background-colors.html +0 -1517
  147. package/components/detail/input-disabled.html +0 -1003
  148. package/components/detail/input-field.html +0 -1226
  149. package/components/detail/input-focus.html +0 -1003
  150. package/components/detail/input-hover.html +0 -1003
  151. package/components/detail/input-readonly.html +0 -1003
  152. package/components/detail/input-sizes.html +0 -1007
  153. package/components/detail/input-state-error.html +0 -1003
  154. package/components/detail/input-state-success.html +0 -1003
  155. package/components/detail/input.html +0 -981
  156. package/components/detail/large-section-spacing-definitions.html +0 -1011
  157. package/components/detail/large-section-spacing.html +0 -977
  158. package/components/detail/links.html +0 -977
  159. package/components/detail/lists.html +0 -973
  160. package/components/detail/marketplace-flat-icons.html +0 -951
  161. package/components/detail/marketplace-rich-icons.html +0 -951
  162. package/components/detail/matching-content-height-card.html +0 -1599
  163. package/components/detail/medium-section-spacing-definitions.html +0 -1011
  164. package/components/detail/medium-section-spacing.html +0 -977
  165. package/components/detail/modal-on-click.html +0 -1017
  166. package/components/detail/modal-on-load-demo.html +0 -1012
  167. package/components/detail/modal-on-load.html +0 -1012
  168. package/components/detail/msds-text-alt-blue-1.html +0 -1287
  169. package/components/detail/msds-text-alt-blue-2.html +0 -1287
  170. package/components/detail/msds-text-alt-blue-3.html +0 -1287
  171. package/components/detail/msds-text-alt-yellow-1.html +0 -1287
  172. package/components/detail/msds-text-alt-yellow-2.html +0 -1287
  173. package/components/detail/msds-text-black.html +0 -1287
  174. package/components/detail/msds-text-clear-blue.html +0 -1287
  175. package/components/detail/msds-text-confirm-green.html +0 -1287
  176. package/components/detail/msds-text-danger-red-1.html +0 -1287
  177. package/components/detail/msds-text-danger-red-2.html +0 -1287
  178. package/components/detail/msds-text-dark-blue.html +0 -1287
  179. package/components/detail/msds-text-gray-1.html +0 -1287
  180. package/components/detail/msds-text-gray-10.html +0 -1287
  181. package/components/detail/msds-text-gray-2.html +0 -1287
  182. package/components/detail/msds-text-gray-3.html +0 -1287
  183. package/components/detail/msds-text-gray-4.html +0 -1287
  184. package/components/detail/msds-text-gray-5.html +0 -1287
  185. package/components/detail/msds-text-gray-6.html +0 -1287
  186. package/components/detail/msds-text-gray-7.html +0 -1287
  187. package/components/detail/msds-text-gray-8.html +0 -1287
  188. package/components/detail/msds-text-gray-9.html +0 -1287
  189. package/components/detail/msds-text-sand.html +0 -1287
  190. package/components/detail/msds-text-white.html +0 -1287
  191. package/components/detail/msds-text-yellow.html +0 -1287
  192. package/components/detail/popover-bottom.html +0 -1018
  193. package/components/detail/popover-global-definition.html +0 -1018
  194. package/components/detail/popover-left.html +0 -1018
  195. package/components/detail/popover-top.html +0 -1018
  196. package/components/detail/preview-dark.html +0 -1014
  197. package/components/detail/preview.html +0 -1001
  198. package/components/detail/progress-bar-dark-theme.html +0 -997
  199. package/components/detail/progress-bar-features.html +0 -1023
  200. package/components/detail/progress-bar-global-definition.html +0 -973
  201. package/components/detail/progress-bar-light-theme.html +0 -997
  202. package/components/detail/progress-bar-sizes.html +0 -999
  203. package/components/detail/radio-button-disabled.html +0 -963
  204. package/components/detail/radio-button-focus.html +0 -963
  205. package/components/detail/radio-button-global-definition.html +0 -975
  206. package/components/detail/radio-button-hover.html +0 -963
  207. package/components/detail/radio-button-readonly.html +0 -964
  208. package/components/detail/radio-button-selected.html +0 -963
  209. package/components/detail/section-checkbox-dark.html +0 -1019
  210. package/components/detail/section-checkbox-nested-accordion.html +0 -1124
  211. package/components/detail/section-checkbox.html +0 -1083
  212. package/components/detail/section-radio-dark.html +0 -1083
  213. package/components/detail/section-radio-nested-accordion.html +0 -1135
  214. package/components/detail/section-radio.html +0 -1081
  215. package/components/detail/select-input-default.html +0 -973
  216. package/components/detail/select-input-error.html +0 -971
  217. package/components/detail/select-input-global-definition.html +0 -983
  218. package/components/detail/select-input-not-required.html +0 -973
  219. package/components/detail/select-input-required.html +0 -973
  220. package/components/detail/select-input-small.html +0 -969
  221. package/components/detail/small-section-spacing-definitions.html +0 -1017
  222. package/components/detail/small-section-spacing.html +0 -977
  223. package/components/detail/solid-background-colors.html +0 -1457
  224. package/components/detail/solution-card-default-layout.html +0 -1210
  225. package/components/detail/solution-card-default.html +0 -1040
  226. package/components/detail/solution-card-layouts.html +0 -2085
  227. package/components/detail/solution-card-optional-certification-badges.html +0 -1054
  228. package/components/detail/solution-card-optional-solution-badges.html +0 -1054
  229. package/components/detail/solution-card-sizes.html +0 -1125
  230. package/components/detail/solution-card-small.html +0 -1040
  231. package/components/detail/switch-checked.html +0 -973
  232. package/components/detail/switch-default.html +0 -973
  233. package/components/detail/switch-disabled-readonly.html +0 -973
  234. package/components/detail/switch-disabled.html +0 -973
  235. package/components/detail/switch-global.html +0 -983
  236. package/components/detail/tab-tile.html +0 -2409
  237. package/components/detail/table-dark-theme-default-expandable-rows.html +0 -1204
  238. package/components/detail/table-dark-theme-default.html +0 -1228
  239. package/components/detail/table-default-dark.html +0 -1179
  240. package/components/detail/table-default-expandable-rows.html +0 -1203
  241. package/components/detail/table-default-medium.html +0 -1179
  242. package/components/detail/table-default-small.html +0 -1179
  243. package/components/detail/table-default.html +0 -1227
  244. package/components/detail/text-area-disabled.html +0 -1011
  245. package/components/detail/text-area-error.html +0 -1011
  246. package/components/detail/text-area-field.html +0 -985
  247. package/components/detail/text-area-focus.html +0 -1011
  248. package/components/detail/text-area-hover.html +0 -1011
  249. package/components/detail/text-area-readonly.html +0 -1011
  250. package/components/detail/text-area-sizes.html +0 -1011
  251. package/components/detail/text-area-success.html +0 -1011
  252. package/components/detail/text-area.html +0 -1167
  253. package/components/detail/text-colors.html +0 -1287
  254. package/components/detail/text.html +0 -1037
  255. package/components/detail/typography-body-texts.html +0 -993
  256. package/components/detail/typography-displays.html +0 -959
  257. package/components/detail/typography-headers.html +0 -965
  258. package/components/detail/typography-leads.html +0 -951
  259. package/components/detail/typography-links-dark-theme.html +0 -1159
  260. package/components/detail/typography-links-light-theme.html +0 -1123
  261. package/components/detail/typography-links-secondary.html +0 -1011
  262. package/components/detail/typography-unordered-lists.html +0 -973
  263. package/components/preview/accordion-checkbox-large.html +0 -81
  264. package/components/preview/accordion-checkbox-medium-dark.html +0 -81
  265. package/components/preview/accordion-checkbox-medium-disabled.html +0 -82
  266. package/components/preview/accordion-checkbox-medium-filtered-list-items.html +0 -84
  267. package/components/preview/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +0 -95
  268. package/components/preview/accordion-checkbox-medium-icon-left-floating.html +0 -95
  269. package/components/preview/accordion-checkbox-medium-icon-left.html +0 -90
  270. package/components/preview/accordion-checkbox-medium.html +0 -81
  271. package/components/preview/accordion-checkbox-overview.html +0 -83
  272. package/components/preview/accordion-input.html +0 -30
  273. package/components/preview/accordion-label.html +0 -30
  274. package/components/preview/accordion-modifier-icon-floating.html +0 -30
  275. package/components/preview/accordion-modifier-icon-left.html +0 -31
  276. package/components/preview/accordion-radio.html +0 -83
  277. package/components/preview/alert-dark-theme-default.html +0 -59
  278. package/components/preview/alert-dark-theme-solution.html +0 -59
  279. package/components/preview/alert-default-extra-attention.html +0 -58
  280. package/components/preview/alert-default-generic.html +0 -58
  281. package/components/preview/alert-default-solution-with-badge-and-ready-state.html +0 -64
  282. package/components/preview/alert-default-solution.html +0 -60
  283. package/components/preview/alert-default-without-image.html +0 -57
  284. package/components/preview/alert-default.html +0 -58
  285. package/components/preview/alert-hidden-after-refresh-checkbox.html +0 -63
  286. package/components/preview/alert-hidden-after-refresh.html +0 -57
  287. package/components/preview/alert-layouts.html +0 -341
  288. package/components/preview/alert-visible-after-refresh.html +0 -57
  289. package/components/preview/background-colors.html +0 -50
  290. package/components/preview/basic-card-default-dark.html +0 -55
  291. package/components/preview/basic-card-default-without-caption-with-header-icon.html +0 -50
  292. package/components/preview/basic-card-default-without-caption-with-header-image.html +0 -48
  293. package/components/preview/basic-card-default-without-caption.html +0 -46
  294. package/components/preview/basic-card-default.html +0 -55
  295. package/components/preview/basic-card-grouping-center.html +0 -55
  296. package/components/preview/basic-card-grouping-left-with-flat-icon.html +0 -60
  297. package/components/preview/basic-card-grouping-left.html +0 -55
  298. package/components/preview/basic-card-grouping.html +0 -110
  299. package/components/preview/basic-card-layouts.html +0 -494
  300. package/components/preview/button-danger-dark-icon.html +0 -51
  301. package/components/preview/button-danger-dark.html +0 -44
  302. package/components/preview/button-danger-default.html +0 -42
  303. package/components/preview/button-danger-icon.html +0 -51
  304. package/components/preview/button-disabled-dark-icon.html +0 -51
  305. package/components/preview/button-disabled-dark.html +0 -44
  306. package/components/preview/button-floating-aligned-column.html +0 -57
  307. package/components/preview/button-floating-aligned-right.html +0 -57
  308. package/components/preview/button-floating-dark-aligned-column.html +0 -57
  309. package/components/preview/button-floating-dark-aligned-right.html +0 -57
  310. package/components/preview/button-floating-dark-default.html +0 -57
  311. package/components/preview/button-floating-dark-disabled.html +0 -57
  312. package/components/preview/button-floating-dark-secondary-aligned-column.html +0 -57
  313. package/components/preview/button-floating-dark-secondary-aligned-right.html +0 -57
  314. package/components/preview/button-floating-dark-secondary.html +0 -57
  315. package/components/preview/button-floating-default.html +0 -57
  316. package/components/preview/button-floating-disabled.html +0 -57
  317. package/components/preview/button-floating-overview.html +0 -39
  318. package/components/preview/button-floating-positioning.html +0 -58
  319. package/components/preview/button-floating-secondary-aligned-column.html +0 -57
  320. package/components/preview/button-floating-secondary-aligned-right.html +0 -57
  321. package/components/preview/button-floating-secondary.html +0 -57
  322. package/components/preview/button-floating-states.html +0 -48
  323. package/components/preview/button-gray-default.html +0 -43
  324. package/components/preview/button-gray-icon.html +0 -51
  325. package/components/preview/button-group-center-alignment.html +0 -37
  326. package/components/preview/button-group-left-alignment.html +0 -37
  327. package/components/preview/button-group-right-alignment.html +0 -37
  328. package/components/preview/button-overview-direction.html +0 -45
  329. package/components/preview/button-overview-global-definition.html +0 -41
  330. package/components/preview/button-overview-sizes.html +0 -48
  331. package/components/preview/button-overview-states.html +0 -59
  332. package/components/preview/button-primary-dark-icon.html +0 -51
  333. package/components/preview/button-primary-dark.html +0 -44
  334. package/components/preview/button-primary-default.html +0 -42
  335. package/components/preview/button-primary-icon.html +0 -52
  336. package/components/preview/button-secondary-dark-icon.html +0 -51
  337. package/components/preview/button-secondary-dark.html +0 -44
  338. package/components/preview/button-secondary-default.html +0 -44
  339. package/components/preview/button-secondary-icon.html +0 -51
  340. package/components/preview/button-tertiary-default.html +0 -42
  341. package/components/preview/button-tertiary-icon.html +0 -51
  342. package/components/preview/buttons-overview.html +0 -510
  343. package/components/preview/category-dark.html +0 -67
  344. package/components/preview/category-disabled-dark.html +0 -63
  345. package/components/preview/category-disabled.html +0 -59
  346. package/components/preview/category-full-row.html +0 -139
  347. package/components/preview/category-overview-dark-states.html +0 -85
  348. package/components/preview/category-overview-dark.html +0 -67
  349. package/components/preview/category-overview-sizes.html +0 -67
  350. package/components/preview/category-overview-states.html +0 -81
  351. package/components/preview/category-small-dark.html +0 -67
  352. package/components/preview/category-small-disabled-dark.html +0 -63
  353. package/components/preview/category-small-disabled.html +0 -59
  354. package/components/preview/category-small-full-row.html +0 -175
  355. package/components/preview/category-small.html +0 -63
  356. package/components/preview/category.html +0 -63
  357. package/components/preview/checkbox-checked.html +0 -38
  358. package/components/preview/checkbox-disabled.html +0 -38
  359. package/components/preview/checkbox-focus.html +0 -38
  360. package/components/preview/checkbox-global-definition.html +0 -38
  361. package/components/preview/checkbox-hover.html +0 -38
  362. package/components/preview/checkbox-inline.html +0 -41
  363. package/components/preview/checkbox-readonly.html +0 -39
  364. package/components/preview/colors-and-shadows.html +0 -126
  365. package/components/preview/contact-cards.html +0 -622
  366. package/components/preview/contact-content.html +0 -56
  367. package/components/preview/contact-overview.html +0 -121
  368. package/components/preview/contact-sizes.html +0 -102
  369. package/components/preview/contact-small.html +0 -67
  370. package/components/preview/contact-without-image-small.html +0 -62
  371. package/components/preview/contact-without-image.html +0 -62
  372. package/components/preview/contact.html +0 -67
  373. package/components/preview/divider-dark-blue.html +0 -29
  374. package/components/preview/divider-default.html +0 -30
  375. package/components/preview/divider-gray-5.html +0 -29
  376. package/components/preview/divider-white-50.html +0 -29
  377. package/components/preview/divider-white.html +0 -29
  378. package/components/preview/divider-yellow.html +0 -30
  379. package/components/preview/generic-card-aspect-16by9.html +0 -49
  380. package/components/preview/generic-card-aspect-2by1-small.html +0 -110
  381. package/components/preview/generic-card-aspect-2by1.html +0 -106
  382. package/components/preview/generic-card-aspect.html +0 -74
  383. package/components/preview/generic-card-default-small-dark-theme.html +0 -48
  384. package/components/preview/generic-card-default-small-svg.html +0 -48
  385. package/components/preview/generic-card-default-small.html +0 -49
  386. package/components/preview/generic-card-default-svg-dark.html +0 -48
  387. package/components/preview/generic-card-default-svg.html +0 -47
  388. package/components/preview/generic-card-default.html +0 -50
  389. package/components/preview/generic-card-media-dark-theme.html +0 -64
  390. package/components/preview/generic-card-media-floating-icon.html +0 -70
  391. package/components/preview/generic-card-media-small.html +0 -62
  392. package/components/preview/generic-card-media.html +0 -62
  393. package/components/preview/generic-card-overview.html +0 -80
  394. package/components/preview/generic-flat-icons.html +0 -54
  395. package/components/preview/generic-rich-icons.html +0 -54
  396. package/components/preview/global-colors-alternative.html +0 -59
  397. package/components/preview/global-colors-gradients.html +0 -63
  398. package/components/preview/global-colors-gray-white-black.html +0 -62
  399. package/components/preview/global-colors-primary.html +0 -53
  400. package/components/preview/global-colors-shadows.html +0 -54
  401. package/components/preview/global-colors-transparency.html +0 -64
  402. package/components/preview/global-margins.html +0 -51
  403. package/components/preview/global-paddings.html +0 -30
  404. package/components/preview/gradient-background-colors.html +0 -164
  405. package/components/preview/input-disabled.html +0 -56
  406. package/components/preview/input-field.html +0 -164
  407. package/components/preview/input-focus.html +0 -56
  408. package/components/preview/input-hover.html +0 -56
  409. package/components/preview/input-readonly.html +0 -56
  410. package/components/preview/input-sizes.html +0 -58
  411. package/components/preview/input-state-error.html +0 -56
  412. package/components/preview/input-state-success.html +0 -56
  413. package/components/preview/input.html +0 -45
  414. package/components/preview/large-section-spacing-definitions.html +0 -59
  415. package/components/preview/large-section-spacing.html +0 -42
  416. package/components/preview/links.html +0 -44
  417. package/components/preview/lists.html +0 -42
  418. package/components/preview/marketplace-flat-icons.html +0 -54
  419. package/components/preview/marketplace-rich-icons.html +0 -54
  420. package/components/preview/matching-content-height-card.html +0 -354
  421. package/components/preview/medium-section-spacing-definitions.html +0 -59
  422. package/components/preview/medium-section-spacing.html +0 -42
  423. package/components/preview/modal-on-click.html +0 -63
  424. package/components/preview/modal-on-load-demo.html +0 -61
  425. package/components/preview/modal-on-load.html +0 -61
  426. package/components/preview/msds-text-alt-blue-1.html +0 -49
  427. package/components/preview/msds-text-alt-blue-2.html +0 -49
  428. package/components/preview/msds-text-alt-blue-3.html +0 -49
  429. package/components/preview/msds-text-alt-yellow-1.html +0 -49
  430. package/components/preview/msds-text-alt-yellow-2.html +0 -49
  431. package/components/preview/msds-text-black.html +0 -49
  432. package/components/preview/msds-text-clear-blue.html +0 -49
  433. package/components/preview/msds-text-confirm-green.html +0 -49
  434. package/components/preview/msds-text-danger-red-1.html +0 -49
  435. package/components/preview/msds-text-danger-red-2.html +0 -49
  436. package/components/preview/msds-text-dark-blue.html +0 -49
  437. package/components/preview/msds-text-gray-1.html +0 -49
  438. package/components/preview/msds-text-gray-10.html +0 -49
  439. package/components/preview/msds-text-gray-2.html +0 -49
  440. package/components/preview/msds-text-gray-3.html +0 -49
  441. package/components/preview/msds-text-gray-4.html +0 -49
  442. package/components/preview/msds-text-gray-5.html +0 -49
  443. package/components/preview/msds-text-gray-6.html +0 -49
  444. package/components/preview/msds-text-gray-7.html +0 -49
  445. package/components/preview/msds-text-gray-8.html +0 -49
  446. package/components/preview/msds-text-gray-9.html +0 -49
  447. package/components/preview/msds-text-sand.html +0 -49
  448. package/components/preview/msds-text-white.html +0 -49
  449. package/components/preview/msds-text-yellow.html +0 -49
  450. package/components/preview/popover-bottom.html +0 -61
  451. package/components/preview/popover-global-definition.html +0 -61
  452. package/components/preview/popover-left.html +0 -61
  453. package/components/preview/popover-top.html +0 -61
  454. package/components/preview/preview-dark.html +0 -59
  455. package/components/preview/preview.html +0 -29
  456. package/components/preview/progress-bar-dark-theme.html +0 -57
  457. package/components/preview/progress-bar-features.html +0 -66
  458. package/components/preview/progress-bar-global-definition.html +0 -41
  459. package/components/preview/progress-bar-light-theme.html +0 -53
  460. package/components/preview/progress-bar-sizes.html +0 -55
  461. package/components/preview/radio-button-disabled.html +0 -36
  462. package/components/preview/radio-button-focus.html +0 -36
  463. package/components/preview/radio-button-global-definition.html +0 -42
  464. package/components/preview/radio-button-hover.html +0 -36
  465. package/components/preview/radio-button-readonly.html +0 -37
  466. package/components/preview/radio-button-selected.html +0 -36
  467. package/components/preview/section-checkbox-dark.html +0 -64
  468. package/components/preview/section-checkbox-nested-accordion.html +0 -119
  469. package/components/preview/section-checkbox.html +0 -96
  470. package/components/preview/section-radio-dark.html +0 -96
  471. package/components/preview/section-radio-nested-accordion.html +0 -144
  472. package/components/preview/section-radio.html +0 -95
  473. package/components/preview/select-input-default.html +0 -41
  474. package/components/preview/select-input-error.html +0 -40
  475. package/components/preview/select-input-global-definition.html +0 -46
  476. package/components/preview/select-input-not-required.html +0 -41
  477. package/components/preview/select-input-required.html +0 -41
  478. package/components/preview/select-input-small.html +0 -38
  479. package/components/preview/small-section-spacing-definitions.html +0 -62
  480. package/components/preview/small-section-spacing.html +0 -42
  481. package/components/preview/solid-background-colors.html +0 -135
  482. package/components/preview/solution-card-default-layout.html +0 -158
  483. package/components/preview/solution-card-default.html +0 -74
  484. package/components/preview/solution-card-layouts.html +0 -587
  485. package/components/preview/solution-card-optional-certification-badges.html +0 -82
  486. package/components/preview/solution-card-optional-solution-badges.html +0 -82
  487. package/components/preview/solution-card-sizes.html +0 -116
  488. package/components/preview/solution-card-small.html +0 -74
  489. package/components/preview/switch-checked.html +0 -41
  490. package/components/preview/switch-default.html +0 -41
  491. package/components/preview/switch-disabled-readonly.html +0 -41
  492. package/components/preview/switch-disabled.html +0 -41
  493. package/components/preview/switch-global.html +0 -46
  494. package/components/preview/tab-tile.html +0 -1128
  495. package/components/preview/table-dark-theme-default-expandable-rows.html +0 -160
  496. package/components/preview/table-dark-theme-default.html +0 -172
  497. package/components/preview/table-default-dark.html +0 -144
  498. package/components/preview/table-default-expandable-rows.html +0 -156
  499. package/components/preview/table-default-medium.html +0 -144
  500. package/components/preview/table-default-small.html +0 -144
  501. package/components/preview/table-default.html +0 -168
  502. package/components/preview/text-area-disabled.html +0 -60
  503. package/components/preview/text-area-error.html +0 -60
  504. package/components/preview/text-area-field.html +0 -47
  505. package/components/preview/text-area-focus.html +0 -60
  506. package/components/preview/text-area-hover.html +0 -60
  507. package/components/preview/text-area-readonly.html +0 -60
  508. package/components/preview/text-area-sizes.html +0 -60
  509. package/components/preview/text-area-success.html +0 -60
  510. package/components/preview/text-area.html +0 -147
  511. package/components/preview/text-colors.html +0 -49
  512. package/components/preview/text.html +0 -74
  513. package/components/preview/typography-body-texts.html +0 -52
  514. package/components/preview/typography-displays.html +0 -34
  515. package/components/preview/typography-headers.html +0 -37
  516. package/components/preview/typography-leads.html +0 -30
  517. package/components/preview/typography-links-dark-theme.html +0 -135
  518. package/components/preview/typography-links-light-theme.html +0 -117
  519. package/components/preview/typography-links-secondary.html +0 -61
  520. package/components/preview/typography-unordered-lists.html +0 -41
  521. package/components/raw/tab-tile/tab-tile.js +0 -139
  522. package/components/raw/tab-tile/tab-tile.scss +0 -256
  523. package/components/render/accordion-checkbox-large.html +0 -55
  524. package/components/render/accordion-checkbox-medium-dark.html +0 -55
  525. package/components/render/accordion-checkbox-medium-disabled.html +0 -56
  526. package/components/render/accordion-checkbox-medium-filtered-list-items.html +0 -58
  527. package/components/render/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +0 -69
  528. package/components/render/accordion-checkbox-medium-icon-left-floating.html +0 -69
  529. package/components/render/accordion-checkbox-medium-icon-left.html +0 -64
  530. package/components/render/accordion-checkbox-medium.html +0 -55
  531. package/components/render/accordion-checkbox-overview.html +0 -57
  532. package/components/render/accordion-input.html +0 -4
  533. package/components/render/accordion-label.html +0 -4
  534. package/components/render/accordion-modifier-icon-floating.html +0 -4
  535. package/components/render/accordion-modifier-icon-left.html +0 -5
  536. package/components/render/accordion-radio.html +0 -57
  537. package/components/render/alert-dark-theme-default.html +0 -33
  538. package/components/render/alert-dark-theme-solution.html +0 -33
  539. package/components/render/alert-default-extra-attention.html +0 -32
  540. package/components/render/alert-default-generic.html +0 -32
  541. package/components/render/alert-default-solution-with-badge-and-ready-state.html +0 -38
  542. package/components/render/alert-default-solution.html +0 -34
  543. package/components/render/alert-default-without-image.html +0 -31
  544. package/components/render/alert-default.html +0 -32
  545. package/components/render/alert-hidden-after-refresh-checkbox.html +0 -37
  546. package/components/render/alert-hidden-after-refresh.html +0 -31
  547. package/components/render/alert-layouts.html +0 -315
  548. package/components/render/alert-visible-after-refresh.html +0 -31
  549. package/components/render/background-colors.html +0 -4
  550. package/components/render/basic-card-default-dark.html +0 -29
  551. package/components/render/basic-card-default-without-caption-with-header-icon.html +0 -24
  552. package/components/render/basic-card-default-without-caption-with-header-image.html +0 -22
  553. package/components/render/basic-card-default-without-caption.html +0 -20
  554. package/components/render/basic-card-default.html +0 -29
  555. package/components/render/basic-card-grouping-center.html +0 -29
  556. package/components/render/basic-card-grouping-left-with-flat-icon.html +0 -34
  557. package/components/render/basic-card-grouping-left.html +0 -29
  558. package/components/render/basic-card-grouping.html +0 -84
  559. package/components/render/basic-card-layouts.html +0 -468
  560. package/components/render/button-danger-dark-icon.html +0 -25
  561. package/components/render/button-danger-dark.html +0 -18
  562. package/components/render/button-danger-default.html +0 -16
  563. package/components/render/button-danger-icon.html +0 -25
  564. package/components/render/button-disabled-dark-icon.html +0 -25
  565. package/components/render/button-disabled-dark.html +0 -18
  566. package/components/render/button-floating-aligned-column.html +0 -31
  567. package/components/render/button-floating-aligned-right.html +0 -31
  568. package/components/render/button-floating-dark-aligned-column.html +0 -31
  569. package/components/render/button-floating-dark-aligned-right.html +0 -31
  570. package/components/render/button-floating-dark-default.html +0 -31
  571. package/components/render/button-floating-dark-disabled.html +0 -31
  572. package/components/render/button-floating-dark-secondary-aligned-column.html +0 -31
  573. package/components/render/button-floating-dark-secondary-aligned-right.html +0 -31
  574. package/components/render/button-floating-dark-secondary.html +0 -31
  575. package/components/render/button-floating-default.html +0 -31
  576. package/components/render/button-floating-disabled.html +0 -31
  577. package/components/render/button-floating-overview.html +0 -13
  578. package/components/render/button-floating-positioning.html +0 -32
  579. package/components/render/button-floating-secondary-aligned-column.html +0 -31
  580. package/components/render/button-floating-secondary-aligned-right.html +0 -31
  581. package/components/render/button-floating-secondary.html +0 -31
  582. package/components/render/button-floating-states.html +0 -22
  583. package/components/render/button-gray-default.html +0 -17
  584. package/components/render/button-gray-icon.html +0 -25
  585. package/components/render/button-group-center-alignment.html +0 -11
  586. package/components/render/button-group-left-alignment.html +0 -11
  587. package/components/render/button-group-right-alignment.html +0 -11
  588. package/components/render/button-overview-direction.html +0 -19
  589. package/components/render/button-overview-global-definition.html +0 -15
  590. package/components/render/button-overview-sizes.html +0 -22
  591. package/components/render/button-overview-states.html +0 -33
  592. package/components/render/button-primary-dark-icon.html +0 -25
  593. package/components/render/button-primary-dark.html +0 -18
  594. package/components/render/button-primary-default.html +0 -16
  595. package/components/render/button-primary-icon.html +0 -26
  596. package/components/render/button-secondary-dark-icon.html +0 -25
  597. package/components/render/button-secondary-dark.html +0 -18
  598. package/components/render/button-secondary-default.html +0 -18
  599. package/components/render/button-secondary-icon.html +0 -25
  600. package/components/render/button-tertiary-default.html +0 -16
  601. package/components/render/button-tertiary-icon.html +0 -25
  602. package/components/render/buttons-overview.html +0 -484
  603. package/components/render/category-dark.html +0 -37
  604. package/components/render/category-disabled-dark.html +0 -33
  605. package/components/render/category-disabled.html +0 -33
  606. package/components/render/category-full-row.html +0 -113
  607. package/components/render/category-overview-dark-states.html +0 -55
  608. package/components/render/category-overview-dark.html +0 -37
  609. package/components/render/category-overview-sizes.html +0 -41
  610. package/components/render/category-overview-states.html +0 -55
  611. package/components/render/category-small-dark.html +0 -37
  612. package/components/render/category-small-disabled-dark.html +0 -33
  613. package/components/render/category-small-disabled.html +0 -33
  614. package/components/render/category-small-full-row.html +0 -149
  615. package/components/render/category-small.html +0 -37
  616. package/components/render/category.html +0 -37
  617. package/components/render/checkbox-checked.html +0 -12
  618. package/components/render/checkbox-disabled.html +0 -12
  619. package/components/render/checkbox-focus.html +0 -12
  620. package/components/render/checkbox-global-definition.html +0 -12
  621. package/components/render/checkbox-hover.html +0 -12
  622. package/components/render/checkbox-inline.html +0 -15
  623. package/components/render/checkbox-readonly.html +0 -13
  624. package/components/render/colors-and-shadows.html +0 -80
  625. package/components/render/contact-cards.html +0 -596
  626. package/components/render/contact-content.html +0 -30
  627. package/components/render/contact-overview.html +0 -95
  628. package/components/render/contact-sizes.html +0 -76
  629. package/components/render/contact-small.html +0 -41
  630. package/components/render/contact-without-image-small.html +0 -36
  631. package/components/render/contact-without-image.html +0 -36
  632. package/components/render/contact.html +0 -41
  633. package/components/render/divider-dark-blue.html +0 -3
  634. package/components/render/divider-default.html +0 -4
  635. package/components/render/divider-gray-5.html +0 -3
  636. package/components/render/divider-white-50.html +0 -3
  637. package/components/render/divider-white.html +0 -3
  638. package/components/render/divider-yellow.html +0 -4
  639. package/components/render/generic-card-aspect-16by9.html +0 -23
  640. package/components/render/generic-card-aspect-2by1-small.html +0 -84
  641. package/components/render/generic-card-aspect-2by1.html +0 -80
  642. package/components/render/generic-card-aspect.html +0 -48
  643. package/components/render/generic-card-default-small-dark-theme.html +0 -22
  644. package/components/render/generic-card-default-small-svg.html +0 -22
  645. package/components/render/generic-card-default-small.html +0 -23
  646. package/components/render/generic-card-default-svg-dark.html +0 -22
  647. package/components/render/generic-card-default-svg.html +0 -21
  648. package/components/render/generic-card-default.html +0 -24
  649. package/components/render/generic-card-media-dark-theme.html +0 -38
  650. package/components/render/generic-card-media-floating-icon.html +0 -44
  651. package/components/render/generic-card-media-small.html +0 -36
  652. package/components/render/generic-card-media.html +0 -36
  653. package/components/render/generic-card-overview.html +0 -54
  654. package/components/render/generic-flat-icons.html +0 -3
  655. package/components/render/generic-rich-icons.html +0 -3
  656. package/components/render/global-colors-alternative.html +0 -13
  657. package/components/render/global-colors-gradients.html +0 -17
  658. package/components/render/global-colors-gray-white-black.html +0 -16
  659. package/components/render/global-colors-primary.html +0 -7
  660. package/components/render/global-colors-shadows.html +0 -8
  661. package/components/render/global-colors-transparency.html +0 -18
  662. package/components/render/global-margins.html +0 -25
  663. package/components/render/global-paddings.html +0 -4
  664. package/components/render/gradient-background-colors.html +0 -118
  665. package/components/render/input-disabled.html +0 -30
  666. package/components/render/input-field.html +0 -138
  667. package/components/render/input-focus.html +0 -30
  668. package/components/render/input-hover.html +0 -30
  669. package/components/render/input-readonly.html +0 -30
  670. package/components/render/input-sizes.html +0 -32
  671. package/components/render/input-state-error.html +0 -30
  672. package/components/render/input-state-success.html +0 -30
  673. package/components/render/input.html +0 -19
  674. package/components/render/large-section-spacing-definitions.html +0 -33
  675. package/components/render/large-section-spacing.html +0 -16
  676. package/components/render/links.html +0 -18
  677. package/components/render/lists.html +0 -16
  678. package/components/render/marketplace-flat-icons.html +0 -3
  679. package/components/render/marketplace-rich-icons.html +0 -3
  680. package/components/render/matching-content-height-card.html +0 -328
  681. package/components/render/medium-section-spacing-definitions.html +0 -33
  682. package/components/render/medium-section-spacing.html +0 -16
  683. package/components/render/modal-on-click.html +0 -37
  684. package/components/render/modal-on-load-demo.html +0 -35
  685. package/components/render/modal-on-load.html +0 -35
  686. package/components/render/msds-text-alt-blue-1.html +0 -3
  687. package/components/render/msds-text-alt-blue-2.html +0 -3
  688. package/components/render/msds-text-alt-blue-3.html +0 -3
  689. package/components/render/msds-text-alt-yellow-1.html +0 -3
  690. package/components/render/msds-text-alt-yellow-2.html +0 -3
  691. package/components/render/msds-text-black.html +0 -3
  692. package/components/render/msds-text-clear-blue.html +0 -3
  693. package/components/render/msds-text-confirm-green.html +0 -3
  694. package/components/render/msds-text-danger-red-1.html +0 -3
  695. package/components/render/msds-text-danger-red-2.html +0 -3
  696. package/components/render/msds-text-dark-blue.html +0 -3
  697. package/components/render/msds-text-gray-1.html +0 -3
  698. package/components/render/msds-text-gray-10.html +0 -3
  699. package/components/render/msds-text-gray-2.html +0 -3
  700. package/components/render/msds-text-gray-3.html +0 -3
  701. package/components/render/msds-text-gray-4.html +0 -3
  702. package/components/render/msds-text-gray-5.html +0 -3
  703. package/components/render/msds-text-gray-6.html +0 -3
  704. package/components/render/msds-text-gray-7.html +0 -3
  705. package/components/render/msds-text-gray-8.html +0 -3
  706. package/components/render/msds-text-gray-9.html +0 -3
  707. package/components/render/msds-text-sand.html +0 -3
  708. package/components/render/msds-text-white.html +0 -3
  709. package/components/render/msds-text-yellow.html +0 -3
  710. package/components/render/popover-bottom.html +0 -35
  711. package/components/render/popover-global-definition.html +0 -35
  712. package/components/render/popover-left.html +0 -35
  713. package/components/render/popover-top.html +0 -35
  714. package/components/render/preview-dark.html +0 -33
  715. package/components/render/preview.html +0 -29
  716. package/components/render/progress-bar-dark-theme.html +0 -27
  717. package/components/render/progress-bar-features.html +0 -40
  718. package/components/render/progress-bar-global-definition.html +0 -15
  719. package/components/render/progress-bar-light-theme.html +0 -27
  720. package/components/render/progress-bar-sizes.html +0 -29
  721. package/components/render/radio-button-disabled.html +0 -10
  722. package/components/render/radio-button-focus.html +0 -10
  723. package/components/render/radio-button-global-definition.html +0 -16
  724. package/components/render/radio-button-hover.html +0 -10
  725. package/components/render/radio-button-readonly.html +0 -11
  726. package/components/render/radio-button-selected.html +0 -10
  727. package/components/render/section-checkbox-dark.html +0 -38
  728. package/components/render/section-checkbox-nested-accordion.html +0 -93
  729. package/components/render/section-checkbox.html +0 -70
  730. package/components/render/section-radio-dark.html +0 -70
  731. package/components/render/section-radio-nested-accordion.html +0 -118
  732. package/components/render/section-radio.html +0 -69
  733. package/components/render/select-input-default.html +0 -15
  734. package/components/render/select-input-error.html +0 -14
  735. package/components/render/select-input-global-definition.html +0 -20
  736. package/components/render/select-input-not-required.html +0 -15
  737. package/components/render/select-input-required.html +0 -15
  738. package/components/render/select-input-small.html +0 -12
  739. package/components/render/small-section-spacing-definitions.html +0 -36
  740. package/components/render/small-section-spacing.html +0 -16
  741. package/components/render/solid-background-colors.html +0 -89
  742. package/components/render/solution-card-default-layout.html +0 -132
  743. package/components/render/solution-card-default.html +0 -48
  744. package/components/render/solution-card-layouts.html +0 -561
  745. package/components/render/solution-card-optional-certification-badges.html +0 -56
  746. package/components/render/solution-card-optional-solution-badges.html +0 -56
  747. package/components/render/solution-card-sizes.html +0 -90
  748. package/components/render/solution-card-small.html +0 -48
  749. package/components/render/switch-checked.html +0 -15
  750. package/components/render/switch-default.html +0 -15
  751. package/components/render/switch-disabled-readonly.html +0 -15
  752. package/components/render/switch-disabled.html +0 -15
  753. package/components/render/switch-global.html +0 -20
  754. package/components/render/tab-tile.html +0 -1102
  755. package/components/render/table-dark-theme-default-expandable-rows.html +0 -130
  756. package/components/render/table-dark-theme-default.html +0 -142
  757. package/components/render/table-default-dark.html +0 -118
  758. package/components/render/table-default-expandable-rows.html +0 -130
  759. package/components/render/table-default-medium.html +0 -118
  760. package/components/render/table-default-small.html +0 -118
  761. package/components/render/table-default.html +0 -142
  762. package/components/render/text-area-disabled.html +0 -34
  763. package/components/render/text-area-error.html +0 -34
  764. package/components/render/text-area-field.html +0 -21
  765. package/components/render/text-area-focus.html +0 -34
  766. package/components/render/text-area-hover.html +0 -34
  767. package/components/render/text-area-readonly.html +0 -34
  768. package/components/render/text-area-sizes.html +0 -34
  769. package/components/render/text-area-success.html +0 -34
  770. package/components/render/text-area.html +0 -121
  771. package/components/render/text-colors.html +0 -3
  772. package/components/render/text.html +0 -48
  773. package/components/render/typography-body-texts.html +0 -26
  774. package/components/render/typography-displays.html +0 -8
  775. package/components/render/typography-headers.html +0 -11
  776. package/components/render/typography-leads.html +0 -4
  777. package/components/render/typography-links-dark-theme.html +0 -109
  778. package/components/render/typography-links-light-theme.html +0 -91
  779. package/components/render/typography-links-secondary.html +0 -35
  780. package/components/render/typography-unordered-lists.html +0 -15
  781. package/components.html +0 -13
  782. package/docs/component-documentation/alerts.html +0 -1657
  783. package/docs/component-documentation/buttons/buttons-floating.html +0 -1676
  784. package/docs/component-documentation/buttons/buttons.html +0 -1908
  785. package/docs/component-documentation/cards/basic-cards.html +0 -1424
  786. package/docs/component-documentation/cards/category-cards.html +0 -1950
  787. package/docs/component-documentation/cards/contact-cards.html +0 -1474
  788. package/docs/component-documentation/cards/generic-cards.html +0 -1534
  789. package/docs/component-documentation/cards/solution-cards.html +0 -1595
  790. package/docs/component-documentation/dividers/dividers.html +0 -839
  791. package/docs/component-documentation/expanding-components/accordion.html +0 -1832
  792. package/docs/component-documentation/expanding-components/section.html +0 -1511
  793. package/docs/component-documentation/modal.html +0 -983
  794. package/docs/component-documentation/popover/popover.html +0 -1082
  795. package/docs/component-documentation/progress-bar.html +0 -1143
  796. package/docs/component-documentation/spacing.html +0 -831
  797. package/docs/component-documentation/table.html +0 -2336
  798. package/docs/content/icons/-overview.html +0 -848
  799. package/docs/content/icons/icons-flat.html +0 -839
  800. package/docs/content/icons/icons-rich.html +0 -839
  801. package/docs/content/typography/-overview.html +0 -860
  802. package/docs/content/typography/font-colors.html +0 -900
  803. package/docs/content/typography/links.html +0 -1113
  804. package/docs/content/typography/lists.html +0 -854
  805. package/docs/content/typography/text.html +0 -919
  806. package/docs/forms/-overview.html +0 -881
  807. package/docs/forms/checkbox.html +0 -1007
  808. package/docs/forms/drop-down-list.html +0 -981
  809. package/docs/forms/input-field.html +0 -1316
  810. package/docs/forms/radio-button.html +0 -966
  811. package/docs/forms/switch.html +0 -964
  812. package/docs/forms/text-area.html +0 -1371
  813. package/docs/guidelines-and-guides/creating-a-new-release.html +0 -825
  814. package/docs/guidelines-and-guides/css-and-scss-guidelines.html +0 -814
  815. package/docs/guidelines-and-guides/git-cheat-sheet.html +0 -898
  816. package/docs/guidelines-and-guides/installation-and-usage.html +0 -812
  817. package/docs/utilities/colors/background-colors.html +0 -1029
  818. package/docs/utilities/colors/font-colors.html +0 -1002
  819. package/docs/utilities/colors/overview.html +0 -952
  820. package/docs/utilities/spacing.html +0 -1112
  821. package/docs.html +0 -13
  822. package/index.html +0 -807
  823. package/themes/mandelbrot/css/aqua.css +0 -1
  824. package/themes/mandelbrot/css/black.css +0 -1
  825. package/themes/mandelbrot/css/blue.css +0 -1
  826. package/themes/mandelbrot/css/default.css +0 -1
  827. package/themes/mandelbrot/css/fuchsia.css +0 -1
  828. package/themes/mandelbrot/css/green.css +0 -1
  829. package/themes/mandelbrot/css/grey.css +0 -1
  830. package/themes/mandelbrot/css/highlight.css +0 -1
  831. package/themes/mandelbrot/css/lime.css +0 -1
  832. package/themes/mandelbrot/css/maroon.css +0 -1
  833. package/themes/mandelbrot/css/navy.css +0 -1
  834. package/themes/mandelbrot/css/olive.css +0 -1
  835. package/themes/mandelbrot/css/orange.css +0 -1
  836. package/themes/mandelbrot/css/purple.css +0 -1
  837. package/themes/mandelbrot/css/red.css +0 -1
  838. package/themes/mandelbrot/css/teal.css +0 -1
  839. package/themes/mandelbrot/css/white.css +0 -1
  840. package/themes/mandelbrot/css/yellow.css +0 -1
  841. package/themes/mandelbrot/favicon.ico +0 -0
  842. package/themes/mandelbrot/fonts/OpenSans-Italic.woff +0 -0
  843. package/themes/mandelbrot/fonts/OpenSans-Italic.woff2 +0 -0
  844. package/themes/mandelbrot/fonts/OpenSans-Regular.woff +0 -0
  845. package/themes/mandelbrot/fonts/OpenSans-Regular.woff2 +0 -0
  846. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff +0 -0
  847. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff2 +0 -0
  848. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff +0 -0
  849. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff2 +0 -0
  850. package/themes/mandelbrot/fonts/hack-bold-webfont.woff +0 -0
  851. package/themes/mandelbrot/fonts/hack-bold-webfont.woff2 +0 -0
  852. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff +0 -0
  853. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff2 +0 -0
  854. package/themes/mandelbrot/fonts/hack-italic-webfont.woff +0 -0
  855. package/themes/mandelbrot/fonts/hack-italic-webfont.woff2 +0 -0
  856. package/themes/mandelbrot/fonts/hack-regular-webfont.woff +0 -0
  857. package/themes/mandelbrot/fonts/hack-regular-webfont.woff2 +0 -0
  858. package/themes/mandelbrot/img/favicon.png +0 -0
  859. package/themes/mandelbrot/img/icon-drag--horizontal.svg +0 -3
  860. package/themes/mandelbrot/img/icon-drag--vertical.svg +0 -3
  861. package/themes/mandelbrot/img/icon-navigation-closed-ltr.svg +0 -3
  862. package/themes/mandelbrot/img/icon-navigation-closed-rtl.svg +0 -3
  863. package/themes/mandelbrot/img/icon-navigation-opened.svg +0 -3
  864. package/themes/mandelbrot/img/icon-window.svg +0 -3
  865. package/themes/mandelbrot/img/loader.svg +0 -37
  866. package/themes/mandelbrot/js/mandelbrot.js +0 -2
  867. package/themes/mandelbrot/js/mandelbrot.js.map +0 -1
package/docs/component-documentation/cards/category-cards.html DELETED
@@ -1,1950 +0,0 @@
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>