@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/table.html ADDED
@@ -0,0 +1,2336 @@
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>Tables | 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">Tables</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
+ <p>Below you will find the different definitions and options to tables.</p>
89
+ <h3 id="table-of-contents">Table of contents</h3>
90
+ <div class="row">
91
+ <div class="col-6">
92
+ <ul class="document__unordered-list">
93
+ <li class="document__unordered-list-item">
94
+ <a class="msds-link"href="#overview">Overview</a>
95
+ </li>
96
+ <ul class="document__unordered-list">
97
+ <li class="document__unordered-list-item">
98
+ <a class="msds-link"href="#global-definition">Global Definition</a>
99
+ </li>
100
+ <li class="document__unordered-list-item">
101
+ <a class="msds-link"href="#sizes">Sizes</a>
102
+ </li>
103
+ <ul class="document__unordered-list">
104
+ <li class="document__unordered-list-item">
105
+ <a class="msds-link"href="#large">Large</a>
106
+ </li>
107
+ <li class="document__unordered-list-item">
108
+ <a class="msds-link"href="#medium">Medium</a>
109
+ </li>
110
+ <li class="document__unordered-list-item">
111
+ <a class="msds-link"href="#small">Small</a>
112
+ </li>
113
+ </ul>
114
+ </ul>
115
+ <li class="document__unordered-list-item">
116
+ <a class="msds-link"href="#default-table">Table Default</a>
117
+ </li>
118
+ <ul class="document__unordered-list">
119
+ <li class="document__unordered-list-item">
120
+ <a class="msds-link"href="#default-table-with-dark-headers">Default Table With Dark Headers</a>
121
+ </li>
122
+ <li class="document__unordered-list-item">
123
+ <a class="msds-link"href="#tables-expandable-rows">Table With Expandable Rows</a>
124
+ </li>
125
+ </ul>
126
+ <li class="document__unordered-list-item">
127
+ <a class="msds-link"href="#tables-dark-themed">Table Dark Themed</a>
128
+ </li>
129
+ <ul class="document__unordered-list">
130
+ <li class="document__unordered-list-item">
131
+ <a class="msds-link"href="#tables-dark-themed-expandable-rows">Table Dark Theme Expanding Rows</a>
132
+ </li>
133
+ </ul>
134
+ </ul>
135
+ </div>
136
+ </div>
137
+
138
+ <h2 id="overview">Overview</h2>
139
+ <h3 id="global-definition">Global Definition</h3>
140
+ <p>Tables are used to display tabular data for users. We recommend using third party libraries/frameworks when utalizing our tables, as we have not built tables to be functional in our design system. Instead we use our own markup and make use of the following libraries, when you would like to add functionality like pagination, search, sort etc.</p>
141
+ <ul>
142
+ <li><a href="https://github.com/fiduswriter/Simple-DataTables">Simple Tables (Vanilla JS)</a></li>
143
+ <li><a href="https://vuejs.org/v2/examples/grid-component.html">Vue Table Component (Vue JS)</a></li>
144
+ <li><a href="https://react-table.tanstack.com/">React Tables (React)</a></li>
145
+ </ul>
146
+ <div class="element-preview">
147
+ <div class="element-preview__inner"><div class="container">
148
+ <div class="row">
149
+ <div class="col-12">
150
+ <table class="msds-table">
151
+ <thead class="msds-table__head">
152
+ <tr class="msds-table__head-row">
153
+ <th class="msds-table__header">
154
+ <div class="msds-table__header-headline">
155
+ case number
156
+ <span class="msds-table__header-order-icon">
157
+ <svg class="msds-table__header-descending-order-icon">
158
+ <use href="../../msds-spritemap.svg#right-arrow" />
159
+ </svg>
160
+ <svg class="msds-table__header-acesnding-order-icon">
161
+ <use href="../../msds-spritemap.svg#right-arrow" />
162
+ </svg>
163
+ </span>
164
+ </div>
165
+ </th>
166
+ <th class="msds-table__header">
167
+ <div class="msds-table__header-headline">
168
+ subject
169
+ <span class="msds-table__header-order-icon">
170
+ <svg class="msds-table__header-descending-order-icon">
171
+ <use href="../../msds-spritemap.svg#right-arrow" />
172
+ </svg>
173
+ <svg class="msds-table__header-acesnding-order-icon">
174
+ <use href="../../msds-spritemap.svg#right-arrow" />
175
+ </svg>
176
+ </span>
177
+ </div>
178
+ </th>
179
+ <th class="msds-table__header">
180
+ <div class="msds-table__header-headline">
181
+ status
182
+ <span class="msds-table__header-order-icon">
183
+ <svg class="msds-table__header-descending-order-icon">
184
+ <use href="../../msds-spritemap.svg#right-arrow" />
185
+ </svg>
186
+ <svg class="msds-table__header-acesnding-order-icon">
187
+ <use href="../../msds-spritemap.svg#right-arrow" />
188
+ </svg>
189
+ </span>
190
+ </div>
191
+ </th>
192
+ <th class="msds-table__header">
193
+ <div class="msds-table__header-headline">
194
+ shared case
195
+ <span class="msds-table__header-order-icon">
196
+ <svg class="msds-table__header-descending-order-icon">
197
+ <use href="../../msds-spritemap.svg#right-arrow" />
198
+ </svg>
199
+ <svg class="msds-table__header-acesnding-order-icon">
200
+ <use href="../../msds-spritemap.svg#right-arrow" />
201
+ </svg>
202
+ </span>
203
+ </div>
204
+ </th>
205
+ <th class="msds-table__header">
206
+ <div class="msds-table__header-headline">
207
+ link
208
+ <span class="msds-table__header-order-icon">
209
+ <svg class="msds-table__header-descending-order-icon">
210
+ <use href="../../msds-spritemap.svg#right-arrow" />
211
+ </svg>
212
+ <svg class="msds-table__header-acesnding-order-icon">
213
+ <use href="../../msds-spritemap.svg#right-arrow" />
214
+ </svg>
215
+ </span>
216
+ </div>
217
+ </th>
218
+ <th class="msds-table__header">
219
+ <div class="msds-table__header-headline">
220
+ last mts update
221
+ <span class="msds-table__header-order-icon">
222
+ <svg class="msds-table__header-descending-order-icon">
223
+ <use href="../../msds-spritemap.svg#right-arrow" />
224
+ </svg>
225
+ <svg class="msds-table__header-acesnding-order-icon">
226
+ <use href="../../msds-spritemap.svg#right-arrow" />
227
+ </svg>
228
+ </span>
229
+ </div>
230
+ </th>
231
+ </tr>
232
+ </thead>
233
+ <tbody class="msds-table__body">
234
+ <tr class="msds-table__body-row">
235
+ <td class="msds-table__body-row-data">MSC374780</td>
236
+ <td class="msds-table__body-row-data">“Test 11”</td>
237
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
238
+ <td class="msds-table__body-row-data">Yes</td>
239
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
240
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
241
+ </tr>
242
+ <tr class="msds-table__body-row">
243
+ <td class="msds-table__body-row-data">MSC103913</td>
244
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
245
+ <td class="msds-table__body-row-data">Closed</td>
246
+ <td class="msds-table__body-row-data">Yes</td>
247
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
248
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
249
+ </tr>
250
+ <tr class="msds-table__body-row">
251
+ <td class="msds-table__body-row-data">MSC374780</td>
252
+ <td class="msds-table__body-row-data">“Test 11”</td>
253
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
254
+ <td class="msds-table__body-row-data">Yes</td>
255
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
256
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
257
+ </tr>
258
+ <tr class="msds-table__body-row">
259
+ <td class="msds-table__body-row-data">MSC103913</td>
260
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
261
+ <td class="msds-table__body-row-data">Closed</td>
262
+ <td class="msds-table__body-row-data">Yes</td>
263
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
264
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
265
+ </tr>
266
+ <tr class="msds-table__body-row">
267
+ <td class="msds-table__body-row-data">MSC374780</td>
268
+ <td class="msds-table__body-row-data">“Test 11”</td>
269
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
270
+ <td class="msds-table__body-row-data">Yes</td>
271
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
272
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
273
+ </tr>
274
+ <tr class="msds-table__body-row">
275
+ <td class="msds-table__body-row-data">MSC103913</td>
276
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
277
+ <td class="msds-table__body-row-data">Closed</td>
278
+ <td class="msds-table__body-row-data">Yes</td>
279
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
280
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
281
+ </tr>
282
+ </tbody>
283
+ </table>
284
+ </div>
285
+ </div>
286
+ </div></div>
287
+ </div>
288
+
289
+ <h3 id="sizes">Sizes</h3>
290
+ <p>Tables are setup to support 3 differnt sizes (Based on padding). Our default tables are large, followed by medium and small tables.</p>
291
+ <h5 id="large">Large</h5>
292
+ <p>To utalize large tables, use the components default class <code>msds-table</code>.</p>
293
+ <div class="element-preview">
294
+ <div class="element-preview__inner"><div class="container">
295
+ <div class="row">
296
+ <div class="col-12">
297
+ <table class="msds-table">
298
+ <thead class="msds-table__head">
299
+ <tr class="msds-table__head-row">
300
+ <th class="msds-table__header">
301
+ <div class="msds-table__header-headline">
302
+ case number
303
+ <span class="msds-table__header-order-icon">
304
+ <svg class="msds-table__header-descending-order-icon">
305
+ <use href="../../msds-spritemap.svg#right-arrow" />
306
+ </svg>
307
+ <svg class="msds-table__header-acesnding-order-icon">
308
+ <use href="../../msds-spritemap.svg#right-arrow" />
309
+ </svg>
310
+ </span>
311
+ </div>
312
+ </th>
313
+ <th class="msds-table__header">
314
+ <div class="msds-table__header-headline">
315
+ subject
316
+ <span class="msds-table__header-order-icon">
317
+ <svg class="msds-table__header-descending-order-icon">
318
+ <use href="../../msds-spritemap.svg#right-arrow" />
319
+ </svg>
320
+ <svg class="msds-table__header-acesnding-order-icon">
321
+ <use href="../../msds-spritemap.svg#right-arrow" />
322
+ </svg>
323
+ </span>
324
+ </div>
325
+ </th>
326
+ <th class="msds-table__header">
327
+ <div class="msds-table__header-headline">
328
+ status
329
+ <span class="msds-table__header-order-icon">
330
+ <svg class="msds-table__header-descending-order-icon">
331
+ <use href="../../msds-spritemap.svg#right-arrow" />
332
+ </svg>
333
+ <svg class="msds-table__header-acesnding-order-icon">
334
+ <use href="../../msds-spritemap.svg#right-arrow" />
335
+ </svg>
336
+ </span>
337
+ </div>
338
+ </th>
339
+ <th class="msds-table__header">
340
+ <div class="msds-table__header-headline">
341
+ shared case
342
+ <span class="msds-table__header-order-icon">
343
+ <svg class="msds-table__header-descending-order-icon">
344
+ <use href="../../msds-spritemap.svg#right-arrow" />
345
+ </svg>
346
+ <svg class="msds-table__header-acesnding-order-icon">
347
+ <use href="../../msds-spritemap.svg#right-arrow" />
348
+ </svg>
349
+ </span>
350
+ </div>
351
+ </th>
352
+ <th class="msds-table__header">
353
+ <div class="msds-table__header-headline">
354
+ link
355
+ <span class="msds-table__header-order-icon">
356
+ <svg class="msds-table__header-descending-order-icon">
357
+ <use href="../../msds-spritemap.svg#right-arrow" />
358
+ </svg>
359
+ <svg class="msds-table__header-acesnding-order-icon">
360
+ <use href="../../msds-spritemap.svg#right-arrow" />
361
+ </svg>
362
+ </span>
363
+ </div>
364
+ </th>
365
+ <th class="msds-table__header">
366
+ <div class="msds-table__header-headline">
367
+ last mts update
368
+ <span class="msds-table__header-order-icon">
369
+ <svg class="msds-table__header-descending-order-icon">
370
+ <use href="../../msds-spritemap.svg#right-arrow" />
371
+ </svg>
372
+ <svg class="msds-table__header-acesnding-order-icon">
373
+ <use href="../../msds-spritemap.svg#right-arrow" />
374
+ </svg>
375
+ </span>
376
+ </div>
377
+ </th>
378
+ </tr>
379
+ </thead>
380
+ <tbody class="msds-table__body">
381
+ <tr class="msds-table__body-row">
382
+ <td class="msds-table__body-row-data">MSC374780</td>
383
+ <td class="msds-table__body-row-data">“Test 11”</td>
384
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
385
+ <td class="msds-table__body-row-data">Yes</td>
386
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
387
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
388
+ </tr>
389
+ <tr class="msds-table__body-row">
390
+ <td class="msds-table__body-row-data">MSC103913</td>
391
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
392
+ <td class="msds-table__body-row-data">Closed</td>
393
+ <td class="msds-table__body-row-data">Yes</td>
394
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
395
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
396
+ </tr>
397
+ <tr class="msds-table__body-row">
398
+ <td class="msds-table__body-row-data">MSC374780</td>
399
+ <td class="msds-table__body-row-data">“Test 11”</td>
400
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
401
+ <td class="msds-table__body-row-data">Yes</td>
402
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
403
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
404
+ </tr>
405
+ <tr class="msds-table__body-row">
406
+ <td class="msds-table__body-row-data">MSC103913</td>
407
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
408
+ <td class="msds-table__body-row-data">Closed</td>
409
+ <td class="msds-table__body-row-data">Yes</td>
410
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
411
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
412
+ </tr>
413
+ <tr class="msds-table__body-row">
414
+ <td class="msds-table__body-row-data">MSC374780</td>
415
+ <td class="msds-table__body-row-data">“Test 11”</td>
416
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
417
+ <td class="msds-table__body-row-data">Yes</td>
418
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
419
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
420
+ </tr>
421
+ <tr class="msds-table__body-row">
422
+ <td class="msds-table__body-row-data">MSC103913</td>
423
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
424
+ <td class="msds-table__body-row-data">Closed</td>
425
+ <td class="msds-table__body-row-data">Yes</td>
426
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
427
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
428
+ </tr>
429
+ </tbody>
430
+ </table>
431
+ </div>
432
+ </div>
433
+ </div></div>
434
+ </div>
435
+
436
+ <h5 id="medium">Medium</h5>
437
+ <p>To utalize medium tables, add an additional modifier class to the components wrapper tag <code>msds-table <b>msds-table--medium</b></code>.</p>
438
+ <div class="element-preview">
439
+ <div class="element-preview__inner"><div class="container">
440
+ <div class="row">
441
+ <div class="col-12">
442
+ <table class="msds-table msds-table--medium">
443
+ <thead class="msds-table__head">
444
+ <tr class="msds-table__head-row">
445
+ <th class="msds-table__header">
446
+ <div class="msds-table__header-headline">
447
+ case number
448
+ <span class="msds-table__header-order-icon">
449
+ <svg class="msds-table__header-descending-order-icon">
450
+ <use href="../../msds-spritemap.svg#right-arrow" />
451
+ </svg>
452
+ <svg class="msds-table__header-acesnding-order-icon">
453
+ <use href="../../msds-spritemap.svg#right-arrow" />
454
+ </svg>
455
+ </div>
456
+ </th>
457
+ <th class="msds-table__header">
458
+ <div class="msds-table__header-headline">
459
+ subject
460
+ <span class="msds-table__header-order-icon">
461
+ <svg class="msds-table__header-descending-order-icon">
462
+ <use href="../../msds-spritemap.svg#right-arrow" />
463
+ </svg>
464
+ <svg class="msds-table__header-acesnding-order-icon">
465
+ <use href="../../msds-spritemap.svg#right-arrow" />
466
+ </svg>
467
+ </div>
468
+ </th>
469
+ <th class="msds-table__header">
470
+ <div class="msds-table__header-headline">
471
+ status
472
+ <span class="msds-table__header-order-icon">
473
+ <svg class="msds-table__header-descending-order-icon">
474
+ <use href="../../msds-spritemap.svg#right-arrow" />
475
+ </svg>
476
+ <svg class="msds-table__header-acesnding-order-icon">
477
+ <use href="../../msds-spritemap.svg#right-arrow" />
478
+ </svg>
479
+ </div>
480
+ </th>
481
+ <th class="msds-table__header">
482
+ <div class="msds-table__header-headline">
483
+ shared case
484
+ <span class="msds-table__header-order-icon">
485
+ <svg class="msds-table__header-descending-order-icon">
486
+ <use href="../../msds-spritemap.svg#right-arrow" />
487
+ </svg>
488
+ <svg class="msds-table__header-acesnding-order-icon">
489
+ <use href="../../msds-spritemap.svg#right-arrow" />
490
+ </svg>
491
+ </div>
492
+ </th>
493
+ <th class="msds-table__header">
494
+ <div class="msds-table__header-headline">
495
+ last mts update
496
+ <span class="msds-table__header-order-icon">
497
+ <svg class="msds-table__header-descending-order-icon">
498
+ <use href="../../msds-spritemap.svg#right-arrow" />
499
+ </svg>
500
+ <svg class="msds-table__header-acesnding-order-icon">
501
+ <use href="../../msds-spritemap.svg#right-arrow" />
502
+ </svg>
503
+ </div>
504
+ </th>
505
+ </tr>
506
+ </thead>
507
+ <tbody class="msds-table__body">
508
+ <tr class="msds-table__body-row">
509
+ <td class="msds-table__body-row-data">MSC374780</td>
510
+ <td class="msds-table__body-row-data">“Test 11”</td>
511
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
512
+ <td class="msds-table__body-row-data">Yes</td>
513
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
514
+ </tr>
515
+ <tr class="msds-table__body-row">
516
+ <td class="msds-table__body-row-data">MSC103913</td>
517
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
518
+ <td class="msds-table__body-row-data">Closed</td>
519
+ <td class="msds-table__body-row-data">Yes</td>
520
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
521
+ </tr>
522
+ <tr class="msds-table__body-row">
523
+ <td class="msds-table__body-row-data">MSC374780</td>
524
+ <td class="msds-table__body-row-data">“Test 11”</td>
525
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
526
+ <td class="msds-table__body-row-data">Yes</td>
527
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
528
+ </tr>
529
+ <tr class="msds-table__body-row">
530
+ <td class="msds-table__body-row-data">MSC103913</td>
531
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
532
+ <td class="msds-table__body-row-data">Closed</td>
533
+ <td class="msds-table__body-row-data">Yes</td>
534
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
535
+ </tr>
536
+ <tr class="msds-table__body-row">
537
+ <td class="msds-table__body-row-data">MSC374780</td>
538
+ <td class="msds-table__body-row-data">“Test 11”</td>
539
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
540
+ <td class="msds-table__body-row-data">Yes</td>
541
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
542
+ </tr>
543
+ <tr class="msds-table__body-row">
544
+ <td class="msds-table__body-row-data">MSC103913</td>
545
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
546
+ <td class="msds-table__body-row-data">Closed</td>
547
+ <td class="msds-table__body-row-data">Yes</td>
548
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
549
+ </tr>
550
+ </tbody>
551
+ </table>
552
+ </div>
553
+ </div>
554
+ </div></div>
555
+ </div>
556
+
557
+ <h5 id="small">Small</h5>
558
+ <p>To utalize small tables, add an additional modifier class to the components wrapper tag <code>msds-table <b>msds-table--small</b></code>.</p>
559
+ <div class="element-preview">
560
+ <div class="element-preview__inner"><div class="container">
561
+ <div class="row">
562
+ <div class="col-12">
563
+ <table class="msds-table msds-table--small">
564
+ <thead class="msds-table__head">
565
+ <tr class="msds-table__head-row">
566
+ <th class="msds-table__header">
567
+ <div class ="msds-table__header-headline">
568
+ case number
569
+ <span class="msds-table__header-order-icon">
570
+ <svg class="msds-table__header-descending-order-icon">
571
+ <use href="../../msds-spritemap.svg#right-arrow" />
572
+ </svg>
573
+ <svg class="msds-table__header-acesnding-order-icon">
574
+ <use href="../../msds-spritemap.svg#right-arrow" />
575
+ </svg>
576
+ </div>
577
+ </th>
578
+ <th class="msds-table__header">
579
+ <div class ="msds-table__header-headline">
580
+ subject
581
+ <span class="msds-table__header-order-icon">
582
+ <svg class="msds-table__header-descending-order-icon">
583
+ <use href="../../msds-spritemap.svg#right-arrow" />
584
+ </svg>
585
+ <svg class="msds-table__header-acesnding-order-icon">
586
+ <use href="../../msds-spritemap.svg#right-arrow" />
587
+ </svg>
588
+ </div>
589
+ </th>
590
+ <th class="msds-table__header">
591
+ <div class ="msds-table__header-headline">
592
+ status
593
+ <span class="msds-table__header-order-icon">
594
+ <svg class="msds-table__header-descending-order-icon">
595
+ <use href="../../msds-spritemap.svg#right-arrow" />
596
+ </svg>
597
+ <svg class="msds-table__header-acesnding-order-icon">
598
+ <use href="../../msds-spritemap.svg#right-arrow" />
599
+ </svg>
600
+ </div>
601
+ </th>
602
+ <th class="msds-table__header">
603
+ <div class ="msds-table__header-headline">
604
+ shared case
605
+ <span class="msds-table__header-order-icon">
606
+ <svg class="msds-table__header-descending-order-icon">
607
+ <use href="../../msds-spritemap.svg#right-arrow" />
608
+ </svg>
609
+ <svg class="msds-table__header-acesnding-order-icon">
610
+ <use href="../../msds-spritemap.svg#right-arrow" />
611
+ </svg>
612
+ </div>
613
+ </th>
614
+ <th class="msds-table__header">
615
+ <div class ="msds-table__header-headline">
616
+ last mts update
617
+ <span class="msds-table__header-order-icon">
618
+ <svg class="msds-table__header-descending-order-icon">
619
+ <use href="../../msds-spritemap.svg#right-arrow" />
620
+ </svg>
621
+ <svg class="msds-table__header-acesnding-order-icon">
622
+ <use href="../../msds-spritemap.svg#right-arrow" />
623
+ </svg>
624
+ </div>
625
+ </th>
626
+ </tr>
627
+ </thead>
628
+ <tbody class="msds-table__body">
629
+ <tr class="msds-table__body-row">
630
+ <td class="msds-table__body-row-data">MSC374780</td>
631
+ <td class="msds-table__body-row-data">“Test 11”</td>
632
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
633
+ <td class="msds-table__body-row-data">Yes</td>
634
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
635
+ </tr>
636
+ <tr class="msds-table__body-row">
637
+ <td class="msds-table__body-row-data">MSC103913</td>
638
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
639
+ <td class="msds-table__body-row-data">Closed</td>
640
+ <td class="msds-table__body-row-data">Yes</td>
641
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
642
+ </tr>
643
+ <tr class="msds-table__body-row">
644
+ <td class="msds-table__body-row-data">MSC374780</td>
645
+ <td class="msds-table__body-row-data">“Test 11”</td>
646
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
647
+ <td class="msds-table__body-row-data">Yes</td>
648
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
649
+ </tr>
650
+ <tr class="msds-table__body-row">
651
+ <td class="msds-table__body-row-data">MSC103913</td>
652
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
653
+ <td class="msds-table__body-row-data">Closed</td>
654
+ <td class="msds-table__body-row-data">Yes</td>
655
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
656
+ </tr>
657
+ <tr class="msds-table__body-row">
658
+ <td class="msds-table__body-row-data">MSC374780</td>
659
+ <td class="msds-table__body-row-data">“Test 11”</td>
660
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
661
+ <td class="msds-table__body-row-data">Yes</td>
662
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
663
+ </tr>
664
+ <tr class="msds-table__body-row">
665
+ <td class="msds-table__body-row-data">MSC103913</td>
666
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
667
+ <td class="msds-table__body-row-data">Closed</td>
668
+ <td class="msds-table__body-row-data">Yes</td>
669
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
670
+ </tr>
671
+ </tbody>
672
+ </table>
673
+ </div>
674
+ </div>
675
+ </div></div>
676
+ </div>
677
+
678
+ <h3 id="default-table">Default Table</h3>
679
+ <p>To utalize tables from the design system, copy the markup below.</p>
680
+ <div class="element-preview">
681
+ <div class="element-preview__inner"><div class="container">
682
+ <div class="row">
683
+ <div class="col-12">
684
+ <table class="msds-table">
685
+ <thead class="msds-table__head">
686
+ <tr class="msds-table__head-row">
687
+ <th class="msds-table__header">
688
+ <div class="msds-table__header-headline">
689
+ case number
690
+ <span class="msds-table__header-order-icon">
691
+ <svg class="msds-table__header-descending-order-icon">
692
+ <use href="../../msds-spritemap.svg#right-arrow" />
693
+ </svg>
694
+ <svg class="msds-table__header-acesnding-order-icon">
695
+ <use href="../../msds-spritemap.svg#right-arrow" />
696
+ </svg>
697
+ </span>
698
+ </div>
699
+ </th>
700
+ <th class="msds-table__header">
701
+ <div class="msds-table__header-headline">
702
+ subject
703
+ <span class="msds-table__header-order-icon">
704
+ <svg class="msds-table__header-descending-order-icon">
705
+ <use href="../../msds-spritemap.svg#right-arrow" />
706
+ </svg>
707
+ <svg class="msds-table__header-acesnding-order-icon">
708
+ <use href="../../msds-spritemap.svg#right-arrow" />
709
+ </svg>
710
+ </span>
711
+ </div>
712
+ </th>
713
+ <th class="msds-table__header">
714
+ <div class="msds-table__header-headline">
715
+ status
716
+ <span class="msds-table__header-order-icon">
717
+ <svg class="msds-table__header-descending-order-icon">
718
+ <use href="../../msds-spritemap.svg#right-arrow" />
719
+ </svg>
720
+ <svg class="msds-table__header-acesnding-order-icon">
721
+ <use href="../../msds-spritemap.svg#right-arrow" />
722
+ </svg>
723
+ </span>
724
+ </div>
725
+ </th>
726
+ <th class="msds-table__header">
727
+ <div class="msds-table__header-headline">
728
+ shared case
729
+ <span class="msds-table__header-order-icon">
730
+ <svg class="msds-table__header-descending-order-icon">
731
+ <use href="../../msds-spritemap.svg#right-arrow" />
732
+ </svg>
733
+ <svg class="msds-table__header-acesnding-order-icon">
734
+ <use href="../../msds-spritemap.svg#right-arrow" />
735
+ </svg>
736
+ </span>
737
+ </div>
738
+ </th>
739
+ <th class="msds-table__header">
740
+ <div class="msds-table__header-headline">
741
+ link
742
+ <span class="msds-table__header-order-icon">
743
+ <svg class="msds-table__header-descending-order-icon">
744
+ <use href="../../msds-spritemap.svg#right-arrow" />
745
+ </svg>
746
+ <svg class="msds-table__header-acesnding-order-icon">
747
+ <use href="../../msds-spritemap.svg#right-arrow" />
748
+ </svg>
749
+ </span>
750
+ </div>
751
+ </th>
752
+ <th class="msds-table__header">
753
+ <div class="msds-table__header-headline">
754
+ last mts update
755
+ <span class="msds-table__header-order-icon">
756
+ <svg class="msds-table__header-descending-order-icon">
757
+ <use href="../../msds-spritemap.svg#right-arrow" />
758
+ </svg>
759
+ <svg class="msds-table__header-acesnding-order-icon">
760
+ <use href="../../msds-spritemap.svg#right-arrow" />
761
+ </svg>
762
+ </span>
763
+ </div>
764
+ </th>
765
+ </tr>
766
+ </thead>
767
+ <tbody class="msds-table__body">
768
+ <tr class="msds-table__body-row">
769
+ <td class="msds-table__body-row-data">MSC374780</td>
770
+ <td class="msds-table__body-row-data">“Test 11”</td>
771
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
772
+ <td class="msds-table__body-row-data">Yes</td>
773
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
774
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
775
+ </tr>
776
+ <tr class="msds-table__body-row">
777
+ <td class="msds-table__body-row-data">MSC103913</td>
778
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
779
+ <td class="msds-table__body-row-data">Closed</td>
780
+ <td class="msds-table__body-row-data">Yes</td>
781
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
782
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
783
+ </tr>
784
+ <tr class="msds-table__body-row">
785
+ <td class="msds-table__body-row-data">MSC374780</td>
786
+ <td class="msds-table__body-row-data">“Test 11”</td>
787
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
788
+ <td class="msds-table__body-row-data">Yes</td>
789
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
790
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
791
+ </tr>
792
+ <tr class="msds-table__body-row">
793
+ <td class="msds-table__body-row-data">MSC103913</td>
794
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
795
+ <td class="msds-table__body-row-data">Closed</td>
796
+ <td class="msds-table__body-row-data">Yes</td>
797
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
798
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
799
+ </tr>
800
+ <tr class="msds-table__body-row">
801
+ <td class="msds-table__body-row-data">MSC374780</td>
802
+ <td class="msds-table__body-row-data">“Test 11”</td>
803
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
804
+ <td class="msds-table__body-row-data">Yes</td>
805
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
806
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
807
+ </tr>
808
+ <tr class="msds-table__body-row">
809
+ <td class="msds-table__body-row-data">MSC103913</td>
810
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
811
+ <td class="msds-table__body-row-data">Closed</td>
812
+ <td class="msds-table__body-row-data">Yes</td>
813
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
814
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
815
+ </tr>
816
+ </tbody>
817
+ </table>
818
+ </div>
819
+ </div>
820
+ </div></div>
821
+ </div>
822
+
823
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
824
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
825
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
826
+ <span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table"</span>&gt;</span>
827
+ <span class="hljs-tag">&lt;<span class="hljs-name">thead</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__head"</span>&gt;</span>
828
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__head-row"</span>&gt;</span>
829
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
830
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
831
+ case number
832
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
833
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
834
+ <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>
835
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
836
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
837
+ <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>
838
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
839
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
840
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
841
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
842
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
843
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
844
+ subject
845
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
846
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
847
+ <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>
848
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
849
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
850
+ <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>
851
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
852
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
853
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
854
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
855
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
856
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
857
+ status
858
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
859
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
860
+ <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>
861
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
862
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
863
+ <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>
864
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
865
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
866
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
867
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
868
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
869
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
870
+ shared case
871
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
872
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
873
+ <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>
874
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
875
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
876
+ <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>
877
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
878
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
879
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
880
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
881
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
882
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
883
+ link
884
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
885
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
886
+ <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>
887
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
888
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
889
+ <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>
890
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
891
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
892
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
893
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
894
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
895
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
896
+ last mts update
897
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
898
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
899
+ <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>
900
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
901
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
902
+ <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>
903
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
904
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
905
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
906
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
907
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
908
+ <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span>
909
+ <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body"</span>&gt;</span>
910
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row"</span>&gt;</span>
911
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC374780<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
912
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>“Test 11”<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
913
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Awaiting MTS<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
914
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
915
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
916
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>8/1/2019 11:18:01 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
917
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
918
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row"</span>&gt;</span>
919
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC103913<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
920
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Test 4ward2SF - 1 email address<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
921
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Closed<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
922
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
923
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
924
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>1/1/0001 12:00:00 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
925
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
926
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row"</span>&gt;</span>
927
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC374780<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
928
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>“Test 11”<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
929
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Awaiting MTS<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
930
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
931
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
932
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>8/1/2019 11:18:01 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
933
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
934
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row"</span>&gt;</span>
935
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC103913<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
936
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Test 4ward2SF - 1 email address<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
937
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Closed<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
938
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
939
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
940
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>1/1/0001 12:00:00 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
941
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
942
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row"</span>&gt;</span>
943
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC374780<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
944
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>“Test 11”<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
945
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Awaiting MTS<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
946
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
947
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
948
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>8/1/2019 11:18:01 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
949
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
950
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row"</span>&gt;</span>
951
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC103913<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
952
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Test 4ward2SF - 1 email address<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
953
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Closed<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
954
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
955
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
956
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>1/1/0001 12:00:00 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
957
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
958
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
959
+ <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
960
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
961
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
962
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h4 id="default-table-with-dark-headers">Default Table With Dark Headers</h4>
963
+ <p>The light themed tables have an additional theme, where the headers of the table are blue instead of grey. To make use of this table, add an additional modifier class to the components wrapper tag <code>msds-table <b>msds-table--dark</b></code>.</p>
964
+ <div class="element-preview">
965
+ <div class="element-preview__inner"><div class="container">
966
+ <div class="row">
967
+ <div class="col-12">
968
+ <table class="msds-table msds-table--dark">
969
+ <thead class="msds-table__head">
970
+ <tr class="msds-table__head-row">
971
+ <th class="msds-table__header">
972
+ <div class ="msds-table__header-headline">
973
+ case number
974
+ <span class="msds-table__header-order-icon">
975
+ <svg class="msds-table__header-descending-order-icon">
976
+ <use href="../../msds-spritemap.svg#right-arrow" />
977
+ </svg>
978
+ <svg class="msds-table__header-acesnding-order-icon">
979
+ <use href="../../msds-spritemap.svg#right-arrow" />
980
+ </svg>
981
+ </div>
982
+ </th>
983
+ <th class="msds-table__header">
984
+ <div class ="msds-table__header-headline">
985
+ subject
986
+ <span class="msds-table__header-order-icon">
987
+ <svg class="msds-table__header-descending-order-icon">
988
+ <use href="../../msds-spritemap.svg#right-arrow" />
989
+ </svg>
990
+ <svg class="msds-table__header-acesnding-order-icon">
991
+ <use href="../../msds-spritemap.svg#right-arrow" />
992
+ </svg>
993
+ </div>
994
+ </th>
995
+ <th class="msds-table__header">
996
+ <div class ="msds-table__header-headline">
997
+ status
998
+ <span class="msds-table__header-order-icon">
999
+ <svg class="msds-table__header-descending-order-icon">
1000
+ <use href="../../msds-spritemap.svg#right-arrow" />
1001
+ </svg>
1002
+ <svg class="msds-table__header-acesnding-order-icon">
1003
+ <use href="../../msds-spritemap.svg#right-arrow" />
1004
+ </svg>
1005
+ </div>
1006
+ </th>
1007
+ <th class="msds-table__header">
1008
+ <div class ="msds-table__header-headline">
1009
+ shared case
1010
+ <span class="msds-table__header-order-icon">
1011
+ <svg class="msds-table__header-descending-order-icon">
1012
+ <use href="../../msds-spritemap.svg#right-arrow" />
1013
+ </svg>
1014
+ <svg class="msds-table__header-acesnding-order-icon">
1015
+ <use href="../../msds-spritemap.svg#right-arrow" />
1016
+ </svg>
1017
+ </div>
1018
+ </th>
1019
+ <th class="msds-table__header">
1020
+ <div class ="msds-table__header-headline">
1021
+ last mts update
1022
+ <span class="msds-table__header-order-icon">
1023
+ <svg class="msds-table__header-descending-order-icon">
1024
+ <use href="../../msds-spritemap.svg#right-arrow" />
1025
+ </svg>
1026
+ <svg class="msds-table__header-acesnding-order-icon">
1027
+ <use href="../../msds-spritemap.svg#right-arrow" />
1028
+ </svg>
1029
+ </div>
1030
+ </th>
1031
+ </tr>
1032
+ </thead>
1033
+ <tbody class="msds-table__body">
1034
+ <tr class="msds-table__body-row">
1035
+ <td class="msds-table__body-row-data">MSC374780</td>
1036
+ <td class="msds-table__body-row-data">“Test 11”</td>
1037
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
1038
+ <td class="msds-table__body-row-data">Yes</td>
1039
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
1040
+ </tr>
1041
+ <tr class="msds-table__body-row">
1042
+ <td class="msds-table__body-row-data">MSC103913</td>
1043
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
1044
+ <td class="msds-table__body-row-data">Closed</td>
1045
+ <td class="msds-table__body-row-data">Yes</td>
1046
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
1047
+ </tr>
1048
+ <tr class="msds-table__body-row">
1049
+ <td class="msds-table__body-row-data">MSC374780</td>
1050
+ <td class="msds-table__body-row-data">“Test 11”</td>
1051
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
1052
+ <td class="msds-table__body-row-data">Yes</td>
1053
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
1054
+ </tr>
1055
+ <tr class="msds-table__body-row">
1056
+ <td class="msds-table__body-row-data">MSC103913</td>
1057
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
1058
+ <td class="msds-table__body-row-data">Closed</td>
1059
+ <td class="msds-table__body-row-data">Yes</td>
1060
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
1061
+ </tr>
1062
+ <tr class="msds-table__body-row">
1063
+ <td class="msds-table__body-row-data">MSC374780</td>
1064
+ <td class="msds-table__body-row-data">“Test 11”</td>
1065
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
1066
+ <td class="msds-table__body-row-data">Yes</td>
1067
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
1068
+ </tr>
1069
+ <tr class="msds-table__body-row">
1070
+ <td class="msds-table__body-row-data">MSC103913</td>
1071
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
1072
+ <td class="msds-table__body-row-data">Closed</td>
1073
+ <td class="msds-table__body-row-data">Yes</td>
1074
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
1075
+ </tr>
1076
+ </tbody>
1077
+ </table>
1078
+ </div>
1079
+ </div>
1080
+ </div></div>
1081
+ </div>
1082
+
1083
+
1084
+ <h3 id="tables-expandable-rows">Tables Expandable Rows</h3>
1085
+ <p>Tables can have rows that are grouped together, that are hidden until the user expands the rows. </p>
1086
+ <div class="element-preview">
1087
+ <div class="element-preview__inner"><div class="container">
1088
+ <div class="row">
1089
+ <div class="col-12">
1090
+ <table class="msds-table">
1091
+ <thead class="msds-table__head">
1092
+ <tr class="msds-table__head-row">
1093
+ <th class="msds-table__header"></th>
1094
+ <th class="msds-table__header">
1095
+ <div class="msds-table__header-headline">
1096
+ case number
1097
+ <span class="msds-table__header-order-icon">
1098
+ <svg class="msds-table__header-descending-order-icon">
1099
+ <use href="../../msds-spritemap.svg#right-arrow" />
1100
+ </svg>
1101
+ <svg class="msds-table__header-acesnding-order-icon">
1102
+ <use href="../../msds-spritemap.svg#right-arrow" />
1103
+ </svg>
1104
+ </span>
1105
+ </div>
1106
+ </th>
1107
+ <th class="msds-table__header">
1108
+ <div class="msds-table__header-headline">
1109
+ subject
1110
+ <span class="msds-table__header-order-icon">
1111
+ <svg class="msds-table__header-descending-order-icon">
1112
+ <use href="../../msds-spritemap.svg#right-arrow" />
1113
+ </svg>
1114
+ <svg class="msds-table__header-acesnding-order-icon">
1115
+ <use href="../../msds-spritemap.svg#right-arrow" />
1116
+ </svg>
1117
+ </span>
1118
+ </div>
1119
+ </th>
1120
+ <th class="msds-table__header">
1121
+ <div class="msds-table__header-headline">
1122
+ status
1123
+ <span class="msds-table__header-order-icon">
1124
+ <svg class="msds-table__header-descending-order-icon">
1125
+ <use href="../../msds-spritemap.svg#right-arrow" />
1126
+ </svg>
1127
+ <svg class="msds-table__header-acesnding-order-icon">
1128
+ <use href="../../msds-spritemap.svg#right-arrow" />
1129
+ </svg>
1130
+ </span>
1131
+ </div>
1132
+ </th>
1133
+ <th class="msds-table__header">
1134
+ <div class="msds-table__header-headline">
1135
+ shared case
1136
+ <span class="msds-table__header-order-icon">
1137
+ <svg class="msds-table__header-descending-order-icon">
1138
+ <use href="../../msds-spritemap.svg#right-arrow" />
1139
+ </svg>
1140
+ <svg class="msds-table__header-acesnding-order-icon">
1141
+ <use href="../../msds-spritemap.svg#right-arrow" />
1142
+ </svg>
1143
+ </span>
1144
+ </div>
1145
+ </th>
1146
+ <th class="msds-table__header">
1147
+ <div class="msds-table__header-headline">
1148
+ last mts update
1149
+ <span class="msds-table__header-order-icon">
1150
+ <svg class="msds-table__header-descending-order-icon">
1151
+ <use href="../../msds-spritemap.svg#right-arrow" />
1152
+ </svg>
1153
+ <svg class="msds-table__header-acesnding-order-icon">
1154
+ <use href="../../msds-spritemap.svg#right-arrow" />
1155
+ </svg>
1156
+ </span>
1157
+ </div>
1158
+ </th>
1159
+ </tr>
1160
+ </thead>
1161
+ <tbody class="msds-table__body">
1162
+ <tr class="msds-table__body-row">
1163
+ <td class="msds-table__body-row-data">
1164
+ <svg class="msds-table__body-row-data-expandable-icon" data-expandable-parent="1">
1165
+ <use href="../../msds-spritemap.svg#right-arrow" />
1166
+ </svg>
1167
+ </td>
1168
+ <td class="msds-table__body-row-data">MSC374780</td>
1169
+ <td class="msds-table__body-row-data">“Test 11”</td>
1170
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
1171
+ <td class="msds-table__body-row-data">Yes</td>
1172
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
1173
+ </tr>
1174
+ <tr class="msds-table__body-row msds-table__body-row-expandable" data-expandable-child="1">
1175
+ <td class="msds-table__body-row-data"></td>
1176
+ <td class="msds-table__body-row-data">MSC65463</td>
1177
+ <td class="msds-table__body-row-data">“Test 13”</td>
1178
+ <td class="msds-table__body-row-data">Comfirmed MTS</td>
1179
+ <td class="msds-table__body-row-data">Yes</td>
1180
+ <td class="msds-table__body-row-data">9/10/2019 10:32:01 AM</td>
1181
+ </tr>
1182
+ <tr class="msds-table__body-row msds-table__body-row-expandable" data-expandable-child="1">
1183
+ <td class="msds-table__body-row-data"></td>
1184
+ <td class="msds-table__body-row-data">MSC546421</td>
1185
+ <td class="msds-table__body-row-data">“Test 22"</td>
1186
+ <td class="msds-table__body-row-data">Pending MTS</td>
1187
+ <td class="msds-table__body-row-data">No</td>
1188
+ <td class="msds-table__body-row-data">12/12/2020 5:12:01 AM</td>
1189
+ </tr>
1190
+ <tr class="msds-table__body-row">
1191
+ <td class="msds-table__body-row-data">
1192
+ <svg class="msds-table__body-row-data-expandable-icon msds-table--body-row-data-expandable-icon-active" data-expandable-parent="2">
1193
+ <use href="../../msds-spritemap.svg#right-arrow" />
1194
+ </svg>
1195
+ </td>
1196
+ <td class="msds-table__body-row-data">MSC103913</td>
1197
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
1198
+ <td class="msds-table__body-row-data">Closed</td>
1199
+ <td class="msds-table__body-row-data">Yes</td>
1200
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
1201
+ </tr>
1202
+ <tr class="msds-table__body-row msds-table__body-row-expandable msds-table--body-row-expandable-visible" data-expandable-child="2">
1203
+ <td class="msds-table__body-row-data"></td>
1204
+ <td class="msds-table__body-row-data">MSC65463</td>
1205
+ <td class="msds-table__body-row-data">“Test 13”</td>
1206
+ <td class="msds-table__body-row-data">Comfirmed MTS</td>
1207
+ <td class="msds-table__body-row-data">Yes</td>
1208
+ <td class="msds-table__body-row-data">9/10/2019 10:32:01 AM</td>
1209
+ </tr>
1210
+ </tbody>
1211
+ </table>
1212
+ </div>
1213
+ </div>
1214
+ </div></div>
1215
+ </div>
1216
+
1217
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
1218
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
1219
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
1220
+ <span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table"</span>&gt;</span>
1221
+ <span class="hljs-tag">&lt;<span class="hljs-name">thead</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__head"</span>&gt;</span>
1222
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__head-row"</span>&gt;</span>
1223
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
1224
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
1225
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
1226
+ case number
1227
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
1228
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
1229
+ <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>
1230
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1231
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
1232
+ <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>
1233
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1234
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1235
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1236
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
1237
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
1238
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
1239
+ subject
1240
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
1241
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
1242
+ <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>
1243
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1244
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
1245
+ <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>
1246
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1247
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1248
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1249
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
1250
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
1251
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
1252
+ status
1253
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
1254
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
1255
+ <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>
1256
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1257
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
1258
+ <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>
1259
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1260
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1261
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1262
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
1263
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
1264
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
1265
+ shared case
1266
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
1267
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
1268
+ <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>
1269
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1270
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
1271
+ <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>
1272
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1273
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1274
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1275
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
1276
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header"</span>&gt;</span>
1277
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-headline"</span>&gt;</span>
1278
+ last mts update
1279
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-order-icon"</span>&gt;</span>
1280
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-descending-order-icon"</span>&gt;</span>
1281
+ <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>
1282
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1283
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__header-acesnding-order-icon"</span>&gt;</span>
1284
+ <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>
1285
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1286
+ <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1287
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1288
+ <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
1289
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
1290
+ <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span>
1291
+ <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body"</span>&gt;</span>
1292
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row"</span>&gt;</span>
1293
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>
1294
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data-expandable-icon"</span> <span class="hljs-attr">data-expandable-parent</span>=<span class="hljs-string">"1"</span>&gt;</span>
1295
+ <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>
1296
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1297
+ <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1298
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC374780<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1299
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>“Test 11”<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1300
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Awaiting MTS<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1301
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1302
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>8/1/2019 11:18:01 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1303
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
1304
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row msds-table__body-row-expandable"</span> <span class="hljs-attr">data-expandable-child</span>=<span class="hljs-string">"1"</span>&gt;</span>
1305
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1306
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC65463<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1307
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>“Test 13”<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1308
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Comfirmed MTS<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1309
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1310
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>9/10/2019 10:32:01 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1311
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
1312
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row msds-table__body-row-expandable"</span> <span class="hljs-attr">data-expandable-child</span>=<span class="hljs-string">"1"</span>&gt;</span>
1313
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1314
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC546421<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1315
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>“Test 22"<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1316
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Pending MTS<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1317
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>No<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1318
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>12/12/2020 5:12:01 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1319
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
1320
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row"</span>&gt;</span>
1321
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>
1322
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data-expandable-icon msds-table--body-row-data-expandable-icon-active"</span> <span class="hljs-attr">data-expandable-parent</span>=<span class="hljs-string">"2"</span>&gt;</span>
1323
+ <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>
1324
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1325
+ <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1326
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC103913<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1327
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Test 4ward2SF - 1 email address<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1328
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Closed<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1329
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1330
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>1/1/0001 12:00:00 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1331
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
1332
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row msds-table__body-row-expandable msds-table--body-row-expandable-visible"</span> <span class="hljs-attr">data-expandable-child</span>=<span class="hljs-string">"2"</span>&gt;</span>
1333
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1334
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>MSC65463<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1335
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>“Test 13”<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1336
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Comfirmed MTS<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1337
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1338
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-table__body-row-data"</span>&gt;</span>9/10/2019 10:32:01 AM<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
1339
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
1340
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
1341
+ <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
1342
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1343
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1344
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="tables-dark-themed">Tables Dark Themed</h3>
1345
+ <p>Tables come in a second layout theme called a dark theme. To make use of the dark theme, add an additional modifier class to the components wrapper tag <code>msds-table <b>msds-table--dark-theme</b></code>.</p>
1346
+ <div class="element-preview-dark">
1347
+ <div class="element-preview__inner"><div class="container">
1348
+ <div class="row">
1349
+ <div class="col-12">
1350
+ <table class="msds-table msds-table--dark-theme">
1351
+ <thead class="msds-table__head">
1352
+ <tr class="msds-table__head-row">
1353
+ <th class="msds-table__header">
1354
+ <div class="msds-table__header-headline">
1355
+ case number
1356
+ <span class="msds-table__header-order-icon">
1357
+ <svg class="msds-table__header-descending-order-icon">
1358
+ <use href="../../msds-spritemap.svg#right-arrow" />
1359
+ </svg>
1360
+ <svg class="msds-table__header-acesnding-order-icon">
1361
+ <use href="../../msds-spritemap.svg#right-arrow" />
1362
+ </svg>
1363
+ </span>
1364
+ </div>
1365
+ </th>
1366
+ <th class="msds-table__header">
1367
+ <div class="msds-table__header-headline">
1368
+ subject
1369
+ <span class="msds-table__header-order-icon">
1370
+ <svg class="msds-table__header-descending-order-icon">
1371
+ <use href="../../msds-spritemap.svg#right-arrow" />
1372
+ </svg>
1373
+ <svg class="msds-table__header-acesnding-order-icon">
1374
+ <use href="../../msds-spritemap.svg#right-arrow" />
1375
+ </svg>
1376
+ </span>
1377
+ </div>
1378
+ </th>
1379
+ <th class="msds-table__header">
1380
+ <div class="msds-table__header-headline">
1381
+ status
1382
+ <span class="msds-table__header-order-icon">
1383
+ <svg class="msds-table__header-descending-order-icon">
1384
+ <use href="../../msds-spritemap.svg#right-arrow" />
1385
+ </svg>
1386
+ <svg class="msds-table__header-acesnding-order-icon">
1387
+ <use href="../../msds-spritemap.svg#right-arrow" />
1388
+ </svg>
1389
+ </span>
1390
+ </div>
1391
+ </th>
1392
+ <th class="msds-table__header">
1393
+ <div class="msds-table__header-headline">
1394
+ shared case
1395
+ <span class="msds-table__header-order-icon">
1396
+ <svg class="msds-table__header-descending-order-icon">
1397
+ <use href="../../msds-spritemap.svg#right-arrow" />
1398
+ </svg>
1399
+ <svg class="msds-table__header-acesnding-order-icon">
1400
+ <use href="../../msds-spritemap.svg#right-arrow" />
1401
+ </svg>
1402
+ </span>
1403
+ </div>
1404
+ </th>
1405
+ <th class="msds-table__header">
1406
+ <div class="msds-table__header-headline">
1407
+ link
1408
+ <span class="msds-table__header-order-icon">
1409
+ <svg class="msds-table__header-descending-order-icon">
1410
+ <use href="../../msds-spritemap.svg#right-arrow" />
1411
+ </svg>
1412
+ <svg class="msds-table__header-acesnding-order-icon">
1413
+ <use href="../../msds-spritemap.svg#right-arrow" />
1414
+ </svg>
1415
+ </span>
1416
+ </div>
1417
+ </th>
1418
+ <th class="msds-table__header">
1419
+ <div class="msds-table__header-headline">
1420
+ last mts update
1421
+ <span class="msds-table__header-order-icon">
1422
+ <svg class="msds-table__header-descending-order-icon">
1423
+ <use href="../../msds-spritemap.svg#right-arrow" />
1424
+ </svg>
1425
+ <svg class="msds-table__header-acesnding-order-icon">
1426
+ <use href="../../msds-spritemap.svg#right-arrow" />
1427
+ </svg>
1428
+ </span>
1429
+ </div>
1430
+ </th>
1431
+ </tr>
1432
+ </thead>
1433
+ <tbody class="msds-table__body">
1434
+ <tr class="msds-table__body-row">
1435
+ <td class="msds-table__body-row-data">MSC374780</td>
1436
+ <td class="msds-table__body-row-data">“Test 11”</td>
1437
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
1438
+ <td class="msds-table__body-row-data">Yes</td>
1439
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
1440
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
1441
+ </tr>
1442
+ <tr class="msds-table__body-row">
1443
+ <td class="msds-table__body-row-data">MSC103913</td>
1444
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
1445
+ <td class="msds-table__body-row-data">Closed</td>
1446
+ <td class="msds-table__body-row-data">Yes</td>
1447
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
1448
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
1449
+ </tr>
1450
+ <tr class="msds-table__body-row">
1451
+ <td class="msds-table__body-row-data">MSC374780</td>
1452
+ <td class="msds-table__body-row-data">“Test 11”</td>
1453
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
1454
+ <td class="msds-table__body-row-data">Yes</td>
1455
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
1456
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
1457
+ </tr>
1458
+ <tr class="msds-table__body-row">
1459
+ <td class="msds-table__body-row-data">MSC103913</td>
1460
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
1461
+ <td class="msds-table__body-row-data">Closed</td>
1462
+ <td class="msds-table__body-row-data">Yes</td>
1463
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
1464
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
1465
+ </tr>
1466
+ <tr class="msds-table__body-row">
1467
+ <td class="msds-table__body-row-data">MSC374780</td>
1468
+ <td class="msds-table__body-row-data">“Test 11”</td>
1469
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
1470
+ <td class="msds-table__body-row-data">Yes</td>
1471
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
1472
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
1473
+ </tr>
1474
+ <tr class="msds-table__body-row">
1475
+ <td class="msds-table__body-row-data">MSC103913</td>
1476
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
1477
+ <td class="msds-table__body-row-data">Closed</td>
1478
+ <td class="msds-table__body-row-data">Yes</td>
1479
+ <td class="msds-table__body-row-data"><a href="#">Link</a></td>
1480
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
1481
+ </tr>
1482
+ </tbody>
1483
+ </table>
1484
+ </div>
1485
+ </div>
1486
+ </div></div>
1487
+ </div>
1488
+
1489
+ <h3 id="tables-dark-themed-expandable-rows">Tables Dark Themed Expandable Rows</h3>
1490
+ <p>Dark themed tables can also make use of the expandable tables styling in a dark theme. To make use of dark themed expading rows, add an additional modifier class to the components wrapper tag <code>msds-table <b>msds-table--dark-theme</b></code>.</p>
1491
+ <div class="element-preview-dark">
1492
+ <div class="element-preview__inner"><div class="container">
1493
+ <div class="row">
1494
+ <div class="col-12">
1495
+ <table class="msds-table msds-table--dark-theme">
1496
+ <thead class="msds-table__head">
1497
+ <tr class="msds-table__head-row">
1498
+ <th class="msds-table__header"></th>
1499
+ <th class="msds-table__header">
1500
+ <div class="msds-table__header-headline">
1501
+ case number
1502
+ <span class="msds-table__header-order-icon">
1503
+ <svg class="msds-table__header-descending-order-icon">
1504
+ <use href="../../msds-spritemap.svg#right-arrow" />
1505
+ </svg>
1506
+ <svg class="msds-table__header-acesnding-order-icon">
1507
+ <use href="../../msds-spritemap.svg#right-arrow" />
1508
+ </svg>
1509
+ </span>
1510
+ </div>
1511
+ </th>
1512
+ <th class="msds-table__header">
1513
+ <div class="msds-table__header-headline">
1514
+ subject
1515
+ <span class="msds-table__header-order-icon">
1516
+ <svg class="msds-table__header-descending-order-icon">
1517
+ <use href="../../msds-spritemap.svg#right-arrow" />
1518
+ </svg>
1519
+ <svg class="msds-table__header-acesnding-order-icon">
1520
+ <use href="../../msds-spritemap.svg#right-arrow" />
1521
+ </svg>
1522
+ </span>
1523
+ </div>
1524
+ </th>
1525
+ <th class="msds-table__header">
1526
+ <div class="msds-table__header-headline">
1527
+ status
1528
+ <span class="msds-table__header-order-icon">
1529
+ <svg class="msds-table__header-descending-order-icon">
1530
+ <use href="../../msds-spritemap.svg#right-arrow" />
1531
+ </svg>
1532
+ <svg class="msds-table__header-acesnding-order-icon">
1533
+ <use href="../../msds-spritemap.svg#right-arrow" />
1534
+ </svg>
1535
+ </span>
1536
+ </div>
1537
+ </th>
1538
+ <th class="msds-table__header">
1539
+ <div class="msds-table__header-headline">
1540
+ shared case
1541
+ <span class="msds-table__header-order-icon">
1542
+ <svg class="msds-table__header-descending-order-icon">
1543
+ <use href="../../msds-spritemap.svg#right-arrow" />
1544
+ </svg>
1545
+ <svg class="msds-table__header-acesnding-order-icon">
1546
+ <use href="../../msds-spritemap.svg#right-arrow" />
1547
+ </svg>
1548
+ </span>
1549
+ </div>
1550
+ </th>
1551
+ <th class="msds-table__header">
1552
+ <div class="msds-table__header-headline">
1553
+ last mts update
1554
+ <span class="msds-table__header-order-icon">
1555
+ <svg class="msds-table__header-descending-order-icon">
1556
+ <use href="../../msds-spritemap.svg#right-arrow" />
1557
+ </svg>
1558
+ <svg class="msds-table__header-acesnding-order-icon">
1559
+ <use href="../../msds-spritemap.svg#right-arrow" />
1560
+ </svg>
1561
+ </span>
1562
+ </div>
1563
+ </th>
1564
+ </tr>
1565
+ </thead>
1566
+ <tbody class="msds-table__body">
1567
+ <tr class="msds-table__body-row">
1568
+ <td class="msds-table__body-row-data">
1569
+ <svg class="msds-table__body-row-data-expandable-icon" data-expandable-parent="3">
1570
+ <use href="../../msds-spritemap.svg#right-arrow" />
1571
+ </svg>
1572
+ </td>
1573
+ <td class="msds-table__body-row-data">MSC374780</td>
1574
+ <td class="msds-table__body-row-data">“Test 11”</td>
1575
+ <td class="msds-table__body-row-data">Awaiting MTS</td>
1576
+ <td class="msds-table__body-row-data">Yes</td>
1577
+ <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
1578
+ </tr>
1579
+ <tr class="msds-table__body-row msds-table__body-row-expandable" data-expandable-child="3">
1580
+ <td class="msds-table__body-row-data"></td>
1581
+ <td class="msds-table__body-row-data">MSC65463</td>
1582
+ <td class="msds-table__body-row-data">“Test 13”</td>
1583
+ <td class="msds-table__body-row-data">Comfirmed MTS</td>
1584
+ <td class="msds-table__body-row-data">Yes</td>
1585
+ <td class="msds-table__body-row-data">9/10/2019 10:32:01 AM</td>
1586
+ </tr>
1587
+ <tr class="msds-table__body-row msds-table__body-row-expandable" data-expandable-child="3">
1588
+ <td class="msds-table__body-row-data"></td>
1589
+ <td class="msds-table__body-row-data">MSC546421</td>
1590
+ <td class="msds-table__body-row-data">“Test 22"</td>
1591
+ <td class="msds-table__body-row-data">Pending MTS</td>
1592
+ <td class="msds-table__body-row-data">No</td>
1593
+ <td class="msds-table__body-row-data">12/12/2020 5:12:01 AM</td>
1594
+ </tr>
1595
+ <tr class="msds-table__body-row">
1596
+ <td class="msds-table__body-row-data">
1597
+ <svg class="msds-table__body-row-data-expandable-icon msds-table--body-row-data-expandable-icon-active" data-expandable-parent="4">
1598
+ <use href="../../msds-spritemap.svg#right-arrow" />
1599
+ </svg>
1600
+ </td>
1601
+ <td class="msds-table__body-row-data">MSC103913</td>
1602
+ <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
1603
+ <td class="msds-table__body-row-data">Closed</td>
1604
+ <td class="msds-table__body-row-data">Yes</td>
1605
+ <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
1606
+ </tr>
1607
+ <tr class="msds-table__body-row msds-table__body-row-expandable msds-table--body-row-expandable-visible" data-expandable-child="4">
1608
+ <td class="msds-table__body-row-data"></td>
1609
+ <td class="msds-table__body-row-data">MSC65463</td>
1610
+ <td class="msds-table__body-row-data">“Test 13”</td>
1611
+ <td class="msds-table__body-row-data">Comfirmed MTS</td>
1612
+ <td class="msds-table__body-row-data">Yes</td>
1613
+ <td class="msds-table__body-row-data">9/10/2019 10:32:01 AM</td>
1614
+ </tr>
1615
+ </tbody>
1616
+ </table>
1617
+ </div>
1618
+ </div>
1619
+ </div></div>
1620
+ </div>
1621
+
1622
+
1623
+
1624
+
1625
+ </div>
1626
+
1627
+
1628
+
1629
+ </div>
1630
+
1631
+ </div>
1632
+
1633
+
1634
+ </div>
1635
+ </div>
1636
+
1637
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
1638
+
1639
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
1640
+ <nav class="Navigation">
1641
+
1642
+
1643
+ <div class="Navigation-group">
1644
+
1645
+ <div class="Tree" data-behaviour="tree" id="tree-components">
1646
+ <div class="Tree-header">
1647
+ <h3 class="Tree-title">components</h3>
1648
+
1649
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
1650
+ <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>
1651
+
1652
+ </button>
1653
+ </div>
1654
+ <ul class="Tree-items Tree-depth-1">
1655
+
1656
+
1657
+
1658
+
1659
+ <li class="Tree-item Tree-entity" data-role="item">
1660
+ <a class="Tree-entityLink" href="../../components/detail/tab-tile.html" data-pjax>
1661
+ <span>Tab Tile</span>
1662
+
1663
+
1664
+ <div class="Status Status--unlabelled">
1665
+
1666
+ <div class="Status-dots">
1667
+
1668
+
1669
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
1670
+
1671
+
1672
+ </div>
1673
+
1674
+ </div>
1675
+
1676
+
1677
+ </a>
1678
+ </li>
1679
+
1680
+
1681
+
1682
+ </ul>
1683
+ </div>
1684
+
1685
+ </div>
1686
+
1687
+
1688
+
1689
+
1690
+ <div class="Navigation-group">
1691
+
1692
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
1693
+ <div class="Tree-header">
1694
+ <h3 class="Tree-title">documentation</h3>
1695
+
1696
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
1697
+ <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>
1698
+
1699
+ </button>
1700
+ </div>
1701
+ <ul class="Tree-items Tree-depth-1">
1702
+
1703
+
1704
+
1705
+
1706
+ <li class="Tree-item Tree-entity" data-role="item">
1707
+ <a class="Tree-entityLink" href="../../index.html" data-pjax>
1708
+ <span>Overview</span>
1709
+
1710
+ </a>
1711
+ </li>
1712
+
1713
+
1714
+
1715
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
1716
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
1717
+ Content
1718
+ </button>
1719
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
1720
+
1721
+
1722
+
1723
+
1724
+
1725
+
1726
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
1727
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
1728
+ Icons
1729
+ </button>
1730
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
1731
+
1732
+
1733
+
1734
+
1735
+
1736
+
1737
+
1738
+ <li class="Tree-item Tree-entity" data-role="item">
1739
+ <a class="Tree-entityLink" href="../content/icons/-overview.html" data-pjax>
1740
+ <span>Overview</span>
1741
+
1742
+ </a>
1743
+ </li>
1744
+
1745
+
1746
+
1747
+
1748
+ <li class="Tree-item Tree-entity" data-role="item">
1749
+ <a class="Tree-entityLink" href="../content/icons/icons-flat.html" data-pjax>
1750
+ <span>Icons Flat</span>
1751
+
1752
+ </a>
1753
+ </li>
1754
+
1755
+
1756
+
1757
+
1758
+ <li class="Tree-item Tree-entity" data-role="item">
1759
+ <a class="Tree-entityLink" href="../content/icons/icons-rich.html" data-pjax>
1760
+ <span>Icons Rich</span>
1761
+
1762
+ </a>
1763
+ </li>
1764
+
1765
+
1766
+
1767
+ </ul>
1768
+ </li>
1769
+
1770
+
1771
+
1772
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
1773
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
1774
+ Typography
1775
+ </button>
1776
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
1777
+
1778
+
1779
+
1780
+
1781
+
1782
+
1783
+
1784
+ <li class="Tree-item Tree-entity" data-role="item">
1785
+ <a class="Tree-entityLink" href="../content/typography/-overview.html" data-pjax>
1786
+ <span>Overview</span>
1787
+
1788
+ </a>
1789
+ </li>
1790
+
1791
+
1792
+
1793
+
1794
+ <li class="Tree-item Tree-entity" data-role="item">
1795
+ <a class="Tree-entityLink" href="../content/typography/font-colors.html" data-pjax>
1796
+ <span>Font Colors</span>
1797
+
1798
+ </a>
1799
+ </li>
1800
+
1801
+
1802
+
1803
+
1804
+ <li class="Tree-item Tree-entity" data-role="item">
1805
+ <a class="Tree-entityLink" href="../content/typography/links.html" data-pjax>
1806
+ <span>Links</span>
1807
+
1808
+ </a>
1809
+ </li>
1810
+
1811
+
1812
+
1813
+
1814
+ <li class="Tree-item Tree-entity" data-role="item">
1815
+ <a class="Tree-entityLink" href="../content/typography/lists.html" data-pjax>
1816
+ <span>Lists</span>
1817
+
1818
+ </a>
1819
+ </li>
1820
+
1821
+
1822
+
1823
+
1824
+ <li class="Tree-item Tree-entity" data-role="item">
1825
+ <a class="Tree-entityLink" href="../content/typography/text.html" data-pjax>
1826
+ <span>Text</span>
1827
+
1828
+ </a>
1829
+ </li>
1830
+
1831
+
1832
+
1833
+ </ul>
1834
+ </li>
1835
+
1836
+
1837
+
1838
+ </ul>
1839
+ </li>
1840
+
1841
+
1842
+
1843
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
1844
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
1845
+ Component Documentation
1846
+ </button>
1847
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
1848
+
1849
+
1850
+
1851
+
1852
+
1853
+
1854
+
1855
+ <li class="Tree-item Tree-entity" data-role="item">
1856
+ <a class="Tree-entityLink" href="alerts.html" data-pjax>
1857
+ <span>Alerts</span>
1858
+
1859
+ </a>
1860
+ </li>
1861
+
1862
+
1863
+
1864
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
1865
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
1866
+ Buttons
1867
+ </button>
1868
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
1869
+
1870
+
1871
+
1872
+
1873
+
1874
+
1875
+
1876
+ <li class="Tree-item Tree-entity" data-role="item">
1877
+ <a class="Tree-entityLink" href="buttons/buttons.html" data-pjax>
1878
+ <span>Buttons</span>
1879
+
1880
+ </a>
1881
+ </li>
1882
+
1883
+
1884
+
1885
+
1886
+ <li class="Tree-item Tree-entity" data-role="item">
1887
+ <a class="Tree-entityLink" href="buttons/buttons-floating.html" data-pjax>
1888
+ <span>Buttons Floating</span>
1889
+
1890
+ </a>
1891
+ </li>
1892
+
1893
+
1894
+
1895
+ </ul>
1896
+ </li>
1897
+
1898
+
1899
+
1900
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
1901
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
1902
+ Cards
1903
+ </button>
1904
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
1905
+
1906
+
1907
+
1908
+
1909
+
1910
+
1911
+
1912
+ <li class="Tree-item Tree-entity" data-role="item">
1913
+ <a class="Tree-entityLink" href="cards/basic-cards.html" data-pjax>
1914
+ <span>Basic Cards</span>
1915
+
1916
+ </a>
1917
+ </li>
1918
+
1919
+
1920
+
1921
+
1922
+ <li class="Tree-item Tree-entity" data-role="item">
1923
+ <a class="Tree-entityLink" href="cards/category-cards.html" data-pjax>
1924
+ <span>Category Cards</span>
1925
+
1926
+ </a>
1927
+ </li>
1928
+
1929
+
1930
+
1931
+
1932
+ <li class="Tree-item Tree-entity" data-role="item">
1933
+ <a class="Tree-entityLink" href="cards/contact-cards.html" data-pjax>
1934
+ <span>Contact Cards</span>
1935
+
1936
+ </a>
1937
+ </li>
1938
+
1939
+
1940
+
1941
+
1942
+ <li class="Tree-item Tree-entity" data-role="item">
1943
+ <a class="Tree-entityLink" href="cards/generic-cards.html" data-pjax>
1944
+ <span>Generic Cards</span>
1945
+
1946
+ </a>
1947
+ </li>
1948
+
1949
+
1950
+
1951
+
1952
+ <li class="Tree-item Tree-entity" data-role="item">
1953
+ <a class="Tree-entityLink" href="cards/solution-cards.html" data-pjax>
1954
+ <span>Solution Cards</span>
1955
+
1956
+ </a>
1957
+ </li>
1958
+
1959
+
1960
+
1961
+ </ul>
1962
+ </li>
1963
+
1964
+
1965
+
1966
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
1967
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
1968
+ Dividers
1969
+ </button>
1970
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
1971
+
1972
+
1973
+
1974
+
1975
+
1976
+
1977
+
1978
+ <li class="Tree-item Tree-entity" data-role="item">
1979
+ <a class="Tree-entityLink" href="dividers/dividers.html" data-pjax>
1980
+ <span>Dividers</span>
1981
+
1982
+ </a>
1983
+ </li>
1984
+
1985
+
1986
+
1987
+ </ul>
1988
+ </li>
1989
+
1990
+
1991
+
1992
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
1993
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
1994
+ Expanding Components
1995
+ </button>
1996
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
1997
+
1998
+
1999
+
2000
+
2001
+
2002
+
2003
+
2004
+ <li class="Tree-item Tree-entity" data-role="item">
2005
+ <a class="Tree-entityLink" href="expanding-components/accordion.html" data-pjax>
2006
+ <span>Accordion</span>
2007
+
2008
+ </a>
2009
+ </li>
2010
+
2011
+
2012
+
2013
+
2014
+ <li class="Tree-item Tree-entity" data-role="item">
2015
+ <a class="Tree-entityLink" href="expanding-components/section.html" data-pjax>
2016
+ <span>Section</span>
2017
+
2018
+ </a>
2019
+ </li>
2020
+
2021
+
2022
+
2023
+ </ul>
2024
+ </li>
2025
+
2026
+
2027
+
2028
+
2029
+ <li class="Tree-item Tree-entity" data-role="item">
2030
+ <a class="Tree-entityLink" href="modal.html" data-pjax>
2031
+ <span>Modal</span>
2032
+
2033
+ </a>
2034
+ </li>
2035
+
2036
+
2037
+
2038
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
2039
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
2040
+ Popover
2041
+ </button>
2042
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
2043
+
2044
+
2045
+
2046
+
2047
+
2048
+
2049
+
2050
+ <li class="Tree-item Tree-entity" data-role="item">
2051
+ <a class="Tree-entityLink" href="popover/popover.html" data-pjax>
2052
+ <span>Popover</span>
2053
+
2054
+ </a>
2055
+ </li>
2056
+
2057
+
2058
+
2059
+ </ul>
2060
+ </li>
2061
+
2062
+
2063
+
2064
+
2065
+ <li class="Tree-item Tree-entity" data-role="item">
2066
+ <a class="Tree-entityLink" href="progress-bar.html" data-pjax>
2067
+ <span>Progress Bar</span>
2068
+
2069
+ </a>
2070
+ </li>
2071
+
2072
+
2073
+
2074
+
2075
+ <li class="Tree-item Tree-entity" data-role="item">
2076
+ <a class="Tree-entityLink" href="spacing.html" data-pjax>
2077
+ <span>Spacing</span>
2078
+
2079
+ </a>
2080
+ </li>
2081
+
2082
+
2083
+
2084
+
2085
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
2086
+ <a class="Tree-entityLink" href="" data-pjax>
2087
+ <span>Table</span>
2088
+
2089
+ </a>
2090
+ </li>
2091
+
2092
+
2093
+
2094
+ </ul>
2095
+ </li>
2096
+
2097
+
2098
+
2099
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
2100
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
2101
+ Forms
2102
+ </button>
2103
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
2104
+
2105
+
2106
+
2107
+
2108
+
2109
+
2110
+
2111
+ <li class="Tree-item Tree-entity" data-role="item">
2112
+ <a class="Tree-entityLink" href="../forms/-overview.html" data-pjax>
2113
+ <span>Overview</span>
2114
+
2115
+ </a>
2116
+ </li>
2117
+
2118
+
2119
+
2120
+
2121
+ <li class="Tree-item Tree-entity" data-role="item">
2122
+ <a class="Tree-entityLink" href="../forms/checkbox.html" data-pjax>
2123
+ <span>Checkbox</span>
2124
+
2125
+ </a>
2126
+ </li>
2127
+
2128
+
2129
+
2130
+
2131
+ <li class="Tree-item Tree-entity" data-role="item">
2132
+ <a class="Tree-entityLink" href="../forms/drop-down-list.html" data-pjax>
2133
+ <span>Drop Down List</span>
2134
+
2135
+ </a>
2136
+ </li>
2137
+
2138
+
2139
+
2140
+
2141
+ <li class="Tree-item Tree-entity" data-role="item">
2142
+ <a class="Tree-entityLink" href="../forms/input-field.html" data-pjax>
2143
+ <span>Input Field</span>
2144
+
2145
+ </a>
2146
+ </li>
2147
+
2148
+
2149
+
2150
+
2151
+ <li class="Tree-item Tree-entity" data-role="item">
2152
+ <a class="Tree-entityLink" href="../forms/radio-button.html" data-pjax>
2153
+ <span>Radio Button</span>
2154
+
2155
+ </a>
2156
+ </li>
2157
+
2158
+
2159
+
2160
+
2161
+ <li class="Tree-item Tree-entity" data-role="item">
2162
+ <a class="Tree-entityLink" href="../forms/switch.html" data-pjax>
2163
+ <span>Switch</span>
2164
+
2165
+ </a>
2166
+ </li>
2167
+
2168
+
2169
+
2170
+
2171
+ <li class="Tree-item Tree-entity" data-role="item">
2172
+ <a class="Tree-entityLink" href="../forms/text-area.html" data-pjax>
2173
+ <span>Text Area</span>
2174
+
2175
+ </a>
2176
+ </li>
2177
+
2178
+
2179
+
2180
+ </ul>
2181
+ </li>
2182
+
2183
+
2184
+
2185
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
2186
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
2187
+ Utilities
2188
+ </button>
2189
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
2190
+
2191
+
2192
+
2193
+
2194
+
2195
+
2196
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
2197
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
2198
+ Colors
2199
+ </button>
2200
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
2201
+
2202
+
2203
+
2204
+
2205
+
2206
+
2207
+
2208
+ <li class="Tree-item Tree-entity" data-role="item">
2209
+ <a class="Tree-entityLink" href="../utilities/colors/overview.html" data-pjax>
2210
+ <span>Overview</span>
2211
+
2212
+ </a>
2213
+ </li>
2214
+
2215
+
2216
+
2217
+
2218
+ <li class="Tree-item Tree-entity" data-role="item">
2219
+ <a class="Tree-entityLink" href="../utilities/colors/font-colors.html" data-pjax>
2220
+ <span>Font Colors</span>
2221
+
2222
+ </a>
2223
+ </li>
2224
+
2225
+
2226
+
2227
+
2228
+ <li class="Tree-item Tree-entity" data-role="item">
2229
+ <a class="Tree-entityLink" href="../utilities/colors/background-colors.html" data-pjax>
2230
+ <span>Background Colors</span>
2231
+
2232
+ </a>
2233
+ </li>
2234
+
2235
+
2236
+
2237
+ </ul>
2238
+ </li>
2239
+
2240
+
2241
+
2242
+
2243
+ <li class="Tree-item Tree-entity" data-role="item">
2244
+ <a class="Tree-entityLink" href="../utilities/spacing.html" data-pjax>
2245
+ <span>Spacing</span>
2246
+
2247
+ </a>
2248
+ </li>
2249
+
2250
+
2251
+
2252
+ </ul>
2253
+ </li>
2254
+
2255
+
2256
+
2257
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
2258
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
2259
+ Guidelines And Guides
2260
+ </button>
2261
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
2262
+
2263
+
2264
+
2265
+
2266
+
2267
+
2268
+
2269
+ <li class="Tree-item Tree-entity" data-role="item">
2270
+ <a class="Tree-entityLink" href="../guidelines-and-guides/creating-a-new-release.html" data-pjax>
2271
+ <span>Creating A New Release</span>
2272
+
2273
+ </a>
2274
+ </li>
2275
+
2276
+
2277
+
2278
+
2279
+ <li class="Tree-item Tree-entity" data-role="item">
2280
+ <a class="Tree-entityLink" href="../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
2281
+ <span>Css And Scss Guidelines</span>
2282
+
2283
+ </a>
2284
+ </li>
2285
+
2286
+
2287
+
2288
+
2289
+ <li class="Tree-item Tree-entity" data-role="item">
2290
+ <a class="Tree-entityLink" href="../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
2291
+ <span>Git Cheat Sheet</span>
2292
+
2293
+ </a>
2294
+ </li>
2295
+
2296
+
2297
+
2298
+
2299
+ <li class="Tree-item Tree-entity" data-role="item">
2300
+ <a class="Tree-entityLink" href="../guidelines-and-guides/installation-and-usage.html" data-pjax>
2301
+ <span>Installation And Usage</span>
2302
+
2303
+ </a>
2304
+ </li>
2305
+
2306
+
2307
+
2308
+ </ul>
2309
+ </li>
2310
+
2311
+
2312
+
2313
+ </ul>
2314
+ </div>
2315
+
2316
+ </div>
2317
+
2318
+
2319
+
2320
+ </nav>
2321
+
2322
+ </div>
2323
+ </div>
2324
+ </div>
2325
+
2326
+
2327
+
2328
+
2329
+ <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
2330
+
2331
+ <script src="../../design-system.js?cachebust=1.4.0"></script>
2332
+
2333
+
2334
+
2335
+ </body>
2336
+ </html>