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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (1102) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +7 -7
  3. package/assets.html +13 -0
  4. package/colors.list.js +65 -65
  5. package/components/detail/accordion-checkbox-large.html +1051 -0
  6. package/components/detail/accordion-checkbox-medium-dark.html +1051 -0
  7. package/components/detail/accordion-checkbox-medium-disabled.html +1051 -0
  8. package/components/detail/accordion-checkbox-medium-filtered-list-items.html +1055 -0
  9. package/components/detail/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +1077 -0
  10. package/components/detail/accordion-checkbox-medium-icon-left-floating.html +1077 -0
  11. package/components/detail/accordion-checkbox-medium-icon-left.html +1065 -0
  12. package/components/detail/accordion-checkbox-medium.html +1060 -0
  13. package/components/detail/accordion-checkbox-overview.html +1051 -0
  14. package/components/detail/accordion-input.html +949 -0
  15. package/components/detail/accordion-label.html +949 -0
  16. package/components/detail/accordion-modifier-icon-floating.html +949 -0
  17. package/components/detail/accordion-modifier-icon-left.html +949 -0
  18. package/components/detail/accordion-radio.html +1053 -0
  19. package/components/detail/alert-dark-theme-default.html +1009 -0
  20. package/components/detail/alert-dark-theme-solution.html +1009 -0
  21. package/components/detail/alert-default-extra-attention.html +1007 -0
  22. package/components/detail/alert-default-generic.html +1006 -0
  23. package/components/detail/alert-default-solution-with-badge-and-ready-state.html +1018 -0
  24. package/components/detail/alert-default-solution.html +1010 -0
  25. package/components/detail/alert-default-without-image.html +1004 -0
  26. package/components/detail/alert-default.html +1006 -0
  27. package/components/detail/alert-hidden-after-refresh-checkbox.html +1016 -0
  28. package/components/detail/alert-hidden-after-refresh.html +1005 -0
  29. package/components/detail/alert-layouts.html +1560 -0
  30. package/components/detail/alert-visible-after-refresh.html +1005 -0
  31. package/components/detail/background-colors.html +1287 -0
  32. package/components/detail/basic-card-default-dark.html +1014 -0
  33. package/components/detail/basic-card-default-without-caption-with-header-icon.html +1005 -0
  34. package/components/detail/basic-card-default-without-caption-with-header-image.html +1001 -0
  35. package/components/detail/basic-card-default-without-caption.html +997 -0
  36. package/components/detail/basic-card-default.html +1014 -0
  37. package/components/detail/basic-card-grouping-center.html +1014 -0
  38. package/components/detail/basic-card-grouping-left-with-flat-icon.html +1024 -0
  39. package/components/detail/basic-card-grouping-left.html +1014 -0
  40. package/components/detail/basic-card-grouping.html +1122 -0
  41. package/components/detail/basic-card-layouts.html +1886 -0
  42. package/components/detail/button-danger-dark-icon.html +999 -0
  43. package/components/detail/button-danger-dark.html +975 -0
  44. package/components/detail/button-danger-default.html +975 -0
  45. package/components/detail/button-danger-icon.html +999 -0
  46. package/components/detail/button-disabled-dark-icon.html +999 -0
  47. package/components/detail/button-disabled-dark.html +975 -0
  48. package/components/detail/button-floating-aligned-column.html +1005 -0
  49. package/components/detail/button-floating-aligned-right.html +1005 -0
  50. package/components/detail/button-floating-dark-aligned-column.html +1005 -0
  51. package/components/detail/button-floating-dark-aligned-right.html +1005 -0
  52. package/components/detail/button-floating-dark-default.html +1005 -0
  53. package/components/detail/button-floating-dark-disabled.html +1005 -0
  54. package/components/detail/button-floating-dark-secondary-aligned-column.html +1005 -0
  55. package/components/detail/button-floating-dark-secondary-aligned-right.html +1005 -0
  56. package/components/detail/button-floating-dark-secondary.html +1005 -0
  57. package/components/detail/button-floating-default.html +1005 -0
  58. package/components/detail/button-floating-disabled.html +1005 -0
  59. package/components/detail/button-floating-overview.html +969 -0
  60. package/components/detail/button-floating-positioning.html +1007 -0
  61. package/components/detail/button-floating-secondary-aligned-column.html +1005 -0
  62. package/components/detail/button-floating-secondary-aligned-right.html +1005 -0
  63. package/components/detail/button-floating-secondary.html +1005 -0
  64. package/components/detail/button-floating-states.html +987 -0
  65. package/components/detail/button-gray-default.html +975 -0
  66. package/components/detail/button-gray-icon.html +999 -0
  67. package/components/detail/button-group-center-alignment.html +965 -0
  68. package/components/detail/button-group-left-alignment.html +965 -0
  69. package/components/detail/button-group-right-alignment.html +965 -0
  70. package/components/detail/button-overview-direction.html +983 -0
  71. package/components/detail/button-overview-global-definition.html +975 -0
  72. package/components/detail/button-overview-sizes.html +987 -0
  73. package/components/detail/button-overview-states.html +1019 -0
  74. package/components/detail/button-primary-dark-icon.html +999 -0
  75. package/components/detail/button-primary-dark.html +975 -0
  76. package/components/detail/button-primary-default.html +975 -0
  77. package/components/detail/button-primary-icon.html +999 -0
  78. package/components/detail/button-secondary-dark-icon.html +999 -0
  79. package/components/detail/button-secondary-dark.html +975 -0
  80. package/components/detail/button-secondary-default.html +975 -0
  81. package/components/detail/button-secondary-icon.html +999 -0
  82. package/components/detail/button-tertiary-default.html +975 -0
  83. package/components/detail/button-tertiary-icon.html +999 -0
  84. package/components/detail/buttons-overview.html +2069 -0
  85. package/components/detail/category-dark.html +1022 -0
  86. package/components/detail/category-disabled-dark.html +1014 -0
  87. package/components/detail/category-disabled.html +1014 -0
  88. package/components/detail/category-full-row.html +1178 -0
  89. package/components/detail/category-overview-dark-states.html +1058 -0
  90. package/components/detail/category-overview-dark.html +1022 -0
  91. package/components/detail/category-overview-sizes.html +1030 -0
  92. package/components/detail/category-overview-states.html +1058 -0
  93. package/components/detail/category-small-dark.html +1022 -0
  94. package/components/detail/category-small-disabled-dark.html +1014 -0
  95. package/components/detail/category-small-disabled.html +1014 -0
  96. package/components/detail/category-small-full-row.html +1250 -0
  97. package/components/detail/category-small.html +1022 -0
  98. package/components/detail/category.html +1022 -0
  99. package/components/detail/checkbox-checked.html +968 -0
  100. package/components/detail/checkbox-disabled.html +968 -0
  101. package/components/detail/checkbox-focus.html +968 -0
  102. package/components/detail/checkbox-global-definition.html +968 -0
  103. package/components/detail/checkbox-hover.html +968 -0
  104. package/components/detail/checkbox-inline.html +974 -0
  105. package/components/detail/checkbox-readonly.html +969 -0
  106. package/components/detail/colors-and-shadows.html +1403 -0
  107. package/components/detail/contact-cards.html +2151 -0
  108. package/components/detail/contact-content.html +1017 -0
  109. package/components/detail/contact-overview.html +1147 -0
  110. package/components/detail/contact-sizes.html +1108 -0
  111. package/components/detail/contact-small.html +1038 -0
  112. package/components/detail/contact-without-image-small.html +1028 -0
  113. package/components/detail/contact-without-image.html +1028 -0
  114. package/components/detail/contact.html +1038 -0
  115. package/components/detail/divider-dark-blue.html +949 -0
  116. package/components/detail/divider-default.html +949 -0
  117. package/components/detail/divider-gray-5.html +949 -0
  118. package/components/detail/divider-white-50.html +949 -0
  119. package/components/detail/divider-white.html +949 -0
  120. package/components/detail/divider-yellow.html +949 -0
  121. package/components/detail/generic-card-aspect-16by9.html +1001 -0
  122. package/components/detail/generic-card-aspect-2by1-small.html +1116 -0
  123. package/components/detail/generic-card-aspect-2by1.html +1110 -0
  124. package/components/detail/generic-card-aspect.html +1050 -0
  125. package/components/detail/generic-card-default-small-dark-theme.html +1000 -0
  126. package/components/detail/generic-card-default-small-svg.html +1000 -0
  127. package/components/detail/generic-card-default-small.html +999 -0
  128. package/components/detail/generic-card-default-svg-dark.html +999 -0
  129. package/components/detail/generic-card-default-svg.html +998 -0
  130. package/components/detail/generic-card-default.html +999 -0
  131. package/components/detail/generic-card-media-dark-theme.html +1031 -0
  132. package/components/detail/generic-card-media-floating-icon.html +1042 -0
  133. package/components/detail/generic-card-media-small.html +1027 -0
  134. package/components/detail/generic-card-media.html +1027 -0
  135. package/components/detail/generic-card-overview.html +1062 -0
  136. package/components/detail/generic-flat-icons.html +951 -0
  137. package/components/detail/generic-rich-icons.html +951 -0
  138. package/components/detail/global-colors-alternative.html +1301 -0
  139. package/components/detail/global-colors-gradients.html +1305 -0
  140. package/components/detail/global-colors-gray-white-black.html +1304 -0
  141. package/components/detail/global-colors-primary.html +1295 -0
  142. package/components/detail/global-colors-shadows.html +1295 -0
  143. package/components/detail/global-colors-transparency.html +1306 -0
  144. package/components/detail/global-margins.html +995 -0
  145. package/components/detail/global-paddings.html +951 -0
  146. package/components/detail/gradient-background-colors.html +1517 -0
  147. package/components/detail/input-disabled.html +1003 -0
  148. package/components/detail/input-field.html +1226 -0
  149. package/components/detail/input-focus.html +1003 -0
  150. package/components/detail/input-hover.html +1003 -0
  151. package/components/detail/input-readonly.html +1003 -0
  152. package/components/detail/input-sizes.html +1007 -0
  153. package/components/detail/input-state-error.html +1003 -0
  154. package/components/detail/input-state-success.html +1003 -0
  155. package/components/detail/input.html +981 -0
  156. package/components/detail/large-section-spacing-definitions.html +1011 -0
  157. package/components/detail/large-section-spacing.html +977 -0
  158. package/components/detail/links.html +977 -0
  159. package/components/detail/lists.html +973 -0
  160. package/components/detail/marketplace-flat-icons.html +951 -0
  161. package/components/detail/marketplace-rich-icons.html +951 -0
  162. package/components/detail/matching-content-height-card.html +1599 -0
  163. package/components/detail/medium-section-spacing-definitions.html +1011 -0
  164. package/components/detail/medium-section-spacing.html +977 -0
  165. package/components/detail/modal-on-click.html +1017 -0
  166. package/components/detail/modal-on-load-demo.html +1012 -0
  167. package/components/detail/modal-on-load.html +1012 -0
  168. package/components/detail/msds-text-alt-blue-1.html +1287 -0
  169. package/components/detail/msds-text-alt-blue-2.html +1287 -0
  170. package/components/detail/msds-text-alt-blue-3.html +1287 -0
  171. package/components/detail/msds-text-alt-yellow-1.html +1287 -0
  172. package/components/detail/msds-text-alt-yellow-2.html +1287 -0
  173. package/components/detail/msds-text-black.html +1287 -0
  174. package/components/detail/msds-text-clear-blue.html +1287 -0
  175. package/components/detail/msds-text-confirm-green.html +1287 -0
  176. package/components/detail/msds-text-danger-red-1.html +1287 -0
  177. package/components/detail/msds-text-danger-red-2.html +1287 -0
  178. package/components/detail/msds-text-dark-blue.html +1287 -0
  179. package/components/detail/msds-text-gray-1.html +1287 -0
  180. package/components/detail/msds-text-gray-10.html +1287 -0
  181. package/components/detail/msds-text-gray-2.html +1287 -0
  182. package/components/detail/msds-text-gray-3.html +1287 -0
  183. package/components/detail/msds-text-gray-4.html +1287 -0
  184. package/components/detail/msds-text-gray-5.html +1287 -0
  185. package/components/detail/msds-text-gray-6.html +1287 -0
  186. package/components/detail/msds-text-gray-7.html +1287 -0
  187. package/components/detail/msds-text-gray-8.html +1287 -0
  188. package/components/detail/msds-text-gray-9.html +1287 -0
  189. package/components/detail/msds-text-sand.html +1287 -0
  190. package/components/detail/msds-text-white.html +1287 -0
  191. package/components/detail/msds-text-yellow.html +1287 -0
  192. package/components/detail/popover-bottom.html +1018 -0
  193. package/components/detail/popover-global-definition.html +1018 -0
  194. package/components/detail/popover-left.html +1018 -0
  195. package/components/detail/popover-top.html +1018 -0
  196. package/components/detail/preview-dark.html +1014 -0
  197. package/components/detail/preview.html +1001 -0
  198. package/components/detail/progress-bar-dark-theme.html +997 -0
  199. package/components/detail/progress-bar-features.html +1023 -0
  200. package/components/detail/progress-bar-global-definition.html +973 -0
  201. package/components/detail/progress-bar-light-theme.html +997 -0
  202. package/components/detail/progress-bar-sizes.html +999 -0
  203. package/components/detail/radio-button-disabled.html +963 -0
  204. package/components/detail/radio-button-focus.html +963 -0
  205. package/components/detail/radio-button-global-definition.html +975 -0
  206. package/components/detail/radio-button-hover.html +963 -0
  207. package/components/detail/radio-button-readonly.html +964 -0
  208. package/components/detail/radio-button-selected.html +963 -0
  209. package/components/detail/section-checkbox-dark.html +1019 -0
  210. package/components/detail/section-checkbox-nested-accordion.html +1124 -0
  211. package/components/detail/section-checkbox.html +1083 -0
  212. package/components/detail/section-radio-dark.html +1083 -0
  213. package/components/detail/section-radio-nested-accordion.html +1135 -0
  214. package/components/detail/section-radio.html +1081 -0
  215. package/components/detail/select-input-default.html +973 -0
  216. package/components/detail/select-input-error.html +971 -0
  217. package/components/detail/select-input-global-definition.html +983 -0
  218. package/components/detail/select-input-not-required.html +973 -0
  219. package/components/detail/select-input-required.html +973 -0
  220. package/components/detail/select-input-small.html +969 -0
  221. package/components/detail/small-section-spacing-definitions.html +1017 -0
  222. package/components/detail/small-section-spacing.html +977 -0
  223. package/components/detail/solid-background-colors.html +1457 -0
  224. package/components/detail/solution-card-default-layout.html +1210 -0
  225. package/components/detail/solution-card-default.html +1040 -0
  226. package/components/detail/solution-card-layouts.html +2085 -0
  227. package/components/detail/solution-card-optional-certification-badges.html +1054 -0
  228. package/components/detail/solution-card-optional-solution-badges.html +1054 -0
  229. package/components/detail/solution-card-sizes.html +1125 -0
  230. package/components/detail/solution-card-small.html +1040 -0
  231. package/components/detail/switch-checked.html +973 -0
  232. package/components/detail/switch-default.html +973 -0
  233. package/components/detail/switch-disabled-readonly.html +973 -0
  234. package/components/detail/switch-disabled.html +973 -0
  235. package/components/detail/switch-global.html +983 -0
  236. package/components/detail/tab-tile.html +2409 -0
  237. package/components/detail/table-dark-theme-default-expandable-rows.html +1204 -0
  238. package/components/detail/table-dark-theme-default.html +1228 -0
  239. package/components/detail/table-default-dark.html +1179 -0
  240. package/components/detail/table-default-expandable-rows.html +1203 -0
  241. package/components/detail/table-default-medium.html +1179 -0
  242. package/components/detail/table-default-small.html +1179 -0
  243. package/components/detail/table-default.html +1227 -0
  244. package/components/detail/text-area-disabled.html +1011 -0
  245. package/components/detail/text-area-error.html +1011 -0
  246. package/components/detail/text-area-field.html +985 -0
  247. package/components/detail/text-area-focus.html +1011 -0
  248. package/components/detail/text-area-hover.html +1011 -0
  249. package/components/detail/text-area-readonly.html +1011 -0
  250. package/components/detail/text-area-sizes.html +1011 -0
  251. package/components/detail/text-area-success.html +1011 -0
  252. package/components/detail/text-area.html +1167 -0
  253. package/components/detail/text-colors.html +1287 -0
  254. package/components/detail/text.html +1037 -0
  255. package/components/detail/typography-body-texts.html +993 -0
  256. package/components/detail/typography-displays.html +959 -0
  257. package/components/detail/typography-headers.html +965 -0
  258. package/components/detail/typography-leads.html +951 -0
  259. package/components/detail/typography-links-dark-theme.html +1159 -0
  260. package/components/detail/typography-links-light-theme.html +1123 -0
  261. package/components/detail/typography-links-secondary.html +1011 -0
  262. package/components/detail/typography-unordered-lists.html +973 -0
  263. package/components/preview/accordion-checkbox-large.html +81 -0
  264. package/components/preview/accordion-checkbox-medium-dark.html +81 -0
  265. package/components/preview/accordion-checkbox-medium-disabled.html +82 -0
  266. package/components/preview/accordion-checkbox-medium-filtered-list-items.html +84 -0
  267. package/components/preview/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +95 -0
  268. package/components/preview/accordion-checkbox-medium-icon-left-floating.html +95 -0
  269. package/components/preview/accordion-checkbox-medium-icon-left.html +90 -0
  270. package/components/preview/accordion-checkbox-medium.html +81 -0
  271. package/components/preview/accordion-checkbox-overview.html +83 -0
  272. package/components/preview/accordion-input.html +30 -0
  273. package/components/preview/accordion-label.html +30 -0
  274. package/components/preview/accordion-modifier-icon-floating.html +30 -0
  275. package/components/preview/accordion-modifier-icon-left.html +31 -0
  276. package/components/preview/accordion-radio.html +83 -0
  277. package/components/preview/alert-dark-theme-default.html +59 -0
  278. package/components/preview/alert-dark-theme-solution.html +59 -0
  279. package/components/preview/alert-default-extra-attention.html +58 -0
  280. package/components/preview/alert-default-generic.html +58 -0
  281. package/components/preview/alert-default-solution-with-badge-and-ready-state.html +64 -0
  282. package/components/preview/alert-default-solution.html +60 -0
  283. package/components/preview/alert-default-without-image.html +57 -0
  284. package/components/preview/alert-default.html +58 -0
  285. package/components/preview/alert-hidden-after-refresh-checkbox.html +63 -0
  286. package/components/preview/alert-hidden-after-refresh.html +57 -0
  287. package/components/preview/alert-layouts.html +341 -0
  288. package/components/preview/alert-visible-after-refresh.html +57 -0
  289. package/components/preview/background-colors.html +50 -0
  290. package/components/preview/basic-card-default-dark.html +55 -0
  291. package/components/preview/basic-card-default-without-caption-with-header-icon.html +50 -0
  292. package/components/preview/basic-card-default-without-caption-with-header-image.html +48 -0
  293. package/components/preview/basic-card-default-without-caption.html +46 -0
  294. package/components/preview/basic-card-default.html +55 -0
  295. package/components/preview/basic-card-grouping-center.html +55 -0
  296. package/components/preview/basic-card-grouping-left-with-flat-icon.html +60 -0
  297. package/components/preview/basic-card-grouping-left.html +55 -0
  298. package/components/preview/basic-card-grouping.html +110 -0
  299. package/components/preview/basic-card-layouts.html +494 -0
  300. package/components/preview/button-danger-dark-icon.html +51 -0
  301. package/components/preview/button-danger-dark.html +44 -0
  302. package/components/preview/button-danger-default.html +42 -0
  303. package/components/preview/button-danger-icon.html +51 -0
  304. package/components/preview/button-disabled-dark-icon.html +51 -0
  305. package/components/preview/button-disabled-dark.html +44 -0
  306. package/components/preview/button-floating-aligned-column.html +57 -0
  307. package/components/preview/button-floating-aligned-right.html +57 -0
  308. package/components/preview/button-floating-dark-aligned-column.html +57 -0
  309. package/components/preview/button-floating-dark-aligned-right.html +57 -0
  310. package/components/preview/button-floating-dark-default.html +57 -0
  311. package/components/preview/button-floating-dark-disabled.html +57 -0
  312. package/components/preview/button-floating-dark-secondary-aligned-column.html +57 -0
  313. package/components/preview/button-floating-dark-secondary-aligned-right.html +57 -0
  314. package/components/preview/button-floating-dark-secondary.html +57 -0
  315. package/components/preview/button-floating-default.html +57 -0
  316. package/components/preview/button-floating-disabled.html +57 -0
  317. package/components/preview/button-floating-overview.html +39 -0
  318. package/components/preview/button-floating-positioning.html +58 -0
  319. package/components/preview/button-floating-secondary-aligned-column.html +57 -0
  320. package/components/preview/button-floating-secondary-aligned-right.html +57 -0
  321. package/components/preview/button-floating-secondary.html +57 -0
  322. package/components/preview/button-floating-states.html +48 -0
  323. package/components/preview/button-gray-default.html +43 -0
  324. package/components/preview/button-gray-icon.html +51 -0
  325. package/components/preview/button-group-center-alignment.html +37 -0
  326. package/components/preview/button-group-left-alignment.html +37 -0
  327. package/components/preview/button-group-right-alignment.html +37 -0
  328. package/components/preview/button-overview-direction.html +45 -0
  329. package/components/preview/button-overview-global-definition.html +41 -0
  330. package/components/preview/button-overview-sizes.html +48 -0
  331. package/components/preview/button-overview-states.html +59 -0
  332. package/components/preview/button-primary-dark-icon.html +51 -0
  333. package/components/preview/button-primary-dark.html +44 -0
  334. package/components/preview/button-primary-default.html +42 -0
  335. package/components/preview/button-primary-icon.html +52 -0
  336. package/components/preview/button-secondary-dark-icon.html +51 -0
  337. package/components/preview/button-secondary-dark.html +44 -0
  338. package/components/preview/button-secondary-default.html +44 -0
  339. package/components/preview/button-secondary-icon.html +51 -0
  340. package/components/preview/button-tertiary-default.html +42 -0
  341. package/components/preview/button-tertiary-icon.html +51 -0
  342. package/components/preview/buttons-overview.html +510 -0
  343. package/components/preview/category-dark.html +67 -0
  344. package/components/preview/category-disabled-dark.html +63 -0
  345. package/components/preview/category-disabled.html +59 -0
  346. package/components/preview/category-full-row.html +139 -0
  347. package/components/preview/category-overview-dark-states.html +85 -0
  348. package/components/preview/category-overview-dark.html +67 -0
  349. package/components/preview/category-overview-sizes.html +67 -0
  350. package/components/preview/category-overview-states.html +81 -0
  351. package/components/preview/category-small-dark.html +67 -0
  352. package/components/preview/category-small-disabled-dark.html +63 -0
  353. package/components/preview/category-small-disabled.html +59 -0
  354. package/components/preview/category-small-full-row.html +175 -0
  355. package/components/preview/category-small.html +63 -0
  356. package/components/preview/category.html +63 -0
  357. package/components/preview/checkbox-checked.html +38 -0
  358. package/components/preview/checkbox-disabled.html +38 -0
  359. package/components/preview/checkbox-focus.html +38 -0
  360. package/components/preview/checkbox-global-definition.html +38 -0
  361. package/components/preview/checkbox-hover.html +38 -0
  362. package/components/preview/checkbox-inline.html +41 -0
  363. package/components/preview/checkbox-readonly.html +39 -0
  364. package/components/preview/colors-and-shadows.html +126 -0
  365. package/components/preview/contact-cards.html +622 -0
  366. package/components/preview/contact-content.html +56 -0
  367. package/components/preview/contact-overview.html +121 -0
  368. package/components/preview/contact-sizes.html +102 -0
  369. package/components/preview/contact-small.html +67 -0
  370. package/components/preview/contact-without-image-small.html +62 -0
  371. package/components/preview/contact-without-image.html +62 -0
  372. package/components/preview/contact.html +67 -0
  373. package/components/preview/divider-dark-blue.html +29 -0
  374. package/components/preview/divider-default.html +30 -0
  375. package/components/preview/divider-gray-5.html +29 -0
  376. package/components/preview/divider-white-50.html +29 -0
  377. package/components/preview/divider-white.html +29 -0
  378. package/components/preview/divider-yellow.html +30 -0
  379. package/components/preview/generic-card-aspect-16by9.html +49 -0
  380. package/components/preview/generic-card-aspect-2by1-small.html +110 -0
  381. package/components/preview/generic-card-aspect-2by1.html +106 -0
  382. package/components/preview/generic-card-aspect.html +74 -0
  383. package/components/preview/generic-card-default-small-dark-theme.html +48 -0
  384. package/components/preview/generic-card-default-small-svg.html +48 -0
  385. package/components/preview/generic-card-default-small.html +49 -0
  386. package/components/preview/generic-card-default-svg-dark.html +48 -0
  387. package/components/preview/generic-card-default-svg.html +47 -0
  388. package/components/preview/generic-card-default.html +50 -0
  389. package/components/preview/generic-card-media-dark-theme.html +64 -0
  390. package/components/preview/generic-card-media-floating-icon.html +70 -0
  391. package/components/preview/generic-card-media-small.html +62 -0
  392. package/components/preview/generic-card-media.html +62 -0
  393. package/components/preview/generic-card-overview.html +80 -0
  394. package/components/preview/generic-flat-icons.html +54 -0
  395. package/components/preview/generic-rich-icons.html +54 -0
  396. package/components/preview/global-colors-alternative.html +59 -0
  397. package/components/preview/global-colors-gradients.html +63 -0
  398. package/components/preview/global-colors-gray-white-black.html +62 -0
  399. package/components/preview/global-colors-primary.html +53 -0
  400. package/components/preview/global-colors-shadows.html +54 -0
  401. package/components/preview/global-colors-transparency.html +64 -0
  402. package/components/preview/global-margins.html +51 -0
  403. package/components/preview/global-paddings.html +30 -0
  404. package/components/preview/gradient-background-colors.html +164 -0
  405. package/components/preview/input-disabled.html +56 -0
  406. package/components/preview/input-field.html +164 -0
  407. package/components/preview/input-focus.html +56 -0
  408. package/components/preview/input-hover.html +56 -0
  409. package/components/preview/input-readonly.html +56 -0
  410. package/components/preview/input-sizes.html +58 -0
  411. package/components/preview/input-state-error.html +56 -0
  412. package/components/preview/input-state-success.html +56 -0
  413. package/components/preview/input.html +45 -0
  414. package/components/preview/large-section-spacing-definitions.html +59 -0
  415. package/components/preview/large-section-spacing.html +42 -0
  416. package/components/preview/links.html +44 -0
  417. package/components/preview/lists.html +42 -0
  418. package/components/preview/marketplace-flat-icons.html +54 -0
  419. package/components/preview/marketplace-rich-icons.html +54 -0
  420. package/components/preview/matching-content-height-card.html +354 -0
  421. package/components/preview/medium-section-spacing-definitions.html +59 -0
  422. package/components/preview/medium-section-spacing.html +42 -0
  423. package/components/preview/modal-on-click.html +63 -0
  424. package/components/preview/modal-on-load-demo.html +61 -0
  425. package/components/preview/modal-on-load.html +61 -0
  426. package/components/preview/msds-text-alt-blue-1.html +49 -0
  427. package/components/preview/msds-text-alt-blue-2.html +49 -0
  428. package/components/preview/msds-text-alt-blue-3.html +49 -0
  429. package/components/preview/msds-text-alt-yellow-1.html +49 -0
  430. package/components/preview/msds-text-alt-yellow-2.html +49 -0
  431. package/components/preview/msds-text-black.html +49 -0
  432. package/components/preview/msds-text-clear-blue.html +49 -0
  433. package/components/preview/msds-text-confirm-green.html +49 -0
  434. package/components/preview/msds-text-danger-red-1.html +49 -0
  435. package/components/preview/msds-text-danger-red-2.html +49 -0
  436. package/components/preview/msds-text-dark-blue.html +49 -0
  437. package/components/preview/msds-text-gray-1.html +49 -0
  438. package/components/preview/msds-text-gray-10.html +49 -0
  439. package/components/preview/msds-text-gray-2.html +49 -0
  440. package/components/preview/msds-text-gray-3.html +49 -0
  441. package/components/preview/msds-text-gray-4.html +49 -0
  442. package/components/preview/msds-text-gray-5.html +49 -0
  443. package/components/preview/msds-text-gray-6.html +49 -0
  444. package/components/preview/msds-text-gray-7.html +49 -0
  445. package/components/preview/msds-text-gray-8.html +49 -0
  446. package/components/preview/msds-text-gray-9.html +49 -0
  447. package/components/preview/msds-text-sand.html +49 -0
  448. package/components/preview/msds-text-white.html +49 -0
  449. package/components/preview/msds-text-yellow.html +49 -0
  450. package/components/preview/popover-bottom.html +61 -0
  451. package/components/preview/popover-global-definition.html +61 -0
  452. package/components/preview/popover-left.html +61 -0
  453. package/components/preview/popover-top.html +61 -0
  454. package/components/preview/preview-dark.html +59 -0
  455. package/components/preview/preview.html +29 -0
  456. package/components/preview/progress-bar-dark-theme.html +57 -0
  457. package/components/preview/progress-bar-features.html +66 -0
  458. package/components/preview/progress-bar-global-definition.html +41 -0
  459. package/components/preview/progress-bar-light-theme.html +53 -0
  460. package/components/preview/progress-bar-sizes.html +55 -0
  461. package/components/preview/radio-button-disabled.html +36 -0
  462. package/components/preview/radio-button-focus.html +36 -0
  463. package/components/preview/radio-button-global-definition.html +42 -0
  464. package/components/preview/radio-button-hover.html +36 -0
  465. package/components/preview/radio-button-readonly.html +37 -0
  466. package/components/preview/radio-button-selected.html +36 -0
  467. package/components/preview/section-checkbox-dark.html +64 -0
  468. package/components/preview/section-checkbox-nested-accordion.html +119 -0
  469. package/components/preview/section-checkbox.html +96 -0
  470. package/components/preview/section-radio-dark.html +96 -0
  471. package/components/preview/section-radio-nested-accordion.html +144 -0
  472. package/components/preview/section-radio.html +95 -0
  473. package/components/preview/select-input-default.html +41 -0
  474. package/components/preview/select-input-error.html +40 -0
  475. package/components/preview/select-input-global-definition.html +46 -0
  476. package/components/preview/select-input-not-required.html +41 -0
  477. package/components/preview/select-input-required.html +41 -0
  478. package/components/preview/select-input-small.html +38 -0
  479. package/components/preview/small-section-spacing-definitions.html +62 -0
  480. package/components/preview/small-section-spacing.html +42 -0
  481. package/components/preview/solid-background-colors.html +135 -0
  482. package/components/preview/solution-card-default-layout.html +158 -0
  483. package/components/preview/solution-card-default.html +74 -0
  484. package/components/preview/solution-card-layouts.html +587 -0
  485. package/components/preview/solution-card-optional-certification-badges.html +82 -0
  486. package/components/preview/solution-card-optional-solution-badges.html +82 -0
  487. package/components/preview/solution-card-sizes.html +116 -0
  488. package/components/preview/solution-card-small.html +74 -0
  489. package/components/preview/switch-checked.html +41 -0
  490. package/components/preview/switch-default.html +41 -0
  491. package/components/preview/switch-disabled-readonly.html +41 -0
  492. package/components/preview/switch-disabled.html +41 -0
  493. package/components/preview/switch-global.html +46 -0
  494. package/components/preview/tab-tile.html +1128 -0
  495. package/components/preview/table-dark-theme-default-expandable-rows.html +160 -0
  496. package/components/preview/table-dark-theme-default.html +172 -0
  497. package/components/preview/table-default-dark.html +144 -0
  498. package/components/preview/table-default-expandable-rows.html +156 -0
  499. package/components/preview/table-default-medium.html +144 -0
  500. package/components/preview/table-default-small.html +144 -0
  501. package/components/preview/table-default.html +168 -0
  502. package/components/preview/text-area-disabled.html +60 -0
  503. package/components/preview/text-area-error.html +60 -0
  504. package/components/preview/text-area-field.html +47 -0
  505. package/components/preview/text-area-focus.html +60 -0
  506. package/components/preview/text-area-hover.html +60 -0
  507. package/components/preview/text-area-readonly.html +60 -0
  508. package/components/preview/text-area-sizes.html +60 -0
  509. package/components/preview/text-area-success.html +60 -0
  510. package/components/preview/text-area.html +147 -0
  511. package/components/preview/text-colors.html +49 -0
  512. package/components/preview/text.html +74 -0
  513. package/components/preview/typography-body-texts.html +52 -0
  514. package/components/preview/typography-displays.html +34 -0
  515. package/components/preview/typography-headers.html +37 -0
  516. package/components/preview/typography-leads.html +30 -0
  517. package/components/preview/typography-links-dark-theme.html +135 -0
  518. package/components/preview/typography-links-light-theme.html +117 -0
  519. package/components/preview/typography-links-secondary.html +61 -0
  520. package/components/preview/typography-unordered-lists.html +41 -0
  521. package/components/raw/tab-tile/tab-tile.js +139 -0
  522. package/components/raw/tab-tile/tab-tile.scss +256 -0
  523. package/components/render/accordion-checkbox-large.html +55 -0
  524. package/components/render/accordion-checkbox-medium-dark.html +55 -0
  525. package/components/render/accordion-checkbox-medium-disabled.html +56 -0
  526. package/components/render/accordion-checkbox-medium-filtered-list-items.html +58 -0
  527. package/components/render/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +69 -0
  528. package/components/render/accordion-checkbox-medium-icon-left-floating.html +69 -0
  529. package/components/render/accordion-checkbox-medium-icon-left.html +64 -0
  530. package/components/render/accordion-checkbox-medium.html +55 -0
  531. package/components/render/accordion-checkbox-overview.html +57 -0
  532. package/components/render/accordion-input.html +4 -0
  533. package/components/render/accordion-label.html +4 -0
  534. package/components/render/accordion-modifier-icon-floating.html +4 -0
  535. package/components/render/accordion-modifier-icon-left.html +5 -0
  536. package/components/render/accordion-radio.html +57 -0
  537. package/components/render/alert-dark-theme-default.html +33 -0
  538. package/components/render/alert-dark-theme-solution.html +33 -0
  539. package/components/render/alert-default-extra-attention.html +32 -0
  540. package/components/render/alert-default-generic.html +32 -0
  541. package/components/render/alert-default-solution-with-badge-and-ready-state.html +38 -0
  542. package/components/render/alert-default-solution.html +34 -0
  543. package/components/render/alert-default-without-image.html +31 -0
  544. package/components/render/alert-default.html +32 -0
  545. package/components/render/alert-hidden-after-refresh-checkbox.html +37 -0
  546. package/components/render/alert-hidden-after-refresh.html +31 -0
  547. package/components/render/alert-layouts.html +315 -0
  548. package/components/render/alert-visible-after-refresh.html +31 -0
  549. package/components/render/background-colors.html +4 -0
  550. package/components/render/basic-card-default-dark.html +29 -0
  551. package/components/render/basic-card-default-without-caption-with-header-icon.html +24 -0
  552. package/components/render/basic-card-default-without-caption-with-header-image.html +22 -0
  553. package/components/render/basic-card-default-without-caption.html +20 -0
  554. package/components/render/basic-card-default.html +29 -0
  555. package/components/render/basic-card-grouping-center.html +29 -0
  556. package/components/render/basic-card-grouping-left-with-flat-icon.html +34 -0
  557. package/components/render/basic-card-grouping-left.html +29 -0
  558. package/components/render/basic-card-grouping.html +84 -0
  559. package/components/render/basic-card-layouts.html +468 -0
  560. package/components/render/button-danger-dark-icon.html +25 -0
  561. package/components/render/button-danger-dark.html +18 -0
  562. package/components/render/button-danger-default.html +16 -0
  563. package/components/render/button-danger-icon.html +25 -0
  564. package/components/render/button-disabled-dark-icon.html +25 -0
  565. package/components/render/button-disabled-dark.html +18 -0
  566. package/components/render/button-floating-aligned-column.html +31 -0
  567. package/components/render/button-floating-aligned-right.html +31 -0
  568. package/components/render/button-floating-dark-aligned-column.html +31 -0
  569. package/components/render/button-floating-dark-aligned-right.html +31 -0
  570. package/components/render/button-floating-dark-default.html +31 -0
  571. package/components/render/button-floating-dark-disabled.html +31 -0
  572. package/components/render/button-floating-dark-secondary-aligned-column.html +31 -0
  573. package/components/render/button-floating-dark-secondary-aligned-right.html +31 -0
  574. package/components/render/button-floating-dark-secondary.html +31 -0
  575. package/components/render/button-floating-default.html +31 -0
  576. package/components/render/button-floating-disabled.html +31 -0
  577. package/components/render/button-floating-overview.html +13 -0
  578. package/components/render/button-floating-positioning.html +32 -0
  579. package/components/render/button-floating-secondary-aligned-column.html +31 -0
  580. package/components/render/button-floating-secondary-aligned-right.html +31 -0
  581. package/components/render/button-floating-secondary.html +31 -0
  582. package/components/render/button-floating-states.html +22 -0
  583. package/components/render/button-gray-default.html +17 -0
  584. package/components/render/button-gray-icon.html +25 -0
  585. package/components/render/button-group-center-alignment.html +11 -0
  586. package/components/render/button-group-left-alignment.html +11 -0
  587. package/components/render/button-group-right-alignment.html +11 -0
  588. package/components/render/button-overview-direction.html +19 -0
  589. package/components/render/button-overview-global-definition.html +15 -0
  590. package/components/render/button-overview-sizes.html +22 -0
  591. package/components/render/button-overview-states.html +33 -0
  592. package/components/render/button-primary-dark-icon.html +25 -0
  593. package/components/render/button-primary-dark.html +18 -0
  594. package/components/render/button-primary-default.html +16 -0
  595. package/components/render/button-primary-icon.html +26 -0
  596. package/components/render/button-secondary-dark-icon.html +25 -0
  597. package/components/render/button-secondary-dark.html +18 -0
  598. package/components/render/button-secondary-default.html +18 -0
  599. package/components/render/button-secondary-icon.html +25 -0
  600. package/components/render/button-tertiary-default.html +16 -0
  601. package/components/render/button-tertiary-icon.html +25 -0
  602. package/components/render/buttons-overview.html +484 -0
  603. package/components/render/category-dark.html +37 -0
  604. package/components/render/category-disabled-dark.html +33 -0
  605. package/components/render/category-disabled.html +33 -0
  606. package/components/render/category-full-row.html +113 -0
  607. package/components/render/category-overview-dark-states.html +55 -0
  608. package/components/render/category-overview-dark.html +37 -0
  609. package/components/render/category-overview-sizes.html +41 -0
  610. package/components/render/category-overview-states.html +55 -0
  611. package/components/render/category-small-dark.html +37 -0
  612. package/components/render/category-small-disabled-dark.html +33 -0
  613. package/components/render/category-small-disabled.html +33 -0
  614. package/components/render/category-small-full-row.html +149 -0
  615. package/components/render/category-small.html +37 -0
  616. package/components/render/category.html +37 -0
  617. package/components/render/checkbox-checked.html +12 -0
  618. package/components/render/checkbox-disabled.html +12 -0
  619. package/components/render/checkbox-focus.html +12 -0
  620. package/components/render/checkbox-global-definition.html +12 -0
  621. package/components/render/checkbox-hover.html +12 -0
  622. package/components/render/checkbox-inline.html +15 -0
  623. package/components/render/checkbox-readonly.html +13 -0
  624. package/components/render/colors-and-shadows.html +80 -0
  625. package/components/render/contact-cards.html +596 -0
  626. package/components/render/contact-content.html +30 -0
  627. package/components/render/contact-overview.html +95 -0
  628. package/components/render/contact-sizes.html +76 -0
  629. package/components/render/contact-small.html +41 -0
  630. package/components/render/contact-without-image-small.html +36 -0
  631. package/components/render/contact-without-image.html +36 -0
  632. package/components/render/contact.html +41 -0
  633. package/components/render/divider-dark-blue.html +3 -0
  634. package/components/render/divider-default.html +4 -0
  635. package/components/render/divider-gray-5.html +3 -0
  636. package/components/render/divider-white-50.html +3 -0
  637. package/components/render/divider-white.html +3 -0
  638. package/components/render/divider-yellow.html +4 -0
  639. package/components/render/generic-card-aspect-16by9.html +23 -0
  640. package/components/render/generic-card-aspect-2by1-small.html +84 -0
  641. package/components/render/generic-card-aspect-2by1.html +80 -0
  642. package/components/render/generic-card-aspect.html +48 -0
  643. package/components/render/generic-card-default-small-dark-theme.html +22 -0
  644. package/components/render/generic-card-default-small-svg.html +22 -0
  645. package/components/render/generic-card-default-small.html +23 -0
  646. package/components/render/generic-card-default-svg-dark.html +22 -0
  647. package/components/render/generic-card-default-svg.html +21 -0
  648. package/components/render/generic-card-default.html +24 -0
  649. package/components/render/generic-card-media-dark-theme.html +38 -0
  650. package/components/render/generic-card-media-floating-icon.html +44 -0
  651. package/components/render/generic-card-media-small.html +36 -0
  652. package/components/render/generic-card-media.html +36 -0
  653. package/components/render/generic-card-overview.html +54 -0
  654. package/components/render/generic-flat-icons.html +3 -0
  655. package/components/render/generic-rich-icons.html +3 -0
  656. package/components/render/global-colors-alternative.html +13 -0
  657. package/components/render/global-colors-gradients.html +17 -0
  658. package/components/render/global-colors-gray-white-black.html +16 -0
  659. package/components/render/global-colors-primary.html +7 -0
  660. package/components/render/global-colors-shadows.html +8 -0
  661. package/components/render/global-colors-transparency.html +18 -0
  662. package/components/render/global-margins.html +25 -0
  663. package/components/render/global-paddings.html +4 -0
  664. package/components/render/gradient-background-colors.html +118 -0
  665. package/components/render/input-disabled.html +30 -0
  666. package/components/render/input-field.html +138 -0
  667. package/components/render/input-focus.html +30 -0
  668. package/components/render/input-hover.html +30 -0
  669. package/components/render/input-readonly.html +30 -0
  670. package/components/render/input-sizes.html +32 -0
  671. package/components/render/input-state-error.html +30 -0
  672. package/components/render/input-state-success.html +30 -0
  673. package/components/render/input.html +19 -0
  674. package/components/render/large-section-spacing-definitions.html +33 -0
  675. package/components/render/large-section-spacing.html +16 -0
  676. package/components/render/links.html +18 -0
  677. package/components/render/lists.html +16 -0
  678. package/components/render/marketplace-flat-icons.html +3 -0
  679. package/components/render/marketplace-rich-icons.html +3 -0
  680. package/components/render/matching-content-height-card.html +328 -0
  681. package/components/render/medium-section-spacing-definitions.html +33 -0
  682. package/components/render/medium-section-spacing.html +16 -0
  683. package/components/render/modal-on-click.html +37 -0
  684. package/components/render/modal-on-load-demo.html +35 -0
  685. package/components/render/modal-on-load.html +35 -0
  686. package/components/render/msds-text-alt-blue-1.html +3 -0
  687. package/components/render/msds-text-alt-blue-2.html +3 -0
  688. package/components/render/msds-text-alt-blue-3.html +3 -0
  689. package/components/render/msds-text-alt-yellow-1.html +3 -0
  690. package/components/render/msds-text-alt-yellow-2.html +3 -0
  691. package/components/render/msds-text-black.html +3 -0
  692. package/components/render/msds-text-clear-blue.html +3 -0
  693. package/components/render/msds-text-confirm-green.html +3 -0
  694. package/components/render/msds-text-danger-red-1.html +3 -0
  695. package/components/render/msds-text-danger-red-2.html +3 -0
  696. package/components/render/msds-text-dark-blue.html +3 -0
  697. package/components/render/msds-text-gray-1.html +3 -0
  698. package/components/render/msds-text-gray-10.html +3 -0
  699. package/components/render/msds-text-gray-2.html +3 -0
  700. package/components/render/msds-text-gray-3.html +3 -0
  701. package/components/render/msds-text-gray-4.html +3 -0
  702. package/components/render/msds-text-gray-5.html +3 -0
  703. package/components/render/msds-text-gray-6.html +3 -0
  704. package/components/render/msds-text-gray-7.html +3 -0
  705. package/components/render/msds-text-gray-8.html +3 -0
  706. package/components/render/msds-text-gray-9.html +3 -0
  707. package/components/render/msds-text-sand.html +3 -0
  708. package/components/render/msds-text-white.html +3 -0
  709. package/components/render/msds-text-yellow.html +3 -0
  710. package/components/render/popover-bottom.html +35 -0
  711. package/components/render/popover-global-definition.html +35 -0
  712. package/components/render/popover-left.html +35 -0
  713. package/components/render/popover-top.html +35 -0
  714. package/components/render/preview-dark.html +33 -0
  715. package/components/render/preview.html +29 -0
  716. package/components/render/progress-bar-dark-theme.html +27 -0
  717. package/components/render/progress-bar-features.html +40 -0
  718. package/components/render/progress-bar-global-definition.html +15 -0
  719. package/components/render/progress-bar-light-theme.html +27 -0
  720. package/components/render/progress-bar-sizes.html +29 -0
  721. package/components/render/radio-button-disabled.html +10 -0
  722. package/components/render/radio-button-focus.html +10 -0
  723. package/components/render/radio-button-global-definition.html +16 -0
  724. package/components/render/radio-button-hover.html +10 -0
  725. package/components/render/radio-button-readonly.html +11 -0
  726. package/components/render/radio-button-selected.html +10 -0
  727. package/components/render/section-checkbox-dark.html +38 -0
  728. package/components/render/section-checkbox-nested-accordion.html +93 -0
  729. package/components/render/section-checkbox.html +70 -0
  730. package/components/render/section-radio-dark.html +70 -0
  731. package/components/render/section-radio-nested-accordion.html +118 -0
  732. package/components/render/section-radio.html +69 -0
  733. package/components/render/select-input-default.html +15 -0
  734. package/components/render/select-input-error.html +14 -0
  735. package/components/render/select-input-global-definition.html +20 -0
  736. package/components/render/select-input-not-required.html +15 -0
  737. package/components/render/select-input-required.html +15 -0
  738. package/components/render/select-input-small.html +12 -0
  739. package/components/render/small-section-spacing-definitions.html +36 -0
  740. package/components/render/small-section-spacing.html +16 -0
  741. package/components/render/solid-background-colors.html +89 -0
  742. package/components/render/solution-card-default-layout.html +132 -0
  743. package/components/render/solution-card-default.html +48 -0
  744. package/components/render/solution-card-layouts.html +561 -0
  745. package/components/render/solution-card-optional-certification-badges.html +56 -0
  746. package/components/render/solution-card-optional-solution-badges.html +56 -0
  747. package/components/render/solution-card-sizes.html +90 -0
  748. package/components/render/solution-card-small.html +48 -0
  749. package/components/render/switch-checked.html +15 -0
  750. package/components/render/switch-default.html +15 -0
  751. package/components/render/switch-disabled-readonly.html +15 -0
  752. package/components/render/switch-disabled.html +15 -0
  753. package/components/render/switch-global.html +20 -0
  754. package/components/render/tab-tile.html +1102 -0
  755. package/components/render/table-dark-theme-default-expandable-rows.html +130 -0
  756. package/components/render/table-dark-theme-default.html +142 -0
  757. package/components/render/table-default-dark.html +118 -0
  758. package/components/render/table-default-expandable-rows.html +130 -0
  759. package/components/render/table-default-medium.html +118 -0
  760. package/components/render/table-default-small.html +118 -0
  761. package/components/render/table-default.html +142 -0
  762. package/components/render/text-area-disabled.html +34 -0
  763. package/components/render/text-area-error.html +34 -0
  764. package/components/render/text-area-field.html +21 -0
  765. package/components/render/text-area-focus.html +34 -0
  766. package/components/render/text-area-hover.html +34 -0
  767. package/components/render/text-area-readonly.html +34 -0
  768. package/components/render/text-area-sizes.html +34 -0
  769. package/components/render/text-area-success.html +34 -0
  770. package/components/render/text-area.html +121 -0
  771. package/components/render/text-colors.html +3 -0
  772. package/components/render/text.html +48 -0
  773. package/components/render/typography-body-texts.html +26 -0
  774. package/components/render/typography-displays.html +8 -0
  775. package/components/render/typography-headers.html +11 -0
  776. package/components/render/typography-leads.html +4 -0
  777. package/components/render/typography-links-dark-theme.html +109 -0
  778. package/components/render/typography-links-light-theme.html +91 -0
  779. package/components/render/typography-links-secondary.html +35 -0
  780. package/components/render/typography-unordered-lists.html +15 -0
  781. package/components.html +13 -0
  782. package/design-system.css +1 -1
  783. package/docs/component-documentation/alerts.html +1657 -0
  784. package/docs/component-documentation/buttons/buttons-floating.html +1676 -0
  785. package/docs/component-documentation/buttons/buttons.html +1908 -0
  786. package/docs/component-documentation/cards/basic-cards.html +1424 -0
  787. package/docs/component-documentation/cards/category-cards.html +1950 -0
  788. package/docs/component-documentation/cards/contact-cards.html +1474 -0
  789. package/docs/component-documentation/cards/generic-cards.html +1534 -0
  790. package/docs/component-documentation/cards/solution-cards.html +1595 -0
  791. package/docs/component-documentation/dividers/dividers.html +839 -0
  792. package/docs/component-documentation/expanding-components/accordion.html +1832 -0
  793. package/docs/component-documentation/expanding-components/section.html +1511 -0
  794. package/docs/component-documentation/modal.html +983 -0
  795. package/docs/component-documentation/popover/popover.html +1082 -0
  796. package/docs/component-documentation/progress-bar.html +1143 -0
  797. package/docs/component-documentation/spacing.html +831 -0
  798. package/docs/component-documentation/table.html +2336 -0
  799. package/docs/content/icons/-overview.html +848 -0
  800. package/docs/content/icons/icons-flat.html +839 -0
  801. package/docs/content/icons/icons-rich.html +839 -0
  802. package/docs/content/typography/-overview.html +860 -0
  803. package/docs/content/typography/font-colors.html +900 -0
  804. package/docs/content/typography/links.html +1113 -0
  805. package/docs/content/typography/lists.html +854 -0
  806. package/docs/content/typography/text.html +919 -0
  807. package/docs/forms/-overview.html +881 -0
  808. package/docs/forms/checkbox.html +1007 -0
  809. package/docs/forms/drop-down-list.html +981 -0
  810. package/docs/forms/input-field.html +1316 -0
  811. package/docs/forms/radio-button.html +966 -0
  812. package/docs/forms/switch.html +964 -0
  813. package/docs/forms/text-area.html +1371 -0
  814. package/docs/guidelines-and-guides/creating-a-new-release.html +825 -0
  815. package/docs/guidelines-and-guides/css-and-scss-guidelines.html +814 -0
  816. package/docs/guidelines-and-guides/git-cheat-sheet.html +898 -0
  817. package/docs/guidelines-and-guides/installation-and-usage.html +812 -0
  818. package/docs/utilities/colors/background-colors.html +1029 -0
  819. package/docs/utilities/colors/font-colors.html +1002 -0
  820. package/docs/utilities/colors/overview.html +952 -0
  821. package/docs/utilities/spacing.html +1112 -0
  822. package/docs.html +13 -0
  823. package/icons.list.js +2432 -2432
  824. package/index.html +807 -0
  825. package/main.css +1 -1
  826. package/package.json +58 -58
  827. package/scss/_variables.scss +124 -124
  828. package/spacing.list.js +11 -11
  829. package/svg/rich/Okay.svg +33 -33
  830. package/svg/rich/acceleration.svg +39 -39
  831. package/svg/rich/add-content.svg +37 -37
  832. package/svg/rich/add-solution.svg +29 -29
  833. package/svg/rich/advanced-super-surveillance.svg +42 -42
  834. package/svg/rich/advocacy .svg +60 -60
  835. package/svg/rich/airplane.svg +67 -67
  836. package/svg/rich/ambition.svg +46 -46
  837. package/svg/rich/analytics-devices.svg +68 -68
  838. package/svg/rich/applications.svg +97 -97
  839. package/svg/rich/backup-important.svg +157 -157
  840. package/svg/rich/black-screens.svg +43 -43
  841. package/svg/rich/blueprint.svg +22 -22
  842. package/svg/rich/body-worn.svg +45 -45
  843. package/svg/rich/book-a-demo-notification.svg +38 -38
  844. package/svg/rich/book-a-demo.svg +34 -34
  845. package/svg/rich/booking.svg +49 -49
  846. package/svg/rich/browser.svg +32 -32
  847. package/svg/rich/build.svg +34 -34
  848. package/svg/rich/building-medium.svg +66 -66
  849. package/svg/rich/cal-monthly.svg +324 -324
  850. package/svg/rich/cal-weekly.svg +173 -173
  851. package/svg/rich/calendar.svg +25 -25
  852. package/svg/rich/cam-group-small.svg +84 -84
  853. package/svg/rich/camera-analogue.svg +27 -27
  854. package/svg/rich/camera-memory.svg +25 -25
  855. package/svg/rich/car.svg +41 -41
  856. package/svg/rich/care.svg +16 -16
  857. package/svg/rich/catalogue.svg +22 -22
  858. package/svg/rich/certification.svg +25 -25
  859. package/svg/rich/checklist.svg +22 -22
  860. package/svg/rich/checkmark-badge.svg +11 -11
  861. package/svg/rich/checkmark.svg +11 -11
  862. package/svg/rich/clock-24-7.svg +77 -77
  863. package/svg/rich/co-working.svg +104 -104
  864. package/svg/rich/coffee.svg +60 -60
  865. package/svg/rich/community.svg +184 -184
  866. package/svg/rich/company.svg +32 -32
  867. package/svg/rich/complete-flow.svg +30 -30
  868. package/svg/rich/consumer.svg +47 -47
  869. package/svg/rich/contact-illustration.svg +13 -13
  870. package/svg/rich/contact-notification.svg +17 -17
  871. package/svg/rich/crime.svg +29 -29
  872. package/svg/rich/crowd-management.svg +47 -47
  873. package/svg/rich/customer-stories.svg +23 -23
  874. package/svg/rich/customizable.svg +19 -19
  875. package/svg/rich/cyber-security.svg +131 -131
  876. package/svg/rich/dashboard.svg +43 -43
  877. package/svg/rich/decision-making.svg +19 -19
  878. package/svg/rich/deployment-device.svg +66 -66
  879. package/svg/rich/design-animated.svg +51 -51
  880. package/svg/rich/design.svg +24 -24
  881. package/svg/rich/devices-web.svg +56 -56
  882. package/svg/rich/devices.svg +29 -29
  883. package/svg/rich/discount.svg +22 -22
  884. package/svg/rich/document.svg +24 -24
  885. package/svg/rich/documentation.svg +79 -79
  886. package/svg/rich/dome-cam-8.svg +84 -84
  887. package/svg/rich/dome-cam.svg +16 -16
  888. package/svg/rich/download-illustration.svg +49 -49
  889. package/svg/rich/e-learning.svg +42 -42
  890. package/svg/rich/emergency.svg +44 -44
  891. package/svg/rich/employees.svg +37 -37
  892. package/svg/rich/end-user.svg +28 -28
  893. package/svg/rich/expertise.svg +47 -47
  894. package/svg/rich/explore.svg +50 -50
  895. package/svg/rich/extension.svg +63 -63
  896. package/svg/rich/failover.svg +33 -33
  897. package/svg/rich/faq.svg +23 -23
  898. package/svg/rich/feedback-notification.svg +21 -21
  899. package/svg/rich/feedback.svg +17 -17
  900. package/svg/rich/find.svg +28 -28
  901. package/svg/rich/flexibility.svg +13 -13
  902. package/svg/rich/form.svg +26 -26
  903. package/svg/rich/get-leads.svg +73 -73
  904. package/svg/rich/getting-started.svg +29 -29
  905. package/svg/rich/global-partner-network.svg +978 -978
  906. package/svg/rich/growth-data.svg +56 -56
  907. package/svg/rich/happiness.svg +29 -29
  908. package/svg/rich/hardware-applications-software.svg +165 -165
  909. package/svg/rich/hardware-services-documentation.svg +47 -47
  910. package/svg/rich/hardware.svg +22 -22
  911. package/svg/rich/intelligence.svg +43 -43
  912. package/svg/rich/interconnect.svg +39 -39
  913. package/svg/rich/investigation.svg +34 -34
  914. package/svg/rich/join.svg +78 -78
  915. package/svg/rich/key-features.svg +38 -38
  916. package/svg/rich/languages.svg +49 -49
  917. package/svg/rich/license-governance.svg +45 -45
  918. package/svg/rich/license-key.svg +13 -13
  919. package/svg/rich/like-notification.svg +43 -43
  920. package/svg/rich/listen.svg +13 -13
  921. package/svg/rich/live-streaming.svg +93 -93
  922. package/svg/rich/logged-in.svg +14 -14
  923. package/svg/rich/lpr.svg +59 -59
  924. package/svg/rich/marketplace-challenges-assist-people-feel-safe-leaving.svg +105 -105
  925. package/svg/rich/marketplace-challenges-assist-people-in-finding-their-vehicles.svg +124 -124
  926. package/svg/rich/marketplace-challenges-avoid-employee-theft.svg +169 -169
  927. package/svg/rich/marketplace-challenges-control-access-to-restricted-areas.svg +104 -104
  928. package/svg/rich/marketplace-challenges-discover-inefficiencies-in-cargo-movement.svg +130 -130
  929. package/svg/rich/marketplace-challenges-find-lost-children.svg +87 -87
  930. package/svg/rich/marketplace-challenges-gather-evidence-for-criminal-investigation.svg +172 -172
  931. package/svg/rich/marketplace-challenges-improve-wait-time-in-lines.svg +375 -375
  932. package/svg/rich/marketplace-challenges-money-disputes-with-customers.svg +157 -157
  933. package/svg/rich/marketplace-challenges-personalized-customer-experience.svg +127 -127
  934. package/svg/rich/marketplace-challenges-prevent-multiple-people-from-entering-a-door-on-a-single-access-badge.svg +245 -245
  935. package/svg/rich/marketplace-challenges-provide-evidence-against-lawsuit.svg +270 -270
  936. package/svg/rich/marketplace-challenges-react-to-confrontations-before-they-escalate.svg +176 -176
  937. package/svg/rich/marketplace-challenges-reduce-property-damage.svg +381 -381
  938. package/svg/rich/marketplace-challenges-reduce-workplace-accidents.svg +172 -172
  939. package/svg/rich/marketplace-challenges-respond-to-medical-emergencies.svg +179 -179
  940. package/svg/rich/marketplace-challenges-situational-awareness-to-response-teams.svg +330 -330
  941. package/svg/rich/marketplace-challenges-understand-customer-behavior.svg +455 -455
  942. package/svg/rich/marketplace-challenges-vandalism.svg +120 -120
  943. package/svg/rich/marketplace-collect.svg +121 -121
  944. package/svg/rich/marketplace-filter.svg +54 -54
  945. package/svg/rich/marketplace-industries-airports.svg +380 -380
  946. package/svg/rich/marketplace-industries-art-and-entertainment.svg +170 -170
  947. package/svg/rich/marketplace-industries-city-surveillance.svg +572 -572
  948. package/svg/rich/marketplace-industries-construction.svg +253 -253
  949. package/svg/rich/marketplace-industries-critical-infrastructure.svg +292 -292
  950. package/svg/rich/marketplace-industries-education.svg +291 -291
  951. package/svg/rich/marketplace-industries-finance-and-insurance.svg +140 -140
  952. package/svg/rich/marketplace-industries-healthcare.svg +207 -207
  953. package/svg/rich/marketplace-industries-information-technology.svg +250 -250
  954. package/svg/rich/marketplace-industries-manufacturing.svg +175 -175
  955. package/svg/rich/marketplace-industries-public-administration.svg +349 -349
  956. package/svg/rich/marketplace-industries-public-transport.svg +303 -303
  957. package/svg/rich/marketplace-industries-retail.svg +392 -392
  958. package/svg/rich/marketplace-industries-seaports.svg +335 -335
  959. package/svg/rich/marketplace-industries-trafic-monitoring.svg +255 -255
  960. package/svg/rich/marketplace-industries-utilities.svg +211 -211
  961. package/svg/rich/marketplace-interface.svg +76 -76
  962. package/svg/rich/marketplace-practice-access-control.svg +117 -117
  963. package/svg/rich/marketplace-practice-business-intelligence.svg +89 -89
  964. package/svg/rich/marketplace-practice-business-solutions.svg +195 -195
  965. package/svg/rich/marketplace-practice-central-monitoring.svg +505 -505
  966. package/svg/rich/marketplace-practice-cloud-and-managed-services.svg +75 -75
  967. package/svg/rich/marketplace-practice-communication.svg +187 -187
  968. package/svg/rich/marketplace-practice-crisis-emergency.svg +160 -160
  969. package/svg/rich/marketplace-practice-cyber-security.svg +141 -141
  970. package/svg/rich/marketplace-practice-detection-and-deterrence.svg +164 -164
  971. package/svg/rich/marketplace-practice-digital-infrastructure.svg +197 -197
  972. package/svg/rich/marketplace-practice-facilities-management.svg +332 -332
  973. package/svg/rich/marketplace-practice-fire-and-life-safety.svg +168 -168
  974. package/svg/rich/marketplace-practice-home-automation-iot.svg +161 -161
  975. package/svg/rich/marketplace-practice-intrusion-and-alarm.svg +301 -301
  976. package/svg/rich/marketplace-practice-investigation.svg +157 -157
  977. package/svg/rich/marketplace-practice-it-hardware-and-equipment.svg +254 -254
  978. package/svg/rich/marketplace-practice-privacy-protection.svg +118 -118
  979. package/svg/rich/marketplace-practice-smart-city.svg +351 -351
  980. package/svg/rich/marketplace-practice-surveillance.svg +72 -72
  981. package/svg/rich/marketplace-practice-tracking-and-monitoring.svg +178 -178
  982. package/svg/rich/marketplace-practice-vehicles-and-traffic.svg +227 -227
  983. package/svg/rich/marketplace-solution-service.svg +75 -75
  984. package/svg/rich/milestone-global-offices-illustration.svg +49 -49
  985. package/svg/rich/milestone-in the-media.svg +49 -49
  986. package/svg/rich/mobile-support.svg +40 -40
  987. package/svg/rich/my-milestone.svg +28 -28
  988. package/svg/rich/network.svg +24 -24
  989. package/svg/rich/newspaper.svg +20 -20
  990. package/svg/rich/no-1.svg +50 -50
  991. package/svg/rich/no-backup.svg +30 -30
  992. package/svg/rich/one-hub.svg +71 -71
  993. package/svg/rich/open-platform-community.svg +144 -144
  994. package/svg/rich/open-platform.svg +10 -10
  995. package/svg/rich/outdated-hardware.svg +53 -53
  996. package/svg/rich/partnership.svg +39 -39
  997. package/svg/rich/passion.svg +41 -41
  998. package/svg/rich/planet.svg +75 -75
  999. package/svg/rich/play.svg +10 -10
  1000. package/svg/rich/press-release.svg +30 -30
  1001. package/svg/rich/product-overview-illustration.svg +49 -49
  1002. package/svg/rich/project-animated.svg +99 -99
  1003. package/svg/rich/project.svg +18 -18
  1004. package/svg/rich/promotion.svg +25 -25
  1005. package/svg/rich/publish.svg +12 -12
  1006. package/svg/rich/quote.svg +104 -104
  1007. package/svg/rich/reaction-mode.svg +54 -54
  1008. package/svg/rich/releases.svg +17 -17
  1009. package/svg/rich/reliable.svg +24 -24
  1010. package/svg/rich/reminder.svg +33 -33
  1011. package/svg/rich/save-money.svg +27 -27
  1012. package/svg/rich/scalable.svg +16 -16
  1013. package/svg/rich/scale-balance.svg +101 -101
  1014. package/svg/rich/scale-up.svg +11 -11
  1015. package/svg/rich/screen-recording.svg +259 -259
  1016. package/svg/rich/searching.svg +115 -115
  1017. package/svg/rich/secure-gdpr.svg +52 -52
  1018. package/svg/rich/secure.svg +49 -49
  1019. package/svg/rich/self-service-support.svg +15 -15
  1020. package/svg/rich/service-coding.svg +44 -44
  1021. package/svg/rich/sign-up.svg +37 -37
  1022. package/svg/rich/single-site.svg +31 -31
  1023. package/svg/rich/smart-wall-person.svg +135 -135
  1024. package/svg/rich/smart-wall.svg +96 -96
  1025. package/svg/rich/solutions-design-tool.svg +234 -234
  1026. package/svg/rich/submit-for-feedback.svg +28 -28
  1027. package/svg/rich/subscriptions.svg +37 -37
  1028. package/svg/rich/support-call.svg +29 -29
  1029. package/svg/rich/support-chat-female.svg +48 -48
  1030. package/svg/rich/support-chat-male.svg +48 -48
  1031. package/svg/rich/support-technical.svg +17 -17
  1032. package/svg/rich/system-builder.svg +24 -24
  1033. package/svg/rich/tags.svg +24 -24
  1034. package/svg/rich/target.svg +15 -15
  1035. package/svg/rich/time-to-market.svg +53 -53
  1036. package/svg/rich/tools.svg +37 -37
  1037. package/svg/rich/trade-show.svg +90 -90
  1038. package/svg/rich/transaction.svg +56 -56
  1039. package/svg/rich/translation.svg +17 -17
  1040. package/svg/rich/update-content-then-publish.svg +77 -77
  1041. package/svg/rich/update-content.svg +55 -55
  1042. package/svg/rich/user-review.svg +22 -22
  1043. package/svg/rich/verification.svg +37 -37
  1044. package/svg/rich/video-cookie.svg +78 -78
  1045. package/svg/rich/vps.svg +39 -39
  1046. package/svg/rich/warning.svg +48 -48
  1047. package/svg/rich/watch.svg +19 -19
  1048. package/svg/rich/webinar.svg +49 -49
  1049. package/svg/rich/well-being.svg +67 -67
  1050. package/svg/rich/world-leading.svg +258 -258
  1051. package/svg/rich/xprotect-access-anywhere.svg +86 -86
  1052. package/svg/rich/xprotect-compare-matrix.svg +40 -40
  1053. package/svg/rich/xprotect-compare-products.svg +232 -232
  1054. package/svg/rich/xprotect-compare-releases.svg +208 -208
  1055. package/svg/rich/xprotect.svg +31 -31
  1056. package/svg/rich/youtube.svg +12 -12
  1057. package/text.list.js +47 -47
  1058. package/themes/mandelbrot/css/aqua.css +1 -0
  1059. package/themes/mandelbrot/css/black.css +1 -0
  1060. package/themes/mandelbrot/css/blue.css +1 -0
  1061. package/themes/mandelbrot/css/default.css +1 -0
  1062. package/themes/mandelbrot/css/fuchsia.css +1 -0
  1063. package/themes/mandelbrot/css/green.css +1 -0
  1064. package/themes/mandelbrot/css/grey.css +1 -0
  1065. package/themes/mandelbrot/css/highlight.css +1 -0
  1066. package/themes/mandelbrot/css/lime.css +1 -0
  1067. package/themes/mandelbrot/css/maroon.css +1 -0
  1068. package/themes/mandelbrot/css/navy.css +1 -0
  1069. package/themes/mandelbrot/css/olive.css +1 -0
  1070. package/themes/mandelbrot/css/orange.css +1 -0
  1071. package/themes/mandelbrot/css/purple.css +1 -0
  1072. package/themes/mandelbrot/css/red.css +1 -0
  1073. package/themes/mandelbrot/css/teal.css +1 -0
  1074. package/themes/mandelbrot/css/white.css +1 -0
  1075. package/themes/mandelbrot/css/yellow.css +1 -0
  1076. package/themes/mandelbrot/favicon.ico +0 -0
  1077. package/themes/mandelbrot/fonts/OpenSans-Italic.woff +0 -0
  1078. package/themes/mandelbrot/fonts/OpenSans-Italic.woff2 +0 -0
  1079. package/themes/mandelbrot/fonts/OpenSans-Regular.woff +0 -0
  1080. package/themes/mandelbrot/fonts/OpenSans-Regular.woff2 +0 -0
  1081. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff +0 -0
  1082. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff2 +0 -0
  1083. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff +0 -0
  1084. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff2 +0 -0
  1085. package/themes/mandelbrot/fonts/hack-bold-webfont.woff +0 -0
  1086. package/themes/mandelbrot/fonts/hack-bold-webfont.woff2 +0 -0
  1087. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff +0 -0
  1088. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff2 +0 -0
  1089. package/themes/mandelbrot/fonts/hack-italic-webfont.woff +0 -0
  1090. package/themes/mandelbrot/fonts/hack-italic-webfont.woff2 +0 -0
  1091. package/themes/mandelbrot/fonts/hack-regular-webfont.woff +0 -0
  1092. package/themes/mandelbrot/fonts/hack-regular-webfont.woff2 +0 -0
  1093. package/themes/mandelbrot/img/favicon.png +0 -0
  1094. package/themes/mandelbrot/img/icon-drag--horizontal.svg +3 -0
  1095. package/themes/mandelbrot/img/icon-drag--vertical.svg +3 -0
  1096. package/themes/mandelbrot/img/icon-navigation-closed-ltr.svg +3 -0
  1097. package/themes/mandelbrot/img/icon-navigation-closed-rtl.svg +3 -0
  1098. package/themes/mandelbrot/img/icon-navigation-opened.svg +3 -0
  1099. package/themes/mandelbrot/img/icon-window.svg +3 -0
  1100. package/themes/mandelbrot/img/loader.svg +37 -0
  1101. package/themes/mandelbrot/js/mandelbrot.js +2 -0
  1102. package/themes/mandelbrot/js/mandelbrot.js.map +1 -0
package/docs/component-documentation/cards/generic-cards.html ADDED
@@ -0,0 +1,1534 @@
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>Generic 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">Generic 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-generic-cards-are-used-everywhere-on-the-website-to-link-between-pages">The generic 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 generic 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="#aspect-ratios">Aspect Ratios</a>
106
+ </li>
107
+ <li class="document__unordered-list-item">
108
+ <a class="msds-link"href="#generic-cards-with-svgs">Using SVG images</a>
109
+ </li>
110
+ <li class="document__unordered-list-item">
111
+ <a class="msds-link"href="#themes">Themes</a>
112
+ </li>
113
+ <ul class="document__unordered-list">
114
+ <li class="document__unordered-list-item">
115
+ <a class="msds-link"href="#light-themed-cards">Light Theme</a>
116
+ </li>
117
+ <li class="document__unordered-list-item">
118
+ <a class="msds-link"href="#dark-themed-cards">Dark Theme</a>
119
+ </li>
120
+ </ul>
121
+ </ul>
122
+ <li class="document__unordered-list-item">
123
+ <a class="msds-link"href="#generic-card-default">Generic Card Default</a>
124
+ </li>
125
+ <li class="document__unordered-list-item">
126
+ <a class="msds-link"href="#generic-card-without-an-image">Generic Card Media</a>
127
+ </li>
128
+ <ul class="document__unordered-list">
129
+ <li class="document__unordered-list-item">
130
+ <a class="msds-link"href="#default-generic-media-card">Default Generic Media Card</a>
131
+ </li>
132
+ <li class="document__unordered-list-item">
133
+ <a class="msds-link"href="#generic-media-card-with-media-types">Generic Media Card With Media Types</a>
134
+ </li>
135
+ </ul>
136
+ </ul>
137
+ </div>
138
+ </div>
139
+
140
+ <h2 id="overview">Overview</h2>
141
+ <h3 id="global-definition">Global Definition</h3>
142
+ <p>Each generic card is based on a global CSS class called <code>“msds-generic-card”</code>. It is important to include this class first as it is the main CSS class of the component. Without this HTML class, you cannot utilize component.
143
+ There are 2 types of generic cards:</p>
144
+ <ul>
145
+ <li>The default Generic Cards</li>
146
+ <li>Generic Cards with media information</li>
147
+ </ul>
148
+ <div class="element-preview">
149
+ <div class="element-preview__inner"><div class="row card-row">
150
+ <div class="col-12 col-md-4">
151
+ <div class="msds-generic-card msds-generic-card--vertical-aligned">
152
+ <a href="#" class="msds-generic-card--link">
153
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
154
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
155
+ alt="Card image">
156
+ </div>
157
+ <div class="msds-generic-card__body">
158
+ <h3 class="msds-generic-card__body-heading">
159
+ Headline lorem ipsum
160
+ </h3>
161
+ <p class="msds-generic-card__body-description">
162
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
163
+ </p>
164
+ </div>
165
+ </a>
166
+ </div>
167
+ </div>
168
+ <div class="col-12 col-md-4">
169
+ <div class="msds-generic-card msds-generic-card--media msds-generic-card--vertical-aligned">
170
+ <a href="#" class="msds-generic-card--link">
171
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
172
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
173
+ alt="Card image">
174
+ </div>
175
+ <div class="msds-generic-card__body">
176
+ <p class="msds-generic-card__body-text-above-headline">
177
+ MIPS 2020
178
+ </p>
179
+ <div class="msds-generic-card__body-heading">
180
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
181
+ </div>
182
+ </div>
183
+ </a>
184
+ <div class="msds-generic-card__media-info">
185
+ <div class="msds-generic-card__media-type">
186
+ <svg class="msds-generic-card__media-icon">
187
+ <use href="../../../msds-spritemap.svg#article" />
188
+ </svg>
189
+ Article
190
+ </div>
191
+ <div class="msds-generic-card__media-duration">
192
+ <svg class="msds-generic-card__media-icon">
193
+ <use href="../../../msds-spritemap.svg#clock" />
194
+ </svg>
195
+ 6 min. read
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div></div>
201
+ </div>
202
+
203
+ <h3 id="sizes">Sizes</h3>
204
+ <p>Generic Cards come in two different sizes, large (default) and small media cards.</p>
205
+ <h4 id="large">Large</h4>
206
+ <p>When using large generic cards, make use of the bootstrap column <code>col-md-4<code>.</p>
207
+ <div class="element-preview">
208
+ <div class="element-preview__inner"><div class="row card-row">
209
+ <div class="col-12 col-md-4">
210
+ <div class="msds-generic-card msds-generic-card--vertical-aligned">
211
+ <a href="#" class="msds-generic-card--link">
212
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
213
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
214
+ alt="Card image">
215
+ </div>
216
+ <div class="msds-generic-card__body">
217
+ <h3 class="msds-generic-card__body-heading">
218
+ Headline lorem ipsum
219
+ </h3>
220
+ <p class="msds-generic-card__body-description">
221
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
222
+ </p>
223
+ </div>
224
+ </a>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ </div>
230
+ </div>
231
+
232
+ <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">"row card-row"</span>&gt;</span>
233
+ <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>
234
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--vertical-aligned"</span>&gt;</span>
235
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</span>&gt;</span>
236
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame embed-responsive embed-responsive-2by1"</span>&gt;</span>
237
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">../../../src/demo-img/xprotect.jpg</span>
238
+ <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
239
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
240
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
241
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
242
+ Headline lorem ipsum
243
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
244
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-description"</span>&gt;</span>
245
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
246
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
247
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
248
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
249
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
250
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
251
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
252
+
253
+ </code></pre><h4 id="small">Small</h4>
254
+ <p>When using small generic cards, make use of the bootstrap column <code>col-md-3</code> and the HTML modifier <code>class = "generic-card--small"</code>.</p>
255
+ <div class="element-preview">
256
+ <div class="element-preview__inner"><div class="row card-row">
257
+ <div class="col-12 col-md-3">
258
+ <div class="msds-generic-card msds-generic-card--small msds-generic-card--vertical-aligned">
259
+ <a href="#" class="msds-generic-card--link">
260
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
261
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
262
+ alt="Card image">
263
+ </div>
264
+ <div class="msds-generic-card__body">
265
+ <h3 class="msds-generic-card__body-heading">
266
+ Headline lorem ipsum
267
+ </h3>
268
+ <p class="msds-generic-card__body-description">
269
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
270
+ </p>
271
+ </div>
272
+ </a>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <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">"row card-row"</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">"col-12 col-md-3"</span>&gt;</span>
281
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--small msds-generic-card--vertical-aligned"</span>&gt;</span>
282
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</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-generic-card__frame embed-responsive embed-responsive-2by1"</span>&gt;</span>
284
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">../../../src/demo-img/xprotect.jpg</span>
285
+ <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
286
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
287
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
288
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
289
+ Headline lorem ipsum
290
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
291
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-description"</span>&gt;</span>
292
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
293
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</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">a</span>&gt;</span>
296
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
297
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
298
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
299
+ </code></pre><div class="element-preview">
300
+ <div class="element-preview__inner"><div class="row card-row">
301
+ <div class="col-12 col-md-3">
302
+ <div class="msds-generic-card msds-generic-card--media msds-generic-card--small msds-generic-card--vertical-aligned">
303
+ <a href="#" class="msds-generic-card--link">
304
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
305
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
306
+ alt="Card image">
307
+ </div>
308
+ <div class="msds-generic-card__body">
309
+ <p class="msds-generic-card__body-text-above-headline">
310
+ MIPS 2020
311
+ </p>
312
+ <div class="msds-generic-card__body-heading">
313
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
314
+ </div>
315
+ </div>
316
+ </a>
317
+ <div class="msds-generic-card__media-info">
318
+ <div class="msds-generic-card__media-type">
319
+ <svg class="msds-generic-card__media-icon">
320
+ <use href="../../../msds-spritemap.svg#article" />
321
+ </svg>
322
+ Article
323
+ </div>
324
+ <div class="msds-generic-card__media-duration">
325
+ <svg class="msds-generic-card__media-icon">
326
+ <use href="../../../msds-spritemap.svg#clock" />
327
+ </svg>
328
+ 6 min. read
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div></div>
334
+ </div>
335
+
336
+ <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">"row card-row"</span>&gt;</span>
337
+ <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>
338
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--media"</span>&gt;</span>
339
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</span>&gt;</span>
340
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame embed-responsive embed-responsive-16by9"</span>&gt;</span>
341
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-container"</span>&gt;</span>
342
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__floating-icon-container"</span>&gt;</span>
343
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__floating-icon"</span>&gt;</span>
344
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__floating-icon"</span>
345
+ <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#play"</span> /&gt;</span>
346
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
347
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
348
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
349
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">../../../src/demo-img/xprotect.jpg</span>
350
+ <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
351
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
352
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
353
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-text-above-headline"</span>&gt;</span>
354
+ MIPS 2020
355
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
356
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
357
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
358
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
359
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
360
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
361
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-info"</span>&gt;</span>
362
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-type"</span>&gt;</span>
363
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-icon"</span>&gt;</span>
364
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#article"</span> /&gt;</span>
365
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
366
+ Article
367
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
368
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-duration"</span>&gt;</span>
369
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-icon"</span>&gt;</span>
370
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#clock"</span> /&gt;</span>
371
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
372
+ 6 min. read
373
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
374
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
375
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
376
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
377
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="aspect-ratios">Aspect Ratios</h3>
378
+ <p>Generic cards can be setup to use two different types of aspect ratios</p>
379
+ <ul>
380
+ <li>Generic Cards with a 2 by 1 ratio by using <code>class = "embed-responsive-2by1"</code></li>
381
+ <li>Generic Cards with a 16 by 9 ratio by using <code>class = "embed-responsive-16by9"</code></li>
382
+ </ul>
383
+ <div class="element-preview">
384
+ <div class="element-preview__inner"><div class="row card-row">
385
+ <div class="col-12 col-md-4">
386
+ <h1>Cards Aspect 16 by 9</h1>
387
+ </div>
388
+ <div class="col-12 col-md-4">
389
+ <h1>Cards Aspect 2 by 1</h1>
390
+ </div>
391
+ <div class="col-12 col-md-4">
392
+ </div>
393
+ <div class="col-12 col-md-4">
394
+ <div class="msds-generic-card msds-generic-card--vertical-aligned">
395
+ <a href="#" class="msds-generic-card--link">
396
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
397
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
398
+ alt="Card image">
399
+ </div>
400
+ <div class="msds-generic-card__body">
401
+ <h3 class="msds-generic-card__body-heading">
402
+ Headline lorem ipsum
403
+ </h3>
404
+ <p class="msds-generic-card__body-description">
405
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
406
+ </p>
407
+ </div>
408
+ </a>
409
+ </div>
410
+ </div>
411
+ <div class="col-12 col-md-4">
412
+ <div class="msds-generic-card msds-generic-card--vertical-aligned">
413
+ <a href="#" class="msds-generic-card--link">
414
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
415
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
416
+ alt="Card image">
417
+ </div>
418
+ <div class="msds-generic-card__body">
419
+ <h3 class="msds-generic-card__body-heading">
420
+ Headline lorem ipsum
421
+ </h3>
422
+ <p class="msds-generic-card__body-description">
423
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
424
+ </p>
425
+ </div>
426
+ </a>
427
+ </div>
428
+ </div>
429
+ </div></div>
430
+ </div>
431
+
432
+ <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">"row card-row"</span>&gt;</span>
433
+ <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>
434
+ <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Cards Aspect 16 by 9<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
435
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
436
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
437
+ <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Cards Aspect 2 by 1<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
438
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
439
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
440
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
441
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
442
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--vertical-aligned"</span>&gt;</span>
443
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</span>&gt;</span>
444
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame embed-responsive embed-responsive-16by9"</span>&gt;</span>
445
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">../../../src/demo-img/xprotect.jpg</span>
446
+ <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
447
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
448
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
449
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
450
+ Headline lorem ipsum
451
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
452
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-description"</span>&gt;</span>
453
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
454
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
455
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
456
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
457
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
458
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
459
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
460
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--vertical-aligned"</span>&gt;</span>
461
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</span>&gt;</span>
462
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame embed-responsive embed-responsive-2by1"</span>&gt;</span>
463
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">../../../src/demo-img/xprotect.jpg</span>
464
+ <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
465
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
466
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
467
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
468
+ Headline lorem ipsum
469
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
470
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-description"</span>&gt;</span>
471
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
472
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
473
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
474
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
475
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
476
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
477
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="generic-cards-with-svgs">Generic Cards With SVG’s</h3>
478
+ <p>Generic cards can use SVG images instead of the default jpg or png images</p>
479
+ <div class="element-preview">
480
+ <div class="element-preview__inner"><div class="row card-row">
481
+ <div class="col-12 col-md-4">
482
+ <div class="msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--svg">
483
+ <a href="#" class="msds-generic-card--link">
484
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1">
485
+ <div class="msds-generic-card__frame-image embed-responsive-item msds-no-backup"></div>
486
+ </div>
487
+ <div class="msds-generic-card__body">
488
+ <h3 class="msds-generic-card__body-heading">
489
+ Headline lorem ipsum
490
+ </h3>
491
+ <p class="msds-generic-card__body-description">
492
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
493
+ </p>
494
+ </div>
495
+ </a>
496
+ </div>
497
+ </div>
498
+ </div></div>
499
+ </div>
500
+
501
+ <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">"row card-row"</span>&gt;</span>
502
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
503
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--svg"</span>&gt;</span>
504
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</span>&gt;</span>
505
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1"</span>&gt;</span>
506
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item msds-no-backup"</span>&gt;</span><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>
508
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
509
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
510
+ Headline lorem ipsum
511
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
512
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-description"</span>&gt;</span>
513
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
514
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
515
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
516
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
517
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
518
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
519
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="themes">Themes</h3>
520
+ <p>Generic Cards have two different themes</p>
521
+ <h4 id="light-themed-cards">Light Themed Cards</h4>
522
+ <p>Light theme cards are setup as the default card</p>
523
+ <div class="element-preview">
524
+ <div class="element-preview__inner"><div class="row card-row">
525
+ <div class="col-12 col-md-4">
526
+ <div class="msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--svg">
527
+ <a href="#" class="msds-generic-card--link">
528
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1">
529
+ <div class="msds-generic-card__frame-image embed-responsive-item msds-no-backup"></div>
530
+ </div>
531
+ <div class="msds-generic-card__body">
532
+ <h3 class="msds-generic-card__body-heading">
533
+ Headline lorem ipsum
534
+ </h3>
535
+ <p class="msds-generic-card__body-description">
536
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
537
+ </p>
538
+ </div>
539
+ </a>
540
+ </div>
541
+ </div>
542
+ </div></div>
543
+ </div>
544
+
545
+ <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">"row card-row"</span>&gt;</span>
546
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-4"</span>&gt;</span>
547
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--svg"</span>&gt;</span>
548
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</span>&gt;</span>
549
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1"</span>&gt;</span>
550
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item msds-no-backup"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
551
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">"msds-generic-card__body"</span>&gt;</span>
553
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
554
+ Headline lorem ipsum
555
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
556
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-description"</span>&gt;</span>
557
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
558
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
559
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
560
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
561
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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></code></pre><h4 id="dark-themed-cards">Dark Themed Cards</h4>
564
+ <p>To use a dark themed card add the CSS class “<code>msds-generic-card--dark-theme</code>“</p>
565
+ <div class="element-preview-dark">
566
+ <div class="element-preview__inner"><div class="row card-row">
567
+ <div class="col-12 col-md-4">
568
+ <div
569
+ class="msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--dark-theme msds-generic-card--svg">
570
+ <a href="#" class="msds-generic-card--link">
571
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1">
572
+ <div class="msds-generic-card__frame-image embed-responsive-item msds-no-backup"></div>
573
+ </div>
574
+ <div class="msds-generic-card__body">
575
+ <h3 class="msds-generic-card__body-heading">
576
+ Headline lorem ipsum
577
+ </h3>
578
+ <p class="msds-generic-card__body-description">
579
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
580
+ </p>
581
+ </div>
582
+ </a>
583
+ </div>
584
+ </div>
585
+ </div></div>
586
+ </div>
587
+
588
+ <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">"row card-row"</span>&gt;</span>
589
+ <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>
590
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span>
591
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--dark-theme msds-generic-card--svg"</span>&gt;</span>
592
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</span>&gt;</span>
593
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1"</span>&gt;</span>
594
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item msds-no-backup"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
595
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
596
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
597
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
598
+ Headline lorem ipsum
599
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
600
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-description"</span>&gt;</span>
601
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
602
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
603
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
604
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
605
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
606
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
607
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="generic-card-default">Generic Card Default</h3>
608
+ <p>Below is an example of the default Generic Card </p>
609
+ <div class="element-preview">
610
+ <div class="element-preview__inner"><div class="row card-row">
611
+ <div class="col-12 col-md-4">
612
+ <div class="msds-generic-card msds-generic-card--vertical-aligned">
613
+ <a href="#" class="msds-generic-card--link">
614
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
615
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
616
+ alt="Card image">
617
+ </div>
618
+ <div class="msds-generic-card__body">
619
+ <h3 class="msds-generic-card__body-heading">
620
+ Headline lorem ipsum
621
+ </h3>
622
+ <p class="msds-generic-card__body-description">
623
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
624
+ </p>
625
+ </div>
626
+ </a>
627
+ </div>
628
+ </div>
629
+ </div>
630
+
631
+ </div>
632
+ </div>
633
+
634
+ <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">"row card-row"</span>&gt;</span>
635
+ <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>
636
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--vertical-aligned"</span>&gt;</span>
637
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</span>&gt;</span>
638
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame embed-responsive embed-responsive-2by1"</span>&gt;</span>
639
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">../../../src/demo-img/xprotect.jpg</span>
640
+ <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
641
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
642
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
643
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
644
+ Headline lorem ipsum
645
+ <span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
646
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-description"</span>&gt;</span>
647
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
648
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</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">a</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
+
655
+ </code></pre><h3 id="generic-media-card">Generic Media Card</h3>
656
+ <p>Generic Media Cards have two different options, the first option is the default Generic Media card. The second option displays the media type of the generic card.</p>
657
+ <h4 id="default-generic-media-card">Default Generic Media Card</h4>
658
+ <p>Below we have an example of the default Generic Media Card</p>
659
+ <div class="element-preview">
660
+ <div class="element-preview__inner"><div class="row card-row">
661
+ <div class="col-12 col-md-4">
662
+ <div class="msds-generic-card msds-generic-card--media msds-generic-card--vertical-aligned">
663
+ <a href="#" class="msds-generic-card--link">
664
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
665
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
666
+ alt="Card image">
667
+ </div>
668
+ <div class="msds-generic-card__body">
669
+ <p class="msds-generic-card__body-text-above-headline">
670
+ MIPS 2020
671
+ </p>
672
+ <div class="msds-generic-card__body-heading">
673
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
674
+ </div>
675
+ </div>
676
+ </a>
677
+ <div class="msds-generic-card__media-info">
678
+ <div class="msds-generic-card__media-type">
679
+ <svg class="msds-generic-card__media-icon">
680
+ <use href="../../../msds-spritemap.svg#article" />
681
+ </svg>
682
+ Article
683
+ </div>
684
+ <div class="msds-generic-card__media-duration">
685
+ <svg class="msds-generic-card__media-icon">
686
+ <use href="../../../msds-spritemap.svg#clock" />
687
+ </svg>
688
+ 6 min. read
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div></div>
694
+ </div>
695
+
696
+ <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">"row card-row"</span>&gt;</span>
697
+ <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>
698
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card msds-generic-card--media msds-generic-card--vertical-aligned"</span>&gt;</span>
699
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</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-generic-card__frame embed-responsive embed-responsive-16by9"</span>&gt;</span>
701
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">../../../src/demo-img/xprotect.jpg</span>
702
+ <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
705
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-text-above-headline"</span>&gt;</span>
706
+ MIPS 2020
707
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</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-generic-card__body-heading"</span>&gt;</span>
709
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
710
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
711
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
712
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
713
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-info"</span>&gt;</span>
714
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-type"</span>&gt;</span>
715
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-icon"</span>&gt;</span>
716
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#article"</span> /&gt;</span>
717
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
718
+ Article
719
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
720
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-duration"</span>&gt;</span>
721
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-icon"</span>&gt;</span>
722
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#clock"</span> /&gt;</span>
723
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
724
+ 6 min. read
725
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
726
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
727
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
728
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
729
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="generic-media-card-1">Generic Media Card</h3>
730
+ <p>Generic Media Cards have two different options, the first option is the default Generic Media card. The second option displays the media type of the generic card.</p>
731
+ <h4 id="generic-media-card-with-media-types">Generic Media Card With Media Types</h4>
732
+ <p>Below we have an example of the Generic Media Card with a floating icon to display the media card type</p>
733
+ <div class="element-preview">
734
+ <div class="element-preview__inner"><div class="row card-row">
735
+ <div class="col-12 col-md-4">
736
+ <div class="msds-generic-card msds-generic-card--media">
737
+ <a href="#" class="msds-generic-card--link">
738
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
739
+ <div class="msds-generic-card__media-container">
740
+ <div class="msds-generic-card__floating-icon-container">
741
+ <svg class="msds-generic-card__floating-icon">
742
+ <use class="msds-generic-card__floating-icon"
743
+ href="../../../msds-spritemap.svg#play" />
744
+ </svg>
745
+ </div>
746
+ </div>
747
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
748
+ alt="Card image">
749
+ </div>
750
+ <div class="msds-generic-card__body">
751
+ <p class="msds-generic-card__body-text-above-headline">
752
+ MIPS 2020
753
+ </p>
754
+ <div class="msds-generic-card__body-heading">
755
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
756
+ </div>
757
+ </div>
758
+ </a>
759
+ <div class="msds-generic-card__media-info">
760
+ <div class="msds-generic-card__media-type">
761
+ <svg class="msds-generic-card__media-icon">
762
+ <use href="../../../msds-spritemap.svg#article" />
763
+ </svg>
764
+ Article
765
+ </div>
766
+ <div class="msds-generic-card__media-duration">
767
+ <svg class="msds-generic-card__media-icon">
768
+ <use href="../../../msds-spritemap.svg#clock" />
769
+ </svg>
770
+ 6 min. read
771
+ </div>
772
+ </div>
773
+ </div>
774
+ </div>
775
+ </div></div>
776
+ </div>
777
+
778
+ <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">"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-generic-card msds-generic-card--media"</span>&gt;</span>
781
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card--link"</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-generic-card__frame embed-responsive embed-responsive-16by9"</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-generic-card__media-container"</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-generic-card__floating-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-generic-card__floating-icon"</span>&gt;</span>
786
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__floating-icon"</span>
787
+ <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#play"</span> /&gt;</span>
788
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</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>&gt;</span>
791
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__frame-image embed-responsive-item"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">../../../src/demo-img/xprotect.jpg</span>
792
+ <span class="hljs-attr">alt</span>=<span class="hljs-string">"Card image"</span>&gt;</span>
793
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
794
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body"</span>&gt;</span>
795
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-text-above-headline"</span>&gt;</span>
796
+ MIPS 2020
797
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
798
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__body-heading"</span>&gt;</span>
799
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
800
+ <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>&gt;</span>
802
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
803
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-info"</span>&gt;</span>
804
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-type"</span>&gt;</span>
805
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-icon"</span>&gt;</span>
806
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#article"</span> /&gt;</span>
807
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
808
+ Article
809
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
810
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-duration"</span>&gt;</span>
811
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-generic-card__media-icon"</span>&gt;</span>
812
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#clock"</span> /&gt;</span>
813
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
814
+ 6 min. read
815
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
816
+ <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>&gt;</span>
818
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
819
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
820
+
821
+
822
+
823
+ </div>
824
+
825
+
826
+
827
+ </div>
828
+
829
+ </div>
830
+
831
+
832
+ </div>
833
+ </div>
834
+
835
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
836
+
837
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
838
+ <nav class="Navigation">
839
+
840
+
841
+ <div class="Navigation-group">
842
+
843
+ <div class="Tree" data-behaviour="tree" id="tree-components">
844
+ <div class="Tree-header">
845
+ <h3 class="Tree-title">components</h3>
846
+
847
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
848
+ <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>
849
+
850
+ </button>
851
+ </div>
852
+ <ul class="Tree-items Tree-depth-1">
853
+
854
+
855
+
856
+
857
+ <li class="Tree-item Tree-entity" data-role="item">
858
+ <a class="Tree-entityLink" href="../../../components/detail/tab-tile.html" data-pjax>
859
+ <span>Tab Tile</span>
860
+
861
+
862
+ <div class="Status Status--unlabelled">
863
+
864
+ <div class="Status-dots">
865
+
866
+
867
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
868
+
869
+
870
+ </div>
871
+
872
+ </div>
873
+
874
+
875
+ </a>
876
+ </li>
877
+
878
+
879
+
880
+ </ul>
881
+ </div>
882
+
883
+ </div>
884
+
885
+
886
+
887
+
888
+ <div class="Navigation-group">
889
+
890
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
891
+ <div class="Tree-header">
892
+ <h3 class="Tree-title">documentation</h3>
893
+
894
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
895
+ <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>
896
+
897
+ </button>
898
+ </div>
899
+ <ul class="Tree-items Tree-depth-1">
900
+
901
+
902
+
903
+
904
+ <li class="Tree-item Tree-entity" data-role="item">
905
+ <a class="Tree-entityLink" href="../../../index.html" data-pjax>
906
+ <span>Overview</span>
907
+
908
+ </a>
909
+ </li>
910
+
911
+
912
+
913
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
914
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
915
+ Content
916
+ </button>
917
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
918
+
919
+
920
+
921
+
922
+
923
+
924
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
925
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
926
+ Icons
927
+ </button>
928
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
929
+
930
+
931
+
932
+
933
+
934
+
935
+
936
+ <li class="Tree-item Tree-entity" data-role="item">
937
+ <a class="Tree-entityLink" href="../../content/icons/-overview.html" data-pjax>
938
+ <span>Overview</span>
939
+
940
+ </a>
941
+ </li>
942
+
943
+
944
+
945
+
946
+ <li class="Tree-item Tree-entity" data-role="item">
947
+ <a class="Tree-entityLink" href="../../content/icons/icons-flat.html" data-pjax>
948
+ <span>Icons Flat</span>
949
+
950
+ </a>
951
+ </li>
952
+
953
+
954
+
955
+
956
+ <li class="Tree-item Tree-entity" data-role="item">
957
+ <a class="Tree-entityLink" href="../../content/icons/icons-rich.html" data-pjax>
958
+ <span>Icons Rich</span>
959
+
960
+ </a>
961
+ </li>
962
+
963
+
964
+
965
+ </ul>
966
+ </li>
967
+
968
+
969
+
970
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
971
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
972
+ Typography
973
+ </button>
974
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
975
+
976
+
977
+
978
+
979
+
980
+
981
+
982
+ <li class="Tree-item Tree-entity" data-role="item">
983
+ <a class="Tree-entityLink" href="../../content/typography/-overview.html" data-pjax>
984
+ <span>Overview</span>
985
+
986
+ </a>
987
+ </li>
988
+
989
+
990
+
991
+
992
+ <li class="Tree-item Tree-entity" data-role="item">
993
+ <a class="Tree-entityLink" href="../../content/typography/font-colors.html" data-pjax>
994
+ <span>Font Colors</span>
995
+
996
+ </a>
997
+ </li>
998
+
999
+
1000
+
1001
+
1002
+ <li class="Tree-item Tree-entity" data-role="item">
1003
+ <a class="Tree-entityLink" href="../../content/typography/links.html" data-pjax>
1004
+ <span>Links</span>
1005
+
1006
+ </a>
1007
+ </li>
1008
+
1009
+
1010
+
1011
+
1012
+ <li class="Tree-item Tree-entity" data-role="item">
1013
+ <a class="Tree-entityLink" href="../../content/typography/lists.html" data-pjax>
1014
+ <span>Lists</span>
1015
+
1016
+ </a>
1017
+ </li>
1018
+
1019
+
1020
+
1021
+
1022
+ <li class="Tree-item Tree-entity" data-role="item">
1023
+ <a class="Tree-entityLink" href="../../content/typography/text.html" data-pjax>
1024
+ <span>Text</span>
1025
+
1026
+ </a>
1027
+ </li>
1028
+
1029
+
1030
+
1031
+ </ul>
1032
+ </li>
1033
+
1034
+
1035
+
1036
+ </ul>
1037
+ </li>
1038
+
1039
+
1040
+
1041
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
1042
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
1043
+ Component Documentation
1044
+ </button>
1045
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
1046
+
1047
+
1048
+
1049
+
1050
+
1051
+
1052
+
1053
+ <li class="Tree-item Tree-entity" data-role="item">
1054
+ <a class="Tree-entityLink" href="../alerts.html" data-pjax>
1055
+ <span>Alerts</span>
1056
+
1057
+ </a>
1058
+ </li>
1059
+
1060
+
1061
+
1062
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
1063
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
1064
+ Buttons
1065
+ </button>
1066
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
1067
+
1068
+
1069
+
1070
+
1071
+
1072
+
1073
+
1074
+ <li class="Tree-item Tree-entity" data-role="item">
1075
+ <a class="Tree-entityLink" href="../buttons/buttons.html" data-pjax>
1076
+ <span>Buttons</span>
1077
+
1078
+ </a>
1079
+ </li>
1080
+
1081
+
1082
+
1083
+
1084
+ <li class="Tree-item Tree-entity" data-role="item">
1085
+ <a class="Tree-entityLink" href="../buttons/buttons-floating.html" data-pjax>
1086
+ <span>Buttons Floating</span>
1087
+
1088
+ </a>
1089
+ </li>
1090
+
1091
+
1092
+
1093
+ </ul>
1094
+ </li>
1095
+
1096
+
1097
+
1098
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
1099
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
1100
+ Cards
1101
+ </button>
1102
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
1103
+
1104
+
1105
+
1106
+
1107
+
1108
+
1109
+
1110
+ <li class="Tree-item Tree-entity" data-role="item">
1111
+ <a class="Tree-entityLink" href="basic-cards.html" data-pjax>
1112
+ <span>Basic Cards</span>
1113
+
1114
+ </a>
1115
+ </li>
1116
+
1117
+
1118
+
1119
+
1120
+ <li class="Tree-item Tree-entity" data-role="item">
1121
+ <a class="Tree-entityLink" href="category-cards.html" data-pjax>
1122
+ <span>Category Cards</span>
1123
+
1124
+ </a>
1125
+ </li>
1126
+
1127
+
1128
+
1129
+
1130
+ <li class="Tree-item Tree-entity" data-role="item">
1131
+ <a class="Tree-entityLink" href="contact-cards.html" data-pjax>
1132
+ <span>Contact Cards</span>
1133
+
1134
+ </a>
1135
+ </li>
1136
+
1137
+
1138
+
1139
+
1140
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
1141
+ <a class="Tree-entityLink" href="" data-pjax>
1142
+ <span>Generic Cards</span>
1143
+
1144
+ </a>
1145
+ </li>
1146
+
1147
+
1148
+
1149
+
1150
+ <li class="Tree-item Tree-entity" data-role="item">
1151
+ <a class="Tree-entityLink" href="solution-cards.html" data-pjax>
1152
+ <span>Solution Cards</span>
1153
+
1154
+ </a>
1155
+ </li>
1156
+
1157
+
1158
+
1159
+ </ul>
1160
+ </li>
1161
+
1162
+
1163
+
1164
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
1165
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
1166
+ Dividers
1167
+ </button>
1168
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
1169
+
1170
+
1171
+
1172
+
1173
+
1174
+
1175
+
1176
+ <li class="Tree-item Tree-entity" data-role="item">
1177
+ <a class="Tree-entityLink" href="../dividers/dividers.html" data-pjax>
1178
+ <span>Dividers</span>
1179
+
1180
+ </a>
1181
+ </li>
1182
+
1183
+
1184
+
1185
+ </ul>
1186
+ </li>
1187
+
1188
+
1189
+
1190
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
1191
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
1192
+ Expanding Components
1193
+ </button>
1194
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
1195
+
1196
+
1197
+
1198
+
1199
+
1200
+
1201
+
1202
+ <li class="Tree-item Tree-entity" data-role="item">
1203
+ <a class="Tree-entityLink" href="../expanding-components/accordion.html" data-pjax>
1204
+ <span>Accordion</span>
1205
+
1206
+ </a>
1207
+ </li>
1208
+
1209
+
1210
+
1211
+
1212
+ <li class="Tree-item Tree-entity" data-role="item">
1213
+ <a class="Tree-entityLink" href="../expanding-components/section.html" data-pjax>
1214
+ <span>Section</span>
1215
+
1216
+ </a>
1217
+ </li>
1218
+
1219
+
1220
+
1221
+ </ul>
1222
+ </li>
1223
+
1224
+
1225
+
1226
+
1227
+ <li class="Tree-item Tree-entity" data-role="item">
1228
+ <a class="Tree-entityLink" href="../modal.html" data-pjax>
1229
+ <span>Modal</span>
1230
+
1231
+ </a>
1232
+ </li>
1233
+
1234
+
1235
+
1236
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
1237
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
1238
+ Popover
1239
+ </button>
1240
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
1241
+
1242
+
1243
+
1244
+
1245
+
1246
+
1247
+
1248
+ <li class="Tree-item Tree-entity" data-role="item">
1249
+ <a class="Tree-entityLink" href="../popover/popover.html" data-pjax>
1250
+ <span>Popover</span>
1251
+
1252
+ </a>
1253
+ </li>
1254
+
1255
+
1256
+
1257
+ </ul>
1258
+ </li>
1259
+
1260
+
1261
+
1262
+
1263
+ <li class="Tree-item Tree-entity" data-role="item">
1264
+ <a class="Tree-entityLink" href="../progress-bar.html" data-pjax>
1265
+ <span>Progress Bar</span>
1266
+
1267
+ </a>
1268
+ </li>
1269
+
1270
+
1271
+
1272
+
1273
+ <li class="Tree-item Tree-entity" data-role="item">
1274
+ <a class="Tree-entityLink" href="../spacing.html" data-pjax>
1275
+ <span>Spacing</span>
1276
+
1277
+ </a>
1278
+ </li>
1279
+
1280
+
1281
+
1282
+
1283
+ <li class="Tree-item Tree-entity" data-role="item">
1284
+ <a class="Tree-entityLink" href="../table.html" data-pjax>
1285
+ <span>Table</span>
1286
+
1287
+ </a>
1288
+ </li>
1289
+
1290
+
1291
+
1292
+ </ul>
1293
+ </li>
1294
+
1295
+
1296
+
1297
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
1298
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
1299
+ Forms
1300
+ </button>
1301
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
1302
+
1303
+
1304
+
1305
+
1306
+
1307
+
1308
+
1309
+ <li class="Tree-item Tree-entity" data-role="item">
1310
+ <a class="Tree-entityLink" href="../../forms/-overview.html" data-pjax>
1311
+ <span>Overview</span>
1312
+
1313
+ </a>
1314
+ </li>
1315
+
1316
+
1317
+
1318
+
1319
+ <li class="Tree-item Tree-entity" data-role="item">
1320
+ <a class="Tree-entityLink" href="../../forms/checkbox.html" data-pjax>
1321
+ <span>Checkbox</span>
1322
+
1323
+ </a>
1324
+ </li>
1325
+
1326
+
1327
+
1328
+
1329
+ <li class="Tree-item Tree-entity" data-role="item">
1330
+ <a class="Tree-entityLink" href="../../forms/drop-down-list.html" data-pjax>
1331
+ <span>Drop Down List</span>
1332
+
1333
+ </a>
1334
+ </li>
1335
+
1336
+
1337
+
1338
+
1339
+ <li class="Tree-item Tree-entity" data-role="item">
1340
+ <a class="Tree-entityLink" href="../../forms/input-field.html" data-pjax>
1341
+ <span>Input Field</span>
1342
+
1343
+ </a>
1344
+ </li>
1345
+
1346
+
1347
+
1348
+
1349
+ <li class="Tree-item Tree-entity" data-role="item">
1350
+ <a class="Tree-entityLink" href="../../forms/radio-button.html" data-pjax>
1351
+ <span>Radio Button</span>
1352
+
1353
+ </a>
1354
+ </li>
1355
+
1356
+
1357
+
1358
+
1359
+ <li class="Tree-item Tree-entity" data-role="item">
1360
+ <a class="Tree-entityLink" href="../../forms/switch.html" data-pjax>
1361
+ <span>Switch</span>
1362
+
1363
+ </a>
1364
+ </li>
1365
+
1366
+
1367
+
1368
+
1369
+ <li class="Tree-item Tree-entity" data-role="item">
1370
+ <a class="Tree-entityLink" href="../../forms/text-area.html" data-pjax>
1371
+ <span>Text Area</span>
1372
+
1373
+ </a>
1374
+ </li>
1375
+
1376
+
1377
+
1378
+ </ul>
1379
+ </li>
1380
+
1381
+
1382
+
1383
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
1384
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
1385
+ Utilities
1386
+ </button>
1387
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
1388
+
1389
+
1390
+
1391
+
1392
+
1393
+
1394
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
1395
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
1396
+ Colors
1397
+ </button>
1398
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
1399
+
1400
+
1401
+
1402
+
1403
+
1404
+
1405
+
1406
+ <li class="Tree-item Tree-entity" data-role="item">
1407
+ <a class="Tree-entityLink" href="../../utilities/colors/overview.html" data-pjax>
1408
+ <span>Overview</span>
1409
+
1410
+ </a>
1411
+ </li>
1412
+
1413
+
1414
+
1415
+
1416
+ <li class="Tree-item Tree-entity" data-role="item">
1417
+ <a class="Tree-entityLink" href="../../utilities/colors/font-colors.html" data-pjax>
1418
+ <span>Font Colors</span>
1419
+
1420
+ </a>
1421
+ </li>
1422
+
1423
+
1424
+
1425
+
1426
+ <li class="Tree-item Tree-entity" data-role="item">
1427
+ <a class="Tree-entityLink" href="../../utilities/colors/background-colors.html" data-pjax>
1428
+ <span>Background Colors</span>
1429
+
1430
+ </a>
1431
+ </li>
1432
+
1433
+
1434
+
1435
+ </ul>
1436
+ </li>
1437
+
1438
+
1439
+
1440
+
1441
+ <li class="Tree-item Tree-entity" data-role="item">
1442
+ <a class="Tree-entityLink" href="../../utilities/spacing.html" data-pjax>
1443
+ <span>Spacing</span>
1444
+
1445
+ </a>
1446
+ </li>
1447
+
1448
+
1449
+
1450
+ </ul>
1451
+ </li>
1452
+
1453
+
1454
+
1455
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1456
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1457
+ Guidelines And Guides
1458
+ </button>
1459
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1460
+
1461
+
1462
+
1463
+
1464
+
1465
+
1466
+
1467
+ <li class="Tree-item Tree-entity" data-role="item">
1468
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/creating-a-new-release.html" data-pjax>
1469
+ <span>Creating A New Release</span>
1470
+
1471
+ </a>
1472
+ </li>
1473
+
1474
+
1475
+
1476
+
1477
+ <li class="Tree-item Tree-entity" data-role="item">
1478
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
1479
+ <span>Css And Scss Guidelines</span>
1480
+
1481
+ </a>
1482
+ </li>
1483
+
1484
+
1485
+
1486
+
1487
+ <li class="Tree-item Tree-entity" data-role="item">
1488
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
1489
+ <span>Git Cheat Sheet</span>
1490
+
1491
+ </a>
1492
+ </li>
1493
+
1494
+
1495
+
1496
+
1497
+ <li class="Tree-item Tree-entity" data-role="item">
1498
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/installation-and-usage.html" data-pjax>
1499
+ <span>Installation And Usage</span>
1500
+
1501
+ </a>
1502
+ </li>
1503
+
1504
+
1505
+
1506
+ </ul>
1507
+ </li>
1508
+
1509
+
1510
+
1511
+ </ul>
1512
+ </div>
1513
+
1514
+ </div>
1515
+
1516
+
1517
+
1518
+ </nav>
1519
+
1520
+ </div>
1521
+ </div>
1522
+ </div>
1523
+
1524
+
1525
+
1526
+
1527
+ <script src="../../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
1528
+
1529
+ <script src="../../../design-system.js?cachebust=1.4.0"></script>
1530
+
1531
+
1532
+
1533
+ </body>
1534
+ </html>