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