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