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