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