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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (1102) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +7 -7
  3. package/assets.html +13 -0
  4. package/colors.list.js +65 -65
  5. package/components/detail/accordion-checkbox-large.html +1051 -0
  6. package/components/detail/accordion-checkbox-medium-dark.html +1051 -0
  7. package/components/detail/accordion-checkbox-medium-disabled.html +1051 -0
  8. package/components/detail/accordion-checkbox-medium-filtered-list-items.html +1055 -0
  9. package/components/detail/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +1077 -0
  10. package/components/detail/accordion-checkbox-medium-icon-left-floating.html +1077 -0
  11. package/components/detail/accordion-checkbox-medium-icon-left.html +1065 -0
  12. package/components/detail/accordion-checkbox-medium.html +1060 -0
  13. package/components/detail/accordion-checkbox-overview.html +1051 -0
  14. package/components/detail/accordion-input.html +949 -0
  15. package/components/detail/accordion-label.html +949 -0
  16. package/components/detail/accordion-modifier-icon-floating.html +949 -0
  17. package/components/detail/accordion-modifier-icon-left.html +949 -0
  18. package/components/detail/accordion-radio.html +1053 -0
  19. package/components/detail/alert-dark-theme-default.html +1009 -0
  20. package/components/detail/alert-dark-theme-solution.html +1009 -0
  21. package/components/detail/alert-default-extra-attention.html +1007 -0
  22. package/components/detail/alert-default-generic.html +1006 -0
  23. package/components/detail/alert-default-solution-with-badge-and-ready-state.html +1018 -0
  24. package/components/detail/alert-default-solution.html +1010 -0
  25. package/components/detail/alert-default-without-image.html +1004 -0
  26. package/components/detail/alert-default.html +1006 -0
  27. package/components/detail/alert-hidden-after-refresh-checkbox.html +1016 -0
  28. package/components/detail/alert-hidden-after-refresh.html +1005 -0
  29. package/components/detail/alert-layouts.html +1560 -0
  30. package/components/detail/alert-visible-after-refresh.html +1005 -0
  31. package/components/detail/background-colors.html +1287 -0
  32. package/components/detail/basic-card-default-dark.html +1014 -0
  33. package/components/detail/basic-card-default-without-caption-with-header-icon.html +1005 -0
  34. package/components/detail/basic-card-default-without-caption-with-header-image.html +1001 -0
  35. package/components/detail/basic-card-default-without-caption.html +997 -0
  36. package/components/detail/basic-card-default.html +1014 -0
  37. package/components/detail/basic-card-grouping-center.html +1014 -0
  38. package/components/detail/basic-card-grouping-left-with-flat-icon.html +1024 -0
  39. package/components/detail/basic-card-grouping-left.html +1014 -0
  40. package/components/detail/basic-card-grouping.html +1122 -0
  41. package/components/detail/basic-card-layouts.html +1886 -0
  42. package/components/detail/button-danger-dark-icon.html +999 -0
  43. package/components/detail/button-danger-dark.html +975 -0
  44. package/components/detail/button-danger-default.html +975 -0
  45. package/components/detail/button-danger-icon.html +999 -0
  46. package/components/detail/button-disabled-dark-icon.html +999 -0
  47. package/components/detail/button-disabled-dark.html +975 -0
  48. package/components/detail/button-floating-aligned-column.html +1005 -0
  49. package/components/detail/button-floating-aligned-right.html +1005 -0
  50. package/components/detail/button-floating-dark-aligned-column.html +1005 -0
  51. package/components/detail/button-floating-dark-aligned-right.html +1005 -0
  52. package/components/detail/button-floating-dark-default.html +1005 -0
  53. package/components/detail/button-floating-dark-disabled.html +1005 -0
  54. package/components/detail/button-floating-dark-secondary-aligned-column.html +1005 -0
  55. package/components/detail/button-floating-dark-secondary-aligned-right.html +1005 -0
  56. package/components/detail/button-floating-dark-secondary.html +1005 -0
  57. package/components/detail/button-floating-default.html +1005 -0
  58. package/components/detail/button-floating-disabled.html +1005 -0
  59. package/components/detail/button-floating-overview.html +969 -0
  60. package/components/detail/button-floating-positioning.html +1007 -0
  61. package/components/detail/button-floating-secondary-aligned-column.html +1005 -0
  62. package/components/detail/button-floating-secondary-aligned-right.html +1005 -0
  63. package/components/detail/button-floating-secondary.html +1005 -0
  64. package/components/detail/button-floating-states.html +987 -0
  65. package/components/detail/button-gray-default.html +975 -0
  66. package/components/detail/button-gray-icon.html +999 -0
  67. package/components/detail/button-group-center-alignment.html +965 -0
  68. package/components/detail/button-group-left-alignment.html +965 -0
  69. package/components/detail/button-group-right-alignment.html +965 -0
  70. package/components/detail/button-overview-direction.html +983 -0
  71. package/components/detail/button-overview-global-definition.html +975 -0
  72. package/components/detail/button-overview-sizes.html +987 -0
  73. package/components/detail/button-overview-states.html +1019 -0
  74. package/components/detail/button-primary-dark-icon.html +999 -0
  75. package/components/detail/button-primary-dark.html +975 -0
  76. package/components/detail/button-primary-default.html +975 -0
  77. package/components/detail/button-primary-icon.html +999 -0
  78. package/components/detail/button-secondary-dark-icon.html +999 -0
  79. package/components/detail/button-secondary-dark.html +975 -0
  80. package/components/detail/button-secondary-default.html +975 -0
  81. package/components/detail/button-secondary-icon.html +999 -0
  82. package/components/detail/button-tertiary-default.html +975 -0
  83. package/components/detail/button-tertiary-icon.html +999 -0
  84. package/components/detail/buttons-overview.html +2069 -0
  85. package/components/detail/category-dark.html +1022 -0
  86. package/components/detail/category-disabled-dark.html +1014 -0
  87. package/components/detail/category-disabled.html +1014 -0
  88. package/components/detail/category-full-row.html +1178 -0
  89. package/components/detail/category-overview-dark-states.html +1058 -0
  90. package/components/detail/category-overview-dark.html +1022 -0
  91. package/components/detail/category-overview-sizes.html +1030 -0
  92. package/components/detail/category-overview-states.html +1058 -0
  93. package/components/detail/category-small-dark.html +1022 -0
  94. package/components/detail/category-small-disabled-dark.html +1014 -0
  95. package/components/detail/category-small-disabled.html +1014 -0
  96. package/components/detail/category-small-full-row.html +1250 -0
  97. package/components/detail/category-small.html +1022 -0
  98. package/components/detail/category.html +1022 -0
  99. package/components/detail/checkbox-checked.html +968 -0
  100. package/components/detail/checkbox-disabled.html +968 -0
  101. package/components/detail/checkbox-focus.html +968 -0
  102. package/components/detail/checkbox-global-definition.html +968 -0
  103. package/components/detail/checkbox-hover.html +968 -0
  104. package/components/detail/checkbox-inline.html +974 -0
  105. package/components/detail/checkbox-readonly.html +969 -0
  106. package/components/detail/colors-and-shadows.html +1403 -0
  107. package/components/detail/contact-cards.html +2151 -0
  108. package/components/detail/contact-content.html +1017 -0
  109. package/components/detail/contact-overview.html +1147 -0
  110. package/components/detail/contact-sizes.html +1108 -0
  111. package/components/detail/contact-small.html +1038 -0
  112. package/components/detail/contact-without-image-small.html +1028 -0
  113. package/components/detail/contact-without-image.html +1028 -0
  114. package/components/detail/contact.html +1038 -0
  115. package/components/detail/divider-dark-blue.html +949 -0
  116. package/components/detail/divider-default.html +949 -0
  117. package/components/detail/divider-gray-5.html +949 -0
  118. package/components/detail/divider-white-50.html +949 -0
  119. package/components/detail/divider-white.html +949 -0
  120. package/components/detail/divider-yellow.html +949 -0
  121. package/components/detail/generic-card-aspect-16by9.html +1001 -0
  122. package/components/detail/generic-card-aspect-2by1-small.html +1116 -0
  123. package/components/detail/generic-card-aspect-2by1.html +1110 -0
  124. package/components/detail/generic-card-aspect.html +1050 -0
  125. package/components/detail/generic-card-default-small-dark-theme.html +1000 -0
  126. package/components/detail/generic-card-default-small-svg.html +1000 -0
  127. package/components/detail/generic-card-default-small.html +999 -0
  128. package/components/detail/generic-card-default-svg-dark.html +999 -0
  129. package/components/detail/generic-card-default-svg.html +998 -0
  130. package/components/detail/generic-card-default.html +999 -0
  131. package/components/detail/generic-card-media-dark-theme.html +1031 -0
  132. package/components/detail/generic-card-media-floating-icon.html +1042 -0
  133. package/components/detail/generic-card-media-small.html +1027 -0
  134. package/components/detail/generic-card-media.html +1027 -0
  135. package/components/detail/generic-card-overview.html +1062 -0
  136. package/components/detail/generic-flat-icons.html +951 -0
  137. package/components/detail/generic-rich-icons.html +951 -0
  138. package/components/detail/global-colors-alternative.html +1301 -0
  139. package/components/detail/global-colors-gradients.html +1305 -0
  140. package/components/detail/global-colors-gray-white-black.html +1304 -0
  141. package/components/detail/global-colors-primary.html +1295 -0
  142. package/components/detail/global-colors-shadows.html +1295 -0
  143. package/components/detail/global-colors-transparency.html +1306 -0
  144. package/components/detail/global-margins.html +995 -0
  145. package/components/detail/global-paddings.html +951 -0
  146. package/components/detail/gradient-background-colors.html +1517 -0
  147. package/components/detail/input-disabled.html +1003 -0
  148. package/components/detail/input-field.html +1226 -0
  149. package/components/detail/input-focus.html +1003 -0
  150. package/components/detail/input-hover.html +1003 -0
  151. package/components/detail/input-readonly.html +1003 -0
  152. package/components/detail/input-sizes.html +1007 -0
  153. package/components/detail/input-state-error.html +1003 -0
  154. package/components/detail/input-state-success.html +1003 -0
  155. package/components/detail/input.html +981 -0
  156. package/components/detail/large-section-spacing-definitions.html +1011 -0
  157. package/components/detail/large-section-spacing.html +977 -0
  158. package/components/detail/links.html +977 -0
  159. package/components/detail/lists.html +973 -0
  160. package/components/detail/marketplace-flat-icons.html +951 -0
  161. package/components/detail/marketplace-rich-icons.html +951 -0
  162. package/components/detail/matching-content-height-card.html +1599 -0
  163. package/components/detail/medium-section-spacing-definitions.html +1011 -0
  164. package/components/detail/medium-section-spacing.html +977 -0
  165. package/components/detail/modal-on-click.html +1017 -0
  166. package/components/detail/modal-on-load-demo.html +1012 -0
  167. package/components/detail/modal-on-load.html +1012 -0
  168. package/components/detail/msds-text-alt-blue-1.html +1287 -0
  169. package/components/detail/msds-text-alt-blue-2.html +1287 -0
  170. package/components/detail/msds-text-alt-blue-3.html +1287 -0
  171. package/components/detail/msds-text-alt-yellow-1.html +1287 -0
  172. package/components/detail/msds-text-alt-yellow-2.html +1287 -0
  173. package/components/detail/msds-text-black.html +1287 -0
  174. package/components/detail/msds-text-clear-blue.html +1287 -0
  175. package/components/detail/msds-text-confirm-green.html +1287 -0
  176. package/components/detail/msds-text-danger-red-1.html +1287 -0
  177. package/components/detail/msds-text-danger-red-2.html +1287 -0
  178. package/components/detail/msds-text-dark-blue.html +1287 -0
  179. package/components/detail/msds-text-gray-1.html +1287 -0
  180. package/components/detail/msds-text-gray-10.html +1287 -0
  181. package/components/detail/msds-text-gray-2.html +1287 -0
  182. package/components/detail/msds-text-gray-3.html +1287 -0
  183. package/components/detail/msds-text-gray-4.html +1287 -0
  184. package/components/detail/msds-text-gray-5.html +1287 -0
  185. package/components/detail/msds-text-gray-6.html +1287 -0
  186. package/components/detail/msds-text-gray-7.html +1287 -0
  187. package/components/detail/msds-text-gray-8.html +1287 -0
  188. package/components/detail/msds-text-gray-9.html +1287 -0
  189. package/components/detail/msds-text-sand.html +1287 -0
  190. package/components/detail/msds-text-white.html +1287 -0
  191. package/components/detail/msds-text-yellow.html +1287 -0
  192. package/components/detail/popover-bottom.html +1018 -0
  193. package/components/detail/popover-global-definition.html +1018 -0
  194. package/components/detail/popover-left.html +1018 -0
  195. package/components/detail/popover-top.html +1018 -0
  196. package/components/detail/preview-dark.html +1014 -0
  197. package/components/detail/preview.html +1001 -0
  198. package/components/detail/progress-bar-dark-theme.html +997 -0
  199. package/components/detail/progress-bar-features.html +1023 -0
  200. package/components/detail/progress-bar-global-definition.html +973 -0
  201. package/components/detail/progress-bar-light-theme.html +997 -0
  202. package/components/detail/progress-bar-sizes.html +999 -0
  203. package/components/detail/radio-button-disabled.html +963 -0
  204. package/components/detail/radio-button-focus.html +963 -0
  205. package/components/detail/radio-button-global-definition.html +975 -0
  206. package/components/detail/radio-button-hover.html +963 -0
  207. package/components/detail/radio-button-readonly.html +964 -0
  208. package/components/detail/radio-button-selected.html +963 -0
  209. package/components/detail/section-checkbox-dark.html +1019 -0
  210. package/components/detail/section-checkbox-nested-accordion.html +1124 -0
  211. package/components/detail/section-checkbox.html +1083 -0
  212. package/components/detail/section-radio-dark.html +1083 -0
  213. package/components/detail/section-radio-nested-accordion.html +1135 -0
  214. package/components/detail/section-radio.html +1081 -0
  215. package/components/detail/select-input-default.html +973 -0
  216. package/components/detail/select-input-error.html +971 -0
  217. package/components/detail/select-input-global-definition.html +983 -0
  218. package/components/detail/select-input-not-required.html +973 -0
  219. package/components/detail/select-input-required.html +973 -0
  220. package/components/detail/select-input-small.html +969 -0
  221. package/components/detail/small-section-spacing-definitions.html +1017 -0
  222. package/components/detail/small-section-spacing.html +977 -0
  223. package/components/detail/solid-background-colors.html +1457 -0
  224. package/components/detail/solution-card-default-layout.html +1210 -0
  225. package/components/detail/solution-card-default.html +1040 -0
  226. package/components/detail/solution-card-layouts.html +2085 -0
  227. package/components/detail/solution-card-optional-certification-badges.html +1054 -0
  228. package/components/detail/solution-card-optional-solution-badges.html +1054 -0
  229. package/components/detail/solution-card-sizes.html +1125 -0
  230. package/components/detail/solution-card-small.html +1040 -0
  231. package/components/detail/switch-checked.html +973 -0
  232. package/components/detail/switch-default.html +973 -0
  233. package/components/detail/switch-disabled-readonly.html +973 -0
  234. package/components/detail/switch-disabled.html +973 -0
  235. package/components/detail/switch-global.html +983 -0
  236. package/components/detail/tab-tile.html +2409 -0
  237. package/components/detail/table-dark-theme-default-expandable-rows.html +1204 -0
  238. package/components/detail/table-dark-theme-default.html +1228 -0
  239. package/components/detail/table-default-dark.html +1179 -0
  240. package/components/detail/table-default-expandable-rows.html +1203 -0
  241. package/components/detail/table-default-medium.html +1179 -0
  242. package/components/detail/table-default-small.html +1179 -0
  243. package/components/detail/table-default.html +1227 -0
  244. package/components/detail/text-area-disabled.html +1011 -0
  245. package/components/detail/text-area-error.html +1011 -0
  246. package/components/detail/text-area-field.html +985 -0
  247. package/components/detail/text-area-focus.html +1011 -0
  248. package/components/detail/text-area-hover.html +1011 -0
  249. package/components/detail/text-area-readonly.html +1011 -0
  250. package/components/detail/text-area-sizes.html +1011 -0
  251. package/components/detail/text-area-success.html +1011 -0
  252. package/components/detail/text-area.html +1167 -0
  253. package/components/detail/text-colors.html +1287 -0
  254. package/components/detail/text.html +1037 -0
  255. package/components/detail/typography-body-texts.html +993 -0
  256. package/components/detail/typography-displays.html +959 -0
  257. package/components/detail/typography-headers.html +965 -0
  258. package/components/detail/typography-leads.html +951 -0
  259. package/components/detail/typography-links-dark-theme.html +1159 -0
  260. package/components/detail/typography-links-light-theme.html +1123 -0
  261. package/components/detail/typography-links-secondary.html +1011 -0
  262. package/components/detail/typography-unordered-lists.html +973 -0
  263. package/components/preview/accordion-checkbox-large.html +81 -0
  264. package/components/preview/accordion-checkbox-medium-dark.html +81 -0
  265. package/components/preview/accordion-checkbox-medium-disabled.html +82 -0
  266. package/components/preview/accordion-checkbox-medium-filtered-list-items.html +84 -0
  267. package/components/preview/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +95 -0
  268. package/components/preview/accordion-checkbox-medium-icon-left-floating.html +95 -0
  269. package/components/preview/accordion-checkbox-medium-icon-left.html +90 -0
  270. package/components/preview/accordion-checkbox-medium.html +81 -0
  271. package/components/preview/accordion-checkbox-overview.html +83 -0
  272. package/components/preview/accordion-input.html +30 -0
  273. package/components/preview/accordion-label.html +30 -0
  274. package/components/preview/accordion-modifier-icon-floating.html +30 -0
  275. package/components/preview/accordion-modifier-icon-left.html +31 -0
  276. package/components/preview/accordion-radio.html +83 -0
  277. package/components/preview/alert-dark-theme-default.html +59 -0
  278. package/components/preview/alert-dark-theme-solution.html +59 -0
  279. package/components/preview/alert-default-extra-attention.html +58 -0
  280. package/components/preview/alert-default-generic.html +58 -0
  281. package/components/preview/alert-default-solution-with-badge-and-ready-state.html +64 -0
  282. package/components/preview/alert-default-solution.html +60 -0
  283. package/components/preview/alert-default-without-image.html +57 -0
  284. package/components/preview/alert-default.html +58 -0
  285. package/components/preview/alert-hidden-after-refresh-checkbox.html +63 -0
  286. package/components/preview/alert-hidden-after-refresh.html +57 -0
  287. package/components/preview/alert-layouts.html +341 -0
  288. package/components/preview/alert-visible-after-refresh.html +57 -0
  289. package/components/preview/background-colors.html +50 -0
  290. package/components/preview/basic-card-default-dark.html +55 -0
  291. package/components/preview/basic-card-default-without-caption-with-header-icon.html +50 -0
  292. package/components/preview/basic-card-default-without-caption-with-header-image.html +48 -0
  293. package/components/preview/basic-card-default-without-caption.html +46 -0
  294. package/components/preview/basic-card-default.html +55 -0
  295. package/components/preview/basic-card-grouping-center.html +55 -0
  296. package/components/preview/basic-card-grouping-left-with-flat-icon.html +60 -0
  297. package/components/preview/basic-card-grouping-left.html +55 -0
  298. package/components/preview/basic-card-grouping.html +110 -0
  299. package/components/preview/basic-card-layouts.html +494 -0
  300. package/components/preview/button-danger-dark-icon.html +51 -0
  301. package/components/preview/button-danger-dark.html +44 -0
  302. package/components/preview/button-danger-default.html +42 -0
  303. package/components/preview/button-danger-icon.html +51 -0
  304. package/components/preview/button-disabled-dark-icon.html +51 -0
  305. package/components/preview/button-disabled-dark.html +44 -0
  306. package/components/preview/button-floating-aligned-column.html +57 -0
  307. package/components/preview/button-floating-aligned-right.html +57 -0
  308. package/components/preview/button-floating-dark-aligned-column.html +57 -0
  309. package/components/preview/button-floating-dark-aligned-right.html +57 -0
  310. package/components/preview/button-floating-dark-default.html +57 -0
  311. package/components/preview/button-floating-dark-disabled.html +57 -0
  312. package/components/preview/button-floating-dark-secondary-aligned-column.html +57 -0
  313. package/components/preview/button-floating-dark-secondary-aligned-right.html +57 -0
  314. package/components/preview/button-floating-dark-secondary.html +57 -0
  315. package/components/preview/button-floating-default.html +57 -0
  316. package/components/preview/button-floating-disabled.html +57 -0
  317. package/components/preview/button-floating-overview.html +39 -0
  318. package/components/preview/button-floating-positioning.html +58 -0
  319. package/components/preview/button-floating-secondary-aligned-column.html +57 -0
  320. package/components/preview/button-floating-secondary-aligned-right.html +57 -0
  321. package/components/preview/button-floating-secondary.html +57 -0
  322. package/components/preview/button-floating-states.html +48 -0
  323. package/components/preview/button-gray-default.html +43 -0
  324. package/components/preview/button-gray-icon.html +51 -0
  325. package/components/preview/button-group-center-alignment.html +37 -0
  326. package/components/preview/button-group-left-alignment.html +37 -0
  327. package/components/preview/button-group-right-alignment.html +37 -0
  328. package/components/preview/button-overview-direction.html +45 -0
  329. package/components/preview/button-overview-global-definition.html +41 -0
  330. package/components/preview/button-overview-sizes.html +48 -0
  331. package/components/preview/button-overview-states.html +59 -0
  332. package/components/preview/button-primary-dark-icon.html +51 -0
  333. package/components/preview/button-primary-dark.html +44 -0
  334. package/components/preview/button-primary-default.html +42 -0
  335. package/components/preview/button-primary-icon.html +52 -0
  336. package/components/preview/button-secondary-dark-icon.html +51 -0
  337. package/components/preview/button-secondary-dark.html +44 -0
  338. package/components/preview/button-secondary-default.html +44 -0
  339. package/components/preview/button-secondary-icon.html +51 -0
  340. package/components/preview/button-tertiary-default.html +42 -0
  341. package/components/preview/button-tertiary-icon.html +51 -0
  342. package/components/preview/buttons-overview.html +510 -0
  343. package/components/preview/category-dark.html +67 -0
  344. package/components/preview/category-disabled-dark.html +63 -0
  345. package/components/preview/category-disabled.html +59 -0
  346. package/components/preview/category-full-row.html +139 -0
  347. package/components/preview/category-overview-dark-states.html +85 -0
  348. package/components/preview/category-overview-dark.html +67 -0
  349. package/components/preview/category-overview-sizes.html +67 -0
  350. package/components/preview/category-overview-states.html +81 -0
  351. package/components/preview/category-small-dark.html +67 -0
  352. package/components/preview/category-small-disabled-dark.html +63 -0
  353. package/components/preview/category-small-disabled.html +59 -0
  354. package/components/preview/category-small-full-row.html +175 -0
  355. package/components/preview/category-small.html +63 -0
  356. package/components/preview/category.html +63 -0
  357. package/components/preview/checkbox-checked.html +38 -0
  358. package/components/preview/checkbox-disabled.html +38 -0
  359. package/components/preview/checkbox-focus.html +38 -0
  360. package/components/preview/checkbox-global-definition.html +38 -0
  361. package/components/preview/checkbox-hover.html +38 -0
  362. package/components/preview/checkbox-inline.html +41 -0
  363. package/components/preview/checkbox-readonly.html +39 -0
  364. package/components/preview/colors-and-shadows.html +126 -0
  365. package/components/preview/contact-cards.html +622 -0
  366. package/components/preview/contact-content.html +56 -0
  367. package/components/preview/contact-overview.html +121 -0
  368. package/components/preview/contact-sizes.html +102 -0
  369. package/components/preview/contact-small.html +67 -0
  370. package/components/preview/contact-without-image-small.html +62 -0
  371. package/components/preview/contact-without-image.html +62 -0
  372. package/components/preview/contact.html +67 -0
  373. package/components/preview/divider-dark-blue.html +29 -0
  374. package/components/preview/divider-default.html +30 -0
  375. package/components/preview/divider-gray-5.html +29 -0
  376. package/components/preview/divider-white-50.html +29 -0
  377. package/components/preview/divider-white.html +29 -0
  378. package/components/preview/divider-yellow.html +30 -0
  379. package/components/preview/generic-card-aspect-16by9.html +49 -0
  380. package/components/preview/generic-card-aspect-2by1-small.html +110 -0
  381. package/components/preview/generic-card-aspect-2by1.html +106 -0
  382. package/components/preview/generic-card-aspect.html +74 -0
  383. package/components/preview/generic-card-default-small-dark-theme.html +48 -0
  384. package/components/preview/generic-card-default-small-svg.html +48 -0
  385. package/components/preview/generic-card-default-small.html +49 -0
  386. package/components/preview/generic-card-default-svg-dark.html +48 -0
  387. package/components/preview/generic-card-default-svg.html +47 -0
  388. package/components/preview/generic-card-default.html +50 -0
  389. package/components/preview/generic-card-media-dark-theme.html +64 -0
  390. package/components/preview/generic-card-media-floating-icon.html +70 -0
  391. package/components/preview/generic-card-media-small.html +62 -0
  392. package/components/preview/generic-card-media.html +62 -0
  393. package/components/preview/generic-card-overview.html +80 -0
  394. package/components/preview/generic-flat-icons.html +54 -0
  395. package/components/preview/generic-rich-icons.html +54 -0
  396. package/components/preview/global-colors-alternative.html +59 -0
  397. package/components/preview/global-colors-gradients.html +63 -0
  398. package/components/preview/global-colors-gray-white-black.html +62 -0
  399. package/components/preview/global-colors-primary.html +53 -0
  400. package/components/preview/global-colors-shadows.html +54 -0
  401. package/components/preview/global-colors-transparency.html +64 -0
  402. package/components/preview/global-margins.html +51 -0
  403. package/components/preview/global-paddings.html +30 -0
  404. package/components/preview/gradient-background-colors.html +164 -0
  405. package/components/preview/input-disabled.html +56 -0
  406. package/components/preview/input-field.html +164 -0
  407. package/components/preview/input-focus.html +56 -0
  408. package/components/preview/input-hover.html +56 -0
  409. package/components/preview/input-readonly.html +56 -0
  410. package/components/preview/input-sizes.html +58 -0
  411. package/components/preview/input-state-error.html +56 -0
  412. package/components/preview/input-state-success.html +56 -0
  413. package/components/preview/input.html +45 -0
  414. package/components/preview/large-section-spacing-definitions.html +59 -0
  415. package/components/preview/large-section-spacing.html +42 -0
  416. package/components/preview/links.html +44 -0
  417. package/components/preview/lists.html +42 -0
  418. package/components/preview/marketplace-flat-icons.html +54 -0
  419. package/components/preview/marketplace-rich-icons.html +54 -0
  420. package/components/preview/matching-content-height-card.html +354 -0
  421. package/components/preview/medium-section-spacing-definitions.html +59 -0
  422. package/components/preview/medium-section-spacing.html +42 -0
  423. package/components/preview/modal-on-click.html +63 -0
  424. package/components/preview/modal-on-load-demo.html +61 -0
  425. package/components/preview/modal-on-load.html +61 -0
  426. package/components/preview/msds-text-alt-blue-1.html +49 -0
  427. package/components/preview/msds-text-alt-blue-2.html +49 -0
  428. package/components/preview/msds-text-alt-blue-3.html +49 -0
  429. package/components/preview/msds-text-alt-yellow-1.html +49 -0
  430. package/components/preview/msds-text-alt-yellow-2.html +49 -0
  431. package/components/preview/msds-text-black.html +49 -0
  432. package/components/preview/msds-text-clear-blue.html +49 -0
  433. package/components/preview/msds-text-confirm-green.html +49 -0
  434. package/components/preview/msds-text-danger-red-1.html +49 -0
  435. package/components/preview/msds-text-danger-red-2.html +49 -0
  436. package/components/preview/msds-text-dark-blue.html +49 -0
  437. package/components/preview/msds-text-gray-1.html +49 -0
  438. package/components/preview/msds-text-gray-10.html +49 -0
  439. package/components/preview/msds-text-gray-2.html +49 -0
  440. package/components/preview/msds-text-gray-3.html +49 -0
  441. package/components/preview/msds-text-gray-4.html +49 -0
  442. package/components/preview/msds-text-gray-5.html +49 -0
  443. package/components/preview/msds-text-gray-6.html +49 -0
  444. package/components/preview/msds-text-gray-7.html +49 -0
  445. package/components/preview/msds-text-gray-8.html +49 -0
  446. package/components/preview/msds-text-gray-9.html +49 -0
  447. package/components/preview/msds-text-sand.html +49 -0
  448. package/components/preview/msds-text-white.html +49 -0
  449. package/components/preview/msds-text-yellow.html +49 -0
  450. package/components/preview/popover-bottom.html +61 -0
  451. package/components/preview/popover-global-definition.html +61 -0
  452. package/components/preview/popover-left.html +61 -0
  453. package/components/preview/popover-top.html +61 -0
  454. package/components/preview/preview-dark.html +59 -0
  455. package/components/preview/preview.html +29 -0
  456. package/components/preview/progress-bar-dark-theme.html +57 -0
  457. package/components/preview/progress-bar-features.html +66 -0
  458. package/components/preview/progress-bar-global-definition.html +41 -0
  459. package/components/preview/progress-bar-light-theme.html +53 -0
  460. package/components/preview/progress-bar-sizes.html +55 -0
  461. package/components/preview/radio-button-disabled.html +36 -0
  462. package/components/preview/radio-button-focus.html +36 -0
  463. package/components/preview/radio-button-global-definition.html +42 -0
  464. package/components/preview/radio-button-hover.html +36 -0
  465. package/components/preview/radio-button-readonly.html +37 -0
  466. package/components/preview/radio-button-selected.html +36 -0
  467. package/components/preview/section-checkbox-dark.html +64 -0
  468. package/components/preview/section-checkbox-nested-accordion.html +119 -0
  469. package/components/preview/section-checkbox.html +96 -0
  470. package/components/preview/section-radio-dark.html +96 -0
  471. package/components/preview/section-radio-nested-accordion.html +144 -0
  472. package/components/preview/section-radio.html +95 -0
  473. package/components/preview/select-input-default.html +41 -0
  474. package/components/preview/select-input-error.html +40 -0
  475. package/components/preview/select-input-global-definition.html +46 -0
  476. package/components/preview/select-input-not-required.html +41 -0
  477. package/components/preview/select-input-required.html +41 -0
  478. package/components/preview/select-input-small.html +38 -0
  479. package/components/preview/small-section-spacing-definitions.html +62 -0
  480. package/components/preview/small-section-spacing.html +42 -0
  481. package/components/preview/solid-background-colors.html +135 -0
  482. package/components/preview/solution-card-default-layout.html +158 -0
  483. package/components/preview/solution-card-default.html +74 -0
  484. package/components/preview/solution-card-layouts.html +587 -0
  485. package/components/preview/solution-card-optional-certification-badges.html +82 -0
  486. package/components/preview/solution-card-optional-solution-badges.html +82 -0
  487. package/components/preview/solution-card-sizes.html +116 -0
  488. package/components/preview/solution-card-small.html +74 -0
  489. package/components/preview/switch-checked.html +41 -0
  490. package/components/preview/switch-default.html +41 -0
  491. package/components/preview/switch-disabled-readonly.html +41 -0
  492. package/components/preview/switch-disabled.html +41 -0
  493. package/components/preview/switch-global.html +46 -0
  494. package/components/preview/tab-tile.html +1128 -0
  495. package/components/preview/table-dark-theme-default-expandable-rows.html +160 -0
  496. package/components/preview/table-dark-theme-default.html +172 -0
  497. package/components/preview/table-default-dark.html +144 -0
  498. package/components/preview/table-default-expandable-rows.html +156 -0
  499. package/components/preview/table-default-medium.html +144 -0
  500. package/components/preview/table-default-small.html +144 -0
  501. package/components/preview/table-default.html +168 -0
  502. package/components/preview/text-area-disabled.html +60 -0
  503. package/components/preview/text-area-error.html +60 -0
  504. package/components/preview/text-area-field.html +47 -0
  505. package/components/preview/text-area-focus.html +60 -0
  506. package/components/preview/text-area-hover.html +60 -0
  507. package/components/preview/text-area-readonly.html +60 -0
  508. package/components/preview/text-area-sizes.html +60 -0
  509. package/components/preview/text-area-success.html +60 -0
  510. package/components/preview/text-area.html +147 -0
  511. package/components/preview/text-colors.html +49 -0
  512. package/components/preview/text.html +74 -0
  513. package/components/preview/typography-body-texts.html +52 -0
  514. package/components/preview/typography-displays.html +34 -0
  515. package/components/preview/typography-headers.html +37 -0
  516. package/components/preview/typography-leads.html +30 -0
  517. package/components/preview/typography-links-dark-theme.html +135 -0
  518. package/components/preview/typography-links-light-theme.html +117 -0
  519. package/components/preview/typography-links-secondary.html +61 -0
  520. package/components/preview/typography-unordered-lists.html +41 -0
  521. package/components/raw/tab-tile/tab-tile.js +139 -0
  522. package/components/raw/tab-tile/tab-tile.scss +256 -0
  523. package/components/render/accordion-checkbox-large.html +55 -0
  524. package/components/render/accordion-checkbox-medium-dark.html +55 -0
  525. package/components/render/accordion-checkbox-medium-disabled.html +56 -0
  526. package/components/render/accordion-checkbox-medium-filtered-list-items.html +58 -0
  527. package/components/render/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +69 -0
  528. package/components/render/accordion-checkbox-medium-icon-left-floating.html +69 -0
  529. package/components/render/accordion-checkbox-medium-icon-left.html +64 -0
  530. package/components/render/accordion-checkbox-medium.html +55 -0
  531. package/components/render/accordion-checkbox-overview.html +57 -0
  532. package/components/render/accordion-input.html +4 -0
  533. package/components/render/accordion-label.html +4 -0
  534. package/components/render/accordion-modifier-icon-floating.html +4 -0
  535. package/components/render/accordion-modifier-icon-left.html +5 -0
  536. package/components/render/accordion-radio.html +57 -0
  537. package/components/render/alert-dark-theme-default.html +33 -0
  538. package/components/render/alert-dark-theme-solution.html +33 -0
  539. package/components/render/alert-default-extra-attention.html +32 -0
  540. package/components/render/alert-default-generic.html +32 -0
  541. package/components/render/alert-default-solution-with-badge-and-ready-state.html +38 -0
  542. package/components/render/alert-default-solution.html +34 -0
  543. package/components/render/alert-default-without-image.html +31 -0
  544. package/components/render/alert-default.html +32 -0
  545. package/components/render/alert-hidden-after-refresh-checkbox.html +37 -0
  546. package/components/render/alert-hidden-after-refresh.html +31 -0
  547. package/components/render/alert-layouts.html +315 -0
  548. package/components/render/alert-visible-after-refresh.html +31 -0
  549. package/components/render/background-colors.html +4 -0
  550. package/components/render/basic-card-default-dark.html +29 -0
  551. package/components/render/basic-card-default-without-caption-with-header-icon.html +24 -0
  552. package/components/render/basic-card-default-without-caption-with-header-image.html +22 -0
  553. package/components/render/basic-card-default-without-caption.html +20 -0
  554. package/components/render/basic-card-default.html +29 -0
  555. package/components/render/basic-card-grouping-center.html +29 -0
  556. package/components/render/basic-card-grouping-left-with-flat-icon.html +34 -0
  557. package/components/render/basic-card-grouping-left.html +29 -0
  558. package/components/render/basic-card-grouping.html +84 -0
  559. package/components/render/basic-card-layouts.html +468 -0
  560. package/components/render/button-danger-dark-icon.html +25 -0
  561. package/components/render/button-danger-dark.html +18 -0
  562. package/components/render/button-danger-default.html +16 -0
  563. package/components/render/button-danger-icon.html +25 -0
  564. package/components/render/button-disabled-dark-icon.html +25 -0
  565. package/components/render/button-disabled-dark.html +18 -0
  566. package/components/render/button-floating-aligned-column.html +31 -0
  567. package/components/render/button-floating-aligned-right.html +31 -0
  568. package/components/render/button-floating-dark-aligned-column.html +31 -0
  569. package/components/render/button-floating-dark-aligned-right.html +31 -0
  570. package/components/render/button-floating-dark-default.html +31 -0
  571. package/components/render/button-floating-dark-disabled.html +31 -0
  572. package/components/render/button-floating-dark-secondary-aligned-column.html +31 -0
  573. package/components/render/button-floating-dark-secondary-aligned-right.html +31 -0
  574. package/components/render/button-floating-dark-secondary.html +31 -0
  575. package/components/render/button-floating-default.html +31 -0
  576. package/components/render/button-floating-disabled.html +31 -0
  577. package/components/render/button-floating-overview.html +13 -0
  578. package/components/render/button-floating-positioning.html +32 -0
  579. package/components/render/button-floating-secondary-aligned-column.html +31 -0
  580. package/components/render/button-floating-secondary-aligned-right.html +31 -0
  581. package/components/render/button-floating-secondary.html +31 -0
  582. package/components/render/button-floating-states.html +22 -0
  583. package/components/render/button-gray-default.html +17 -0
  584. package/components/render/button-gray-icon.html +25 -0
  585. package/components/render/button-group-center-alignment.html +11 -0
  586. package/components/render/button-group-left-alignment.html +11 -0
  587. package/components/render/button-group-right-alignment.html +11 -0
  588. package/components/render/button-overview-direction.html +19 -0
  589. package/components/render/button-overview-global-definition.html +15 -0
  590. package/components/render/button-overview-sizes.html +22 -0
  591. package/components/render/button-overview-states.html +33 -0
  592. package/components/render/button-primary-dark-icon.html +25 -0
  593. package/components/render/button-primary-dark.html +18 -0
  594. package/components/render/button-primary-default.html +16 -0
  595. package/components/render/button-primary-icon.html +26 -0
  596. package/components/render/button-secondary-dark-icon.html +25 -0
  597. package/components/render/button-secondary-dark.html +18 -0
  598. package/components/render/button-secondary-default.html +18 -0
  599. package/components/render/button-secondary-icon.html +25 -0
  600. package/components/render/button-tertiary-default.html +16 -0
  601. package/components/render/button-tertiary-icon.html +25 -0
  602. package/components/render/buttons-overview.html +484 -0
  603. package/components/render/category-dark.html +37 -0
  604. package/components/render/category-disabled-dark.html +33 -0
  605. package/components/render/category-disabled.html +33 -0
  606. package/components/render/category-full-row.html +113 -0
  607. package/components/render/category-overview-dark-states.html +55 -0
  608. package/components/render/category-overview-dark.html +37 -0
  609. package/components/render/category-overview-sizes.html +41 -0
  610. package/components/render/category-overview-states.html +55 -0
  611. package/components/render/category-small-dark.html +37 -0
  612. package/components/render/category-small-disabled-dark.html +33 -0
  613. package/components/render/category-small-disabled.html +33 -0
  614. package/components/render/category-small-full-row.html +149 -0
  615. package/components/render/category-small.html +37 -0
  616. package/components/render/category.html +37 -0
  617. package/components/render/checkbox-checked.html +12 -0
  618. package/components/render/checkbox-disabled.html +12 -0
  619. package/components/render/checkbox-focus.html +12 -0
  620. package/components/render/checkbox-global-definition.html +12 -0
  621. package/components/render/checkbox-hover.html +12 -0
  622. package/components/render/checkbox-inline.html +15 -0
  623. package/components/render/checkbox-readonly.html +13 -0
  624. package/components/render/colors-and-shadows.html +80 -0
  625. package/components/render/contact-cards.html +596 -0
  626. package/components/render/contact-content.html +30 -0
  627. package/components/render/contact-overview.html +95 -0
  628. package/components/render/contact-sizes.html +76 -0
  629. package/components/render/contact-small.html +41 -0
  630. package/components/render/contact-without-image-small.html +36 -0
  631. package/components/render/contact-without-image.html +36 -0
  632. package/components/render/contact.html +41 -0
  633. package/components/render/divider-dark-blue.html +3 -0
  634. package/components/render/divider-default.html +4 -0
  635. package/components/render/divider-gray-5.html +3 -0
  636. package/components/render/divider-white-50.html +3 -0
  637. package/components/render/divider-white.html +3 -0
  638. package/components/render/divider-yellow.html +4 -0
  639. package/components/render/generic-card-aspect-16by9.html +23 -0
  640. package/components/render/generic-card-aspect-2by1-small.html +84 -0
  641. package/components/render/generic-card-aspect-2by1.html +80 -0
  642. package/components/render/generic-card-aspect.html +48 -0
  643. package/components/render/generic-card-default-small-dark-theme.html +22 -0
  644. package/components/render/generic-card-default-small-svg.html +22 -0
  645. package/components/render/generic-card-default-small.html +23 -0
  646. package/components/render/generic-card-default-svg-dark.html +22 -0
  647. package/components/render/generic-card-default-svg.html +21 -0
  648. package/components/render/generic-card-default.html +24 -0
  649. package/components/render/generic-card-media-dark-theme.html +38 -0
  650. package/components/render/generic-card-media-floating-icon.html +44 -0
  651. package/components/render/generic-card-media-small.html +36 -0
  652. package/components/render/generic-card-media.html +36 -0
  653. package/components/render/generic-card-overview.html +54 -0
  654. package/components/render/generic-flat-icons.html +3 -0
  655. package/components/render/generic-rich-icons.html +3 -0
  656. package/components/render/global-colors-alternative.html +13 -0
  657. package/components/render/global-colors-gradients.html +17 -0
  658. package/components/render/global-colors-gray-white-black.html +16 -0
  659. package/components/render/global-colors-primary.html +7 -0
  660. package/components/render/global-colors-shadows.html +8 -0
  661. package/components/render/global-colors-transparency.html +18 -0
  662. package/components/render/global-margins.html +25 -0
  663. package/components/render/global-paddings.html +4 -0
  664. package/components/render/gradient-background-colors.html +118 -0
  665. package/components/render/input-disabled.html +30 -0
  666. package/components/render/input-field.html +138 -0
  667. package/components/render/input-focus.html +30 -0
  668. package/components/render/input-hover.html +30 -0
  669. package/components/render/input-readonly.html +30 -0
  670. package/components/render/input-sizes.html +32 -0
  671. package/components/render/input-state-error.html +30 -0
  672. package/components/render/input-state-success.html +30 -0
  673. package/components/render/input.html +19 -0
  674. package/components/render/large-section-spacing-definitions.html +33 -0
  675. package/components/render/large-section-spacing.html +16 -0
  676. package/components/render/links.html +18 -0
  677. package/components/render/lists.html +16 -0
  678. package/components/render/marketplace-flat-icons.html +3 -0
  679. package/components/render/marketplace-rich-icons.html +3 -0
  680. package/components/render/matching-content-height-card.html +328 -0
  681. package/components/render/medium-section-spacing-definitions.html +33 -0
  682. package/components/render/medium-section-spacing.html +16 -0
  683. package/components/render/modal-on-click.html +37 -0
  684. package/components/render/modal-on-load-demo.html +35 -0
  685. package/components/render/modal-on-load.html +35 -0
  686. package/components/render/msds-text-alt-blue-1.html +3 -0
  687. package/components/render/msds-text-alt-blue-2.html +3 -0
  688. package/components/render/msds-text-alt-blue-3.html +3 -0
  689. package/components/render/msds-text-alt-yellow-1.html +3 -0
  690. package/components/render/msds-text-alt-yellow-2.html +3 -0
  691. package/components/render/msds-text-black.html +3 -0
  692. package/components/render/msds-text-clear-blue.html +3 -0
  693. package/components/render/msds-text-confirm-green.html +3 -0
  694. package/components/render/msds-text-danger-red-1.html +3 -0
  695. package/components/render/msds-text-danger-red-2.html +3 -0
  696. package/components/render/msds-text-dark-blue.html +3 -0
  697. package/components/render/msds-text-gray-1.html +3 -0
  698. package/components/render/msds-text-gray-10.html +3 -0
  699. package/components/render/msds-text-gray-2.html +3 -0
  700. package/components/render/msds-text-gray-3.html +3 -0
  701. package/components/render/msds-text-gray-4.html +3 -0
  702. package/components/render/msds-text-gray-5.html +3 -0
  703. package/components/render/msds-text-gray-6.html +3 -0
  704. package/components/render/msds-text-gray-7.html +3 -0
  705. package/components/render/msds-text-gray-8.html +3 -0
  706. package/components/render/msds-text-gray-9.html +3 -0
  707. package/components/render/msds-text-sand.html +3 -0
  708. package/components/render/msds-text-white.html +3 -0
  709. package/components/render/msds-text-yellow.html +3 -0
  710. package/components/render/popover-bottom.html +35 -0
  711. package/components/render/popover-global-definition.html +35 -0
  712. package/components/render/popover-left.html +35 -0
  713. package/components/render/popover-top.html +35 -0
  714. package/components/render/preview-dark.html +33 -0
  715. package/components/render/preview.html +29 -0
  716. package/components/render/progress-bar-dark-theme.html +27 -0
  717. package/components/render/progress-bar-features.html +40 -0
  718. package/components/render/progress-bar-global-definition.html +15 -0
  719. package/components/render/progress-bar-light-theme.html +27 -0
  720. package/components/render/progress-bar-sizes.html +29 -0
  721. package/components/render/radio-button-disabled.html +10 -0
  722. package/components/render/radio-button-focus.html +10 -0
  723. package/components/render/radio-button-global-definition.html +16 -0
  724. package/components/render/radio-button-hover.html +10 -0
  725. package/components/render/radio-button-readonly.html +11 -0
  726. package/components/render/radio-button-selected.html +10 -0
  727. package/components/render/section-checkbox-dark.html +38 -0
  728. package/components/render/section-checkbox-nested-accordion.html +93 -0
  729. package/components/render/section-checkbox.html +70 -0
  730. package/components/render/section-radio-dark.html +70 -0
  731. package/components/render/section-radio-nested-accordion.html +118 -0
  732. package/components/render/section-radio.html +69 -0
  733. package/components/render/select-input-default.html +15 -0
  734. package/components/render/select-input-error.html +14 -0
  735. package/components/render/select-input-global-definition.html +20 -0
  736. package/components/render/select-input-not-required.html +15 -0
  737. package/components/render/select-input-required.html +15 -0
  738. package/components/render/select-input-small.html +12 -0
  739. package/components/render/small-section-spacing-definitions.html +36 -0
  740. package/components/render/small-section-spacing.html +16 -0
  741. package/components/render/solid-background-colors.html +89 -0
  742. package/components/render/solution-card-default-layout.html +132 -0
  743. package/components/render/solution-card-default.html +48 -0
  744. package/components/render/solution-card-layouts.html +561 -0
  745. package/components/render/solution-card-optional-certification-badges.html +56 -0
  746. package/components/render/solution-card-optional-solution-badges.html +56 -0
  747. package/components/render/solution-card-sizes.html +90 -0
  748. package/components/render/solution-card-small.html +48 -0
  749. package/components/render/switch-checked.html +15 -0
  750. package/components/render/switch-default.html +15 -0
  751. package/components/render/switch-disabled-readonly.html +15 -0
  752. package/components/render/switch-disabled.html +15 -0
  753. package/components/render/switch-global.html +20 -0
  754. package/components/render/tab-tile.html +1102 -0
  755. package/components/render/table-dark-theme-default-expandable-rows.html +130 -0
  756. package/components/render/table-dark-theme-default.html +142 -0
  757. package/components/render/table-default-dark.html +118 -0
  758. package/components/render/table-default-expandable-rows.html +130 -0
  759. package/components/render/table-default-medium.html +118 -0
  760. package/components/render/table-default-small.html +118 -0
  761. package/components/render/table-default.html +142 -0
  762. package/components/render/text-area-disabled.html +34 -0
  763. package/components/render/text-area-error.html +34 -0
  764. package/components/render/text-area-field.html +21 -0
  765. package/components/render/text-area-focus.html +34 -0
  766. package/components/render/text-area-hover.html +34 -0
  767. package/components/render/text-area-readonly.html +34 -0
  768. package/components/render/text-area-sizes.html +34 -0
  769. package/components/render/text-area-success.html +34 -0
  770. package/components/render/text-area.html +121 -0
  771. package/components/render/text-colors.html +3 -0
  772. package/components/render/text.html +48 -0
  773. package/components/render/typography-body-texts.html +26 -0
  774. package/components/render/typography-displays.html +8 -0
  775. package/components/render/typography-headers.html +11 -0
  776. package/components/render/typography-leads.html +4 -0
  777. package/components/render/typography-links-dark-theme.html +109 -0
  778. package/components/render/typography-links-light-theme.html +91 -0
  779. package/components/render/typography-links-secondary.html +35 -0
  780. package/components/render/typography-unordered-lists.html +15 -0
  781. package/components.html +13 -0
  782. package/design-system.css +1 -1
  783. package/docs/component-documentation/alerts.html +1657 -0
  784. package/docs/component-documentation/buttons/buttons-floating.html +1676 -0
  785. package/docs/component-documentation/buttons/buttons.html +1908 -0
  786. package/docs/component-documentation/cards/basic-cards.html +1424 -0
  787. package/docs/component-documentation/cards/category-cards.html +1950 -0
  788. package/docs/component-documentation/cards/contact-cards.html +1474 -0
  789. package/docs/component-documentation/cards/generic-cards.html +1534 -0
  790. package/docs/component-documentation/cards/solution-cards.html +1595 -0
  791. package/docs/component-documentation/dividers/dividers.html +839 -0
  792. package/docs/component-documentation/expanding-components/accordion.html +1832 -0
  793. package/docs/component-documentation/expanding-components/section.html +1511 -0
  794. package/docs/component-documentation/modal.html +983 -0
  795. package/docs/component-documentation/popover/popover.html +1082 -0
  796. package/docs/component-documentation/progress-bar.html +1143 -0
  797. package/docs/component-documentation/spacing.html +831 -0
  798. package/docs/component-documentation/table.html +2336 -0
  799. package/docs/content/icons/-overview.html +848 -0
  800. package/docs/content/icons/icons-flat.html +839 -0
  801. package/docs/content/icons/icons-rich.html +839 -0
  802. package/docs/content/typography/-overview.html +860 -0
  803. package/docs/content/typography/font-colors.html +900 -0
  804. package/docs/content/typography/links.html +1113 -0
  805. package/docs/content/typography/lists.html +854 -0
  806. package/docs/content/typography/text.html +919 -0
  807. package/docs/forms/-overview.html +881 -0
  808. package/docs/forms/checkbox.html +1007 -0
  809. package/docs/forms/drop-down-list.html +981 -0
  810. package/docs/forms/input-field.html +1316 -0
  811. package/docs/forms/radio-button.html +966 -0
  812. package/docs/forms/switch.html +964 -0
  813. package/docs/forms/text-area.html +1371 -0
  814. package/docs/guidelines-and-guides/creating-a-new-release.html +825 -0
  815. package/docs/guidelines-and-guides/css-and-scss-guidelines.html +814 -0
  816. package/docs/guidelines-and-guides/git-cheat-sheet.html +898 -0
  817. package/docs/guidelines-and-guides/installation-and-usage.html +812 -0
  818. package/docs/utilities/colors/background-colors.html +1029 -0
  819. package/docs/utilities/colors/font-colors.html +1002 -0
  820. package/docs/utilities/colors/overview.html +952 -0
  821. package/docs/utilities/spacing.html +1112 -0
  822. package/docs.html +13 -0
  823. package/icons.list.js +2432 -2432
  824. package/index.html +807 -0
  825. package/main.css +1 -1
  826. package/package.json +58 -58
  827. package/scss/_variables.scss +124 -124
  828. package/spacing.list.js +11 -11
  829. package/svg/rich/Okay.svg +33 -33
  830. package/svg/rich/acceleration.svg +39 -39
  831. package/svg/rich/add-content.svg +37 -37
  832. package/svg/rich/add-solution.svg +29 -29
  833. package/svg/rich/advanced-super-surveillance.svg +42 -42
  834. package/svg/rich/advocacy .svg +60 -60
  835. package/svg/rich/airplane.svg +67 -67
  836. package/svg/rich/ambition.svg +46 -46
  837. package/svg/rich/analytics-devices.svg +68 -68
  838. package/svg/rich/applications.svg +97 -97
  839. package/svg/rich/backup-important.svg +157 -157
  840. package/svg/rich/black-screens.svg +43 -43
  841. package/svg/rich/blueprint.svg +22 -22
  842. package/svg/rich/body-worn.svg +45 -45
  843. package/svg/rich/book-a-demo-notification.svg +38 -38
  844. package/svg/rich/book-a-demo.svg +34 -34
  845. package/svg/rich/booking.svg +49 -49
  846. package/svg/rich/browser.svg +32 -32
  847. package/svg/rich/build.svg +34 -34
  848. package/svg/rich/building-medium.svg +66 -66
  849. package/svg/rich/cal-monthly.svg +324 -324
  850. package/svg/rich/cal-weekly.svg +173 -173
  851. package/svg/rich/calendar.svg +25 -25
  852. package/svg/rich/cam-group-small.svg +84 -84
  853. package/svg/rich/camera-analogue.svg +27 -27
  854. package/svg/rich/camera-memory.svg +25 -25
  855. package/svg/rich/car.svg +41 -41
  856. package/svg/rich/care.svg +16 -16
  857. package/svg/rich/catalogue.svg +22 -22
  858. package/svg/rich/certification.svg +25 -25
  859. package/svg/rich/checklist.svg +22 -22
  860. package/svg/rich/checkmark-badge.svg +11 -11
  861. package/svg/rich/checkmark.svg +11 -11
  862. package/svg/rich/clock-24-7.svg +77 -77
  863. package/svg/rich/co-working.svg +104 -104
  864. package/svg/rich/coffee.svg +60 -60
  865. package/svg/rich/community.svg +184 -184
  866. package/svg/rich/company.svg +32 -32
  867. package/svg/rich/complete-flow.svg +30 -30
  868. package/svg/rich/consumer.svg +47 -47
  869. package/svg/rich/contact-illustration.svg +13 -13
  870. package/svg/rich/contact-notification.svg +17 -17
  871. package/svg/rich/crime.svg +29 -29
  872. package/svg/rich/crowd-management.svg +47 -47
  873. package/svg/rich/customer-stories.svg +23 -23
  874. package/svg/rich/customizable.svg +19 -19
  875. package/svg/rich/cyber-security.svg +131 -131
  876. package/svg/rich/dashboard.svg +43 -43
  877. package/svg/rich/decision-making.svg +19 -19
  878. package/svg/rich/deployment-device.svg +66 -66
  879. package/svg/rich/design-animated.svg +51 -51
  880. package/svg/rich/design.svg +24 -24
  881. package/svg/rich/devices-web.svg +56 -56
  882. package/svg/rich/devices.svg +29 -29
  883. package/svg/rich/discount.svg +22 -22
  884. package/svg/rich/document.svg +24 -24
  885. package/svg/rich/documentation.svg +79 -79
  886. package/svg/rich/dome-cam-8.svg +84 -84
  887. package/svg/rich/dome-cam.svg +16 -16
  888. package/svg/rich/download-illustration.svg +49 -49
  889. package/svg/rich/e-learning.svg +42 -42
  890. package/svg/rich/emergency.svg +44 -44
  891. package/svg/rich/employees.svg +37 -37
  892. package/svg/rich/end-user.svg +28 -28
  893. package/svg/rich/expertise.svg +47 -47
  894. package/svg/rich/explore.svg +50 -50
  895. package/svg/rich/extension.svg +63 -63
  896. package/svg/rich/failover.svg +33 -33
  897. package/svg/rich/faq.svg +23 -23
  898. package/svg/rich/feedback-notification.svg +21 -21
  899. package/svg/rich/feedback.svg +17 -17
  900. package/svg/rich/find.svg +28 -28
  901. package/svg/rich/flexibility.svg +13 -13
  902. package/svg/rich/form.svg +26 -26
  903. package/svg/rich/get-leads.svg +73 -73
  904. package/svg/rich/getting-started.svg +29 -29
  905. package/svg/rich/global-partner-network.svg +978 -978
  906. package/svg/rich/growth-data.svg +56 -56
  907. package/svg/rich/happiness.svg +29 -29
  908. package/svg/rich/hardware-applications-software.svg +165 -165
  909. package/svg/rich/hardware-services-documentation.svg +47 -47
  910. package/svg/rich/hardware.svg +22 -22
  911. package/svg/rich/intelligence.svg +43 -43
  912. package/svg/rich/interconnect.svg +39 -39
  913. package/svg/rich/investigation.svg +34 -34
  914. package/svg/rich/join.svg +78 -78
  915. package/svg/rich/key-features.svg +38 -38
  916. package/svg/rich/languages.svg +49 -49
  917. package/svg/rich/license-governance.svg +45 -45
  918. package/svg/rich/license-key.svg +13 -13
  919. package/svg/rich/like-notification.svg +43 -43
  920. package/svg/rich/listen.svg +13 -13
  921. package/svg/rich/live-streaming.svg +93 -93
  922. package/svg/rich/logged-in.svg +14 -14
  923. package/svg/rich/lpr.svg +59 -59
  924. package/svg/rich/marketplace-challenges-assist-people-feel-safe-leaving.svg +105 -105
  925. package/svg/rich/marketplace-challenges-assist-people-in-finding-their-vehicles.svg +124 -124
  926. package/svg/rich/marketplace-challenges-avoid-employee-theft.svg +169 -169
  927. package/svg/rich/marketplace-challenges-control-access-to-restricted-areas.svg +104 -104
  928. package/svg/rich/marketplace-challenges-discover-inefficiencies-in-cargo-movement.svg +130 -130
  929. package/svg/rich/marketplace-challenges-find-lost-children.svg +87 -87
  930. package/svg/rich/marketplace-challenges-gather-evidence-for-criminal-investigation.svg +172 -172
  931. package/svg/rich/marketplace-challenges-improve-wait-time-in-lines.svg +375 -375
  932. package/svg/rich/marketplace-challenges-money-disputes-with-customers.svg +157 -157
  933. package/svg/rich/marketplace-challenges-personalized-customer-experience.svg +127 -127
  934. package/svg/rich/marketplace-challenges-prevent-multiple-people-from-entering-a-door-on-a-single-access-badge.svg +245 -245
  935. package/svg/rich/marketplace-challenges-provide-evidence-against-lawsuit.svg +270 -270
  936. package/svg/rich/marketplace-challenges-react-to-confrontations-before-they-escalate.svg +176 -176
  937. package/svg/rich/marketplace-challenges-reduce-property-damage.svg +381 -381
  938. package/svg/rich/marketplace-challenges-reduce-workplace-accidents.svg +172 -172
  939. package/svg/rich/marketplace-challenges-respond-to-medical-emergencies.svg +179 -179
  940. package/svg/rich/marketplace-challenges-situational-awareness-to-response-teams.svg +330 -330
  941. package/svg/rich/marketplace-challenges-understand-customer-behavior.svg +455 -455
  942. package/svg/rich/marketplace-challenges-vandalism.svg +120 -120
  943. package/svg/rich/marketplace-collect.svg +121 -121
  944. package/svg/rich/marketplace-filter.svg +54 -54
  945. package/svg/rich/marketplace-industries-airports.svg +380 -380
  946. package/svg/rich/marketplace-industries-art-and-entertainment.svg +170 -170
  947. package/svg/rich/marketplace-industries-city-surveillance.svg +572 -572
  948. package/svg/rich/marketplace-industries-construction.svg +253 -253
  949. package/svg/rich/marketplace-industries-critical-infrastructure.svg +292 -292
  950. package/svg/rich/marketplace-industries-education.svg +291 -291
  951. package/svg/rich/marketplace-industries-finance-and-insurance.svg +140 -140
  952. package/svg/rich/marketplace-industries-healthcare.svg +207 -207
  953. package/svg/rich/marketplace-industries-information-technology.svg +250 -250
  954. package/svg/rich/marketplace-industries-manufacturing.svg +175 -175
  955. package/svg/rich/marketplace-industries-public-administration.svg +349 -349
  956. package/svg/rich/marketplace-industries-public-transport.svg +303 -303
  957. package/svg/rich/marketplace-industries-retail.svg +392 -392
  958. package/svg/rich/marketplace-industries-seaports.svg +335 -335
  959. package/svg/rich/marketplace-industries-trafic-monitoring.svg +255 -255
  960. package/svg/rich/marketplace-industries-utilities.svg +211 -211
  961. package/svg/rich/marketplace-interface.svg +76 -76
  962. package/svg/rich/marketplace-practice-access-control.svg +117 -117
  963. package/svg/rich/marketplace-practice-business-intelligence.svg +89 -89
  964. package/svg/rich/marketplace-practice-business-solutions.svg +195 -195
  965. package/svg/rich/marketplace-practice-central-monitoring.svg +505 -505
  966. package/svg/rich/marketplace-practice-cloud-and-managed-services.svg +75 -75
  967. package/svg/rich/marketplace-practice-communication.svg +187 -187
  968. package/svg/rich/marketplace-practice-crisis-emergency.svg +160 -160
  969. package/svg/rich/marketplace-practice-cyber-security.svg +141 -141
  970. package/svg/rich/marketplace-practice-detection-and-deterrence.svg +164 -164
  971. package/svg/rich/marketplace-practice-digital-infrastructure.svg +197 -197
  972. package/svg/rich/marketplace-practice-facilities-management.svg +332 -332
  973. package/svg/rich/marketplace-practice-fire-and-life-safety.svg +168 -168
  974. package/svg/rich/marketplace-practice-home-automation-iot.svg +161 -161
  975. package/svg/rich/marketplace-practice-intrusion-and-alarm.svg +301 -301
  976. package/svg/rich/marketplace-practice-investigation.svg +157 -157
  977. package/svg/rich/marketplace-practice-it-hardware-and-equipment.svg +254 -254
  978. package/svg/rich/marketplace-practice-privacy-protection.svg +118 -118
  979. package/svg/rich/marketplace-practice-smart-city.svg +351 -351
  980. package/svg/rich/marketplace-practice-surveillance.svg +72 -72
  981. package/svg/rich/marketplace-practice-tracking-and-monitoring.svg +178 -178
  982. package/svg/rich/marketplace-practice-vehicles-and-traffic.svg +227 -227
  983. package/svg/rich/marketplace-solution-service.svg +75 -75
  984. package/svg/rich/milestone-global-offices-illustration.svg +49 -49
  985. package/svg/rich/milestone-in the-media.svg +49 -49
  986. package/svg/rich/mobile-support.svg +40 -40
  987. package/svg/rich/my-milestone.svg +28 -28
  988. package/svg/rich/network.svg +24 -24
  989. package/svg/rich/newspaper.svg +20 -20
  990. package/svg/rich/no-1.svg +50 -50
  991. package/svg/rich/no-backup.svg +30 -30
  992. package/svg/rich/one-hub.svg +71 -71
  993. package/svg/rich/open-platform-community.svg +144 -144
  994. package/svg/rich/open-platform.svg +10 -10
  995. package/svg/rich/outdated-hardware.svg +53 -53
  996. package/svg/rich/partnership.svg +39 -39
  997. package/svg/rich/passion.svg +41 -41
  998. package/svg/rich/planet.svg +75 -75
  999. package/svg/rich/play.svg +10 -10
  1000. package/svg/rich/press-release.svg +30 -30
  1001. package/svg/rich/product-overview-illustration.svg +49 -49
  1002. package/svg/rich/project-animated.svg +99 -99
  1003. package/svg/rich/project.svg +18 -18
  1004. package/svg/rich/promotion.svg +25 -25
  1005. package/svg/rich/publish.svg +12 -12
  1006. package/svg/rich/quote.svg +104 -104
  1007. package/svg/rich/reaction-mode.svg +54 -54
  1008. package/svg/rich/releases.svg +17 -17
  1009. package/svg/rich/reliable.svg +24 -24
  1010. package/svg/rich/reminder.svg +33 -33
  1011. package/svg/rich/save-money.svg +27 -27
  1012. package/svg/rich/scalable.svg +16 -16
  1013. package/svg/rich/scale-balance.svg +101 -101
  1014. package/svg/rich/scale-up.svg +11 -11
  1015. package/svg/rich/screen-recording.svg +259 -259
  1016. package/svg/rich/searching.svg +115 -115
  1017. package/svg/rich/secure-gdpr.svg +52 -52
  1018. package/svg/rich/secure.svg +49 -49
  1019. package/svg/rich/self-service-support.svg +15 -15
  1020. package/svg/rich/service-coding.svg +44 -44
  1021. package/svg/rich/sign-up.svg +37 -37
  1022. package/svg/rich/single-site.svg +31 -31
  1023. package/svg/rich/smart-wall-person.svg +135 -135
  1024. package/svg/rich/smart-wall.svg +96 -96
  1025. package/svg/rich/solutions-design-tool.svg +234 -234
  1026. package/svg/rich/submit-for-feedback.svg +28 -28
  1027. package/svg/rich/subscriptions.svg +37 -37
  1028. package/svg/rich/support-call.svg +29 -29
  1029. package/svg/rich/support-chat-female.svg +48 -48
  1030. package/svg/rich/support-chat-male.svg +48 -48
  1031. package/svg/rich/support-technical.svg +17 -17
  1032. package/svg/rich/system-builder.svg +24 -24
  1033. package/svg/rich/tags.svg +24 -24
  1034. package/svg/rich/target.svg +15 -15
  1035. package/svg/rich/time-to-market.svg +53 -53
  1036. package/svg/rich/tools.svg +37 -37
  1037. package/svg/rich/trade-show.svg +90 -90
  1038. package/svg/rich/transaction.svg +56 -56
  1039. package/svg/rich/translation.svg +17 -17
  1040. package/svg/rich/update-content-then-publish.svg +77 -77
  1041. package/svg/rich/update-content.svg +55 -55
  1042. package/svg/rich/user-review.svg +22 -22
  1043. package/svg/rich/verification.svg +37 -37
  1044. package/svg/rich/video-cookie.svg +78 -78
  1045. package/svg/rich/vps.svg +39 -39
  1046. package/svg/rich/warning.svg +48 -48
  1047. package/svg/rich/watch.svg +19 -19
  1048. package/svg/rich/webinar.svg +49 -49
  1049. package/svg/rich/well-being.svg +67 -67
  1050. package/svg/rich/world-leading.svg +258 -258
  1051. package/svg/rich/xprotect-access-anywhere.svg +86 -86
  1052. package/svg/rich/xprotect-compare-matrix.svg +40 -40
  1053. package/svg/rich/xprotect-compare-products.svg +232 -232
  1054. package/svg/rich/xprotect-compare-releases.svg +208 -208
  1055. package/svg/rich/xprotect.svg +31 -31
  1056. package/svg/rich/youtube.svg +12 -12
  1057. package/text.list.js +47 -47
  1058. package/themes/mandelbrot/css/aqua.css +1 -0
  1059. package/themes/mandelbrot/css/black.css +1 -0
  1060. package/themes/mandelbrot/css/blue.css +1 -0
  1061. package/themes/mandelbrot/css/default.css +1 -0
  1062. package/themes/mandelbrot/css/fuchsia.css +1 -0
  1063. package/themes/mandelbrot/css/green.css +1 -0
  1064. package/themes/mandelbrot/css/grey.css +1 -0
  1065. package/themes/mandelbrot/css/highlight.css +1 -0
  1066. package/themes/mandelbrot/css/lime.css +1 -0
  1067. package/themes/mandelbrot/css/maroon.css +1 -0
  1068. package/themes/mandelbrot/css/navy.css +1 -0
  1069. package/themes/mandelbrot/css/olive.css +1 -0
  1070. package/themes/mandelbrot/css/orange.css +1 -0
  1071. package/themes/mandelbrot/css/purple.css +1 -0
  1072. package/themes/mandelbrot/css/red.css +1 -0
  1073. package/themes/mandelbrot/css/teal.css +1 -0
  1074. package/themes/mandelbrot/css/white.css +1 -0
  1075. package/themes/mandelbrot/css/yellow.css +1 -0
  1076. package/themes/mandelbrot/favicon.ico +0 -0
  1077. package/themes/mandelbrot/fonts/OpenSans-Italic.woff +0 -0
  1078. package/themes/mandelbrot/fonts/OpenSans-Italic.woff2 +0 -0
  1079. package/themes/mandelbrot/fonts/OpenSans-Regular.woff +0 -0
  1080. package/themes/mandelbrot/fonts/OpenSans-Regular.woff2 +0 -0
  1081. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff +0 -0
  1082. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff2 +0 -0
  1083. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff +0 -0
  1084. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff2 +0 -0
  1085. package/themes/mandelbrot/fonts/hack-bold-webfont.woff +0 -0
  1086. package/themes/mandelbrot/fonts/hack-bold-webfont.woff2 +0 -0
  1087. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff +0 -0
  1088. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff2 +0 -0
  1089. package/themes/mandelbrot/fonts/hack-italic-webfont.woff +0 -0
  1090. package/themes/mandelbrot/fonts/hack-italic-webfont.woff2 +0 -0
  1091. package/themes/mandelbrot/fonts/hack-regular-webfont.woff +0 -0
  1092. package/themes/mandelbrot/fonts/hack-regular-webfont.woff2 +0 -0
  1093. package/themes/mandelbrot/img/favicon.png +0 -0
  1094. package/themes/mandelbrot/img/icon-drag--horizontal.svg +3 -0
  1095. package/themes/mandelbrot/img/icon-drag--vertical.svg +3 -0
  1096. package/themes/mandelbrot/img/icon-navigation-closed-ltr.svg +3 -0
  1097. package/themes/mandelbrot/img/icon-navigation-closed-rtl.svg +3 -0
  1098. package/themes/mandelbrot/img/icon-navigation-opened.svg +3 -0
  1099. package/themes/mandelbrot/img/icon-window.svg +3 -0
  1100. package/themes/mandelbrot/img/loader.svg +37 -0
  1101. package/themes/mandelbrot/js/mandelbrot.js +2 -0
  1102. package/themes/mandelbrot/js/mandelbrot.js.map +1 -0
package/docs/component-documentation/expanding-components/section.html ADDED
@@ -0,0 +1,1511 @@
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>Section | 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">Section</h1>
72
+
73
+
74
+
75
+
76
+ </div>
77
+
78
+ <div class="Document-content">
79
+
80
+
81
+
82
+ <div class="Prose">
83
+
84
+
85
+
86
+
87
+
88
+ <h2 id="the-expanding-sections-are-used-when-you-wanted-to-show-users-limited-information-until-the-user-expands-a-section">The expanding sections are used when you wanted to show users limited information until the user expands a section</h2>
89
+ <p>Below you will find the different definitions and options to create an expanding section component</p>
90
+ <h3 id="table-of-contents">Table of contents</h3>
91
+ <div class="row">
92
+ <div class="col-12">
93
+ <ul class="document__unordered-list">
94
+ <li class="document__unordered-list-item">
95
+ <a class="msds-link" href="#overview">Overview</a>
96
+ <ul class="document__unordered-list">
97
+ <li class="document__unordered-list-item">
98
+ <a class="msds-link" href="#global-definition">Global Definition</a>
99
+ </li>
100
+ </ul>
101
+ </li>
102
+ <li class="document__unordered-list-item">
103
+ <a class="msds-link" href="#section-using-checkboxes">Section Using Checkboxes</a>
104
+ </li>
105
+ <li class="document__unordered-list-item">
106
+ <a class="msds-link" href="#section-using-radio-buttons">Section Using Radio Buttons</a>
107
+ </li>
108
+ <li class="document__unordered-list-item">
109
+ <a class="msds-link" href="#section-with-nested-components">Section With Nested Components</a>
110
+ </li>
111
+ <li class="document__unordered-list-item">
112
+ <a class="msds-link" href="#section-dark-theme">Section Dark Theme</a>
113
+ </li>
114
+ </ul>
115
+ </div>
116
+ </div>
117
+
118
+ <h2 id="overview">Overview</h2>
119
+ <h3 id="global-definition">Global Definition</h3>
120
+ <p>Expanding Sections are setup to take up the full width of a bootstrap column, and to contain other components inside.</p>
121
+ <p>Each expanding component is based on a global CSS class called <code>"msds-expanding-section"</code>. It is important to include this class first as this is the main HTML class of the component. Without this HTML class, you cannot utilize component.</p>
122
+ <p>Ensure that each section element <code>input</code> has an id and that the label for for that element has a matching <code>for</code> attribute</p>
123
+ <h4 id="input">Input</h4>
124
+ <pre><code class="hljs language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"how-do-i-find-marketplace"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>/&gt;</span>
125
+ </code></pre><h4 id="label">Label</h4>
126
+ <pre><code class="hljs language-html"> <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"how-do-i-find-marketplace"</span>&gt;</span>
127
+ </code></pre><p>There are 2 implementations of Expanding Sections, a light themed component a dark themed component.
128
+ Each implementation can be setup to use checkboxes or radio buttons, based on the desired behavior.</p>
129
+ <h4 id="the-default-expanding-sections">The Default Expanding Sections</h4>
130
+ <ul>
131
+ <li>Expanding Sections using checkboxes – the checkboxes allow multiple expanding section elements to be open at any time.</li>
132
+ <li>Expanding Sections using radio buttons – the radio buttons only allow one expanding section element to be open at any time.</li>
133
+ </ul>
134
+ <h3 id="section-using-checkboxes">Section using checkboxes</h3>
135
+ <p>To use “expanding section” you need to add the following HTML class: <code>"msds-section"</code>.
136
+ The Section with checkboxes can have multiple sections open at once.</p>
137
+ <div class="element-preview">
138
+ <div class="element-preview__inner"><div class="container">
139
+ <div class="row">
140
+ <div class="msds-expanding-section msds-bg-gray-gradient-2">
141
+ <div class="col-12">
142
+ <input id="expanding-section-1-checkbox" class="msds-expanding-section__checkbox" type="checkbox"/>
143
+ <label class="msds-expanding-section__buttons-container" for="expanding-section-1-checkbox">
144
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
145
+ msds-expanding-section--closed">
146
+ <svg class="msds-icon">
147
+ <use href="../../../msds-spritemap.svg#right-arrow"></use>
148
+ </svg>
149
+ <div class="msds-expanding-section__button-text">
150
+ Show more
151
+ </div>
152
+ </div>
153
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
154
+ msds-expanding-section--open">
155
+ <svg class="msds-icon">
156
+ <use href="../../../msds-spritemap.svg#cross"></use>
157
+ </svg>
158
+ <div class="msds-expanding-section__button-text">
159
+ Show less
160
+ </div>
161
+ </div>
162
+ </label>
163
+ </input>
164
+ <div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
165
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
166
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
167
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
168
+ varius molestie mauris, in rhoncus purus bibendum a.
169
+ </div>
170
+ </div>
171
+ </div>
172
+ <div class="msds-expanding-section msds-bg-gray-gradient-2">
173
+ <div class="col-12">
174
+ <input id="expanding-section-2-checkbox" class="msds-expanding-section__checkbox" type="checkbox"/>
175
+ <label class="msds-expanding-section__buttons-container" for="expanding-section-2-checkbox">
176
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
177
+ msds-expanding-section--closed">
178
+ <svg class="msds-icon">
179
+ <use href="../../../msds-spritemap.svg#right-arrow"></use>
180
+ </svg>
181
+ <div class="msds-expanding-section__button-text">
182
+ Show more
183
+ </div>
184
+ </div>
185
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
186
+ msds-expanding-section--open">
187
+ <svg class="msds-icon">
188
+ <use href="../../../msds-spritemap.svg#cross"></use>
189
+ </svg>
190
+ <div class="msds-expanding-section__button-text">
191
+ Show less
192
+ </div>
193
+ </div>
194
+ </label>
195
+ </input>
196
+ <div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
197
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
198
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
199
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
200
+ varius molestie mauris, in rhoncus purus bibendum a.
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div></div>
206
+ </div>
207
+
208
+ <p>Below is an example of the Milestone Default Expanding Section that you can copy into your solution to utilize the component. </p>
209
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
210
+ <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>
211
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section msds-bg-gray-gradient-2"</span>&gt;</span>
212
+ <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>
213
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expanding-section-1-checkbox"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__checkbox"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>/&gt;</span>
214
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__buttons-container"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"expanding-section-1-checkbox"</span>&gt;</span>
215
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
216
+ msds-expanding-section--closed"</span>&gt;</span>
217
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
218
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
219
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
220
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
221
+ Show more
222
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
223
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
224
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
225
+ msds-expanding-section--open"</span>&gt;</span>
226
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
227
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#cross"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
228
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
229
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
230
+ Show less
231
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
232
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
233
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
234
+ <span class="hljs-tag">&lt;/<span class="hljs-name">input</span>&gt;</span>
235
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__content msds-text-body-1 msds-text-gray-9"</span>&gt;</span>
236
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
237
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
238
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
239
+ varius molestie mauris, in rhoncus purus bibendum a.
240
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
241
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
242
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
243
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section msds-bg-gray-gradient-2"</span>&gt;</span>
244
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
245
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expanding-section-2-checkbox"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__checkbox"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>/&gt;</span>
246
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__buttons-container"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"expanding-section-2-checkbox"</span>&gt;</span>
247
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
248
+ msds-expanding-section--closed"</span>&gt;</span>
249
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
250
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
251
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
252
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
253
+ Show more
254
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
255
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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-floating msds-btn-floating--secondary msds-btn-floating--column
257
+ msds-expanding-section--open"</span>&gt;</span>
258
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
259
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#cross"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
260
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
261
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
262
+ Show less
263
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
264
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
265
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
266
+ <span class="hljs-tag">&lt;/<span class="hljs-name">input</span>&gt;</span>
267
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__content msds-text-body-1 msds-text-gray-9"</span>&gt;</span>
268
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
269
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
270
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
271
+ varius molestie mauris, in rhoncus purus bibendum a.
272
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
273
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
274
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
275
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
276
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="section-using-radio-buttons">Section using radio buttons</h3>
277
+ <p>To make use of expanding sections that can only have one element open at any time, change all the input types from checkbox to radio, and add a name property to the input tag. Ensure that all inputs have the same name <code>type=”checkbox”</code> to <code>type=”radio” name=”section”</code></p>
278
+ <div class="element-preview">
279
+ <div class="element-preview__inner"><div class="container">
280
+ <div class="row">
281
+ <div class="msds-expanding-section msds-bg-gray-gradient-2">
282
+ <div class="col-12">
283
+ <input id="expanding-section-1-radio" class="msds-expanding-section__checkbox" type="radio" name="section-level-1"/>
284
+ <label class="msds-expanding-section__buttons-container" for="expanding-section-1-radio">
285
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
286
+ msds-expanding-section--closed">
287
+ <svg class="msds-icon">
288
+ <use href="../../../msds-spritemap.svg#right-arrow"></use>
289
+ </svg>
290
+ <div class="msds-expanding-section__button-text">
291
+ Show more
292
+ </div>
293
+ </div>
294
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
295
+ msds-expanding-section--open">
296
+ <svg class="msds-icon">
297
+ <use href="../../../msds-spritemap.svg#cross"></use>
298
+ </svg>
299
+ <div class="msds-expanding-section__button-text">
300
+ Show less
301
+ </div>
302
+ </div>
303
+ </label>
304
+ </input>
305
+ <div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
306
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
307
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
308
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
309
+ varius molestie mauris, in rhoncus purus bibendum a.
310
+ </div>
311
+ </div>
312
+ </div>
313
+ <div class="msds-expanding-section msds-bg-gray-gradient-2">
314
+ <div class="col-12">
315
+ <input id="expanding-section-2-radio" class="msds-expanding-section__checkbox" type="radio" name="section-level-1"/>
316
+ <label class="msds-expanding-section__buttons-container" for="expanding-section-2-radio">
317
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
318
+ msds-expanding-section--closed">
319
+ <svg class="msds-icon">
320
+ <use href="../../../msds-spritemap.svg#right-arrow"></use>
321
+ </svg>
322
+ <div class="msds-expanding-section__button-text">
323
+ Show more
324
+ </div>
325
+ </div>
326
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
327
+ msds-expanding-section--open">
328
+ <svg class="msds-icon">
329
+ <use href="../../../msds-spritemap.svg#cross"></use>
330
+ </svg>
331
+ <div class="msds-expanding-section__button-text">
332
+ Show less
333
+ </div>
334
+ </div>
335
+ </label>
336
+ <div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
337
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
338
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
339
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
340
+ varius molestie mauris, in rhoncus purus bibendum a.
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div></div>
346
+ </div>
347
+
348
+ <p>Below is an example of the Milestone Expanding Section with radio buttons that you can copy into your solution to utilize the component. </p>
349
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
350
+ <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>
351
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section msds-bg-gray-gradient-2"</span>&gt;</span>
352
+ <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>
353
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expanding-section-1-radio"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__checkbox"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"section-level-1"</span>/&gt;</span>
354
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__buttons-container"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"expanding-section-1-radio"</span>&gt;</span>
355
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
356
+ msds-expanding-section--closed"</span>&gt;</span>
357
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
358
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
359
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
360
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
361
+ Show more
362
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
363
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
364
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
365
+ msds-expanding-section--open"</span>&gt;</span>
366
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
367
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#cross"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
368
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</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">"msds-expanding-section__button-text"</span>&gt;</span>
370
+ Show less
371
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
372
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
373
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
374
+ <span class="hljs-tag">&lt;/<span class="hljs-name">input</span>&gt;</span>
375
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__content msds-text-body-1 msds-text-gray-9"</span>&gt;</span>
376
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
377
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
378
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
379
+ varius molestie mauris, in rhoncus purus bibendum a.
380
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
381
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
382
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
383
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section msds-bg-gray-gradient-2"</span>&gt;</span>
384
+ <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>
385
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expanding-section-2-radio"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__checkbox"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"section-level-1"</span>/&gt;</span>
386
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__buttons-container"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"expanding-section-2-radio"</span>&gt;</span>
387
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
388
+ msds-expanding-section--closed"</span>&gt;</span>
389
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
390
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
391
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
392
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
393
+ Show more
394
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
395
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
396
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
397
+ msds-expanding-section--open"</span>&gt;</span>
398
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
399
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#cross"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
400
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
401
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
402
+ Show less
403
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
404
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
405
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
406
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__content msds-text-body-1 msds-text-gray-9"</span>&gt;</span>
407
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
408
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
409
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
410
+ varius molestie mauris, in rhoncus purus bibendum a.
411
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
412
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
413
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
414
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
415
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="section-dark-theme">Section dark theme</h3>
416
+ <p>To use “dark themed section” you need to add the following CCS class: <code>" msds-section--dark"</code>.</p>
417
+ <div class="element-preview">
418
+ <div class="element-preview__inner"><div class="container">
419
+ <div class="row">
420
+ <div class="msds-expanding-section msds-expanding-section--dark msds-bg-alt-blue-2">
421
+ <div class="col-12">
422
+ <input id="expanding-section-1-dark" class="msds-expanding-section__checkbox" type="radio" name="section-level-1-dark"/>
423
+ <label class="msds-expanding-section__buttons-container" for="expanding-section-1-dark">
424
+ <div class="msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
425
+ msds-expanding-section--closed">
426
+ <svg class="msds-icon">
427
+ <use href="../../../msds-spritemap.svg#right-arrow"></use>
428
+ </svg>
429
+ <div class="msds-expanding-section__button-text">
430
+ Show more
431
+ </div>
432
+ </div>
433
+ <div class="msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
434
+ msds-expanding-section--open">
435
+ <svg class="msds-icon">
436
+ <use href="../../../msds-spritemap.svg#cross"></use>
437
+ </svg>
438
+ <div class="msds-expanding-section__button-text">
439
+ Show less
440
+ </div>
441
+ </div>
442
+ </label>
443
+ </input>
444
+ <div class="msds-expanding-section__content msds-text-body-1 msds-text-white">
445
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
446
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
447
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
448
+ varius molestie mauris, in rhoncus purus bibendum a.
449
+ </div>
450
+ </div>
451
+ </div>
452
+ <div class="msds-expanding-section msds-expanding-section--dark msds-bg-alt-blue-2">
453
+ <div class="col-12">
454
+ <input id="expanding-section-2-dark" class="msds-expanding-section__checkbox" type="radio" name="section-level-1-dark"/>
455
+ <label class="msds-expanding-section__buttons-container" for="expanding-section-2-dark">
456
+ <div class="msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
457
+ msds-expanding-section--closed">
458
+ <svg class="msds-icon">
459
+ <use href="../../../msds-spritemap.svg#right-arrow"></use>
460
+ </svg>
461
+ <div class="msds-expanding-section__button-text">
462
+ Show more
463
+ </div>
464
+ </div>
465
+ <div class="msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
466
+ msds-expanding-section--open">
467
+ <svg class="msds-icon">
468
+ <use href="../../../msds-spritemap.svg#cross"></use>
469
+ </svg>
470
+ <div class="msds-expanding-section__button-text">
471
+ Show less
472
+ </div>
473
+ </div>
474
+ </label>
475
+ </input>
476
+ <div class="msds-expanding-section__content msds-text-body-1 msds-text-white">
477
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
478
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
479
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
480
+ varius molestie mauris, in rhoncus purus bibendum a.
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div></div>
486
+ </div>
487
+
488
+ <p>Below is an example of the Milestone Dark Themed Expanding Section that you can copy into your solution to utilize the component. </p>
489
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
490
+ <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>
491
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section msds-expanding-section--dark msds-bg-alt-blue-2"</span>&gt;</span>
492
+ <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>
493
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expanding-section-1-dark"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__checkbox"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"section-level-1-dark"</span>/&gt;</span>
494
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__buttons-container"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"expanding-section-1-dark"</span>&gt;</span>
495
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
496
+ msds-expanding-section--closed"</span>&gt;</span>
497
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
498
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
499
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
500
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
501
+ Show more
502
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
503
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
504
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
505
+ msds-expanding-section--open"</span>&gt;</span>
506
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
507
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#cross"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
508
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
509
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
510
+ Show less
511
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
512
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
513
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
514
+ <span class="hljs-tag">&lt;/<span class="hljs-name">input</span>&gt;</span>
515
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__content msds-text-body-1 msds-text-white"</span>&gt;</span>
516
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
517
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
518
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
519
+ varius molestie mauris, in rhoncus purus bibendum a.
520
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
521
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
522
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
523
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section msds-expanding-section--dark msds-bg-alt-blue-2"</span>&gt;</span>
524
+ <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>
525
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expanding-section-2-dark"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__checkbox"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"section-level-1-dark"</span>/&gt;</span>
526
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__buttons-container"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"expanding-section-2-dark"</span>&gt;</span>
527
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
528
+ msds-expanding-section--closed"</span>&gt;</span>
529
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
530
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
531
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
532
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
533
+ Show more
534
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
535
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
536
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
537
+ msds-expanding-section--open"</span>&gt;</span>
538
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
539
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#cross"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
540
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
541
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
542
+ Show less
543
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
544
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
545
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
546
+ <span class="hljs-tag">&lt;/<span class="hljs-name">input</span>&gt;</span>
547
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__content msds-text-body-1 msds-text-white"</span>&gt;</span>
548
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
549
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
550
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
551
+ varius molestie mauris, in rhoncus purus bibendum a.
552
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
553
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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>&gt;</span>
556
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="section-with-nested-components">Section with nested components</h3>
557
+ <p>Components can be nested inside of Expanding sections by putting your desired components markup inside of an expanding section.</p>
558
+ <div class="element-preview">
559
+ <div class="element-preview__inner"><div class="container">
560
+ <div class="row">
561
+ <div class="msds-expanding-section msds-bg-gray-gradient-2">
562
+ <div class="col-12">
563
+ <input id="expanding-section-1-nested" class="msds-expanding-section__checkbox" type="radio"
564
+ name="section-level-1-nested" />
565
+ <label class="msds-expanding-section__buttons-container" for="expanding-section-1-nested">
566
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
567
+ msds-expanding-section--closed">
568
+ <svg class="msds-icon">
569
+ <use href="../../../msds-spritemap.svg#right-arrow"></use>
570
+ </svg>
571
+ <div class="msds-expanding-section__button-text">
572
+ Show more
573
+ </div>
574
+ </div>
575
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
576
+ msds-expanding-section--open">
577
+ <svg class="msds-icon">
578
+ <use href="../../../msds-spritemap.svg#cross"></use>
579
+ </svg>
580
+ <div class="msds-expanding-section__button-text">
581
+ Show less
582
+ </div>
583
+ </div>
584
+ </label>
585
+ <div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
586
+ <div class="msds-accordion">
587
+ <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
588
+ <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_checkbox-medium-1">
589
+ <label class="msds-accordion__list-item-header" for="accordion-list-item_checkbox-medium-1">
590
+ <span class="msds-accordion__list-item-header-title">Accordion List Item 1 - Multiple List items Open At Any Time</span>
591
+ <span class="msds-accordion__list-item-header-icon">
592
+ <svg>
593
+ <use href="../../../msds-spritemap.svg#right-arrow" />
594
+ </svg>
595
+ </span>
596
+ </label>
597
+ <div class="msds-accordion__list-item-body">
598
+ <div class="msds-accordion__list-item-subtitle">
599
+ This is the Accordion List Item 1 long title
600
+ </div>
601
+ <div class="msds-accordion__list-item-description">
602
+ <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
603
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
604
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
605
+ irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
606
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
607
+ deserunt mollit anim id est laborum.
608
+ </span>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
613
+ <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_checkbox-medium-2">
614
+ <label class="msds-accordion__list-item-header" for="accordion-list-item_checkbox-medium-2">
615
+ <span class="msds-accordion__list-item-header-title">Accordion List Checkbox Item 1 - Multiple List items Open At Any Time</span>
616
+ <span class="msds-accordion__list-item-header-icon">
617
+ <svg>
618
+ <use href="../../../msds-spritemap.svg#right-arrow" />
619
+ </svg>
620
+ </span>
621
+ </label>
622
+ <div class="msds-accordion__list-item-body">
623
+ <div class="msds-accordion__list-item-subtitle">
624
+ This is the Accordion List Item 1 long title
625
+ </div>
626
+ <div class="msds-accordion__list-item-description">
627
+ <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
628
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
629
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
630
+ irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
631
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
632
+ deserunt mollit anim id est laborum.
633
+ </span>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ <div class="msds-expanding-section msds-bg-gray-gradient-2">
642
+ <div class="col-12">
643
+ <input id="expanding-section-2-nested" class="msds-expanding-section__checkbox" type="radio"
644
+ name="section-level-1-nested" />
645
+ <label class="msds-expanding-section__buttons-container" for="expanding-section-2-nested">
646
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
647
+ msds-expanding-section--closed">
648
+ <svg class="msds-icon">
649
+ <use href="../../../msds-spritemap.svg#right-arrow"></use>
650
+ </svg>
651
+ <div class="msds-expanding-section__button-text">
652
+ Show more
653
+ </div>
654
+ </div>
655
+ <div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
656
+ msds-expanding-section--open">
657
+ <svg class="msds-icon">
658
+ <use href="../../../msds-spritemap.svg#cross"></use>
659
+ </svg>
660
+ <div class="msds-expanding-section__button-text">
661
+ Show less
662
+ </div>
663
+ </div>
664
+ </label>
665
+ <div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
666
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
667
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
668
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
669
+ varius molestie mauris, in rhoncus purus bibendum a.
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </div></div>
675
+ </div>
676
+
677
+ <p>Below is an example below to get an overview of nesting components inside an expanding section</p>
678
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
679
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"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">"msds-expanding-section msds-bg-gray-gradient-2"</span>&gt;</span>
681
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
682
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expanding-section-1-nested"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__checkbox"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>
683
+ <span class="hljs-attr">name</span>=<span class="hljs-string">"section-level-1-nested"</span> /&gt;</span>
684
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__buttons-container"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"expanding-section-1-nested"</span>&gt;</span>
685
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
686
+ msds-expanding-section--closed"</span>&gt;</span>
687
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
688
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
689
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
690
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
691
+ Show more
692
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
695
+ msds-expanding-section--open"</span>&gt;</span>
696
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
697
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#cross"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
698
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
699
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
700
+ Show less
701
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
702
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
703
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
704
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__content msds-text-body-1 msds-text-gray-9"</span>&gt;</span>
705
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion"</span>&gt;</span>
706
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate"</span>&gt;</span>
707
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-list-item_checkbox-medium-1"</span>&gt;</span>
708
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-list-item_checkbox-medium-1"</span>&gt;</span>
709
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-header-title"</span>&gt;</span>Accordion List Item 1 - Multiple List items Open At Any Time<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
710
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-header-icon"</span>&gt;</span>
711
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span>&gt;</span>
712
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
713
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
714
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
715
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
716
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-body"</span>&gt;</span>
717
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-subtitle"</span>&gt;</span>
718
+ This is the Accordion List Item 1 long title
719
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
720
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-description"</span>&gt;</span>
721
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
722
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
723
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
724
+ irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
725
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
726
+ deserunt mollit anim id est laborum.
727
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
728
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
729
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
730
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
731
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate"</span>&gt;</span>
732
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-list-item_checkbox-medium-2"</span>&gt;</span>
733
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-list-item_checkbox-medium-2"</span>&gt;</span>
734
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-header-title"</span>&gt;</span>Accordion List Checkbox Item 1 - Multiple List items Open At Any Time<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
735
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-header-icon"</span>&gt;</span>
736
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span>&gt;</span>
737
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span> /&gt;</span>
738
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
739
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
740
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
741
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-body"</span>&gt;</span>
742
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-subtitle"</span>&gt;</span>
743
+ This is the Accordion List Item 1 long title
744
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
745
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-accordion__list-item-description"</span>&gt;</span>
746
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
747
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
748
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
749
+ irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
750
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
751
+ deserunt mollit anim id est laborum.
752
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
753
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
754
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
755
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
756
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
757
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
758
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
759
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
760
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section msds-bg-gray-gradient-2"</span>&gt;</span>
761
+ <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>
762
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expanding-section-2-nested"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__checkbox"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>
763
+ <span class="hljs-attr">name</span>=<span class="hljs-string">"section-level-1-nested"</span> /&gt;</span>
764
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__buttons-container"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"expanding-section-2-nested"</span>&gt;</span>
765
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
766
+ msds-expanding-section--closed"</span>&gt;</span>
767
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
768
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#right-arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
769
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
770
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
771
+ Show more
772
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">"msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
775
+ msds-expanding-section--open"</span>&gt;</span>
776
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
777
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../msds-spritemap.svg#cross"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
778
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
779
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__button-text"</span>&gt;</span>
780
+ Show less
781
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
782
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
783
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
784
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-expanding-section__content msds-text-body-1 msds-text-gray-9"</span>&gt;</span>
785
+ Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
786
+ ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
787
+ elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
788
+ varius molestie mauris, in rhoncus purus bibendum a.
789
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
790
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
791
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
792
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
793
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><script>
794
+ //Iniliazes JS each time a user changes the page - this is for fractle v1.3.0
795
+ dispatchEvent(new Event('load'));
796
+ </script>
797
+
798
+
799
+
800
+ </div>
801
+
802
+
803
+
804
+ </div>
805
+
806
+ </div>
807
+
808
+
809
+ </div>
810
+ </div>
811
+
812
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
813
+
814
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
815
+ <nav class="Navigation">
816
+
817
+
818
+ <div class="Navigation-group">
819
+
820
+ <div class="Tree" data-behaviour="tree" id="tree-components">
821
+ <div class="Tree-header">
822
+ <h3 class="Tree-title">components</h3>
823
+
824
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
825
+ <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>
826
+
827
+ </button>
828
+ </div>
829
+ <ul class="Tree-items Tree-depth-1">
830
+
831
+
832
+
833
+
834
+ <li class="Tree-item Tree-entity" data-role="item">
835
+ <a class="Tree-entityLink" href="../../../components/detail/tab-tile.html" data-pjax>
836
+ <span>Tab Tile</span>
837
+
838
+
839
+ <div class="Status Status--unlabelled">
840
+
841
+ <div class="Status-dots">
842
+
843
+
844
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
845
+
846
+
847
+ </div>
848
+
849
+ </div>
850
+
851
+
852
+ </a>
853
+ </li>
854
+
855
+
856
+
857
+ </ul>
858
+ </div>
859
+
860
+ </div>
861
+
862
+
863
+
864
+
865
+ <div class="Navigation-group">
866
+
867
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
868
+ <div class="Tree-header">
869
+ <h3 class="Tree-title">documentation</h3>
870
+
871
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
872
+ <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>
873
+
874
+ </button>
875
+ </div>
876
+ <ul class="Tree-items Tree-depth-1">
877
+
878
+
879
+
880
+
881
+ <li class="Tree-item Tree-entity" data-role="item">
882
+ <a class="Tree-entityLink" href="../../../index.html" data-pjax>
883
+ <span>Overview</span>
884
+
885
+ </a>
886
+ </li>
887
+
888
+
889
+
890
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
891
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
892
+ Content
893
+ </button>
894
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
895
+
896
+
897
+
898
+
899
+
900
+
901
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
902
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
903
+ Icons
904
+ </button>
905
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
906
+
907
+
908
+
909
+
910
+
911
+
912
+
913
+ <li class="Tree-item Tree-entity" data-role="item">
914
+ <a class="Tree-entityLink" href="../../content/icons/-overview.html" data-pjax>
915
+ <span>Overview</span>
916
+
917
+ </a>
918
+ </li>
919
+
920
+
921
+
922
+
923
+ <li class="Tree-item Tree-entity" data-role="item">
924
+ <a class="Tree-entityLink" href="../../content/icons/icons-flat.html" data-pjax>
925
+ <span>Icons Flat</span>
926
+
927
+ </a>
928
+ </li>
929
+
930
+
931
+
932
+
933
+ <li class="Tree-item Tree-entity" data-role="item">
934
+ <a class="Tree-entityLink" href="../../content/icons/icons-rich.html" data-pjax>
935
+ <span>Icons Rich</span>
936
+
937
+ </a>
938
+ </li>
939
+
940
+
941
+
942
+ </ul>
943
+ </li>
944
+
945
+
946
+
947
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
948
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
949
+ Typography
950
+ </button>
951
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
952
+
953
+
954
+
955
+
956
+
957
+
958
+
959
+ <li class="Tree-item Tree-entity" data-role="item">
960
+ <a class="Tree-entityLink" href="../../content/typography/-overview.html" data-pjax>
961
+ <span>Overview</span>
962
+
963
+ </a>
964
+ </li>
965
+
966
+
967
+
968
+
969
+ <li class="Tree-item Tree-entity" data-role="item">
970
+ <a class="Tree-entityLink" href="../../content/typography/font-colors.html" data-pjax>
971
+ <span>Font Colors</span>
972
+
973
+ </a>
974
+ </li>
975
+
976
+
977
+
978
+
979
+ <li class="Tree-item Tree-entity" data-role="item">
980
+ <a class="Tree-entityLink" href="../../content/typography/links.html" data-pjax>
981
+ <span>Links</span>
982
+
983
+ </a>
984
+ </li>
985
+
986
+
987
+
988
+
989
+ <li class="Tree-item Tree-entity" data-role="item">
990
+ <a class="Tree-entityLink" href="../../content/typography/lists.html" data-pjax>
991
+ <span>Lists</span>
992
+
993
+ </a>
994
+ </li>
995
+
996
+
997
+
998
+
999
+ <li class="Tree-item Tree-entity" data-role="item">
1000
+ <a class="Tree-entityLink" href="../../content/typography/text.html" data-pjax>
1001
+ <span>Text</span>
1002
+
1003
+ </a>
1004
+ </li>
1005
+
1006
+
1007
+
1008
+ </ul>
1009
+ </li>
1010
+
1011
+
1012
+
1013
+ </ul>
1014
+ </li>
1015
+
1016
+
1017
+
1018
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
1019
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
1020
+ Component Documentation
1021
+ </button>
1022
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
1023
+
1024
+
1025
+
1026
+
1027
+
1028
+
1029
+
1030
+ <li class="Tree-item Tree-entity" data-role="item">
1031
+ <a class="Tree-entityLink" href="../alerts.html" data-pjax>
1032
+ <span>Alerts</span>
1033
+
1034
+ </a>
1035
+ </li>
1036
+
1037
+
1038
+
1039
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
1040
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
1041
+ Buttons
1042
+ </button>
1043
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
1044
+
1045
+
1046
+
1047
+
1048
+
1049
+
1050
+
1051
+ <li class="Tree-item Tree-entity" data-role="item">
1052
+ <a class="Tree-entityLink" href="../buttons/buttons.html" data-pjax>
1053
+ <span>Buttons</span>
1054
+
1055
+ </a>
1056
+ </li>
1057
+
1058
+
1059
+
1060
+
1061
+ <li class="Tree-item Tree-entity" data-role="item">
1062
+ <a class="Tree-entityLink" href="../buttons/buttons-floating.html" data-pjax>
1063
+ <span>Buttons Floating</span>
1064
+
1065
+ </a>
1066
+ </li>
1067
+
1068
+
1069
+
1070
+ </ul>
1071
+ </li>
1072
+
1073
+
1074
+
1075
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
1076
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
1077
+ Cards
1078
+ </button>
1079
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
1080
+
1081
+
1082
+
1083
+
1084
+
1085
+
1086
+
1087
+ <li class="Tree-item Tree-entity" data-role="item">
1088
+ <a class="Tree-entityLink" href="../cards/basic-cards.html" data-pjax>
1089
+ <span>Basic Cards</span>
1090
+
1091
+ </a>
1092
+ </li>
1093
+
1094
+
1095
+
1096
+
1097
+ <li class="Tree-item Tree-entity" data-role="item">
1098
+ <a class="Tree-entityLink" href="../cards/category-cards.html" data-pjax>
1099
+ <span>Category Cards</span>
1100
+
1101
+ </a>
1102
+ </li>
1103
+
1104
+
1105
+
1106
+
1107
+ <li class="Tree-item Tree-entity" data-role="item">
1108
+ <a class="Tree-entityLink" href="../cards/contact-cards.html" data-pjax>
1109
+ <span>Contact Cards</span>
1110
+
1111
+ </a>
1112
+ </li>
1113
+
1114
+
1115
+
1116
+
1117
+ <li class="Tree-item Tree-entity" data-role="item">
1118
+ <a class="Tree-entityLink" href="../cards/generic-cards.html" data-pjax>
1119
+ <span>Generic Cards</span>
1120
+
1121
+ </a>
1122
+ </li>
1123
+
1124
+
1125
+
1126
+
1127
+ <li class="Tree-item Tree-entity" data-role="item">
1128
+ <a class="Tree-entityLink" href="../cards/solution-cards.html" data-pjax>
1129
+ <span>Solution Cards</span>
1130
+
1131
+ </a>
1132
+ </li>
1133
+
1134
+
1135
+
1136
+ </ul>
1137
+ </li>
1138
+
1139
+
1140
+
1141
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
1142
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
1143
+ Dividers
1144
+ </button>
1145
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
1146
+
1147
+
1148
+
1149
+
1150
+
1151
+
1152
+
1153
+ <li class="Tree-item Tree-entity" data-role="item">
1154
+ <a class="Tree-entityLink" href="../dividers/dividers.html" data-pjax>
1155
+ <span>Dividers</span>
1156
+
1157
+ </a>
1158
+ </li>
1159
+
1160
+
1161
+
1162
+ </ul>
1163
+ </li>
1164
+
1165
+
1166
+
1167
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
1168
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
1169
+ Expanding Components
1170
+ </button>
1171
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
1172
+
1173
+
1174
+
1175
+
1176
+
1177
+
1178
+
1179
+ <li class="Tree-item Tree-entity" data-role="item">
1180
+ <a class="Tree-entityLink" href="accordion.html" data-pjax>
1181
+ <span>Accordion</span>
1182
+
1183
+ </a>
1184
+ </li>
1185
+
1186
+
1187
+
1188
+
1189
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
1190
+ <a class="Tree-entityLink" href="" data-pjax>
1191
+ <span>Section</span>
1192
+
1193
+ </a>
1194
+ </li>
1195
+
1196
+
1197
+
1198
+ </ul>
1199
+ </li>
1200
+
1201
+
1202
+
1203
+
1204
+ <li class="Tree-item Tree-entity" data-role="item">
1205
+ <a class="Tree-entityLink" href="../modal.html" data-pjax>
1206
+ <span>Modal</span>
1207
+
1208
+ </a>
1209
+ </li>
1210
+
1211
+
1212
+
1213
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
1214
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
1215
+ Popover
1216
+ </button>
1217
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
1218
+
1219
+
1220
+
1221
+
1222
+
1223
+
1224
+
1225
+ <li class="Tree-item Tree-entity" data-role="item">
1226
+ <a class="Tree-entityLink" href="../popover/popover.html" data-pjax>
1227
+ <span>Popover</span>
1228
+
1229
+ </a>
1230
+ </li>
1231
+
1232
+
1233
+
1234
+ </ul>
1235
+ </li>
1236
+
1237
+
1238
+
1239
+
1240
+ <li class="Tree-item Tree-entity" data-role="item">
1241
+ <a class="Tree-entityLink" href="../progress-bar.html" data-pjax>
1242
+ <span>Progress Bar</span>
1243
+
1244
+ </a>
1245
+ </li>
1246
+
1247
+
1248
+
1249
+
1250
+ <li class="Tree-item Tree-entity" data-role="item">
1251
+ <a class="Tree-entityLink" href="../spacing.html" data-pjax>
1252
+ <span>Spacing</span>
1253
+
1254
+ </a>
1255
+ </li>
1256
+
1257
+
1258
+
1259
+
1260
+ <li class="Tree-item Tree-entity" data-role="item">
1261
+ <a class="Tree-entityLink" href="../table.html" data-pjax>
1262
+ <span>Table</span>
1263
+
1264
+ </a>
1265
+ </li>
1266
+
1267
+
1268
+
1269
+ </ul>
1270
+ </li>
1271
+
1272
+
1273
+
1274
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
1275
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
1276
+ Forms
1277
+ </button>
1278
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
1279
+
1280
+
1281
+
1282
+
1283
+
1284
+
1285
+
1286
+ <li class="Tree-item Tree-entity" data-role="item">
1287
+ <a class="Tree-entityLink" href="../../forms/-overview.html" data-pjax>
1288
+ <span>Overview</span>
1289
+
1290
+ </a>
1291
+ </li>
1292
+
1293
+
1294
+
1295
+
1296
+ <li class="Tree-item Tree-entity" data-role="item">
1297
+ <a class="Tree-entityLink" href="../../forms/checkbox.html" data-pjax>
1298
+ <span>Checkbox</span>
1299
+
1300
+ </a>
1301
+ </li>
1302
+
1303
+
1304
+
1305
+
1306
+ <li class="Tree-item Tree-entity" data-role="item">
1307
+ <a class="Tree-entityLink" href="../../forms/drop-down-list.html" data-pjax>
1308
+ <span>Drop Down List</span>
1309
+
1310
+ </a>
1311
+ </li>
1312
+
1313
+
1314
+
1315
+
1316
+ <li class="Tree-item Tree-entity" data-role="item">
1317
+ <a class="Tree-entityLink" href="../../forms/input-field.html" data-pjax>
1318
+ <span>Input Field</span>
1319
+
1320
+ </a>
1321
+ </li>
1322
+
1323
+
1324
+
1325
+
1326
+ <li class="Tree-item Tree-entity" data-role="item">
1327
+ <a class="Tree-entityLink" href="../../forms/radio-button.html" data-pjax>
1328
+ <span>Radio Button</span>
1329
+
1330
+ </a>
1331
+ </li>
1332
+
1333
+
1334
+
1335
+
1336
+ <li class="Tree-item Tree-entity" data-role="item">
1337
+ <a class="Tree-entityLink" href="../../forms/switch.html" data-pjax>
1338
+ <span>Switch</span>
1339
+
1340
+ </a>
1341
+ </li>
1342
+
1343
+
1344
+
1345
+
1346
+ <li class="Tree-item Tree-entity" data-role="item">
1347
+ <a class="Tree-entityLink" href="../../forms/text-area.html" data-pjax>
1348
+ <span>Text Area</span>
1349
+
1350
+ </a>
1351
+ </li>
1352
+
1353
+
1354
+
1355
+ </ul>
1356
+ </li>
1357
+
1358
+
1359
+
1360
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
1361
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
1362
+ Utilities
1363
+ </button>
1364
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
1365
+
1366
+
1367
+
1368
+
1369
+
1370
+
1371
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
1372
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
1373
+ Colors
1374
+ </button>
1375
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
1376
+
1377
+
1378
+
1379
+
1380
+
1381
+
1382
+
1383
+ <li class="Tree-item Tree-entity" data-role="item">
1384
+ <a class="Tree-entityLink" href="../../utilities/colors/overview.html" data-pjax>
1385
+ <span>Overview</span>
1386
+
1387
+ </a>
1388
+ </li>
1389
+
1390
+
1391
+
1392
+
1393
+ <li class="Tree-item Tree-entity" data-role="item">
1394
+ <a class="Tree-entityLink" href="../../utilities/colors/font-colors.html" data-pjax>
1395
+ <span>Font Colors</span>
1396
+
1397
+ </a>
1398
+ </li>
1399
+
1400
+
1401
+
1402
+
1403
+ <li class="Tree-item Tree-entity" data-role="item">
1404
+ <a class="Tree-entityLink" href="../../utilities/colors/background-colors.html" data-pjax>
1405
+ <span>Background Colors</span>
1406
+
1407
+ </a>
1408
+ </li>
1409
+
1410
+
1411
+
1412
+ </ul>
1413
+ </li>
1414
+
1415
+
1416
+
1417
+
1418
+ <li class="Tree-item Tree-entity" data-role="item">
1419
+ <a class="Tree-entityLink" href="../../utilities/spacing.html" data-pjax>
1420
+ <span>Spacing</span>
1421
+
1422
+ </a>
1423
+ </li>
1424
+
1425
+
1426
+
1427
+ </ul>
1428
+ </li>
1429
+
1430
+
1431
+
1432
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1433
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1434
+ Guidelines And Guides
1435
+ </button>
1436
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1437
+
1438
+
1439
+
1440
+
1441
+
1442
+
1443
+
1444
+ <li class="Tree-item Tree-entity" data-role="item">
1445
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/creating-a-new-release.html" data-pjax>
1446
+ <span>Creating A New Release</span>
1447
+
1448
+ </a>
1449
+ </li>
1450
+
1451
+
1452
+
1453
+
1454
+ <li class="Tree-item Tree-entity" data-role="item">
1455
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
1456
+ <span>Css And Scss Guidelines</span>
1457
+
1458
+ </a>
1459
+ </li>
1460
+
1461
+
1462
+
1463
+
1464
+ <li class="Tree-item Tree-entity" data-role="item">
1465
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
1466
+ <span>Git Cheat Sheet</span>
1467
+
1468
+ </a>
1469
+ </li>
1470
+
1471
+
1472
+
1473
+
1474
+ <li class="Tree-item Tree-entity" data-role="item">
1475
+ <a class="Tree-entityLink" href="../../guidelines-and-guides/installation-and-usage.html" data-pjax>
1476
+ <span>Installation And Usage</span>
1477
+
1478
+ </a>
1479
+ </li>
1480
+
1481
+
1482
+
1483
+ </ul>
1484
+ </li>
1485
+
1486
+
1487
+
1488
+ </ul>
1489
+ </div>
1490
+
1491
+ </div>
1492
+
1493
+
1494
+
1495
+ </nav>
1496
+
1497
+ </div>
1498
+ </div>
1499
+ </div>
1500
+
1501
+
1502
+
1503
+
1504
+ <script src="../../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
1505
+
1506
+ <script src="../../../design-system.js?cachebust=1.4.0"></script>
1507
+
1508
+
1509
+
1510
+ </body>
1511
+ </html>