@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/alerts.html ADDED
@@ -0,0 +1,1657 @@
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>Alerts | 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">Alerts</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-alerts-are-used-everywhere-on-the-website-to-notify-users-about-promotions-or-issues">The alerts are used everywhere on the website to notify users about promotions or issues</h2>
89
+ <p>Below you will find the different definitions and options to alerts</p>
90
+ <h3 id="table-of-contents">Table of contents</h3>
91
+ <div class="row">
92
+ <div class="col-12">
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="#alerts-with-a-badge-and-state">Alerts with a badge and state</a>
103
+ </li>
104
+ <li class="document__unordered-list-item">
105
+ <a class="msds-link"href="#alerts-without-an-image">Alerts without an image</a>
106
+ </li>
107
+ <li class="document__unordered-list-item">
108
+ <a class="msds-link"href="#alerts-with-extra-attention">Alerts with extra attention button</a>
109
+ </li>
110
+ <li class="document__unordered-list-item">
111
+ <a class="msds-link"href="#alerts-that-are-visible-after-refreshing-the-page">Alerts that are visible after refreshing the page</a>
112
+ </li>
113
+ <li class="document__unordered-list-item">
114
+ <a class="msds-link"href="#alerts-that-are-visible-again-after-30-days">Alerts that are visible again after 30 days or until cookies are cleared</a>
115
+ </li>
116
+ <ul class="document__unordered-list">
117
+ <li class="document__unordered-list-item">
118
+ <a class="msds-link"href="#alerts-can-have-an-option-to-be-hidden-for-30-days-based-on-user-interaction">Alerts can have an option to be hidden for 30 days based on user interaction</a>
119
+ </li>
120
+ </ul>
121
+ </ul>
122
+ <li class="document__unordered-list-item">
123
+ <a class="msds-link"href="#themes">Themes</a>
124
+ </li>
125
+ <ul class="document__unordered-list">
126
+ <li class="document__unordered-list-item">
127
+ <a class="msds-link"href="#light-theme-left-border">Light Theme Left Border</a>
128
+ </li>
129
+ <ul class="document__unordered-list">
130
+ <li class="document__unordered-list-item">
131
+ <a class="msds-link"href="#red-border-light">Red Border</a>
132
+ </li>
133
+ <li class="document__unordered-list-item">
134
+ <a class="msds-link"href="#blue-border-light">Blue Border</a>
135
+ </li>
136
+ <li class="document__unordered-list-item">
137
+ <a class="msds-link"href="#green-border-light">Green Border</a>
138
+ </li>
139
+ </ul>
140
+ <li class="document__unordered-list-item">
141
+ <a class="msds-link"href="#dark-theme-left-border">Dark Theme Left Border</a>
142
+ </li>
143
+ <ul class="document__unordered-list">
144
+ <li class="document__unordered-list-item">
145
+ <a class="msds-link"href="#yellow-border-dark">Yellow Border</a>
146
+ </li>
147
+ <li class="document__unordered-list-item">
148
+ <a class="msds-link"href="#green-border-dark">Green Border</a>
149
+ </li>
150
+ </ul>
151
+ </ul>
152
+ </ul>
153
+ </div>
154
+ </div>
155
+
156
+ <h2 id="overview">Overview</h2>
157
+ <h3 id="global-definition">Global Definition</h3>
158
+ <p>Alerts can be setup to be visible again after a page refresh, or after 30 days.</p>
159
+ <p>Alerts left borders can be changed using modifier classes, the modifiers depend on the theme that is being used for the specific alert.</p>
160
+ <div class="element-preview">
161
+ <div class="element-preview__inner"><div class="container">
162
+ <div class="row">
163
+ <div class="col-12">
164
+ <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="12">
165
+ <div class="msds-alert__close-click-area">
166
+ <svg class="msds-alert__close-icon">
167
+ <use href="../../msds-spritemap.svg#cross" />
168
+ </svg>
169
+ </div>
170
+ <div class="msds-alert__content-container">
171
+ <div class="msds-alert__image msds-clock-24-7"></div>
172
+ <div class="msds-alert__text-container">
173
+ <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
174
+ <p class="msds-alert__text">
175
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
176
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
177
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
178
+ porttitor pulvinar.
179
+ </p>
180
+ <div class="msds-alert__action-container">
181
+ <button type="button"
182
+ class="msds-btn msds-btn--secondary msds-btn--sm">ok,
183
+ i get it</button>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div></div>
191
+ </div>
192
+
193
+ <h3 id="alerts-with-a-badge-and-state">Alerts with a badge and state</h3>
194
+ <p>Alerts can be setup with a badge and additional information, to do this add the “<code>msds-alert__alert-badge</code>“ element or the state element “<code>msds-alert__header-state</code>“</p>
195
+ <div class="element-preview">
196
+ <div class="element-preview__inner"><div class="container">
197
+ <div class="row">
198
+ <div class="col-12">
199
+ <div class="d-none msds-alert msds-alert--solution msds-bg-gray-2" data-alert-id="111">
200
+ <div class="msds-alert__close-click-area">
201
+ <svg class="msds-alert__close-icon">
202
+ <use href="../../msds-spritemap.svg#cross" />
203
+ </svg>
204
+ </div>
205
+ <div class="msds-alert__content-container">
206
+ <div class="msds-alert__image msds-innovation"></div>
207
+ <div class="msds-alert__text-container">
208
+ <div class="msds-alert__header">
209
+ AGG Solution
210
+ <span class="msds-alert__header-state">ready to publish</span>
211
+ </div>
212
+ <div class="msds-alert__alert-badge msds-bg-dusty-green msds-text-white">
213
+ <div class="msds-text-body-3-bold text-nowrap">Solution Service</div>
214
+ </div>
215
+ <p class="msds-alert__text">
216
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
217
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
218
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
219
+ porttitor pulvinar.
220
+ </p>
221
+ <div class="msds-alert__action-container">
222
+ <button type="button"
223
+ class="msds-btn msds-btn--secondary msds-btn--sm">ok,
224
+ i get it</button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div></div>
232
+ </div>
233
+
234
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
235
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
236
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</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">"d-none msds-alert msds-alert--solution msds-bg-gray-2"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"111"</span>&gt;</span>
238
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
239
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
240
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
241
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
242
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
243
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</span>&gt;</span>
244
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__image msds-innovation"</span>&gt;</span><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> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
246
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>
247
+ AGG Solution
248
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header-state"</span>&gt;</span>ready to publish<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
249
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
250
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__alert-badge msds-bg-dusty-green msds-text-white"</span>&gt;</span>
251
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-text-body-3-bold text-nowrap"</span>&gt;</span>Solution Service<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
252
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
253
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
254
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
255
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
256
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
257
+ porttitor pulvinar.
258
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
259
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
260
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>
261
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>ok,
262
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
263
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
264
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
265
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
266
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
267
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
268
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
269
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="alerts-without-an-image">Alerts without an image</h3>
270
+ <p>Alerts can be setup without an image/icon by removing the image container”<code>msds-alert__image</code>“</p>
271
+ <div class="element-preview">
272
+ <div class="element-preview__inner"><div class="container">
273
+ <div class="row">
274
+ <div class="col-12">
275
+ <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="12">
276
+ <div class="msds-alert__close-click-area">
277
+ <svg class="msds-alert__close-icon">
278
+ <use href="../../msds-spritemap.svg#cross" />
279
+ </svg>
280
+ </div>
281
+ <div class="msds-alert__content-container">
282
+ <div class="msds-alert__text-container">
283
+ <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
284
+ <p class="msds-alert__text">
285
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
286
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
287
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
288
+ porttitor pulvinar.
289
+ </p>
290
+ <div class="msds-alert__action-container">
291
+ <button type="button"
292
+ class="msds-btn msds-btn--secondary msds-btn--sm">ok,
293
+ i get it</button>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div></div>
301
+ </div>
302
+
303
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
304
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
305
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
306
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-bg-gray-2"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"12"</span>&gt;</span>
307
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
308
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
309
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
310
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
311
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
312
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</span>&gt;</span>
313
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
314
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>Donec libero turpis, lacinia nec leo sit amet<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
315
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
316
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
317
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
318
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
319
+ porttitor pulvinar.
320
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
321
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
322
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>
323
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>ok,
324
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
325
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
326
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
327
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
328
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
329
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
330
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
331
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="alerts-with-extra-attention">Alerts with extra attention</h3>
332
+ <p>Alerts can have an additional button by adding a second “<code>msds-btn</code>“ with your desired styling eg:”<code>msds-btn--gray</code>“ inside the “<code>msds-alert__action-container</code>“ element.</p>
333
+ <div class="element-preview">
334
+ <div class="element-preview__inner"><div class="container">
335
+ <div class="row">
336
+ <div class="col-12">
337
+ <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="12">
338
+ <div class="msds-alert__close-click-area">
339
+ <svg class="msds-alert__close-icon">
340
+ <use href="../../msds-spritemap.svg#cross" />
341
+ </svg>
342
+ </div>
343
+ <div class="msds-alert__content-container">
344
+ <div class="msds-alert__image msds-clock-24-7"></div>
345
+ <div class="msds-alert__text-container">
346
+ <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
347
+ <p class="msds-alert__text">
348
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
349
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
350
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
351
+ porttitor pulvinar.
352
+ </p>
353
+ <div class="msds-alert__action-container">
354
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">ok,
355
+ i get it</button>
356
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm">cancel</button>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div></div>
364
+ </div>
365
+
366
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
367
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
368
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
369
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-bg-gray-2"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"12"</span>&gt;</span>
370
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
371
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
372
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
373
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
374
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
375
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</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-alert__image msds-clock-24-7"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
377
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
378
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>Donec libero turpis, lacinia nec leo sit amet<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
379
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
380
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
381
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
382
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
383
+ porttitor pulvinar.
384
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</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-alert__action-container"</span>&gt;</span>
386
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>ok,
387
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
388
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span>&gt;</span>cancel<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
389
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
390
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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>
395
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="alerts-that-are-visible-after-refreshing-the-page">Alerts that are visible after refreshing the page</h3>
396
+ <p>To use an alert that will be visible after page refresh, use the standard markup for an alert</p>
397
+ <div class="element-preview">
398
+ <div class="element-preview__inner"><div class="container">
399
+ <div class="row">
400
+ <div class="col-12">
401
+ <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="12">
402
+ <div class="msds-alert__close-click-area">
403
+ <svg class="msds-alert__close-icon">
404
+ <use href="../../msds-spritemap.svg#cross" />
405
+ </svg>
406
+ </div>
407
+ <div class="msds-alert__content-container">
408
+ <div class="msds-alert__image msds-clock-24-7"></div>
409
+ <div class="msds-alert__text-container">
410
+ <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
411
+ <p class="msds-alert__text">
412
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
413
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
414
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
415
+ porttitor pulvinar.
416
+ </p>
417
+ <div class="msds-alert__action-container">
418
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">ok,
419
+ i get it</button>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div></div>
427
+ </div>
428
+
429
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
430
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
431
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
432
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-bg-gray-2"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"12"</span>&gt;</span>
433
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
434
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
435
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
436
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</span>&gt;</span>
439
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__image msds-clock-24-7"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
440
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
441
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>Donec libero turpis, lacinia nec leo sit amet<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
442
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
443
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
444
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
445
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
446
+ porttitor pulvinar.
447
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
448
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
449
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>ok,
450
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
451
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
452
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
453
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
454
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
455
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
456
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
457
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="alerts-that-are-visible-again-after-30-days">Alerts that are visible again after 30 days</h3>
458
+ <p>To use an alert that will remain hidden for 30 days, use the standard markup for alerts and add “<code>msds-alert--stay-hidden</code>“ to the main HTML element.</p>
459
+ <p>This version of the alerts does use cookies, so please ensure GDPR compliance when using alerts that need to remain hidden.</p>
460
+ <div class="element-preview">
461
+ <div class="element-preview__inner"><div class="container">
462
+ <div class="row">
463
+ <div class="col-12">
464
+ <div class="d-none msds-alert msds-alert--stay-hidden msds-bg-gray-2" data-alert-id="123">
465
+ <div class="msds-alert__close-click-area">
466
+ <svg class="msds-alert__close-icon">
467
+ <use href="../../msds-spritemap.svg#cross" />
468
+ </svg>
469
+ </div>
470
+ <div class="msds-alert__content-container">
471
+ <div class="msds-alert__image msds-milestone-global-offices-illustration"></div>
472
+ <div class="msds-alert__text-container">
473
+ <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
474
+ <p class="msds-alert__text">
475
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
476
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
477
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
478
+ porttitor pulvinar.
479
+ </p>
480
+ <div class="msds-alert__action-container">
481
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">ok,
482
+ i get it</button>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div></div>
490
+ </div>
491
+
492
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
493
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
494
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
495
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-alert--stay-hidden msds-bg-gray-2"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"123"</span>&gt;</span>
496
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
497
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
498
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
499
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
500
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
501
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</span>&gt;</span>
502
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__image msds-milestone-global-offices-illustration"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
503
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
504
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>Donec libero turpis, lacinia nec leo sit amet<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
505
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
506
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
507
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
508
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
509
+ porttitor pulvinar.
510
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
511
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
512
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>ok,
513
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
514
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
515
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
516
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
517
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
518
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
519
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
520
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h4 id="alerts-can-have-an-option-to-be-hidden-for-30-days-based-on-user-interaction">Alerts can have an option to be hidden for 30 days based on user interaction</h4>
521
+ <p>The alert can setup to have an option, where the user can choose to see the alert again by using a checkbox.</p>
522
+ <div class="element-preview">
523
+ <div class="element-preview__inner"><div class="container">
524
+ <div class="row">
525
+ <div class="col-12">
526
+ <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="1234">
527
+ <div class="msds-alert__close-click-area">
528
+ <svg class="msds-alert__close-icon">
529
+ <use href="../../msds-spritemap.svg#cross" />
530
+ </svg>
531
+ </div>
532
+ <div class="msds-alert__content-container">
533
+ <div class="msds-alert__image msds-xprotect-compare-products"></div>
534
+ <div class="msds-alert__text-container">
535
+ <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
536
+ <p class="msds-alert__text">
537
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
538
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
539
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
540
+ porttitor pulvinar.
541
+ </p>
542
+ <div class="msds-alert__action-container">
543
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">ok,
544
+ i get it</button>
545
+ <div class="msds-alert__checkbox-container">
546
+ <input type="checkbox" class="msds-alert__checkbox" id="msds-alert__checkbox"
547
+ type="text">
548
+ <label class="msds-alert__checkbox-label" for="msds-alert__checkbox">Don't show this
549
+ again</label>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </div></div>
558
+ </div>
559
+
560
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
561
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
562
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
563
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-bg-gray-2"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"1234"</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-alert__close-click-area"</span>&gt;</span>
565
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
566
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
567
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</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-alert__content-container"</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-alert__image msds-xprotect-compare-products"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</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-alert__text-container"</span>&gt;</span>
572
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>Donec libero turpis, lacinia nec leo sit amet<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
573
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
574
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
575
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
576
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
577
+ porttitor pulvinar.
578
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
579
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
580
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>ok,
581
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
582
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__checkbox-container"</span>&gt;</span>
583
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"msds-alert__checkbox"</span>
584
+ <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>&gt;</span>
585
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__checkbox-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"msds-alert__checkbox"</span>&gt;</span>Don't show this
586
+ again<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
587
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
588
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
589
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
590
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
591
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
592
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
593
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
594
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="themes">Themes</h3>
595
+ <p>The light theme is applied by default to alerts, to utilize the dark themed alert, use “<code>msds-alert--dark-theme</code>“ CSS class</p>
596
+ <h4 id="light-theme-left-border">Light Theme Left Border</h4>
597
+ <p>Light themed alerts have three different options:</p>
598
+ <ul>
599
+ <li>Red - Indicates warnings, the red border is used by default</li>
600
+ <li>Blue - Indicates generic notifications</li>
601
+ <li>Green - Indicates success notifications</li>
602
+ </ul>
603
+ <h6 id="red-border-light">Red Border Light</h6>
604
+ <p>To use a left banner that is red use “<code>msds-alert</code>“</p>
605
+ <div class="element-preview">
606
+ <div class="element-preview__inner"><div class="container">
607
+ <div class="row">
608
+ <div class="col-12">
609
+ <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="12">
610
+ <div class="msds-alert__close-click-area">
611
+ <svg class="msds-alert__close-icon">
612
+ <use href="../../msds-spritemap.svg#cross" />
613
+ </svg>
614
+ </div>
615
+ <div class="msds-alert__content-container">
616
+ <div class="msds-alert__image msds-clock-24-7"></div>
617
+ <div class="msds-alert__text-container">
618
+ <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
619
+ <p class="msds-alert__text">
620
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
621
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
622
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
623
+ porttitor pulvinar.
624
+ </p>
625
+ <div class="msds-alert__action-container">
626
+ <button type="button"
627
+ class="msds-btn msds-btn--secondary msds-btn--sm">ok,
628
+ i get it</button>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div></div>
636
+ </div>
637
+
638
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
639
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
640
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
641
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-bg-gray-2"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"12"</span>&gt;</span>
642
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
643
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
644
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
645
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
646
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
647
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</span>&gt;</span>
648
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__image msds-clock-24-7"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
649
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
650
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>Donec libero turpis, lacinia nec leo sit amet<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
651
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
652
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
653
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
654
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
655
+ porttitor pulvinar.
656
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
657
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
658
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>
659
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>ok,
660
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
661
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
662
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
663
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
664
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
665
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
666
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
667
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h6 id="blue-border-light">Blue Border Light</h6>
668
+ <p>To use a left banner that is blue use “<code>msds-alert--generic</code>“</p>
669
+ <div class="element-preview">
670
+ <div class="element-preview__inner"><div class="container">
671
+ <div class="row">
672
+ <div class="col-12">
673
+ <div class="d-none msds-alert msds-alert--generic msds-bg-gray-2" data-alert-id="123456">
674
+ <div class="msds-alert__close-click-area">
675
+ <svg class="msds-alert__close-icon">
676
+ <use href="../../msds-spritemap.svg#cross" />
677
+ </svg>
678
+ </div>
679
+ <div class="msds-alert__content-container">
680
+ <div class="msds-alert__image msds-innovation"></div>
681
+ <div class="msds-alert__text-container">
682
+ <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
683
+ <p class="msds-alert__text">
684
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
685
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
686
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
687
+ porttitor pulvinar.
688
+ </p>
689
+ <div class="msds-alert__action-container">
690
+ <button type="button"
691
+ class="msds-btn msds-btn--secondary msds-btn--sm">ok,
692
+ i get it</button>
693
+ </div>
694
+ </div>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ </div>
699
+ </div></div>
700
+ </div>
701
+
702
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
703
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
704
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
705
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-alert--generic msds-bg-gray-2"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"123456"</span>&gt;</span>
706
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
707
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
708
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
709
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
710
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
711
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</span>&gt;</span>
712
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__image msds-innovation"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
713
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
714
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>Donec libero turpis, lacinia nec leo sit amet<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
715
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
716
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
717
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
718
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
719
+ porttitor pulvinar.
720
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
721
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
722
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>
723
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>ok,
724
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
725
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
726
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
727
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
728
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
729
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
730
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
731
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h6 id="green-border-light">Green Border Light</h6>
732
+ <p>To use a left banner that is green use “<code>msds-alert--solution</code>“</p>
733
+ <div class="element-preview">
734
+ <div class="element-preview__inner"><div class="container">
735
+ <div class="row">
736
+ <div class="col-12">
737
+ <div class="d-none msds-alert msds-alert--solution msds-bg-gray-2" data-alert-id="111">
738
+ <div class="msds-alert__close-click-area">
739
+ <svg class="msds-alert__close-icon">
740
+ <use href="../../msds-spritemap.svg#cross" />
741
+ </svg>
742
+ </div>
743
+ <div class="msds-alert__content-container">
744
+ <div class="msds-alert__image msds-innovation"></div>
745
+ <div class="msds-alert__text-container">
746
+ <div class="msds-alert__header">
747
+ AGG Solution
748
+ </div>
749
+ <p class="msds-alert__text">
750
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
751
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
752
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
753
+ porttitor pulvinar.
754
+ </p>
755
+ <div class="msds-alert__action-container">
756
+ <button type="button"
757
+ class="msds-btn msds-btn--secondary msds-btn--sm">ok,
758
+ i get it</button>
759
+ </div>
760
+ </div>
761
+ </div>
762
+ </div>
763
+ </div>
764
+ </div>
765
+ </div></div>
766
+ </div>
767
+
768
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
769
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
770
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
771
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-alert--solution msds-bg-gray-2"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"111"</span>&gt;</span>
772
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
773
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
774
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
775
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
776
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
777
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</span>&gt;</span>
778
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__image msds-innovation"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
779
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
780
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>
781
+ AGG Solution
782
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
783
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
784
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
785
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
786
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
787
+ porttitor pulvinar.
788
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
789
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
790
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>
791
+ <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>ok,
792
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
793
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
794
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
795
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
796
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
797
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
798
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
799
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h4 id="dark-theme-left-border">Dark Theme Left Border</h4>
800
+ <p>To use a Dark Themed alert use “<code>msds-alert--dark-theme</code>“
801
+ themed alerts have three different options:</p>
802
+ <ul>
803
+ <li>Yellow - Indicates warnings, the yellow border is used by default</li>
804
+ <li>Green - Indicates success notifications</li>
805
+ </ul>
806
+ <h6 id="yellow-border-dark">Yellow Border Dark</h6>
807
+ <p>To use a left banner that is blue use “<code>msds-alert--dark-theme</code>“</p>
808
+ <div class="element-preview">
809
+ <div class="element-preview__inner"><div class="container">
810
+ <div class="row">
811
+ <div class="col-12">
812
+ <div class="d-none msds-alert msds-alert--dark-theme msds-bg-dark-blue-gradient" data-alert-id="222">
813
+ <div class="msds-alert__close-click-area">
814
+ <svg class="msds-alert__close-icon">
815
+ <use href="../../msds-spritemap.svg#cross" />
816
+ </svg>
817
+ </div>
818
+ <div class="msds-alert__content-container">
819
+ <div class="msds-alert__image msds-innovation"></div>
820
+ <div class="msds-alert__text-container">
821
+ <div class="msds-alert__header">
822
+ AGG Solution
823
+ </div>
824
+ <p class="msds-alert__text">
825
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
826
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
827
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
828
+ porttitor pulvinar.
829
+ </p>
830
+ <div class="msds-alert__action-container">
831
+ <button type="button" class="msds-btn msds-btn--secondary-dark msds-btn--sm">ok,
832
+ i get it</button>
833
+ </div>
834
+ </div>
835
+ </div>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ </div></div>
840
+ </div>
841
+
842
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
843
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
844
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
845
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-alert--dark-theme msds-bg-dark-blue-gradient"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"222"</span>&gt;</span>
846
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
847
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
848
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
849
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
850
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
851
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</span>&gt;</span>
852
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__image msds-innovation"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
853
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
854
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>
855
+ AGG Solution
856
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
857
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
858
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
859
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
860
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
861
+ porttitor pulvinar.
862
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
863
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
864
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary-dark msds-btn--sm"</span>&gt;</span>ok,
865
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
866
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
867
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
868
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
869
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
870
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
871
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
872
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h6 id="green-border-dark">Green Border Dark</h6>
873
+ <p>To use a left banner that is green use “<code>msds-alert--dark-theme msds-alert--solution</code>“</p>
874
+ <p>The alerts have multiple customization options that will be listed below</p>
875
+ <div class="element-preview">
876
+ <div class="element-preview__inner"><div class="container">
877
+ <div class="row">
878
+ <div class="col-12">
879
+ <div class="d-none msds-alert msds-alert--dark-theme msds-alert--solution msds-bg-dark-blue-gradient" data-alert-id="222">
880
+ <div class="msds-alert__close-click-area">
881
+ <svg class="msds-alert__close-icon">
882
+ <use href="../../msds-spritemap.svg#cross" />
883
+ </svg>
884
+ </div>
885
+ <div class="msds-alert__content-container">
886
+ <div class="msds-alert__image msds-innovation"></div>
887
+ <div class="msds-alert__text-container">
888
+ <div class="msds-alert__header">
889
+ AGG Solution
890
+ </div>
891
+ <p class="msds-alert__text">
892
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
893
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
894
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
895
+ porttitor pulvinar.
896
+ </p>
897
+ <div class="msds-alert__action-container">
898
+ <button type="button" class="msds-btn msds-btn--secondary-dark msds-btn--sm">ok,
899
+ i get it</button>
900
+ </div>
901
+ </div>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ </div>
906
+ </div></div>
907
+ </div>
908
+
909
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
910
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
911
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
912
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none msds-alert msds-alert--dark-theme msds-alert--solution msds-bg-dark-blue-gradient"</span> <span class="hljs-attr">data-alert-id</span>=<span class="hljs-string">"222"</span>&gt;</span>
913
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-click-area"</span>&gt;</span>
914
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__close-icon"</span>&gt;</span>
915
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#cross"</span> /&gt;</span>
916
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
917
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
918
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__content-container"</span>&gt;</span>
919
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__image msds-innovation"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
920
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text-container"</span>&gt;</span>
921
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__header"</span>&gt;</span>
922
+ AGG Solution
923
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
924
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__text"</span>&gt;</span>
925
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
926
+ amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
927
+ Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
928
+ porttitor pulvinar.
929
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
930
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-alert__action-container"</span>&gt;</span>
931
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary-dark msds-btn--sm"</span>&gt;</span>ok,
932
+ i get it<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
933
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
934
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
935
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
936
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
937
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
938
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
939
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><script>
940
+ //Iniliazes JS each time a user changes the page - this is for fractle v1.3.0
941
+ dispatchEvent(new Event('load'));
942
+ </script>
943
+
944
+
945
+
946
+ </div>
947
+
948
+
949
+
950
+ </div>
951
+
952
+ </div>
953
+
954
+
955
+ </div>
956
+ </div>
957
+
958
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
959
+
960
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
961
+ <nav class="Navigation">
962
+
963
+
964
+ <div class="Navigation-group">
965
+
966
+ <div class="Tree" data-behaviour="tree" id="tree-components">
967
+ <div class="Tree-header">
968
+ <h3 class="Tree-title">components</h3>
969
+
970
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
971
+ <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>
972
+
973
+ </button>
974
+ </div>
975
+ <ul class="Tree-items Tree-depth-1">
976
+
977
+
978
+
979
+
980
+ <li class="Tree-item Tree-entity" data-role="item">
981
+ <a class="Tree-entityLink" href="../../components/detail/tab-tile.html" data-pjax>
982
+ <span>Tab Tile</span>
983
+
984
+
985
+ <div class="Status Status--unlabelled">
986
+
987
+ <div class="Status-dots">
988
+
989
+
990
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
991
+
992
+
993
+ </div>
994
+
995
+ </div>
996
+
997
+
998
+ </a>
999
+ </li>
1000
+
1001
+
1002
+
1003
+ </ul>
1004
+ </div>
1005
+
1006
+ </div>
1007
+
1008
+
1009
+
1010
+
1011
+ <div class="Navigation-group">
1012
+
1013
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
1014
+ <div class="Tree-header">
1015
+ <h3 class="Tree-title">documentation</h3>
1016
+
1017
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
1018
+ <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>
1019
+
1020
+ </button>
1021
+ </div>
1022
+ <ul class="Tree-items Tree-depth-1">
1023
+
1024
+
1025
+
1026
+
1027
+ <li class="Tree-item Tree-entity" data-role="item">
1028
+ <a class="Tree-entityLink" href="../../index.html" data-pjax>
1029
+ <span>Overview</span>
1030
+
1031
+ </a>
1032
+ </li>
1033
+
1034
+
1035
+
1036
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
1037
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
1038
+ Content
1039
+ </button>
1040
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
1041
+
1042
+
1043
+
1044
+
1045
+
1046
+
1047
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
1048
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
1049
+ Icons
1050
+ </button>
1051
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
1052
+
1053
+
1054
+
1055
+
1056
+
1057
+
1058
+
1059
+ <li class="Tree-item Tree-entity" data-role="item">
1060
+ <a class="Tree-entityLink" href="../content/icons/-overview.html" data-pjax>
1061
+ <span>Overview</span>
1062
+
1063
+ </a>
1064
+ </li>
1065
+
1066
+
1067
+
1068
+
1069
+ <li class="Tree-item Tree-entity" data-role="item">
1070
+ <a class="Tree-entityLink" href="../content/icons/icons-flat.html" data-pjax>
1071
+ <span>Icons Flat</span>
1072
+
1073
+ </a>
1074
+ </li>
1075
+
1076
+
1077
+
1078
+
1079
+ <li class="Tree-item Tree-entity" data-role="item">
1080
+ <a class="Tree-entityLink" href="../content/icons/icons-rich.html" data-pjax>
1081
+ <span>Icons Rich</span>
1082
+
1083
+ </a>
1084
+ </li>
1085
+
1086
+
1087
+
1088
+ </ul>
1089
+ </li>
1090
+
1091
+
1092
+
1093
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
1094
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
1095
+ Typography
1096
+ </button>
1097
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
1098
+
1099
+
1100
+
1101
+
1102
+
1103
+
1104
+
1105
+ <li class="Tree-item Tree-entity" data-role="item">
1106
+ <a class="Tree-entityLink" href="../content/typography/-overview.html" data-pjax>
1107
+ <span>Overview</span>
1108
+
1109
+ </a>
1110
+ </li>
1111
+
1112
+
1113
+
1114
+
1115
+ <li class="Tree-item Tree-entity" data-role="item">
1116
+ <a class="Tree-entityLink" href="../content/typography/font-colors.html" data-pjax>
1117
+ <span>Font Colors</span>
1118
+
1119
+ </a>
1120
+ </li>
1121
+
1122
+
1123
+
1124
+
1125
+ <li class="Tree-item Tree-entity" data-role="item">
1126
+ <a class="Tree-entityLink" href="../content/typography/links.html" data-pjax>
1127
+ <span>Links</span>
1128
+
1129
+ </a>
1130
+ </li>
1131
+
1132
+
1133
+
1134
+
1135
+ <li class="Tree-item Tree-entity" data-role="item">
1136
+ <a class="Tree-entityLink" href="../content/typography/lists.html" data-pjax>
1137
+ <span>Lists</span>
1138
+
1139
+ </a>
1140
+ </li>
1141
+
1142
+
1143
+
1144
+
1145
+ <li class="Tree-item Tree-entity" data-role="item">
1146
+ <a class="Tree-entityLink" href="../content/typography/text.html" data-pjax>
1147
+ <span>Text</span>
1148
+
1149
+ </a>
1150
+ </li>
1151
+
1152
+
1153
+
1154
+ </ul>
1155
+ </li>
1156
+
1157
+
1158
+
1159
+ </ul>
1160
+ </li>
1161
+
1162
+
1163
+
1164
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
1165
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
1166
+ Component Documentation
1167
+ </button>
1168
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
1169
+
1170
+
1171
+
1172
+
1173
+
1174
+
1175
+
1176
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
1177
+ <a class="Tree-entityLink" href="" data-pjax>
1178
+ <span>Alerts</span>
1179
+
1180
+ </a>
1181
+ </li>
1182
+
1183
+
1184
+
1185
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
1186
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
1187
+ Buttons
1188
+ </button>
1189
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
1190
+
1191
+
1192
+
1193
+
1194
+
1195
+
1196
+
1197
+ <li class="Tree-item Tree-entity" data-role="item">
1198
+ <a class="Tree-entityLink" href="buttons/buttons.html" data-pjax>
1199
+ <span>Buttons</span>
1200
+
1201
+ </a>
1202
+ </li>
1203
+
1204
+
1205
+
1206
+
1207
+ <li class="Tree-item Tree-entity" data-role="item">
1208
+ <a class="Tree-entityLink" href="buttons/buttons-floating.html" data-pjax>
1209
+ <span>Buttons Floating</span>
1210
+
1211
+ </a>
1212
+ </li>
1213
+
1214
+
1215
+
1216
+ </ul>
1217
+ </li>
1218
+
1219
+
1220
+
1221
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
1222
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
1223
+ Cards
1224
+ </button>
1225
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
1226
+
1227
+
1228
+
1229
+
1230
+
1231
+
1232
+
1233
+ <li class="Tree-item Tree-entity" data-role="item">
1234
+ <a class="Tree-entityLink" href="cards/basic-cards.html" data-pjax>
1235
+ <span>Basic Cards</span>
1236
+
1237
+ </a>
1238
+ </li>
1239
+
1240
+
1241
+
1242
+
1243
+ <li class="Tree-item Tree-entity" data-role="item">
1244
+ <a class="Tree-entityLink" href="cards/category-cards.html" data-pjax>
1245
+ <span>Category Cards</span>
1246
+
1247
+ </a>
1248
+ </li>
1249
+
1250
+
1251
+
1252
+
1253
+ <li class="Tree-item Tree-entity" data-role="item">
1254
+ <a class="Tree-entityLink" href="cards/contact-cards.html" data-pjax>
1255
+ <span>Contact Cards</span>
1256
+
1257
+ </a>
1258
+ </li>
1259
+
1260
+
1261
+
1262
+
1263
+ <li class="Tree-item Tree-entity" data-role="item">
1264
+ <a class="Tree-entityLink" href="cards/generic-cards.html" data-pjax>
1265
+ <span>Generic Cards</span>
1266
+
1267
+ </a>
1268
+ </li>
1269
+
1270
+
1271
+
1272
+
1273
+ <li class="Tree-item Tree-entity" data-role="item">
1274
+ <a class="Tree-entityLink" href="cards/solution-cards.html" data-pjax>
1275
+ <span>Solution Cards</span>
1276
+
1277
+ </a>
1278
+ </li>
1279
+
1280
+
1281
+
1282
+ </ul>
1283
+ </li>
1284
+
1285
+
1286
+
1287
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
1288
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
1289
+ Dividers
1290
+ </button>
1291
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
1292
+
1293
+
1294
+
1295
+
1296
+
1297
+
1298
+
1299
+ <li class="Tree-item Tree-entity" data-role="item">
1300
+ <a class="Tree-entityLink" href="dividers/dividers.html" data-pjax>
1301
+ <span>Dividers</span>
1302
+
1303
+ </a>
1304
+ </li>
1305
+
1306
+
1307
+
1308
+ </ul>
1309
+ </li>
1310
+
1311
+
1312
+
1313
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
1314
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
1315
+ Expanding Components
1316
+ </button>
1317
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
1318
+
1319
+
1320
+
1321
+
1322
+
1323
+
1324
+
1325
+ <li class="Tree-item Tree-entity" data-role="item">
1326
+ <a class="Tree-entityLink" href="expanding-components/accordion.html" data-pjax>
1327
+ <span>Accordion</span>
1328
+
1329
+ </a>
1330
+ </li>
1331
+
1332
+
1333
+
1334
+
1335
+ <li class="Tree-item Tree-entity" data-role="item">
1336
+ <a class="Tree-entityLink" href="expanding-components/section.html" data-pjax>
1337
+ <span>Section</span>
1338
+
1339
+ </a>
1340
+ </li>
1341
+
1342
+
1343
+
1344
+ </ul>
1345
+ </li>
1346
+
1347
+
1348
+
1349
+
1350
+ <li class="Tree-item Tree-entity" data-role="item">
1351
+ <a class="Tree-entityLink" href="modal.html" data-pjax>
1352
+ <span>Modal</span>
1353
+
1354
+ </a>
1355
+ </li>
1356
+
1357
+
1358
+
1359
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
1360
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
1361
+ Popover
1362
+ </button>
1363
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
1364
+
1365
+
1366
+
1367
+
1368
+
1369
+
1370
+
1371
+ <li class="Tree-item Tree-entity" data-role="item">
1372
+ <a class="Tree-entityLink" href="popover/popover.html" data-pjax>
1373
+ <span>Popover</span>
1374
+
1375
+ </a>
1376
+ </li>
1377
+
1378
+
1379
+
1380
+ </ul>
1381
+ </li>
1382
+
1383
+
1384
+
1385
+
1386
+ <li class="Tree-item Tree-entity" data-role="item">
1387
+ <a class="Tree-entityLink" href="progress-bar.html" data-pjax>
1388
+ <span>Progress Bar</span>
1389
+
1390
+ </a>
1391
+ </li>
1392
+
1393
+
1394
+
1395
+
1396
+ <li class="Tree-item Tree-entity" data-role="item">
1397
+ <a class="Tree-entityLink" href="spacing.html" data-pjax>
1398
+ <span>Spacing</span>
1399
+
1400
+ </a>
1401
+ </li>
1402
+
1403
+
1404
+
1405
+
1406
+ <li class="Tree-item Tree-entity" data-role="item">
1407
+ <a class="Tree-entityLink" href="table.html" data-pjax>
1408
+ <span>Table</span>
1409
+
1410
+ </a>
1411
+ </li>
1412
+
1413
+
1414
+
1415
+ </ul>
1416
+ </li>
1417
+
1418
+
1419
+
1420
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
1421
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
1422
+ Forms
1423
+ </button>
1424
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
1425
+
1426
+
1427
+
1428
+
1429
+
1430
+
1431
+
1432
+ <li class="Tree-item Tree-entity" data-role="item">
1433
+ <a class="Tree-entityLink" href="../forms/-overview.html" data-pjax>
1434
+ <span>Overview</span>
1435
+
1436
+ </a>
1437
+ </li>
1438
+
1439
+
1440
+
1441
+
1442
+ <li class="Tree-item Tree-entity" data-role="item">
1443
+ <a class="Tree-entityLink" href="../forms/checkbox.html" data-pjax>
1444
+ <span>Checkbox</span>
1445
+
1446
+ </a>
1447
+ </li>
1448
+
1449
+
1450
+
1451
+
1452
+ <li class="Tree-item Tree-entity" data-role="item">
1453
+ <a class="Tree-entityLink" href="../forms/drop-down-list.html" data-pjax>
1454
+ <span>Drop Down List</span>
1455
+
1456
+ </a>
1457
+ </li>
1458
+
1459
+
1460
+
1461
+
1462
+ <li class="Tree-item Tree-entity" data-role="item">
1463
+ <a class="Tree-entityLink" href="../forms/input-field.html" data-pjax>
1464
+ <span>Input Field</span>
1465
+
1466
+ </a>
1467
+ </li>
1468
+
1469
+
1470
+
1471
+
1472
+ <li class="Tree-item Tree-entity" data-role="item">
1473
+ <a class="Tree-entityLink" href="../forms/radio-button.html" data-pjax>
1474
+ <span>Radio Button</span>
1475
+
1476
+ </a>
1477
+ </li>
1478
+
1479
+
1480
+
1481
+
1482
+ <li class="Tree-item Tree-entity" data-role="item">
1483
+ <a class="Tree-entityLink" href="../forms/switch.html" data-pjax>
1484
+ <span>Switch</span>
1485
+
1486
+ </a>
1487
+ </li>
1488
+
1489
+
1490
+
1491
+
1492
+ <li class="Tree-item Tree-entity" data-role="item">
1493
+ <a class="Tree-entityLink" href="../forms/text-area.html" data-pjax>
1494
+ <span>Text Area</span>
1495
+
1496
+ </a>
1497
+ </li>
1498
+
1499
+
1500
+
1501
+ </ul>
1502
+ </li>
1503
+
1504
+
1505
+
1506
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
1507
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
1508
+ Utilities
1509
+ </button>
1510
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
1511
+
1512
+
1513
+
1514
+
1515
+
1516
+
1517
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
1518
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
1519
+ Colors
1520
+ </button>
1521
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
1522
+
1523
+
1524
+
1525
+
1526
+
1527
+
1528
+
1529
+ <li class="Tree-item Tree-entity" data-role="item">
1530
+ <a class="Tree-entityLink" href="../utilities/colors/overview.html" data-pjax>
1531
+ <span>Overview</span>
1532
+
1533
+ </a>
1534
+ </li>
1535
+
1536
+
1537
+
1538
+
1539
+ <li class="Tree-item Tree-entity" data-role="item">
1540
+ <a class="Tree-entityLink" href="../utilities/colors/font-colors.html" data-pjax>
1541
+ <span>Font Colors</span>
1542
+
1543
+ </a>
1544
+ </li>
1545
+
1546
+
1547
+
1548
+
1549
+ <li class="Tree-item Tree-entity" data-role="item">
1550
+ <a class="Tree-entityLink" href="../utilities/colors/background-colors.html" data-pjax>
1551
+ <span>Background Colors</span>
1552
+
1553
+ </a>
1554
+ </li>
1555
+
1556
+
1557
+
1558
+ </ul>
1559
+ </li>
1560
+
1561
+
1562
+
1563
+
1564
+ <li class="Tree-item Tree-entity" data-role="item">
1565
+ <a class="Tree-entityLink" href="../utilities/spacing.html" data-pjax>
1566
+ <span>Spacing</span>
1567
+
1568
+ </a>
1569
+ </li>
1570
+
1571
+
1572
+
1573
+ </ul>
1574
+ </li>
1575
+
1576
+
1577
+
1578
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1579
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1580
+ Guidelines And Guides
1581
+ </button>
1582
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1583
+
1584
+
1585
+
1586
+
1587
+
1588
+
1589
+
1590
+ <li class="Tree-item Tree-entity" data-role="item">
1591
+ <a class="Tree-entityLink" href="../guidelines-and-guides/creating-a-new-release.html" data-pjax>
1592
+ <span>Creating A New Release</span>
1593
+
1594
+ </a>
1595
+ </li>
1596
+
1597
+
1598
+
1599
+
1600
+ <li class="Tree-item Tree-entity" data-role="item">
1601
+ <a class="Tree-entityLink" href="../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
1602
+ <span>Css And Scss Guidelines</span>
1603
+
1604
+ </a>
1605
+ </li>
1606
+
1607
+
1608
+
1609
+
1610
+ <li class="Tree-item Tree-entity" data-role="item">
1611
+ <a class="Tree-entityLink" href="../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
1612
+ <span>Git Cheat Sheet</span>
1613
+
1614
+ </a>
1615
+ </li>
1616
+
1617
+
1618
+
1619
+
1620
+ <li class="Tree-item Tree-entity" data-role="item">
1621
+ <a class="Tree-entityLink" href="../guidelines-and-guides/installation-and-usage.html" data-pjax>
1622
+ <span>Installation And Usage</span>
1623
+
1624
+ </a>
1625
+ </li>
1626
+
1627
+
1628
+
1629
+ </ul>
1630
+ </li>
1631
+
1632
+
1633
+
1634
+ </ul>
1635
+ </div>
1636
+
1637
+ </div>
1638
+
1639
+
1640
+
1641
+ </nav>
1642
+
1643
+ </div>
1644
+ </div>
1645
+ </div>
1646
+
1647
+
1648
+
1649
+
1650
+ <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
1651
+
1652
+ <script src="../../design-system.js?cachebust=1.4.0"></script>
1653
+
1654
+
1655
+
1656
+ </body>
1657
+ </html>