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

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 (865) hide show
  1. package/package.json +1 -1
  2. package/assets.html +0 -13
  3. package/components/detail/accordion-checkbox-large.html +0 -1051
  4. package/components/detail/accordion-checkbox-medium-dark.html +0 -1051
  5. package/components/detail/accordion-checkbox-medium-disabled.html +0 -1051
  6. package/components/detail/accordion-checkbox-medium-filtered-list-items.html +0 -1055
  7. package/components/detail/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +0 -1077
  8. package/components/detail/accordion-checkbox-medium-icon-left-floating.html +0 -1077
  9. package/components/detail/accordion-checkbox-medium-icon-left.html +0 -1065
  10. package/components/detail/accordion-checkbox-medium.html +0 -1060
  11. package/components/detail/accordion-checkbox-overview.html +0 -1051
  12. package/components/detail/accordion-input.html +0 -949
  13. package/components/detail/accordion-label.html +0 -949
  14. package/components/detail/accordion-modifier-icon-floating.html +0 -949
  15. package/components/detail/accordion-modifier-icon-left.html +0 -949
  16. package/components/detail/accordion-radio.html +0 -1053
  17. package/components/detail/alert-dark-theme-default.html +0 -1009
  18. package/components/detail/alert-dark-theme-solution.html +0 -1009
  19. package/components/detail/alert-default-extra-attention.html +0 -1007
  20. package/components/detail/alert-default-generic.html +0 -1006
  21. package/components/detail/alert-default-solution-with-badge-and-ready-state.html +0 -1018
  22. package/components/detail/alert-default-solution.html +0 -1010
  23. package/components/detail/alert-default-without-image.html +0 -1004
  24. package/components/detail/alert-default.html +0 -1006
  25. package/components/detail/alert-hidden-after-refresh-checkbox.html +0 -1016
  26. package/components/detail/alert-hidden-after-refresh.html +0 -1005
  27. package/components/detail/alert-layouts.html +0 -1560
  28. package/components/detail/alert-visible-after-refresh.html +0 -1005
  29. package/components/detail/background-colors.html +0 -1287
  30. package/components/detail/basic-card-default-dark.html +0 -1014
  31. package/components/detail/basic-card-default-without-caption-with-header-icon.html +0 -1005
  32. package/components/detail/basic-card-default-without-caption-with-header-image.html +0 -1001
  33. package/components/detail/basic-card-default-without-caption.html +0 -997
  34. package/components/detail/basic-card-default.html +0 -1014
  35. package/components/detail/basic-card-grouping-center.html +0 -1014
  36. package/components/detail/basic-card-grouping-left-with-flat-icon.html +0 -1024
  37. package/components/detail/basic-card-grouping-left.html +0 -1014
  38. package/components/detail/basic-card-grouping.html +0 -1122
  39. package/components/detail/basic-card-layouts.html +0 -1886
  40. package/components/detail/button-danger-dark-icon.html +0 -999
  41. package/components/detail/button-danger-dark.html +0 -975
  42. package/components/detail/button-danger-default.html +0 -975
  43. package/components/detail/button-danger-icon.html +0 -999
  44. package/components/detail/button-disabled-dark-icon.html +0 -999
  45. package/components/detail/button-disabled-dark.html +0 -975
  46. package/components/detail/button-floating-aligned-column.html +0 -1005
  47. package/components/detail/button-floating-aligned-right.html +0 -1005
  48. package/components/detail/button-floating-dark-aligned-column.html +0 -1005
  49. package/components/detail/button-floating-dark-aligned-right.html +0 -1005
  50. package/components/detail/button-floating-dark-default.html +0 -1005
  51. package/components/detail/button-floating-dark-disabled.html +0 -1005
  52. package/components/detail/button-floating-dark-secondary-aligned-column.html +0 -1005
  53. package/components/detail/button-floating-dark-secondary-aligned-right.html +0 -1005
  54. package/components/detail/button-floating-dark-secondary.html +0 -1005
  55. package/components/detail/button-floating-default.html +0 -1005
  56. package/components/detail/button-floating-disabled.html +0 -1005
  57. package/components/detail/button-floating-overview.html +0 -969
  58. package/components/detail/button-floating-positioning.html +0 -1007
  59. package/components/detail/button-floating-secondary-aligned-column.html +0 -1005
  60. package/components/detail/button-floating-secondary-aligned-right.html +0 -1005
  61. package/components/detail/button-floating-secondary.html +0 -1005
  62. package/components/detail/button-floating-states.html +0 -987
  63. package/components/detail/button-gray-default.html +0 -975
  64. package/components/detail/button-gray-icon.html +0 -999
  65. package/components/detail/button-group-center-alignment.html +0 -965
  66. package/components/detail/button-group-left-alignment.html +0 -965
  67. package/components/detail/button-group-right-alignment.html +0 -965
  68. package/components/detail/button-overview-direction.html +0 -983
  69. package/components/detail/button-overview-global-definition.html +0 -975
  70. package/components/detail/button-overview-sizes.html +0 -987
  71. package/components/detail/button-overview-states.html +0 -1019
  72. package/components/detail/button-primary-dark-icon.html +0 -999
  73. package/components/detail/button-primary-dark.html +0 -975
  74. package/components/detail/button-primary-default.html +0 -975
  75. package/components/detail/button-primary-icon.html +0 -999
  76. package/components/detail/button-secondary-dark-icon.html +0 -999
  77. package/components/detail/button-secondary-dark.html +0 -975
  78. package/components/detail/button-secondary-default.html +0 -975
  79. package/components/detail/button-secondary-icon.html +0 -999
  80. package/components/detail/button-tertiary-default.html +0 -975
  81. package/components/detail/button-tertiary-icon.html +0 -999
  82. package/components/detail/buttons-overview.html +0 -2069
  83. package/components/detail/category-dark.html +0 -1022
  84. package/components/detail/category-disabled-dark.html +0 -1014
  85. package/components/detail/category-disabled.html +0 -1014
  86. package/components/detail/category-full-row.html +0 -1178
  87. package/components/detail/category-overview-dark-states.html +0 -1058
  88. package/components/detail/category-overview-dark.html +0 -1022
  89. package/components/detail/category-overview-sizes.html +0 -1030
  90. package/components/detail/category-overview-states.html +0 -1058
  91. package/components/detail/category-small-dark.html +0 -1022
  92. package/components/detail/category-small-disabled-dark.html +0 -1014
  93. package/components/detail/category-small-disabled.html +0 -1014
  94. package/components/detail/category-small-full-row.html +0 -1250
  95. package/components/detail/category-small.html +0 -1022
  96. package/components/detail/category.html +0 -1022
  97. package/components/detail/checkbox-checked.html +0 -968
  98. package/components/detail/checkbox-disabled.html +0 -968
  99. package/components/detail/checkbox-focus.html +0 -968
  100. package/components/detail/checkbox-global-definition.html +0 -968
  101. package/components/detail/checkbox-hover.html +0 -968
  102. package/components/detail/checkbox-inline.html +0 -974
  103. package/components/detail/checkbox-readonly.html +0 -969
  104. package/components/detail/colors-and-shadows.html +0 -1403
  105. package/components/detail/contact-cards.html +0 -2151
  106. package/components/detail/contact-content.html +0 -1017
  107. package/components/detail/contact-overview.html +0 -1147
  108. package/components/detail/contact-sizes.html +0 -1108
  109. package/components/detail/contact-small.html +0 -1038
  110. package/components/detail/contact-without-image-small.html +0 -1028
  111. package/components/detail/contact-without-image.html +0 -1028
  112. package/components/detail/contact.html +0 -1038
  113. package/components/detail/divider-dark-blue.html +0 -949
  114. package/components/detail/divider-default.html +0 -949
  115. package/components/detail/divider-gray-5.html +0 -949
  116. package/components/detail/divider-white-50.html +0 -949
  117. package/components/detail/divider-white.html +0 -949
  118. package/components/detail/divider-yellow.html +0 -949
  119. package/components/detail/generic-card-aspect-16by9.html +0 -1001
  120. package/components/detail/generic-card-aspect-2by1-small.html +0 -1116
  121. package/components/detail/generic-card-aspect-2by1.html +0 -1110
  122. package/components/detail/generic-card-aspect.html +0 -1050
  123. package/components/detail/generic-card-default-small-dark-theme.html +0 -1000
  124. package/components/detail/generic-card-default-small-svg.html +0 -1000
  125. package/components/detail/generic-card-default-small.html +0 -999
  126. package/components/detail/generic-card-default-svg-dark.html +0 -999
  127. package/components/detail/generic-card-default-svg.html +0 -998
  128. package/components/detail/generic-card-default.html +0 -999
  129. package/components/detail/generic-card-media-dark-theme.html +0 -1031
  130. package/components/detail/generic-card-media-floating-icon.html +0 -1042
  131. package/components/detail/generic-card-media-small.html +0 -1027
  132. package/components/detail/generic-card-media.html +0 -1027
  133. package/components/detail/generic-card-overview.html +0 -1062
  134. package/components/detail/generic-flat-icons.html +0 -951
  135. package/components/detail/generic-rich-icons.html +0 -951
  136. package/components/detail/global-colors-alternative.html +0 -1301
  137. package/components/detail/global-colors-gradients.html +0 -1305
  138. package/components/detail/global-colors-gray-white-black.html +0 -1304
  139. package/components/detail/global-colors-primary.html +0 -1295
  140. package/components/detail/global-colors-shadows.html +0 -1295
  141. package/components/detail/global-colors-transparency.html +0 -1306
  142. package/components/detail/global-margins.html +0 -995
  143. package/components/detail/global-paddings.html +0 -951
  144. package/components/detail/gradient-background-colors.html +0 -1517
  145. package/components/detail/input-disabled.html +0 -1003
  146. package/components/detail/input-field.html +0 -1226
  147. package/components/detail/input-focus.html +0 -1003
  148. package/components/detail/input-hover.html +0 -1003
  149. package/components/detail/input-readonly.html +0 -1003
  150. package/components/detail/input-sizes.html +0 -1007
  151. package/components/detail/input-state-error.html +0 -1003
  152. package/components/detail/input-state-success.html +0 -1003
  153. package/components/detail/input.html +0 -981
  154. package/components/detail/large-section-spacing-definitions.html +0 -1011
  155. package/components/detail/large-section-spacing.html +0 -977
  156. package/components/detail/links.html +0 -977
  157. package/components/detail/lists.html +0 -973
  158. package/components/detail/marketplace-flat-icons.html +0 -951
  159. package/components/detail/marketplace-rich-icons.html +0 -951
  160. package/components/detail/matching-content-height-card.html +0 -1599
  161. package/components/detail/medium-section-spacing-definitions.html +0 -1011
  162. package/components/detail/medium-section-spacing.html +0 -977
  163. package/components/detail/modal-on-click.html +0 -1017
  164. package/components/detail/modal-on-load-demo.html +0 -1012
  165. package/components/detail/modal-on-load.html +0 -1012
  166. package/components/detail/msds-text-alt-blue-1.html +0 -1287
  167. package/components/detail/msds-text-alt-blue-2.html +0 -1287
  168. package/components/detail/msds-text-alt-blue-3.html +0 -1287
  169. package/components/detail/msds-text-alt-yellow-1.html +0 -1287
  170. package/components/detail/msds-text-alt-yellow-2.html +0 -1287
  171. package/components/detail/msds-text-black.html +0 -1287
  172. package/components/detail/msds-text-clear-blue.html +0 -1287
  173. package/components/detail/msds-text-confirm-green.html +0 -1287
  174. package/components/detail/msds-text-danger-red-1.html +0 -1287
  175. package/components/detail/msds-text-danger-red-2.html +0 -1287
  176. package/components/detail/msds-text-dark-blue.html +0 -1287
  177. package/components/detail/msds-text-gray-1.html +0 -1287
  178. package/components/detail/msds-text-gray-10.html +0 -1287
  179. package/components/detail/msds-text-gray-2.html +0 -1287
  180. package/components/detail/msds-text-gray-3.html +0 -1287
  181. package/components/detail/msds-text-gray-4.html +0 -1287
  182. package/components/detail/msds-text-gray-5.html +0 -1287
  183. package/components/detail/msds-text-gray-6.html +0 -1287
  184. package/components/detail/msds-text-gray-7.html +0 -1287
  185. package/components/detail/msds-text-gray-8.html +0 -1287
  186. package/components/detail/msds-text-gray-9.html +0 -1287
  187. package/components/detail/msds-text-sand.html +0 -1287
  188. package/components/detail/msds-text-white.html +0 -1287
  189. package/components/detail/msds-text-yellow.html +0 -1287
  190. package/components/detail/popover-bottom.html +0 -1018
  191. package/components/detail/popover-global-definition.html +0 -1018
  192. package/components/detail/popover-left.html +0 -1018
  193. package/components/detail/popover-top.html +0 -1018
  194. package/components/detail/preview-dark.html +0 -1014
  195. package/components/detail/preview.html +0 -1001
  196. package/components/detail/progress-bar-dark-theme.html +0 -997
  197. package/components/detail/progress-bar-features.html +0 -1023
  198. package/components/detail/progress-bar-global-definition.html +0 -973
  199. package/components/detail/progress-bar-light-theme.html +0 -997
  200. package/components/detail/progress-bar-sizes.html +0 -999
  201. package/components/detail/radio-button-disabled.html +0 -963
  202. package/components/detail/radio-button-focus.html +0 -963
  203. package/components/detail/radio-button-global-definition.html +0 -975
  204. package/components/detail/radio-button-hover.html +0 -963
  205. package/components/detail/radio-button-readonly.html +0 -964
  206. package/components/detail/radio-button-selected.html +0 -963
  207. package/components/detail/section-checkbox-dark.html +0 -1019
  208. package/components/detail/section-checkbox-nested-accordion.html +0 -1124
  209. package/components/detail/section-checkbox.html +0 -1083
  210. package/components/detail/section-radio-dark.html +0 -1083
  211. package/components/detail/section-radio-nested-accordion.html +0 -1135
  212. package/components/detail/section-radio.html +0 -1081
  213. package/components/detail/select-input-default.html +0 -973
  214. package/components/detail/select-input-error.html +0 -971
  215. package/components/detail/select-input-global-definition.html +0 -983
  216. package/components/detail/select-input-not-required.html +0 -973
  217. package/components/detail/select-input-required.html +0 -973
  218. package/components/detail/select-input-small.html +0 -969
  219. package/components/detail/small-section-spacing-definitions.html +0 -1017
  220. package/components/detail/small-section-spacing.html +0 -977
  221. package/components/detail/solid-background-colors.html +0 -1457
  222. package/components/detail/solution-card-default-layout.html +0 -1210
  223. package/components/detail/solution-card-default.html +0 -1040
  224. package/components/detail/solution-card-layouts.html +0 -2085
  225. package/components/detail/solution-card-optional-certification-badges.html +0 -1054
  226. package/components/detail/solution-card-optional-solution-badges.html +0 -1054
  227. package/components/detail/solution-card-sizes.html +0 -1125
  228. package/components/detail/solution-card-small.html +0 -1040
  229. package/components/detail/switch-checked.html +0 -973
  230. package/components/detail/switch-default.html +0 -973
  231. package/components/detail/switch-disabled-readonly.html +0 -973
  232. package/components/detail/switch-disabled.html +0 -973
  233. package/components/detail/switch-global.html +0 -983
  234. package/components/detail/tab-tile.html +0 -2409
  235. package/components/detail/table-dark-theme-default-expandable-rows.html +0 -1204
  236. package/components/detail/table-dark-theme-default.html +0 -1228
  237. package/components/detail/table-default-dark.html +0 -1179
  238. package/components/detail/table-default-expandable-rows.html +0 -1203
  239. package/components/detail/table-default-medium.html +0 -1179
  240. package/components/detail/table-default-small.html +0 -1179
  241. package/components/detail/table-default.html +0 -1227
  242. package/components/detail/text-area-disabled.html +0 -1011
  243. package/components/detail/text-area-error.html +0 -1011
  244. package/components/detail/text-area-field.html +0 -985
  245. package/components/detail/text-area-focus.html +0 -1011
  246. package/components/detail/text-area-hover.html +0 -1011
  247. package/components/detail/text-area-readonly.html +0 -1011
  248. package/components/detail/text-area-sizes.html +0 -1011
  249. package/components/detail/text-area-success.html +0 -1011
  250. package/components/detail/text-area.html +0 -1167
  251. package/components/detail/text-colors.html +0 -1287
  252. package/components/detail/text.html +0 -1037
  253. package/components/detail/typography-body-texts.html +0 -993
  254. package/components/detail/typography-displays.html +0 -959
  255. package/components/detail/typography-headers.html +0 -965
  256. package/components/detail/typography-leads.html +0 -951
  257. package/components/detail/typography-links-dark-theme.html +0 -1159
  258. package/components/detail/typography-links-light-theme.html +0 -1123
  259. package/components/detail/typography-links-secondary.html +0 -1011
  260. package/components/detail/typography-unordered-lists.html +0 -973
  261. package/components/preview/accordion-checkbox-large.html +0 -81
  262. package/components/preview/accordion-checkbox-medium-dark.html +0 -81
  263. package/components/preview/accordion-checkbox-medium-disabled.html +0 -82
  264. package/components/preview/accordion-checkbox-medium-filtered-list-items.html +0 -84
  265. package/components/preview/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +0 -95
  266. package/components/preview/accordion-checkbox-medium-icon-left-floating.html +0 -95
  267. package/components/preview/accordion-checkbox-medium-icon-left.html +0 -90
  268. package/components/preview/accordion-checkbox-medium.html +0 -81
  269. package/components/preview/accordion-checkbox-overview.html +0 -83
  270. package/components/preview/accordion-input.html +0 -30
  271. package/components/preview/accordion-label.html +0 -30
  272. package/components/preview/accordion-modifier-icon-floating.html +0 -30
  273. package/components/preview/accordion-modifier-icon-left.html +0 -31
  274. package/components/preview/accordion-radio.html +0 -83
  275. package/components/preview/alert-dark-theme-default.html +0 -59
  276. package/components/preview/alert-dark-theme-solution.html +0 -59
  277. package/components/preview/alert-default-extra-attention.html +0 -58
  278. package/components/preview/alert-default-generic.html +0 -58
  279. package/components/preview/alert-default-solution-with-badge-and-ready-state.html +0 -64
  280. package/components/preview/alert-default-solution.html +0 -60
  281. package/components/preview/alert-default-without-image.html +0 -57
  282. package/components/preview/alert-default.html +0 -58
  283. package/components/preview/alert-hidden-after-refresh-checkbox.html +0 -63
  284. package/components/preview/alert-hidden-after-refresh.html +0 -57
  285. package/components/preview/alert-layouts.html +0 -341
  286. package/components/preview/alert-visible-after-refresh.html +0 -57
  287. package/components/preview/background-colors.html +0 -50
  288. package/components/preview/basic-card-default-dark.html +0 -55
  289. package/components/preview/basic-card-default-without-caption-with-header-icon.html +0 -50
  290. package/components/preview/basic-card-default-without-caption-with-header-image.html +0 -48
  291. package/components/preview/basic-card-default-without-caption.html +0 -46
  292. package/components/preview/basic-card-default.html +0 -55
  293. package/components/preview/basic-card-grouping-center.html +0 -55
  294. package/components/preview/basic-card-grouping-left-with-flat-icon.html +0 -60
  295. package/components/preview/basic-card-grouping-left.html +0 -55
  296. package/components/preview/basic-card-grouping.html +0 -110
  297. package/components/preview/basic-card-layouts.html +0 -494
  298. package/components/preview/button-danger-dark-icon.html +0 -51
  299. package/components/preview/button-danger-dark.html +0 -44
  300. package/components/preview/button-danger-default.html +0 -42
  301. package/components/preview/button-danger-icon.html +0 -51
  302. package/components/preview/button-disabled-dark-icon.html +0 -51
  303. package/components/preview/button-disabled-dark.html +0 -44
  304. package/components/preview/button-floating-aligned-column.html +0 -57
  305. package/components/preview/button-floating-aligned-right.html +0 -57
  306. package/components/preview/button-floating-dark-aligned-column.html +0 -57
  307. package/components/preview/button-floating-dark-aligned-right.html +0 -57
  308. package/components/preview/button-floating-dark-default.html +0 -57
  309. package/components/preview/button-floating-dark-disabled.html +0 -57
  310. package/components/preview/button-floating-dark-secondary-aligned-column.html +0 -57
  311. package/components/preview/button-floating-dark-secondary-aligned-right.html +0 -57
  312. package/components/preview/button-floating-dark-secondary.html +0 -57
  313. package/components/preview/button-floating-default.html +0 -57
  314. package/components/preview/button-floating-disabled.html +0 -57
  315. package/components/preview/button-floating-overview.html +0 -39
  316. package/components/preview/button-floating-positioning.html +0 -58
  317. package/components/preview/button-floating-secondary-aligned-column.html +0 -57
  318. package/components/preview/button-floating-secondary-aligned-right.html +0 -57
  319. package/components/preview/button-floating-secondary.html +0 -57
  320. package/components/preview/button-floating-states.html +0 -48
  321. package/components/preview/button-gray-default.html +0 -43
  322. package/components/preview/button-gray-icon.html +0 -51
  323. package/components/preview/button-group-center-alignment.html +0 -37
  324. package/components/preview/button-group-left-alignment.html +0 -37
  325. package/components/preview/button-group-right-alignment.html +0 -37
  326. package/components/preview/button-overview-direction.html +0 -45
  327. package/components/preview/button-overview-global-definition.html +0 -41
  328. package/components/preview/button-overview-sizes.html +0 -48
  329. package/components/preview/button-overview-states.html +0 -59
  330. package/components/preview/button-primary-dark-icon.html +0 -51
  331. package/components/preview/button-primary-dark.html +0 -44
  332. package/components/preview/button-primary-default.html +0 -42
  333. package/components/preview/button-primary-icon.html +0 -52
  334. package/components/preview/button-secondary-dark-icon.html +0 -51
  335. package/components/preview/button-secondary-dark.html +0 -44
  336. package/components/preview/button-secondary-default.html +0 -44
  337. package/components/preview/button-secondary-icon.html +0 -51
  338. package/components/preview/button-tertiary-default.html +0 -42
  339. package/components/preview/button-tertiary-icon.html +0 -51
  340. package/components/preview/buttons-overview.html +0 -510
  341. package/components/preview/category-dark.html +0 -67
  342. package/components/preview/category-disabled-dark.html +0 -63
  343. package/components/preview/category-disabled.html +0 -59
  344. package/components/preview/category-full-row.html +0 -139
  345. package/components/preview/category-overview-dark-states.html +0 -85
  346. package/components/preview/category-overview-dark.html +0 -67
  347. package/components/preview/category-overview-sizes.html +0 -67
  348. package/components/preview/category-overview-states.html +0 -81
  349. package/components/preview/category-small-dark.html +0 -67
  350. package/components/preview/category-small-disabled-dark.html +0 -63
  351. package/components/preview/category-small-disabled.html +0 -59
  352. package/components/preview/category-small-full-row.html +0 -175
  353. package/components/preview/category-small.html +0 -63
  354. package/components/preview/category.html +0 -63
  355. package/components/preview/checkbox-checked.html +0 -38
  356. package/components/preview/checkbox-disabled.html +0 -38
  357. package/components/preview/checkbox-focus.html +0 -38
  358. package/components/preview/checkbox-global-definition.html +0 -38
  359. package/components/preview/checkbox-hover.html +0 -38
  360. package/components/preview/checkbox-inline.html +0 -41
  361. package/components/preview/checkbox-readonly.html +0 -39
  362. package/components/preview/colors-and-shadows.html +0 -126
  363. package/components/preview/contact-cards.html +0 -622
  364. package/components/preview/contact-content.html +0 -56
  365. package/components/preview/contact-overview.html +0 -121
  366. package/components/preview/contact-sizes.html +0 -102
  367. package/components/preview/contact-small.html +0 -67
  368. package/components/preview/contact-without-image-small.html +0 -62
  369. package/components/preview/contact-without-image.html +0 -62
  370. package/components/preview/contact.html +0 -67
  371. package/components/preview/divider-dark-blue.html +0 -29
  372. package/components/preview/divider-default.html +0 -30
  373. package/components/preview/divider-gray-5.html +0 -29
  374. package/components/preview/divider-white-50.html +0 -29
  375. package/components/preview/divider-white.html +0 -29
  376. package/components/preview/divider-yellow.html +0 -30
  377. package/components/preview/generic-card-aspect-16by9.html +0 -49
  378. package/components/preview/generic-card-aspect-2by1-small.html +0 -110
  379. package/components/preview/generic-card-aspect-2by1.html +0 -106
  380. package/components/preview/generic-card-aspect.html +0 -74
  381. package/components/preview/generic-card-default-small-dark-theme.html +0 -48
  382. package/components/preview/generic-card-default-small-svg.html +0 -48
  383. package/components/preview/generic-card-default-small.html +0 -49
  384. package/components/preview/generic-card-default-svg-dark.html +0 -48
  385. package/components/preview/generic-card-default-svg.html +0 -47
  386. package/components/preview/generic-card-default.html +0 -50
  387. package/components/preview/generic-card-media-dark-theme.html +0 -64
  388. package/components/preview/generic-card-media-floating-icon.html +0 -70
  389. package/components/preview/generic-card-media-small.html +0 -62
  390. package/components/preview/generic-card-media.html +0 -62
  391. package/components/preview/generic-card-overview.html +0 -80
  392. package/components/preview/generic-flat-icons.html +0 -54
  393. package/components/preview/generic-rich-icons.html +0 -54
  394. package/components/preview/global-colors-alternative.html +0 -59
  395. package/components/preview/global-colors-gradients.html +0 -63
  396. package/components/preview/global-colors-gray-white-black.html +0 -62
  397. package/components/preview/global-colors-primary.html +0 -53
  398. package/components/preview/global-colors-shadows.html +0 -54
  399. package/components/preview/global-colors-transparency.html +0 -64
  400. package/components/preview/global-margins.html +0 -51
  401. package/components/preview/global-paddings.html +0 -30
  402. package/components/preview/gradient-background-colors.html +0 -164
  403. package/components/preview/input-disabled.html +0 -56
  404. package/components/preview/input-field.html +0 -164
  405. package/components/preview/input-focus.html +0 -56
  406. package/components/preview/input-hover.html +0 -56
  407. package/components/preview/input-readonly.html +0 -56
  408. package/components/preview/input-sizes.html +0 -58
  409. package/components/preview/input-state-error.html +0 -56
  410. package/components/preview/input-state-success.html +0 -56
  411. package/components/preview/input.html +0 -45
  412. package/components/preview/large-section-spacing-definitions.html +0 -59
  413. package/components/preview/large-section-spacing.html +0 -42
  414. package/components/preview/links.html +0 -44
  415. package/components/preview/lists.html +0 -42
  416. package/components/preview/marketplace-flat-icons.html +0 -54
  417. package/components/preview/marketplace-rich-icons.html +0 -54
  418. package/components/preview/matching-content-height-card.html +0 -354
  419. package/components/preview/medium-section-spacing-definitions.html +0 -59
  420. package/components/preview/medium-section-spacing.html +0 -42
  421. package/components/preview/modal-on-click.html +0 -63
  422. package/components/preview/modal-on-load-demo.html +0 -61
  423. package/components/preview/modal-on-load.html +0 -61
  424. package/components/preview/msds-text-alt-blue-1.html +0 -49
  425. package/components/preview/msds-text-alt-blue-2.html +0 -49
  426. package/components/preview/msds-text-alt-blue-3.html +0 -49
  427. package/components/preview/msds-text-alt-yellow-1.html +0 -49
  428. package/components/preview/msds-text-alt-yellow-2.html +0 -49
  429. package/components/preview/msds-text-black.html +0 -49
  430. package/components/preview/msds-text-clear-blue.html +0 -49
  431. package/components/preview/msds-text-confirm-green.html +0 -49
  432. package/components/preview/msds-text-danger-red-1.html +0 -49
  433. package/components/preview/msds-text-danger-red-2.html +0 -49
  434. package/components/preview/msds-text-dark-blue.html +0 -49
  435. package/components/preview/msds-text-gray-1.html +0 -49
  436. package/components/preview/msds-text-gray-10.html +0 -49
  437. package/components/preview/msds-text-gray-2.html +0 -49
  438. package/components/preview/msds-text-gray-3.html +0 -49
  439. package/components/preview/msds-text-gray-4.html +0 -49
  440. package/components/preview/msds-text-gray-5.html +0 -49
  441. package/components/preview/msds-text-gray-6.html +0 -49
  442. package/components/preview/msds-text-gray-7.html +0 -49
  443. package/components/preview/msds-text-gray-8.html +0 -49
  444. package/components/preview/msds-text-gray-9.html +0 -49
  445. package/components/preview/msds-text-sand.html +0 -49
  446. package/components/preview/msds-text-white.html +0 -49
  447. package/components/preview/msds-text-yellow.html +0 -49
  448. package/components/preview/popover-bottom.html +0 -61
  449. package/components/preview/popover-global-definition.html +0 -61
  450. package/components/preview/popover-left.html +0 -61
  451. package/components/preview/popover-top.html +0 -61
  452. package/components/preview/preview-dark.html +0 -59
  453. package/components/preview/preview.html +0 -29
  454. package/components/preview/progress-bar-dark-theme.html +0 -57
  455. package/components/preview/progress-bar-features.html +0 -66
  456. package/components/preview/progress-bar-global-definition.html +0 -41
  457. package/components/preview/progress-bar-light-theme.html +0 -53
  458. package/components/preview/progress-bar-sizes.html +0 -55
  459. package/components/preview/radio-button-disabled.html +0 -36
  460. package/components/preview/radio-button-focus.html +0 -36
  461. package/components/preview/radio-button-global-definition.html +0 -42
  462. package/components/preview/radio-button-hover.html +0 -36
  463. package/components/preview/radio-button-readonly.html +0 -37
  464. package/components/preview/radio-button-selected.html +0 -36
  465. package/components/preview/section-checkbox-dark.html +0 -64
  466. package/components/preview/section-checkbox-nested-accordion.html +0 -119
  467. package/components/preview/section-checkbox.html +0 -96
  468. package/components/preview/section-radio-dark.html +0 -96
  469. package/components/preview/section-radio-nested-accordion.html +0 -144
  470. package/components/preview/section-radio.html +0 -95
  471. package/components/preview/select-input-default.html +0 -41
  472. package/components/preview/select-input-error.html +0 -40
  473. package/components/preview/select-input-global-definition.html +0 -46
  474. package/components/preview/select-input-not-required.html +0 -41
  475. package/components/preview/select-input-required.html +0 -41
  476. package/components/preview/select-input-small.html +0 -38
  477. package/components/preview/small-section-spacing-definitions.html +0 -62
  478. package/components/preview/small-section-spacing.html +0 -42
  479. package/components/preview/solid-background-colors.html +0 -135
  480. package/components/preview/solution-card-default-layout.html +0 -158
  481. package/components/preview/solution-card-default.html +0 -74
  482. package/components/preview/solution-card-layouts.html +0 -587
  483. package/components/preview/solution-card-optional-certification-badges.html +0 -82
  484. package/components/preview/solution-card-optional-solution-badges.html +0 -82
  485. package/components/preview/solution-card-sizes.html +0 -116
  486. package/components/preview/solution-card-small.html +0 -74
  487. package/components/preview/switch-checked.html +0 -41
  488. package/components/preview/switch-default.html +0 -41
  489. package/components/preview/switch-disabled-readonly.html +0 -41
  490. package/components/preview/switch-disabled.html +0 -41
  491. package/components/preview/switch-global.html +0 -46
  492. package/components/preview/tab-tile.html +0 -1128
  493. package/components/preview/table-dark-theme-default-expandable-rows.html +0 -160
  494. package/components/preview/table-dark-theme-default.html +0 -172
  495. package/components/preview/table-default-dark.html +0 -144
  496. package/components/preview/table-default-expandable-rows.html +0 -156
  497. package/components/preview/table-default-medium.html +0 -144
  498. package/components/preview/table-default-small.html +0 -144
  499. package/components/preview/table-default.html +0 -168
  500. package/components/preview/text-area-disabled.html +0 -60
  501. package/components/preview/text-area-error.html +0 -60
  502. package/components/preview/text-area-field.html +0 -47
  503. package/components/preview/text-area-focus.html +0 -60
  504. package/components/preview/text-area-hover.html +0 -60
  505. package/components/preview/text-area-readonly.html +0 -60
  506. package/components/preview/text-area-sizes.html +0 -60
  507. package/components/preview/text-area-success.html +0 -60
  508. package/components/preview/text-area.html +0 -147
  509. package/components/preview/text-colors.html +0 -49
  510. package/components/preview/text.html +0 -74
  511. package/components/preview/typography-body-texts.html +0 -52
  512. package/components/preview/typography-displays.html +0 -34
  513. package/components/preview/typography-headers.html +0 -37
  514. package/components/preview/typography-leads.html +0 -30
  515. package/components/preview/typography-links-dark-theme.html +0 -135
  516. package/components/preview/typography-links-light-theme.html +0 -117
  517. package/components/preview/typography-links-secondary.html +0 -61
  518. package/components/preview/typography-unordered-lists.html +0 -41
  519. package/components/raw/tab-tile/tab-tile.js +0 -139
  520. package/components/raw/tab-tile/tab-tile.scss +0 -256
  521. package/components/render/accordion-checkbox-large.html +0 -55
  522. package/components/render/accordion-checkbox-medium-dark.html +0 -55
  523. package/components/render/accordion-checkbox-medium-disabled.html +0 -56
  524. package/components/render/accordion-checkbox-medium-filtered-list-items.html +0 -58
  525. package/components/render/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +0 -69
  526. package/components/render/accordion-checkbox-medium-icon-left-floating.html +0 -69
  527. package/components/render/accordion-checkbox-medium-icon-left.html +0 -64
  528. package/components/render/accordion-checkbox-medium.html +0 -55
  529. package/components/render/accordion-checkbox-overview.html +0 -57
  530. package/components/render/accordion-input.html +0 -4
  531. package/components/render/accordion-label.html +0 -4
  532. package/components/render/accordion-modifier-icon-floating.html +0 -4
  533. package/components/render/accordion-modifier-icon-left.html +0 -5
  534. package/components/render/accordion-radio.html +0 -57
  535. package/components/render/alert-dark-theme-default.html +0 -33
  536. package/components/render/alert-dark-theme-solution.html +0 -33
  537. package/components/render/alert-default-extra-attention.html +0 -32
  538. package/components/render/alert-default-generic.html +0 -32
  539. package/components/render/alert-default-solution-with-badge-and-ready-state.html +0 -38
  540. package/components/render/alert-default-solution.html +0 -34
  541. package/components/render/alert-default-without-image.html +0 -31
  542. package/components/render/alert-default.html +0 -32
  543. package/components/render/alert-hidden-after-refresh-checkbox.html +0 -37
  544. package/components/render/alert-hidden-after-refresh.html +0 -31
  545. package/components/render/alert-layouts.html +0 -315
  546. package/components/render/alert-visible-after-refresh.html +0 -31
  547. package/components/render/background-colors.html +0 -4
  548. package/components/render/basic-card-default-dark.html +0 -29
  549. package/components/render/basic-card-default-without-caption-with-header-icon.html +0 -24
  550. package/components/render/basic-card-default-without-caption-with-header-image.html +0 -22
  551. package/components/render/basic-card-default-without-caption.html +0 -20
  552. package/components/render/basic-card-default.html +0 -29
  553. package/components/render/basic-card-grouping-center.html +0 -29
  554. package/components/render/basic-card-grouping-left-with-flat-icon.html +0 -34
  555. package/components/render/basic-card-grouping-left.html +0 -29
  556. package/components/render/basic-card-grouping.html +0 -84
  557. package/components/render/basic-card-layouts.html +0 -468
  558. package/components/render/button-danger-dark-icon.html +0 -25
  559. package/components/render/button-danger-dark.html +0 -18
  560. package/components/render/button-danger-default.html +0 -16
  561. package/components/render/button-danger-icon.html +0 -25
  562. package/components/render/button-disabled-dark-icon.html +0 -25
  563. package/components/render/button-disabled-dark.html +0 -18
  564. package/components/render/button-floating-aligned-column.html +0 -31
  565. package/components/render/button-floating-aligned-right.html +0 -31
  566. package/components/render/button-floating-dark-aligned-column.html +0 -31
  567. package/components/render/button-floating-dark-aligned-right.html +0 -31
  568. package/components/render/button-floating-dark-default.html +0 -31
  569. package/components/render/button-floating-dark-disabled.html +0 -31
  570. package/components/render/button-floating-dark-secondary-aligned-column.html +0 -31
  571. package/components/render/button-floating-dark-secondary-aligned-right.html +0 -31
  572. package/components/render/button-floating-dark-secondary.html +0 -31
  573. package/components/render/button-floating-default.html +0 -31
  574. package/components/render/button-floating-disabled.html +0 -31
  575. package/components/render/button-floating-overview.html +0 -13
  576. package/components/render/button-floating-positioning.html +0 -32
  577. package/components/render/button-floating-secondary-aligned-column.html +0 -31
  578. package/components/render/button-floating-secondary-aligned-right.html +0 -31
  579. package/components/render/button-floating-secondary.html +0 -31
  580. package/components/render/button-floating-states.html +0 -22
  581. package/components/render/button-gray-default.html +0 -17
  582. package/components/render/button-gray-icon.html +0 -25
  583. package/components/render/button-group-center-alignment.html +0 -11
  584. package/components/render/button-group-left-alignment.html +0 -11
  585. package/components/render/button-group-right-alignment.html +0 -11
  586. package/components/render/button-overview-direction.html +0 -19
  587. package/components/render/button-overview-global-definition.html +0 -15
  588. package/components/render/button-overview-sizes.html +0 -22
  589. package/components/render/button-overview-states.html +0 -33
  590. package/components/render/button-primary-dark-icon.html +0 -25
  591. package/components/render/button-primary-dark.html +0 -18
  592. package/components/render/button-primary-default.html +0 -16
  593. package/components/render/button-primary-icon.html +0 -26
  594. package/components/render/button-secondary-dark-icon.html +0 -25
  595. package/components/render/button-secondary-dark.html +0 -18
  596. package/components/render/button-secondary-default.html +0 -18
  597. package/components/render/button-secondary-icon.html +0 -25
  598. package/components/render/button-tertiary-default.html +0 -16
  599. package/components/render/button-tertiary-icon.html +0 -25
  600. package/components/render/buttons-overview.html +0 -484
  601. package/components/render/category-dark.html +0 -37
  602. package/components/render/category-disabled-dark.html +0 -33
  603. package/components/render/category-disabled.html +0 -33
  604. package/components/render/category-full-row.html +0 -113
  605. package/components/render/category-overview-dark-states.html +0 -55
  606. package/components/render/category-overview-dark.html +0 -37
  607. package/components/render/category-overview-sizes.html +0 -41
  608. package/components/render/category-overview-states.html +0 -55
  609. package/components/render/category-small-dark.html +0 -37
  610. package/components/render/category-small-disabled-dark.html +0 -33
  611. package/components/render/category-small-disabled.html +0 -33
  612. package/components/render/category-small-full-row.html +0 -149
  613. package/components/render/category-small.html +0 -37
  614. package/components/render/category.html +0 -37
  615. package/components/render/checkbox-checked.html +0 -12
  616. package/components/render/checkbox-disabled.html +0 -12
  617. package/components/render/checkbox-focus.html +0 -12
  618. package/components/render/checkbox-global-definition.html +0 -12
  619. package/components/render/checkbox-hover.html +0 -12
  620. package/components/render/checkbox-inline.html +0 -15
  621. package/components/render/checkbox-readonly.html +0 -13
  622. package/components/render/colors-and-shadows.html +0 -80
  623. package/components/render/contact-cards.html +0 -596
  624. package/components/render/contact-content.html +0 -30
  625. package/components/render/contact-overview.html +0 -95
  626. package/components/render/contact-sizes.html +0 -76
  627. package/components/render/contact-small.html +0 -41
  628. package/components/render/contact-without-image-small.html +0 -36
  629. package/components/render/contact-without-image.html +0 -36
  630. package/components/render/contact.html +0 -41
  631. package/components/render/divider-dark-blue.html +0 -3
  632. package/components/render/divider-default.html +0 -4
  633. package/components/render/divider-gray-5.html +0 -3
  634. package/components/render/divider-white-50.html +0 -3
  635. package/components/render/divider-white.html +0 -3
  636. package/components/render/divider-yellow.html +0 -4
  637. package/components/render/generic-card-aspect-16by9.html +0 -23
  638. package/components/render/generic-card-aspect-2by1-small.html +0 -84
  639. package/components/render/generic-card-aspect-2by1.html +0 -80
  640. package/components/render/generic-card-aspect.html +0 -48
  641. package/components/render/generic-card-default-small-dark-theme.html +0 -22
  642. package/components/render/generic-card-default-small-svg.html +0 -22
  643. package/components/render/generic-card-default-small.html +0 -23
  644. package/components/render/generic-card-default-svg-dark.html +0 -22
  645. package/components/render/generic-card-default-svg.html +0 -21
  646. package/components/render/generic-card-default.html +0 -24
  647. package/components/render/generic-card-media-dark-theme.html +0 -38
  648. package/components/render/generic-card-media-floating-icon.html +0 -44
  649. package/components/render/generic-card-media-small.html +0 -36
  650. package/components/render/generic-card-media.html +0 -36
  651. package/components/render/generic-card-overview.html +0 -54
  652. package/components/render/generic-flat-icons.html +0 -3
  653. package/components/render/generic-rich-icons.html +0 -3
  654. package/components/render/global-colors-alternative.html +0 -13
  655. package/components/render/global-colors-gradients.html +0 -17
  656. package/components/render/global-colors-gray-white-black.html +0 -16
  657. package/components/render/global-colors-primary.html +0 -7
  658. package/components/render/global-colors-shadows.html +0 -8
  659. package/components/render/global-colors-transparency.html +0 -18
  660. package/components/render/global-margins.html +0 -25
  661. package/components/render/global-paddings.html +0 -4
  662. package/components/render/gradient-background-colors.html +0 -118
  663. package/components/render/input-disabled.html +0 -30
  664. package/components/render/input-field.html +0 -138
  665. package/components/render/input-focus.html +0 -30
  666. package/components/render/input-hover.html +0 -30
  667. package/components/render/input-readonly.html +0 -30
  668. package/components/render/input-sizes.html +0 -32
  669. package/components/render/input-state-error.html +0 -30
  670. package/components/render/input-state-success.html +0 -30
  671. package/components/render/input.html +0 -19
  672. package/components/render/large-section-spacing-definitions.html +0 -33
  673. package/components/render/large-section-spacing.html +0 -16
  674. package/components/render/links.html +0 -18
  675. package/components/render/lists.html +0 -16
  676. package/components/render/marketplace-flat-icons.html +0 -3
  677. package/components/render/marketplace-rich-icons.html +0 -3
  678. package/components/render/matching-content-height-card.html +0 -328
  679. package/components/render/medium-section-spacing-definitions.html +0 -33
  680. package/components/render/medium-section-spacing.html +0 -16
  681. package/components/render/modal-on-click.html +0 -37
  682. package/components/render/modal-on-load-demo.html +0 -35
  683. package/components/render/modal-on-load.html +0 -35
  684. package/components/render/msds-text-alt-blue-1.html +0 -3
  685. package/components/render/msds-text-alt-blue-2.html +0 -3
  686. package/components/render/msds-text-alt-blue-3.html +0 -3
  687. package/components/render/msds-text-alt-yellow-1.html +0 -3
  688. package/components/render/msds-text-alt-yellow-2.html +0 -3
  689. package/components/render/msds-text-black.html +0 -3
  690. package/components/render/msds-text-clear-blue.html +0 -3
  691. package/components/render/msds-text-confirm-green.html +0 -3
  692. package/components/render/msds-text-danger-red-1.html +0 -3
  693. package/components/render/msds-text-danger-red-2.html +0 -3
  694. package/components/render/msds-text-dark-blue.html +0 -3
  695. package/components/render/msds-text-gray-1.html +0 -3
  696. package/components/render/msds-text-gray-10.html +0 -3
  697. package/components/render/msds-text-gray-2.html +0 -3
  698. package/components/render/msds-text-gray-3.html +0 -3
  699. package/components/render/msds-text-gray-4.html +0 -3
  700. package/components/render/msds-text-gray-5.html +0 -3
  701. package/components/render/msds-text-gray-6.html +0 -3
  702. package/components/render/msds-text-gray-7.html +0 -3
  703. package/components/render/msds-text-gray-8.html +0 -3
  704. package/components/render/msds-text-gray-9.html +0 -3
  705. package/components/render/msds-text-sand.html +0 -3
  706. package/components/render/msds-text-white.html +0 -3
  707. package/components/render/msds-text-yellow.html +0 -3
  708. package/components/render/popover-bottom.html +0 -35
  709. package/components/render/popover-global-definition.html +0 -35
  710. package/components/render/popover-left.html +0 -35
  711. package/components/render/popover-top.html +0 -35
  712. package/components/render/preview-dark.html +0 -33
  713. package/components/render/preview.html +0 -29
  714. package/components/render/progress-bar-dark-theme.html +0 -27
  715. package/components/render/progress-bar-features.html +0 -40
  716. package/components/render/progress-bar-global-definition.html +0 -15
  717. package/components/render/progress-bar-light-theme.html +0 -27
  718. package/components/render/progress-bar-sizes.html +0 -29
  719. package/components/render/radio-button-disabled.html +0 -10
  720. package/components/render/radio-button-focus.html +0 -10
  721. package/components/render/radio-button-global-definition.html +0 -16
  722. package/components/render/radio-button-hover.html +0 -10
  723. package/components/render/radio-button-readonly.html +0 -11
  724. package/components/render/radio-button-selected.html +0 -10
  725. package/components/render/section-checkbox-dark.html +0 -38
  726. package/components/render/section-checkbox-nested-accordion.html +0 -93
  727. package/components/render/section-checkbox.html +0 -70
  728. package/components/render/section-radio-dark.html +0 -70
  729. package/components/render/section-radio-nested-accordion.html +0 -118
  730. package/components/render/section-radio.html +0 -69
  731. package/components/render/select-input-default.html +0 -15
  732. package/components/render/select-input-error.html +0 -14
  733. package/components/render/select-input-global-definition.html +0 -20
  734. package/components/render/select-input-not-required.html +0 -15
  735. package/components/render/select-input-required.html +0 -15
  736. package/components/render/select-input-small.html +0 -12
  737. package/components/render/small-section-spacing-definitions.html +0 -36
  738. package/components/render/small-section-spacing.html +0 -16
  739. package/components/render/solid-background-colors.html +0 -89
  740. package/components/render/solution-card-default-layout.html +0 -132
  741. package/components/render/solution-card-default.html +0 -48
  742. package/components/render/solution-card-layouts.html +0 -561
  743. package/components/render/solution-card-optional-certification-badges.html +0 -56
  744. package/components/render/solution-card-optional-solution-badges.html +0 -56
  745. package/components/render/solution-card-sizes.html +0 -90
  746. package/components/render/solution-card-small.html +0 -48
  747. package/components/render/switch-checked.html +0 -15
  748. package/components/render/switch-default.html +0 -15
  749. package/components/render/switch-disabled-readonly.html +0 -15
  750. package/components/render/switch-disabled.html +0 -15
  751. package/components/render/switch-global.html +0 -20
  752. package/components/render/tab-tile.html +0 -1102
  753. package/components/render/table-dark-theme-default-expandable-rows.html +0 -130
  754. package/components/render/table-dark-theme-default.html +0 -142
  755. package/components/render/table-default-dark.html +0 -118
  756. package/components/render/table-default-expandable-rows.html +0 -130
  757. package/components/render/table-default-medium.html +0 -118
  758. package/components/render/table-default-small.html +0 -118
  759. package/components/render/table-default.html +0 -142
  760. package/components/render/text-area-disabled.html +0 -34
  761. package/components/render/text-area-error.html +0 -34
  762. package/components/render/text-area-field.html +0 -21
  763. package/components/render/text-area-focus.html +0 -34
  764. package/components/render/text-area-hover.html +0 -34
  765. package/components/render/text-area-readonly.html +0 -34
  766. package/components/render/text-area-sizes.html +0 -34
  767. package/components/render/text-area-success.html +0 -34
  768. package/components/render/text-area.html +0 -121
  769. package/components/render/text-colors.html +0 -3
  770. package/components/render/text.html +0 -48
  771. package/components/render/typography-body-texts.html +0 -26
  772. package/components/render/typography-displays.html +0 -8
  773. package/components/render/typography-headers.html +0 -11
  774. package/components/render/typography-leads.html +0 -4
  775. package/components/render/typography-links-dark-theme.html +0 -109
  776. package/components/render/typography-links-light-theme.html +0 -91
  777. package/components/render/typography-links-secondary.html +0 -35
  778. package/components/render/typography-unordered-lists.html +0 -15
  779. package/components.html +0 -13
  780. package/docs/component-documentation/alerts.html +0 -1657
  781. package/docs/component-documentation/buttons/buttons-floating.html +0 -1676
  782. package/docs/component-documentation/buttons/buttons.html +0 -1908
  783. package/docs/component-documentation/cards/basic-cards.html +0 -1424
  784. package/docs/component-documentation/cards/category-cards.html +0 -1950
  785. package/docs/component-documentation/cards/contact-cards.html +0 -1474
  786. package/docs/component-documentation/cards/generic-cards.html +0 -1534
  787. package/docs/component-documentation/cards/solution-cards.html +0 -1595
  788. package/docs/component-documentation/dividers/dividers.html +0 -839
  789. package/docs/component-documentation/expanding-components/accordion.html +0 -1832
  790. package/docs/component-documentation/expanding-components/section.html +0 -1511
  791. package/docs/component-documentation/modal.html +0 -983
  792. package/docs/component-documentation/popover/popover.html +0 -1082
  793. package/docs/component-documentation/progress-bar.html +0 -1143
  794. package/docs/component-documentation/spacing.html +0 -831
  795. package/docs/component-documentation/table.html +0 -2336
  796. package/docs/content/icons/-overview.html +0 -848
  797. package/docs/content/icons/icons-flat.html +0 -839
  798. package/docs/content/icons/icons-rich.html +0 -839
  799. package/docs/content/typography/-overview.html +0 -860
  800. package/docs/content/typography/font-colors.html +0 -900
  801. package/docs/content/typography/links.html +0 -1113
  802. package/docs/content/typography/lists.html +0 -854
  803. package/docs/content/typography/text.html +0 -919
  804. package/docs/forms/-overview.html +0 -881
  805. package/docs/forms/checkbox.html +0 -1007
  806. package/docs/forms/drop-down-list.html +0 -981
  807. package/docs/forms/input-field.html +0 -1316
  808. package/docs/forms/radio-button.html +0 -966
  809. package/docs/forms/switch.html +0 -964
  810. package/docs/forms/text-area.html +0 -1371
  811. package/docs/guidelines-and-guides/creating-a-new-release.html +0 -825
  812. package/docs/guidelines-and-guides/css-and-scss-guidelines.html +0 -814
  813. package/docs/guidelines-and-guides/git-cheat-sheet.html +0 -898
  814. package/docs/guidelines-and-guides/installation-and-usage.html +0 -812
  815. package/docs/utilities/colors/background-colors.html +0 -1029
  816. package/docs/utilities/colors/font-colors.html +0 -1002
  817. package/docs/utilities/colors/overview.html +0 -952
  818. package/docs/utilities/spacing.html +0 -1112
  819. package/docs.html +0 -13
  820. package/index.html +0 -807
  821. package/themes/mandelbrot/css/aqua.css +0 -1
  822. package/themes/mandelbrot/css/black.css +0 -1
  823. package/themes/mandelbrot/css/blue.css +0 -1
  824. package/themes/mandelbrot/css/default.css +0 -1
  825. package/themes/mandelbrot/css/fuchsia.css +0 -1
  826. package/themes/mandelbrot/css/green.css +0 -1
  827. package/themes/mandelbrot/css/grey.css +0 -1
  828. package/themes/mandelbrot/css/highlight.css +0 -1
  829. package/themes/mandelbrot/css/lime.css +0 -1
  830. package/themes/mandelbrot/css/maroon.css +0 -1
  831. package/themes/mandelbrot/css/navy.css +0 -1
  832. package/themes/mandelbrot/css/olive.css +0 -1
  833. package/themes/mandelbrot/css/orange.css +0 -1
  834. package/themes/mandelbrot/css/purple.css +0 -1
  835. package/themes/mandelbrot/css/red.css +0 -1
  836. package/themes/mandelbrot/css/teal.css +0 -1
  837. package/themes/mandelbrot/css/white.css +0 -1
  838. package/themes/mandelbrot/css/yellow.css +0 -1
  839. package/themes/mandelbrot/favicon.ico +0 -0
  840. package/themes/mandelbrot/fonts/OpenSans-Italic.woff +0 -0
  841. package/themes/mandelbrot/fonts/OpenSans-Italic.woff2 +0 -0
  842. package/themes/mandelbrot/fonts/OpenSans-Regular.woff +0 -0
  843. package/themes/mandelbrot/fonts/OpenSans-Regular.woff2 +0 -0
  844. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff +0 -0
  845. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff2 +0 -0
  846. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff +0 -0
  847. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff2 +0 -0
  848. package/themes/mandelbrot/fonts/hack-bold-webfont.woff +0 -0
  849. package/themes/mandelbrot/fonts/hack-bold-webfont.woff2 +0 -0
  850. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff +0 -0
  851. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff2 +0 -0
  852. package/themes/mandelbrot/fonts/hack-italic-webfont.woff +0 -0
  853. package/themes/mandelbrot/fonts/hack-italic-webfont.woff2 +0 -0
  854. package/themes/mandelbrot/fonts/hack-regular-webfont.woff +0 -0
  855. package/themes/mandelbrot/fonts/hack-regular-webfont.woff2 +0 -0
  856. package/themes/mandelbrot/img/favicon.png +0 -0
  857. package/themes/mandelbrot/img/icon-drag--horizontal.svg +0 -3
  858. package/themes/mandelbrot/img/icon-drag--vertical.svg +0 -3
  859. package/themes/mandelbrot/img/icon-navigation-closed-ltr.svg +0 -3
  860. package/themes/mandelbrot/img/icon-navigation-closed-rtl.svg +0 -3
  861. package/themes/mandelbrot/img/icon-navigation-opened.svg +0 -3
  862. package/themes/mandelbrot/img/icon-window.svg +0 -3
  863. package/themes/mandelbrot/img/loader.svg +0 -37
  864. package/themes/mandelbrot/js/mandelbrot.js +0 -2
  865. package/themes/mandelbrot/js/mandelbrot.js.map +0 -1
package/docs/component-documentation/buttons/buttons.html DELETED
@@ -1,1908 +0,0 @@
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>