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