@ulu/frontend 0.1.0-beta.1 → 0.1.0-beta.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 (244) hide show
  1. package/CHANGELOG.md +13 -2
  2. package/docs-dev/assets/chunks/modulepreload-polyfill.DaKOjhqt.js +37 -0
  3. package/docs-dev/assets/favicons/android-chrome-192x192.png +0 -0
  4. package/docs-dev/assets/favicons/android-chrome-256x256.png +0 -0
  5. package/docs-dev/assets/favicons/apple-touch-icon.png +0 -0
  6. package/docs-dev/assets/favicons/browserconfig.xml +9 -0
  7. package/docs-dev/assets/favicons/favicon-16x16.png +0 -0
  8. package/docs-dev/assets/favicons/favicon-32x32.png +0 -0
  9. package/docs-dev/assets/favicons/favicon.ico +0 -0
  10. package/docs-dev/assets/favicons/mstile-150x150.png +0 -0
  11. package/docs-dev/assets/favicons/safari-pinned-tab.svg +1 -0
  12. package/docs-dev/assets/favicons/site.webmanifest +19 -0
  13. package/docs-dev/assets/fonts/fontawesome/fa-brands-400.ttf +0 -0
  14. package/docs-dev/assets/fonts/fontawesome/fa-brands-400.woff2 +0 -0
  15. package/docs-dev/assets/fonts/fontawesome/fa-regular-400.ttf +0 -0
  16. package/docs-dev/assets/fonts/fontawesome/fa-regular-400.woff2 +0 -0
  17. package/docs-dev/assets/fonts/fontawesome/fa-solid-900.ttf +0 -0
  18. package/docs-dev/assets/fonts/fontawesome/fa-solid-900.woff2 +0 -0
  19. package/docs-dev/assets/fonts/fontawesome/fa-v4compatibility.ttf +0 -0
  20. package/docs-dev/assets/fonts/fontawesome/fa-v4compatibility.woff2 +0 -0
  21. package/docs-dev/assets/fonts/inter/Inter-Black.woff2 +0 -0
  22. package/docs-dev/assets/fonts/inter/Inter-BlackItalic.woff2 +0 -0
  23. package/docs-dev/assets/fonts/inter/Inter-Bold.woff2 +0 -0
  24. package/docs-dev/assets/fonts/inter/Inter-BoldItalic.woff2 +0 -0
  25. package/docs-dev/assets/fonts/inter/Inter-ExtraBold.woff2 +0 -0
  26. package/docs-dev/assets/fonts/inter/Inter-ExtraBoldItalic.woff2 +0 -0
  27. package/docs-dev/assets/fonts/inter/Inter-ExtraLight.woff2 +0 -0
  28. package/docs-dev/assets/fonts/inter/Inter-ExtraLightItalic.woff2 +0 -0
  29. package/docs-dev/assets/fonts/inter/Inter-Italic.woff2 +0 -0
  30. package/docs-dev/assets/fonts/inter/Inter-Light.woff2 +0 -0
  31. package/docs-dev/assets/fonts/inter/Inter-LightItalic.woff2 +0 -0
  32. package/docs-dev/assets/fonts/inter/Inter-Medium.woff2 +0 -0
  33. package/docs-dev/assets/fonts/inter/Inter-MediumItalic.woff2 +0 -0
  34. package/docs-dev/assets/fonts/inter/Inter-Regular.woff2 +0 -0
  35. package/docs-dev/assets/fonts/inter/Inter-SemiBold.woff2 +0 -0
  36. package/docs-dev/assets/fonts/inter/Inter-SemiBoldItalic.woff2 +0 -0
  37. package/docs-dev/assets/fonts/inter/Inter-Thin.woff2 +0 -0
  38. package/docs-dev/assets/fonts/inter/Inter-ThinItalic.woff2 +0 -0
  39. package/docs-dev/assets/fonts/inter/InterDisplay-Black.woff2 +0 -0
  40. package/docs-dev/assets/fonts/inter/InterDisplay-BlackItalic.woff2 +0 -0
  41. package/docs-dev/assets/fonts/inter/InterDisplay-Bold.woff2 +0 -0
  42. package/docs-dev/assets/fonts/inter/InterDisplay-BoldItalic.woff2 +0 -0
  43. package/docs-dev/assets/fonts/inter/InterDisplay-ExtraBold.woff2 +0 -0
  44. package/docs-dev/assets/fonts/inter/InterDisplay-ExtraBoldItalic.woff2 +0 -0
  45. package/docs-dev/assets/fonts/inter/InterDisplay-ExtraLight.woff2 +0 -0
  46. package/docs-dev/assets/fonts/inter/InterDisplay-ExtraLightItalic.woff2 +0 -0
  47. package/docs-dev/assets/fonts/inter/InterDisplay-Italic.woff2 +0 -0
  48. package/docs-dev/assets/fonts/inter/InterDisplay-Light.woff2 +0 -0
  49. package/docs-dev/assets/fonts/inter/InterDisplay-LightItalic.woff2 +0 -0
  50. package/docs-dev/assets/fonts/inter/InterDisplay-Medium.woff2 +0 -0
  51. package/docs-dev/assets/fonts/inter/InterDisplay-MediumItalic.woff2 +0 -0
  52. package/docs-dev/assets/fonts/inter/InterDisplay-Regular.woff2 +0 -0
  53. package/docs-dev/assets/fonts/inter/InterDisplay-SemiBold.woff2 +0 -0
  54. package/docs-dev/assets/fonts/inter/InterDisplay-SemiBoldItalic.woff2 +0 -0
  55. package/docs-dev/assets/fonts/inter/InterDisplay-Thin.woff2 +0 -0
  56. package/docs-dev/assets/fonts/inter/InterDisplay-ThinItalic.woff2 +0 -0
  57. package/docs-dev/assets/fonts/inter/InterVariable-Italic.woff2 +0 -0
  58. package/docs-dev/assets/fonts/inter/InterVariable.woff2 +0 -0
  59. package/docs-dev/assets/fonts/inter/LICENSE.txt +92 -0
  60. package/docs-dev/assets/fonts/inter/inter.css +37 -0
  61. package/docs-dev/assets/main.js +15657 -0
  62. package/docs-dev/assets/placeholder/4065947-uhd_4096_2160_25fps.credits.txt +2 -0
  63. package/docs-dev/assets/placeholder/4065947-uhd_4096_2160_25fps.mp4 +0 -0
  64. package/docs-dev/assets/placeholder/image-1-attribution.txt +7 -0
  65. package/docs-dev/assets/placeholder/image-1-darkened.jpg +0 -0
  66. package/docs-dev/assets/placeholder/image-1-lightened.jpg +0 -0
  67. package/docs-dev/assets/placeholder/image-1.jpg +0 -0
  68. package/docs-dev/assets/style.css +18702 -0
  69. package/docs-dev/demos/accordion/index.html +4809 -0
  70. package/docs-dev/demos/button/index.html +4621 -0
  71. package/docs-dev/demos/callout/index.html +4661 -0
  72. package/docs-dev/demos/captioned-figure/index.html +4683 -0
  73. package/docs-dev/demos/card/index.html +5040 -0
  74. package/docs-dev/demos/css-icons/index.html +5272 -0
  75. package/docs-dev/demos/data-grid/index.html +5606 -0
  76. package/docs-dev/demos/data-table/index.html +4697 -0
  77. package/docs-dev/demos/file-save/index.html +4672 -0
  78. package/docs-dev/demos/flipcard/index.html +5221 -0
  79. package/docs-dev/demos/form-theme/index.html +4852 -0
  80. package/docs-dev/demos/hero/index.html +301 -0
  81. package/docs-dev/demos/image-grid/index.html +157 -0
  82. package/docs-dev/demos/index.html +4610 -0
  83. package/docs-dev/demos/menu-stack/index.html +4751 -0
  84. package/docs-dev/demos/modals/index.html +4718 -0
  85. package/docs-dev/demos/nav-strip/index.html +4758 -0
  86. package/docs-dev/demos/overlay-section/index.html +4628 -0
  87. package/docs-dev/demos/popovers/index.html +4628 -0
  88. package/docs-dev/demos/print/index.html +4630 -0
  89. package/docs-dev/demos/pull-quote/index.html +4629 -0
  90. package/docs-dev/demos/rule/index.html +4679 -0
  91. package/docs-dev/demos/scroll-slider/index.html +204 -0
  92. package/docs-dev/demos/scrollpoints/index.html +4648 -0
  93. package/docs-dev/demos/slider/index.html +164 -0
  94. package/docs-dev/demos/spoke-spinner/index.html +4625 -0
  95. package/docs-dev/demos/tabs/index.html +4714 -0
  96. package/docs-dev/demos/tag/index.html +4630 -0
  97. package/docs-dev/demos/tile-grid-overlay/index.html +382 -0
  98. package/docs-dev/demos/tiles/index.html +4879 -0
  99. package/docs-dev/demos/tooltip/index.html +4658 -0
  100. package/docs-dev/guide/building-stylesheet/index.html +4679 -0
  101. package/docs-dev/guide/developing-ulu-scss-module/index.html +4731 -0
  102. package/docs-dev/guide/index.html +4612 -0
  103. package/docs-dev/index.html +4659 -0
  104. package/docs-dev/javascript/events/index.html +4770 -0
  105. package/docs-dev/javascript/index.html +4625 -0
  106. package/docs-dev/javascript/ui-breakpoints/index.html +5070 -0
  107. package/docs-dev/javascript/ui-collapsible/index.html +4737 -0
  108. package/docs-dev/javascript/ui-dialog/index.html +4771 -0
  109. package/docs-dev/javascript/ui-flipcard/index.html +4621 -0
  110. package/docs-dev/javascript/ui-grid/index.html +4678 -0
  111. package/docs-dev/javascript/ui-modal-builder/index.html +4760 -0
  112. package/docs-dev/javascript/ui-overflow-scroller/index.html +4610 -0
  113. package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +4628 -0
  114. package/docs-dev/javascript/ui-page/index.html +4625 -0
  115. package/docs-dev/javascript/ui-popover/index.html +4664 -0
  116. package/docs-dev/javascript/ui-print/index.html +4677 -0
  117. package/docs-dev/javascript/ui-print-details/index.html +4640 -0
  118. package/docs-dev/javascript/ui-programmatic-modal/index.html +4610 -0
  119. package/docs-dev/javascript/ui-proxy-click/index.html +4654 -0
  120. package/docs-dev/javascript/ui-resizer/index.html +4680 -0
  121. package/docs-dev/javascript/ui-scroll-slider/index.html +4639 -0
  122. package/docs-dev/javascript/ui-scrollpoint/index.html +4857 -0
  123. package/docs-dev/javascript/ui-slider/index.html +4621 -0
  124. package/docs-dev/javascript/ui-tabs/index.html +4742 -0
  125. package/docs-dev/javascript/ui-tooltip/index.html +4757 -0
  126. package/docs-dev/javascript/utils-class-logger/index.html +4745 -0
  127. package/docs-dev/javascript/utils-dom/index.html +4790 -0
  128. package/docs-dev/javascript/utils-file-save/index.html +4782 -0
  129. package/docs-dev/javascript/utils-floating-ui/index.html +4642 -0
  130. package/docs-dev/javascript/utils-id/index.html +4652 -0
  131. package/docs-dev/javascript/utils-pause-youtube-video/index.html +4660 -0
  132. package/docs-dev/sass/base/color/index.html +4643 -0
  133. package/docs-dev/sass/base/elements/index.html +4814 -0
  134. package/docs-dev/sass/base/index/index.html +4813 -0
  135. package/docs-dev/sass/base/index.html +4619 -0
  136. package/docs-dev/sass/base/keyframes/index.html +4645 -0
  137. package/docs-dev/sass/base/layout/index.html +4805 -0
  138. package/docs-dev/sass/base/normalize/index.html +4653 -0
  139. package/docs-dev/sass/base/print/index.html +4649 -0
  140. package/docs-dev/sass/base/root/index.html +4669 -0
  141. package/docs-dev/sass/base/typography/index.html +4669 -0
  142. package/docs-dev/sass/components/accordion/index.html +4971 -0
  143. package/docs-dev/sass/components/adaptive-spacing/index.html +4914 -0
  144. package/docs-dev/sass/components/badge/index.html +4862 -0
  145. package/docs-dev/sass/components/button/index.html +4798 -0
  146. package/docs-dev/sass/components/button-verbose/index.html +4910 -0
  147. package/docs-dev/sass/components/callout/index.html +4937 -0
  148. package/docs-dev/sass/components/captioned-figure/index.html +4788 -0
  149. package/docs-dev/sass/components/card/index.html +5146 -0
  150. package/docs-dev/sass/components/card-grid/index.html +4812 -0
  151. package/docs-dev/sass/components/css-icon/index.html +4909 -0
  152. package/docs-dev/sass/components/data-grid/index.html +5044 -0
  153. package/docs-dev/sass/components/data-table/index.html +4795 -0
  154. package/docs-dev/sass/components/fill-context/index.html +4678 -0
  155. package/docs-dev/sass/components/flipcard/index.html +4948 -0
  156. package/docs-dev/sass/components/flipcard-grid/index.html +4799 -0
  157. package/docs-dev/sass/components/form-theme/index.html +5428 -0
  158. package/docs-dev/sass/components/hero/index.html +4800 -0
  159. package/docs-dev/sass/components/horizontal-rule/index.html +4797 -0
  160. package/docs-dev/sass/components/image-grid/index.html +4804 -0
  161. package/docs-dev/sass/components/index/index.html +4848 -0
  162. package/docs-dev/sass/components/index.html +4619 -0
  163. package/docs-dev/sass/components/links/index.html +4648 -0
  164. package/docs-dev/sass/components/list-lines/index.html +4843 -0
  165. package/docs-dev/sass/components/list-ordered/index.html +4644 -0
  166. package/docs-dev/sass/components/list-unordered/index.html +4648 -0
  167. package/docs-dev/sass/components/menu-stack/index.html +4978 -0
  168. package/docs-dev/sass/components/modal/index.html +5025 -0
  169. package/docs-dev/sass/components/nav-strip/index.html +4898 -0
  170. package/docs-dev/sass/components/overlay-section/index.html +4842 -0
  171. package/docs-dev/sass/components/pager/index.html +4960 -0
  172. package/docs-dev/sass/components/placeholder-block/index.html +4882 -0
  173. package/docs-dev/sass/components/popover/index.html +4957 -0
  174. package/docs-dev/sass/components/pull-quote/index.html +4856 -0
  175. package/docs-dev/sass/components/ratio-box/index.html +4802 -0
  176. package/docs-dev/sass/components/rule/index.html +4804 -0
  177. package/docs-dev/sass/components/scroll-slider/index.html +4915 -0
  178. package/docs-dev/sass/components/skip-link/index.html +4788 -0
  179. package/docs-dev/sass/components/slider/index.html +4924 -0
  180. package/docs-dev/sass/components/spoke-spinner/index.html +4862 -0
  181. package/docs-dev/sass/components/tabs/index.html +4938 -0
  182. package/docs-dev/sass/components/tag/index.html +4963 -0
  183. package/docs-dev/sass/components/tile-button/index.html +4843 -0
  184. package/docs-dev/sass/components/tile-grid/index.html +4978 -0
  185. package/docs-dev/sass/components/tile-grid-overlay/index.html +4779 -0
  186. package/docs-dev/sass/components/vignette/index.html +4792 -0
  187. package/docs-dev/sass/components/wysiwyg/index.html +4808 -0
  188. package/docs-dev/sass/core/breakpoint/index.html +5401 -0
  189. package/docs-dev/sass/core/button/index.html +5535 -0
  190. package/docs-dev/sass/core/color/index.html +5385 -0
  191. package/docs-dev/sass/core/cssvar/index.html +5410 -0
  192. package/docs-dev/sass/core/element/index.html +5533 -0
  193. package/docs-dev/sass/core/index.html +4608 -0
  194. package/docs-dev/sass/core/layout/index.html +5368 -0
  195. package/docs-dev/sass/core/path/index.html +4777 -0
  196. package/docs-dev/sass/core/selector/index.html +4856 -0
  197. package/docs-dev/sass/core/typography/index.html +5782 -0
  198. package/docs-dev/sass/core/units/index.html +4815 -0
  199. package/docs-dev/sass/core/utils/index.html +6256 -0
  200. package/docs-dev/sass/helpers/color/index.html +4643 -0
  201. package/docs-dev/sass/helpers/display/index.html +4648 -0
  202. package/docs-dev/sass/helpers/index/index.html +4810 -0
  203. package/docs-dev/sass/helpers/index.html +4619 -0
  204. package/docs-dev/sass/helpers/print/index.html +4648 -0
  205. package/docs-dev/sass/helpers/typography/index.html +4671 -0
  206. package/docs-dev/sass/helpers/units/index.html +4817 -0
  207. package/docs-dev/sass/helpers/utilities/index.html +4648 -0
  208. package/docs-dev/sass/index.html +4670 -0
  209. package/js/ui/tabs.js +24 -4
  210. package/package.json +5 -6
  211. package/scss/_color.scss +1 -1
  212. package/scss/base/_typography.scss +7 -7
  213. package/scss/components/_accordion.scss +2 -2
  214. package/scss/components/_adaptive-spacing.scss +3 -3
  215. package/scss/components/_badge.scss +2 -2
  216. package/scss/components/_button-verbose.scss +20 -20
  217. package/scss/components/_button.scss +2 -0
  218. package/scss/components/_callout.scss +2 -2
  219. package/scss/components/_captioned-figure.scss +2 -3
  220. package/scss/components/_card-grid.scss +2 -2
  221. package/scss/components/_card.scss +5 -2
  222. package/scss/components/_css-icon.scss +2 -2
  223. package/scss/components/_data-grid.scss +2 -2
  224. package/scss/components/_data-table.scss +2 -2
  225. package/scss/components/_flipcard-grid.scss +2 -2
  226. package/scss/components/_flipcard.scss +2 -2
  227. package/scss/components/_form-theme.scss +2 -2
  228. package/scss/components/_hero.scss +2 -2
  229. package/scss/components/_image-grid.scss +2 -2
  230. package/scss/components/_list-lines.scss +2 -2
  231. package/scss/components/_menu-stack.scss +2 -2
  232. package/scss/components/_modal.scss +1 -14
  233. package/scss/components/_nav-strip.scss +3 -3
  234. package/scss/components/_overlay-section.scss +2 -3
  235. package/scss/components/_pager.scss +5 -5
  236. package/scss/components/_placeholder-block.scss +2 -2
  237. package/scss/components/_popover.scss +2 -2
  238. package/scss/components/_pull-quote.scss +2 -2
  239. package/scss/components/_ratio-box.scss +2 -2
  240. package/scss/components/_rule.scss +5 -5
  241. package/scss/components/_scroll-slider.scss +2 -2
  242. package/scss/components/_slider.scss +4 -40
  243. package/scss/components/_tabs.scss +118 -53
  244. package/scss/components/_tag.scss +2 -2
package/docs-dev/demos/accordion/index.html ADDED
@@ -0,0 +1,4809 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>
7
+ Accordion
8
+ </title>
9
+ <meta name="description" content="Modular Sass Theming Library">
10
+ <meta name="generator" content="Eleventy v3.0.0">
11
+
12
+ <link rel="apple-touch-icon" sizes="180x180" href="/frontend/assets/favicons/apple-touch-icon.png">
13
+ <link rel="icon" type="image/png" sizes="32x32" href="/frontend/assets/favicons/favicon-32x32.png">
14
+ <link rel="icon" type="image/png" sizes="16x16" href="/frontend/assets/favicons/favicon-16x16.png">
15
+ <link rel="manifest" href="/frontend/assets/favicons/site.webmanifest">
16
+ <link rel="mask-icon" href="/frontend/assets/favicons/safari-pinned-tab.svg" color="#8455bd">
17
+ <link rel="shortcut icon" href="/frontend/assets/favicons/favicon.ico">
18
+ <meta name="msapplication-TileColor" content="#603cba">
19
+ <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
20
+ <meta name="theme-color" content="#ffffff">
21
+
22
+
23
+
24
+ <link rel="stylesheet" href="/frontend/assets/fonts/inter/inter.css">
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+ </head>
34
+ <body class="page theme-light" data-site-theme="">
35
+
36
+
37
+
38
+ <header class="page__header header">
39
+ <a href="#main" class="skip-link hidden-visually-focusable">
40
+ Skip to main content
41
+ </a>
42
+ <div class="header__main">
43
+ <a class="header__logo" href="/frontend/">
44
+ <div class="logo">
45
+ <span class="logo__main">Ulu</span>
46
+ <span class="logo__subtitle">Frontend</span>
47
+ </div>
48
+ </a>
49
+ <button class="header__mobile-toggle hidden-min-medium button button--icon button--secondary" data-ulu-dialog-trigger="mobile-menu" aria-label="Open Menu">
50
+ <span class="fas fa-bars" aria-hidden="true"></span>
51
+ </button>
52
+ </div>
53
+ <nav class="header__nav">
54
+ <h2 class="hidden-visually">Main Menu</h2>
55
+ <div class="header__nav-links">
56
+ <button class="button button--small button--icon button--icon-small" data-site-theme-toggle=""><span class="fas fa-moon" data-site-theme-toggle-icon=""></span></button>
57
+ <a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend" aria-label="View on Github">
58
+ <span class="fab fa-github" aria-hidden="true"></span>
59
+ </a>
60
+ <a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend">
61
+
62
+ <span class="fab fa-npm" aria-hidden="true"></span>
63
+ </a>
64
+ </div>
65
+ <div class="header__nav-menu">
66
+
67
+ <ul class="nav-tree" data-menu-depth="1">
68
+
69
+
70
+ <li class="nav-tree__item ">
71
+ <details class="nav-tree__collapsible">
72
+ <summary class="nav-tree__toggle">
73
+
74
+ <span class="nav-tree__toggle-content">
75
+
76
+
77
+ <span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
78
+
79
+ <span class="nav-tree__text">
80
+ Guide
81
+ </span>
82
+
83
+ </span>
84
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
85
+
86
+ </summary>
87
+
88
+ <ul class="nav-tree" data-menu-depth="2">
89
+
90
+
91
+ <li class="nav-tree__item ">
92
+
93
+ <a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
94
+
95
+
96
+ <span class="nav-tree__text">
97
+ Building a Stylesheet
98
+ </span>
99
+
100
+ </a>
101
+
102
+
103
+ </li>
104
+
105
+
106
+ <li class="nav-tree__item ">
107
+
108
+ <a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
109
+
110
+
111
+ <span class="nav-tree__text">
112
+ Developing Ulu SCSS Module
113
+ </span>
114
+
115
+ </a>
116
+
117
+
118
+ </li>
119
+
120
+ </ul>
121
+
122
+ </details>
123
+ </li>
124
+
125
+
126
+ <li class="nav-tree__item is-active-trail">
127
+ <details class="nav-tree__collapsible" open="">
128
+ <summary class="nav-tree__toggle">
129
+
130
+ <span class="nav-tree__toggle-content">
131
+
132
+
133
+ <span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
134
+
135
+ <span class="nav-tree__text">
136
+ Demos
137
+ </span>
138
+
139
+ </span>
140
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
141
+
142
+ </summary>
143
+
144
+ <ul class="nav-tree" data-menu-depth="2">
145
+
146
+
147
+ <li class="nav-tree__item is-active is-active-trail">
148
+
149
+ <a class="nav-tree__link is-active is-active-trail" href="/frontend/demos/accordion/" aria-current="page">
150
+
151
+
152
+ <span class="nav-tree__text">
153
+ Accordion
154
+ </span>
155
+
156
+ </a>
157
+
158
+
159
+ </li>
160
+
161
+
162
+ <li class="nav-tree__item ">
163
+
164
+ <a class="nav-tree__link " href="/frontend/demos/button/">
165
+
166
+
167
+ <span class="nav-tree__text">
168
+ Button
169
+ </span>
170
+
171
+ </a>
172
+
173
+
174
+ </li>
175
+
176
+
177
+ <li class="nav-tree__item ">
178
+
179
+ <a class="nav-tree__link " href="/frontend/demos/callout/">
180
+
181
+
182
+ <span class="nav-tree__text">
183
+ Callout
184
+ </span>
185
+
186
+ </a>
187
+
188
+
189
+ </li>
190
+
191
+
192
+ <li class="nav-tree__item ">
193
+
194
+ <a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
195
+
196
+
197
+ <span class="nav-tree__text">
198
+ Captioned Figure
199
+ </span>
200
+
201
+ </a>
202
+
203
+
204
+ </li>
205
+
206
+
207
+ <li class="nav-tree__item ">
208
+
209
+ <a class="nav-tree__link " href="/frontend/demos/card/">
210
+
211
+
212
+ <span class="nav-tree__text">
213
+ Card
214
+ </span>
215
+
216
+ </a>
217
+
218
+
219
+ </li>
220
+
221
+
222
+ <li class="nav-tree__item ">
223
+
224
+ <a class="nav-tree__link " href="/frontend/demos/css-icons/">
225
+
226
+
227
+ <span class="nav-tree__text">
228
+ CSS Icons
229
+ </span>
230
+
231
+ </a>
232
+
233
+
234
+ </li>
235
+
236
+
237
+ <li class="nav-tree__item ">
238
+
239
+ <a class="nav-tree__link " href="/frontend/demos/data-grid/">
240
+
241
+
242
+ <span class="nav-tree__text">
243
+ Data grid
244
+ </span>
245
+
246
+ </a>
247
+
248
+
249
+ </li>
250
+
251
+
252
+ <li class="nav-tree__item ">
253
+
254
+ <a class="nav-tree__link " href="/frontend/demos/data-table/">
255
+
256
+
257
+ <span class="nav-tree__text">
258
+ Data Table
259
+ </span>
260
+
261
+ </a>
262
+
263
+
264
+ </li>
265
+
266
+
267
+ <li class="nav-tree__item ">
268
+
269
+ <a class="nav-tree__link " href="/frontend/demos/file-save/">
270
+
271
+
272
+ <span class="nav-tree__text">
273
+ File Save
274
+ </span>
275
+
276
+ </a>
277
+
278
+
279
+ </li>
280
+
281
+
282
+ <li class="nav-tree__item ">
283
+
284
+ <a class="nav-tree__link " href="/frontend/demos/flipcard/">
285
+
286
+
287
+ <span class="nav-tree__text">
288
+ Flip Card
289
+ </span>
290
+
291
+ </a>
292
+
293
+
294
+ </li>
295
+
296
+
297
+ <li class="nav-tree__item ">
298
+
299
+ <a class="nav-tree__link " href="/frontend/demos/form-theme/">
300
+
301
+
302
+ <span class="nav-tree__text">
303
+ Form Theme
304
+ </span>
305
+
306
+ </a>
307
+
308
+
309
+ </li>
310
+
311
+
312
+ <li class="nav-tree__item ">
313
+
314
+ <a class="nav-tree__link " href="/frontend/demos/hero/">
315
+
316
+
317
+ <span class="nav-tree__text">
318
+ Hero
319
+ </span>
320
+
321
+ </a>
322
+
323
+
324
+ </li>
325
+
326
+
327
+ <li class="nav-tree__item ">
328
+
329
+ <a class="nav-tree__link " href="/frontend/demos/image-grid/">
330
+
331
+
332
+ <span class="nav-tree__text">
333
+ Image Grid
334
+ </span>
335
+
336
+ </a>
337
+
338
+
339
+ </li>
340
+
341
+
342
+ <li class="nav-tree__item ">
343
+
344
+ <a class="nav-tree__link " href="/frontend/demos/menu-stack/">
345
+
346
+
347
+ <span class="nav-tree__text">
348
+ Menu Stack
349
+ </span>
350
+
351
+ </a>
352
+
353
+
354
+ </li>
355
+
356
+
357
+ <li class="nav-tree__item ">
358
+
359
+ <a class="nav-tree__link " href="/frontend/demos/modals/">
360
+
361
+
362
+ <span class="nav-tree__text">
363
+ Modals
364
+ </span>
365
+
366
+ </a>
367
+
368
+
369
+ </li>
370
+
371
+
372
+ <li class="nav-tree__item ">
373
+
374
+ <a class="nav-tree__link " href="/frontend/demos/nav-strip/">
375
+
376
+
377
+ <span class="nav-tree__text">
378
+ Nav Strip
379
+ </span>
380
+
381
+ </a>
382
+
383
+
384
+ </li>
385
+
386
+
387
+ <li class="nav-tree__item ">
388
+
389
+ <a class="nav-tree__link " href="/frontend/demos/overlay-section/">
390
+
391
+
392
+ <span class="nav-tree__text">
393
+ Overlay Section
394
+ </span>
395
+
396
+ </a>
397
+
398
+
399
+ </li>
400
+
401
+
402
+ <li class="nav-tree__item ">
403
+
404
+ <a class="nav-tree__link " href="/frontend/demos/popovers/">
405
+
406
+
407
+ <span class="nav-tree__text">
408
+ Popovers
409
+ </span>
410
+
411
+ </a>
412
+
413
+
414
+ </li>
415
+
416
+
417
+ <li class="nav-tree__item ">
418
+
419
+ <a class="nav-tree__link " href="/frontend/demos/print/">
420
+
421
+
422
+ <span class="nav-tree__text">
423
+ Print
424
+ </span>
425
+
426
+ </a>
427
+
428
+
429
+ </li>
430
+
431
+
432
+ <li class="nav-tree__item ">
433
+
434
+ <a class="nav-tree__link " href="/frontend/demos/pull-quote/">
435
+
436
+
437
+ <span class="nav-tree__text">
438
+ Pull Quote
439
+ </span>
440
+
441
+ </a>
442
+
443
+
444
+ </li>
445
+
446
+
447
+ <li class="nav-tree__item ">
448
+
449
+ <a class="nav-tree__link " href="/frontend/demos/rule/">
450
+
451
+
452
+ <span class="nav-tree__text">
453
+ Rule
454
+ </span>
455
+
456
+ </a>
457
+
458
+
459
+ </li>
460
+
461
+
462
+ <li class="nav-tree__item ">
463
+
464
+ <a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
465
+
466
+
467
+ <span class="nav-tree__text">
468
+ Scroll Slider
469
+ </span>
470
+
471
+ </a>
472
+
473
+
474
+ </li>
475
+
476
+
477
+ <li class="nav-tree__item ">
478
+
479
+ <a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
480
+
481
+
482
+ <span class="nav-tree__text">
483
+ Scrollpoints
484
+ </span>
485
+
486
+ </a>
487
+
488
+
489
+ </li>
490
+
491
+
492
+ <li class="nav-tree__item ">
493
+
494
+ <a class="nav-tree__link " href="/frontend/demos/slider/">
495
+
496
+
497
+ <span class="nav-tree__text">
498
+ Slider
499
+ </span>
500
+
501
+ </a>
502
+
503
+
504
+ </li>
505
+
506
+
507
+ <li class="nav-tree__item ">
508
+
509
+ <a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
510
+
511
+
512
+ <span class="nav-tree__text">
513
+ Spoke Spinner
514
+ </span>
515
+
516
+ </a>
517
+
518
+
519
+ </li>
520
+
521
+
522
+ <li class="nav-tree__item ">
523
+
524
+ <a class="nav-tree__link " href="/frontend/demos/tabs/">
525
+
526
+
527
+ <span class="nav-tree__text">
528
+ Tabs
529
+ </span>
530
+
531
+ </a>
532
+
533
+
534
+ </li>
535
+
536
+
537
+ <li class="nav-tree__item ">
538
+
539
+ <a class="nav-tree__link " href="/frontend/demos/tag/">
540
+
541
+
542
+ <span class="nav-tree__text">
543
+ Tag
544
+ </span>
545
+
546
+ </a>
547
+
548
+
549
+ </li>
550
+
551
+
552
+ <li class="nav-tree__item ">
553
+
554
+ <a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
555
+
556
+
557
+ <span class="nav-tree__text">
558
+ Tile Grid Overlay
559
+ </span>
560
+
561
+ </a>
562
+
563
+
564
+ </li>
565
+
566
+
567
+ <li class="nav-tree__item ">
568
+
569
+ <a class="nav-tree__link " href="/frontend/demos/tiles/">
570
+
571
+
572
+ <span class="nav-tree__text">
573
+ Tiles
574
+ </span>
575
+
576
+ </a>
577
+
578
+
579
+ </li>
580
+
581
+
582
+ <li class="nav-tree__item ">
583
+
584
+ <a class="nav-tree__link " href="/frontend/demos/tooltip/">
585
+
586
+
587
+ <span class="nav-tree__text">
588
+ Tooltip
589
+ </span>
590
+
591
+ </a>
592
+
593
+
594
+ </li>
595
+
596
+ </ul>
597
+
598
+ </details>
599
+ </li>
600
+
601
+
602
+ <li class="nav-tree__item ">
603
+ <details class="nav-tree__collapsible">
604
+ <summary class="nav-tree__toggle">
605
+
606
+ <span class="nav-tree__toggle-content">
607
+
608
+
609
+ <span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
610
+
611
+ <span class="nav-tree__text">
612
+ Sass API
613
+ </span>
614
+
615
+ </span>
616
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
617
+
618
+ </summary>
619
+
620
+ <ul class="nav-tree" data-menu-depth="2">
621
+
622
+ <li class="nav-tree__item ">
623
+
624
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
625
+
626
+
627
+ <span class="nav-tree__text">
628
+ Introduction
629
+ </span>
630
+
631
+ </a>
632
+
633
+
634
+ </li>
635
+
636
+
637
+ <li class="nav-tree__item ">
638
+ <details class="nav-tree__collapsible">
639
+ <summary class="nav-tree__toggle">
640
+
641
+ <span class="nav-tree__toggle-content">
642
+
643
+
644
+ <span class="nav-tree__text">
645
+ Core
646
+ </span>
647
+
648
+ </span>
649
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
650
+
651
+ </summary>
652
+
653
+ <ul class="nav-tree" data-menu-depth="3">
654
+
655
+ <li class="nav-tree__item ">
656
+
657
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
658
+
659
+
660
+ <span class="nav-tree__text">
661
+ Introduction
662
+ </span>
663
+
664
+ </a>
665
+
666
+
667
+ </li>
668
+
669
+
670
+ <li class="nav-tree__item ">
671
+
672
+ <a class="nav-tree__link " href="/frontend/sass/core/breakpoint/">
673
+
674
+
675
+ <span class="nav-tree__text">
676
+ Breakpoint
677
+ </span>
678
+
679
+ </a>
680
+
681
+
682
+ </li>
683
+
684
+
685
+ <li class="nav-tree__item ">
686
+
687
+ <a class="nav-tree__link " href="/frontend/sass/core/button/">
688
+
689
+
690
+ <span class="nav-tree__text">
691
+ Button
692
+ </span>
693
+
694
+ </a>
695
+
696
+
697
+ </li>
698
+
699
+
700
+ <li class="nav-tree__item ">
701
+
702
+ <a class="nav-tree__link " href="/frontend/sass/core/color/">
703
+
704
+
705
+ <span class="nav-tree__text">
706
+ Color
707
+ </span>
708
+
709
+ </a>
710
+
711
+
712
+ </li>
713
+
714
+
715
+ <li class="nav-tree__item ">
716
+
717
+ <a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
718
+
719
+
720
+ <span class="nav-tree__text">
721
+ Cssvar
722
+ </span>
723
+
724
+ </a>
725
+
726
+
727
+ </li>
728
+
729
+
730
+ <li class="nav-tree__item ">
731
+
732
+ <a class="nav-tree__link " href="/frontend/sass/core/element/">
733
+
734
+
735
+ <span class="nav-tree__text">
736
+ Element
737
+ </span>
738
+
739
+ </a>
740
+
741
+
742
+ </li>
743
+
744
+
745
+ <li class="nav-tree__item ">
746
+
747
+ <a class="nav-tree__link " href="/frontend/sass/core/layout/">
748
+
749
+
750
+ <span class="nav-tree__text">
751
+ Layout
752
+ </span>
753
+
754
+ </a>
755
+
756
+
757
+ </li>
758
+
759
+
760
+ <li class="nav-tree__item ">
761
+
762
+ <a class="nav-tree__link " href="/frontend/sass/core/path/">
763
+
764
+
765
+ <span class="nav-tree__text">
766
+ Path
767
+ </span>
768
+
769
+ </a>
770
+
771
+
772
+ </li>
773
+
774
+
775
+ <li class="nav-tree__item ">
776
+
777
+ <a class="nav-tree__link " href="/frontend/sass/core/selector/">
778
+
779
+
780
+ <span class="nav-tree__text">
781
+ Selector
782
+ </span>
783
+
784
+ </a>
785
+
786
+
787
+ </li>
788
+
789
+
790
+ <li class="nav-tree__item ">
791
+
792
+ <a class="nav-tree__link " href="/frontend/sass/core/typography/">
793
+
794
+
795
+ <span class="nav-tree__text">
796
+ Typography
797
+ </span>
798
+
799
+ </a>
800
+
801
+
802
+ </li>
803
+
804
+
805
+ <li class="nav-tree__item ">
806
+
807
+ <a class="nav-tree__link " href="/frontend/sass/core/units/">
808
+
809
+
810
+ <span class="nav-tree__text">
811
+ Units
812
+ </span>
813
+
814
+ </a>
815
+
816
+
817
+ </li>
818
+
819
+
820
+ <li class="nav-tree__item ">
821
+
822
+ <a class="nav-tree__link " href="/frontend/sass/core/utils/">
823
+
824
+
825
+ <span class="nav-tree__text">
826
+ Utils
827
+ </span>
828
+
829
+ </a>
830
+
831
+
832
+ </li>
833
+
834
+ </ul>
835
+
836
+ </details>
837
+ </li>
838
+
839
+
840
+ <li class="nav-tree__item ">
841
+ <details class="nav-tree__collapsible">
842
+ <summary class="nav-tree__toggle">
843
+
844
+ <span class="nav-tree__toggle-content">
845
+
846
+
847
+ <span class="nav-tree__text">
848
+ Base
849
+ </span>
850
+
851
+ </span>
852
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
853
+
854
+ </summary>
855
+
856
+ <ul class="nav-tree" data-menu-depth="3">
857
+
858
+ <li class="nav-tree__item ">
859
+
860
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
861
+
862
+
863
+ <span class="nav-tree__text">
864
+ Introduction
865
+ </span>
866
+
867
+ </a>
868
+
869
+
870
+ </li>
871
+
872
+
873
+ <li class="nav-tree__item ">
874
+
875
+ <a class="nav-tree__link " href="/frontend/sass/base/color/">
876
+
877
+
878
+ <span class="nav-tree__text">
879
+ Color
880
+ </span>
881
+
882
+ </a>
883
+
884
+
885
+ </li>
886
+
887
+
888
+ <li class="nav-tree__item ">
889
+
890
+ <a class="nav-tree__link " href="/frontend/sass/base/elements/">
891
+
892
+
893
+ <span class="nav-tree__text">
894
+ Elements
895
+ </span>
896
+
897
+ </a>
898
+
899
+
900
+ </li>
901
+
902
+
903
+ <li class="nav-tree__item ">
904
+
905
+ <a class="nav-tree__link " href="/frontend/sass/base/index/">
906
+
907
+
908
+ <span class="nav-tree__text">
909
+ Index
910
+ </span>
911
+
912
+ </a>
913
+
914
+
915
+ </li>
916
+
917
+
918
+ <li class="nav-tree__item ">
919
+
920
+ <a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
921
+
922
+
923
+ <span class="nav-tree__text">
924
+ Keyframes
925
+ </span>
926
+
927
+ </a>
928
+
929
+
930
+ </li>
931
+
932
+
933
+ <li class="nav-tree__item ">
934
+
935
+ <a class="nav-tree__link " href="/frontend/sass/base/layout/">
936
+
937
+
938
+ <span class="nav-tree__text">
939
+ Layout
940
+ </span>
941
+
942
+ </a>
943
+
944
+
945
+ </li>
946
+
947
+
948
+ <li class="nav-tree__item ">
949
+
950
+ <a class="nav-tree__link " href="/frontend/sass/base/normalize/">
951
+
952
+
953
+ <span class="nav-tree__text">
954
+ Normalize
955
+ </span>
956
+
957
+ </a>
958
+
959
+
960
+ </li>
961
+
962
+
963
+ <li class="nav-tree__item ">
964
+
965
+ <a class="nav-tree__link " href="/frontend/sass/base/print/">
966
+
967
+
968
+ <span class="nav-tree__text">
969
+ Print
970
+ </span>
971
+
972
+ </a>
973
+
974
+
975
+ </li>
976
+
977
+
978
+ <li class="nav-tree__item ">
979
+
980
+ <a class="nav-tree__link " href="/frontend/sass/base/root/">
981
+
982
+
983
+ <span class="nav-tree__text">
984
+ Root
985
+ </span>
986
+
987
+ </a>
988
+
989
+
990
+ </li>
991
+
992
+
993
+ <li class="nav-tree__item ">
994
+
995
+ <a class="nav-tree__link " href="/frontend/sass/base/typography/">
996
+
997
+
998
+ <span class="nav-tree__text">
999
+ Typography
1000
+ </span>
1001
+
1002
+ </a>
1003
+
1004
+
1005
+ </li>
1006
+
1007
+ </ul>
1008
+
1009
+ </details>
1010
+ </li>
1011
+
1012
+
1013
+ <li class="nav-tree__item ">
1014
+ <details class="nav-tree__collapsible">
1015
+ <summary class="nav-tree__toggle">
1016
+
1017
+ <span class="nav-tree__toggle-content">
1018
+
1019
+
1020
+ <span class="nav-tree__text">
1021
+ Components
1022
+ </span>
1023
+
1024
+ </span>
1025
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
1026
+
1027
+ </summary>
1028
+
1029
+ <ul class="nav-tree" data-menu-depth="3">
1030
+
1031
+ <li class="nav-tree__item ">
1032
+
1033
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
1034
+
1035
+
1036
+ <span class="nav-tree__text">
1037
+ Introduction
1038
+ </span>
1039
+
1040
+ </a>
1041
+
1042
+
1043
+ </li>
1044
+
1045
+
1046
+ <li class="nav-tree__item ">
1047
+
1048
+ <a class="nav-tree__link " href="/frontend/sass/components/accordion/">
1049
+
1050
+
1051
+ <span class="nav-tree__text">
1052
+ Accordion
1053
+ </span>
1054
+
1055
+ </a>
1056
+
1057
+
1058
+ </li>
1059
+
1060
+
1061
+ <li class="nav-tree__item ">
1062
+
1063
+ <a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
1064
+
1065
+
1066
+ <span class="nav-tree__text">
1067
+ Adaptive-spacing
1068
+ </span>
1069
+
1070
+ </a>
1071
+
1072
+
1073
+ </li>
1074
+
1075
+
1076
+ <li class="nav-tree__item ">
1077
+
1078
+ <a class="nav-tree__link " href="/frontend/sass/components/badge/">
1079
+
1080
+
1081
+ <span class="nav-tree__text">
1082
+ Badge
1083
+ </span>
1084
+
1085
+ </a>
1086
+
1087
+
1088
+ </li>
1089
+
1090
+
1091
+ <li class="nav-tree__item ">
1092
+
1093
+ <a class="nav-tree__link " href="/frontend/sass/components/button/">
1094
+
1095
+
1096
+ <span class="nav-tree__text">
1097
+ Button
1098
+ </span>
1099
+
1100
+ </a>
1101
+
1102
+
1103
+ </li>
1104
+
1105
+
1106
+ <li class="nav-tree__item ">
1107
+
1108
+ <a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
1109
+
1110
+
1111
+ <span class="nav-tree__text">
1112
+ Button-verbose
1113
+ </span>
1114
+
1115
+ </a>
1116
+
1117
+
1118
+ </li>
1119
+
1120
+
1121
+ <li class="nav-tree__item ">
1122
+
1123
+ <a class="nav-tree__link " href="/frontend/sass/components/callout/">
1124
+
1125
+
1126
+ <span class="nav-tree__text">
1127
+ Callout
1128
+ </span>
1129
+
1130
+ </a>
1131
+
1132
+
1133
+ </li>
1134
+
1135
+
1136
+ <li class="nav-tree__item ">
1137
+
1138
+ <a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
1139
+
1140
+
1141
+ <span class="nav-tree__text">
1142
+ Captioned-figure
1143
+ </span>
1144
+
1145
+ </a>
1146
+
1147
+
1148
+ </li>
1149
+
1150
+
1151
+ <li class="nav-tree__item ">
1152
+
1153
+ <a class="nav-tree__link " href="/frontend/sass/components/card/">
1154
+
1155
+
1156
+ <span class="nav-tree__text">
1157
+ Card
1158
+ </span>
1159
+
1160
+ </a>
1161
+
1162
+
1163
+ </li>
1164
+
1165
+
1166
+ <li class="nav-tree__item ">
1167
+
1168
+ <a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
1169
+
1170
+
1171
+ <span class="nav-tree__text">
1172
+ Card-grid
1173
+ </span>
1174
+
1175
+ </a>
1176
+
1177
+
1178
+ </li>
1179
+
1180
+
1181
+ <li class="nav-tree__item ">
1182
+
1183
+ <a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
1184
+
1185
+
1186
+ <span class="nav-tree__text">
1187
+ Css-icon
1188
+ </span>
1189
+
1190
+ </a>
1191
+
1192
+
1193
+ </li>
1194
+
1195
+
1196
+ <li class="nav-tree__item ">
1197
+
1198
+ <a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
1199
+
1200
+
1201
+ <span class="nav-tree__text">
1202
+ Data-grid
1203
+ </span>
1204
+
1205
+ </a>
1206
+
1207
+
1208
+ </li>
1209
+
1210
+
1211
+ <li class="nav-tree__item ">
1212
+
1213
+ <a class="nav-tree__link " href="/frontend/sass/components/data-table/">
1214
+
1215
+
1216
+ <span class="nav-tree__text">
1217
+ Data-table
1218
+ </span>
1219
+
1220
+ </a>
1221
+
1222
+
1223
+ </li>
1224
+
1225
+
1226
+ <li class="nav-tree__item ">
1227
+
1228
+ <a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
1229
+
1230
+
1231
+ <span class="nav-tree__text">
1232
+ Fill-context
1233
+ </span>
1234
+
1235
+ </a>
1236
+
1237
+
1238
+ </li>
1239
+
1240
+
1241
+ <li class="nav-tree__item ">
1242
+
1243
+ <a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
1244
+
1245
+
1246
+ <span class="nav-tree__text">
1247
+ Flipcard
1248
+ </span>
1249
+
1250
+ </a>
1251
+
1252
+
1253
+ </li>
1254
+
1255
+
1256
+ <li class="nav-tree__item ">
1257
+
1258
+ <a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
1259
+
1260
+
1261
+ <span class="nav-tree__text">
1262
+ Flipcard-grid
1263
+ </span>
1264
+
1265
+ </a>
1266
+
1267
+
1268
+ </li>
1269
+
1270
+
1271
+ <li class="nav-tree__item ">
1272
+
1273
+ <a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
1274
+
1275
+
1276
+ <span class="nav-tree__text">
1277
+ Form-theme
1278
+ </span>
1279
+
1280
+ </a>
1281
+
1282
+
1283
+ </li>
1284
+
1285
+
1286
+ <li class="nav-tree__item ">
1287
+
1288
+ <a class="nav-tree__link " href="/frontend/sass/components/hero/">
1289
+
1290
+
1291
+ <span class="nav-tree__text">
1292
+ Hero
1293
+ </span>
1294
+
1295
+ </a>
1296
+
1297
+
1298
+ </li>
1299
+
1300
+
1301
+ <li class="nav-tree__item ">
1302
+
1303
+ <a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
1304
+
1305
+
1306
+ <span class="nav-tree__text">
1307
+ Horizontal-rule
1308
+ </span>
1309
+
1310
+ </a>
1311
+
1312
+
1313
+ </li>
1314
+
1315
+
1316
+ <li class="nav-tree__item ">
1317
+
1318
+ <a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
1319
+
1320
+
1321
+ <span class="nav-tree__text">
1322
+ Image-grid
1323
+ </span>
1324
+
1325
+ </a>
1326
+
1327
+
1328
+ </li>
1329
+
1330
+
1331
+ <li class="nav-tree__item ">
1332
+
1333
+ <a class="nav-tree__link " href="/frontend/sass/components/index/">
1334
+
1335
+
1336
+ <span class="nav-tree__text">
1337
+ Index
1338
+ </span>
1339
+
1340
+ </a>
1341
+
1342
+
1343
+ </li>
1344
+
1345
+
1346
+ <li class="nav-tree__item ">
1347
+
1348
+ <a class="nav-tree__link " href="/frontend/sass/components/links/">
1349
+
1350
+
1351
+ <span class="nav-tree__text">
1352
+ Links
1353
+ </span>
1354
+
1355
+ </a>
1356
+
1357
+
1358
+ </li>
1359
+
1360
+
1361
+ <li class="nav-tree__item ">
1362
+
1363
+ <a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
1364
+
1365
+
1366
+ <span class="nav-tree__text">
1367
+ List-lines
1368
+ </span>
1369
+
1370
+ </a>
1371
+
1372
+
1373
+ </li>
1374
+
1375
+
1376
+ <li class="nav-tree__item ">
1377
+
1378
+ <a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
1379
+
1380
+
1381
+ <span class="nav-tree__text">
1382
+ List-ordered
1383
+ </span>
1384
+
1385
+ </a>
1386
+
1387
+
1388
+ </li>
1389
+
1390
+
1391
+ <li class="nav-tree__item ">
1392
+
1393
+ <a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
1394
+
1395
+
1396
+ <span class="nav-tree__text">
1397
+ List-unordered
1398
+ </span>
1399
+
1400
+ </a>
1401
+
1402
+
1403
+ </li>
1404
+
1405
+
1406
+ <li class="nav-tree__item ">
1407
+
1408
+ <a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
1409
+
1410
+
1411
+ <span class="nav-tree__text">
1412
+ Menu-stack
1413
+ </span>
1414
+
1415
+ </a>
1416
+
1417
+
1418
+ </li>
1419
+
1420
+
1421
+ <li class="nav-tree__item ">
1422
+
1423
+ <a class="nav-tree__link " href="/frontend/sass/components/modal/">
1424
+
1425
+
1426
+ <span class="nav-tree__text">
1427
+ Modal
1428
+ </span>
1429
+
1430
+ </a>
1431
+
1432
+
1433
+ </li>
1434
+
1435
+
1436
+ <li class="nav-tree__item ">
1437
+
1438
+ <a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
1439
+
1440
+
1441
+ <span class="nav-tree__text">
1442
+ Nav-strip
1443
+ </span>
1444
+
1445
+ </a>
1446
+
1447
+
1448
+ </li>
1449
+
1450
+
1451
+ <li class="nav-tree__item ">
1452
+
1453
+ <a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
1454
+
1455
+
1456
+ <span class="nav-tree__text">
1457
+ Overlay-section
1458
+ </span>
1459
+
1460
+ </a>
1461
+
1462
+
1463
+ </li>
1464
+
1465
+
1466
+ <li class="nav-tree__item ">
1467
+
1468
+ <a class="nav-tree__link " href="/frontend/sass/components/pager/">
1469
+
1470
+
1471
+ <span class="nav-tree__text">
1472
+ Pager
1473
+ </span>
1474
+
1475
+ </a>
1476
+
1477
+
1478
+ </li>
1479
+
1480
+
1481
+ <li class="nav-tree__item ">
1482
+
1483
+ <a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
1484
+
1485
+
1486
+ <span class="nav-tree__text">
1487
+ Placeholder-block
1488
+ </span>
1489
+
1490
+ </a>
1491
+
1492
+
1493
+ </li>
1494
+
1495
+
1496
+ <li class="nav-tree__item ">
1497
+
1498
+ <a class="nav-tree__link " href="/frontend/sass/components/popover/">
1499
+
1500
+
1501
+ <span class="nav-tree__text">
1502
+ Popover
1503
+ </span>
1504
+
1505
+ </a>
1506
+
1507
+
1508
+ </li>
1509
+
1510
+
1511
+ <li class="nav-tree__item ">
1512
+
1513
+ <a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
1514
+
1515
+
1516
+ <span class="nav-tree__text">
1517
+ Pull-quote
1518
+ </span>
1519
+
1520
+ </a>
1521
+
1522
+
1523
+ </li>
1524
+
1525
+
1526
+ <li class="nav-tree__item ">
1527
+
1528
+ <a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
1529
+
1530
+
1531
+ <span class="nav-tree__text">
1532
+ Ratio-box
1533
+ </span>
1534
+
1535
+ </a>
1536
+
1537
+
1538
+ </li>
1539
+
1540
+
1541
+ <li class="nav-tree__item ">
1542
+
1543
+ <a class="nav-tree__link " href="/frontend/sass/components/rule/">
1544
+
1545
+
1546
+ <span class="nav-tree__text">
1547
+ Rule
1548
+ </span>
1549
+
1550
+ </a>
1551
+
1552
+
1553
+ </li>
1554
+
1555
+
1556
+ <li class="nav-tree__item ">
1557
+
1558
+ <a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
1559
+
1560
+
1561
+ <span class="nav-tree__text">
1562
+ Scroll-slider
1563
+ </span>
1564
+
1565
+ </a>
1566
+
1567
+
1568
+ </li>
1569
+
1570
+
1571
+ <li class="nav-tree__item ">
1572
+
1573
+ <a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
1574
+
1575
+
1576
+ <span class="nav-tree__text">
1577
+ Skip-link
1578
+ </span>
1579
+
1580
+ </a>
1581
+
1582
+
1583
+ </li>
1584
+
1585
+
1586
+ <li class="nav-tree__item ">
1587
+
1588
+ <a class="nav-tree__link " href="/frontend/sass/components/slider/">
1589
+
1590
+
1591
+ <span class="nav-tree__text">
1592
+ Slider
1593
+ </span>
1594
+
1595
+ </a>
1596
+
1597
+
1598
+ </li>
1599
+
1600
+
1601
+ <li class="nav-tree__item ">
1602
+
1603
+ <a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
1604
+
1605
+
1606
+ <span class="nav-tree__text">
1607
+ Spoke-spinner
1608
+ </span>
1609
+
1610
+ </a>
1611
+
1612
+
1613
+ </li>
1614
+
1615
+
1616
+ <li class="nav-tree__item ">
1617
+
1618
+ <a class="nav-tree__link " href="/frontend/sass/components/tabs/">
1619
+
1620
+
1621
+ <span class="nav-tree__text">
1622
+ Tabs
1623
+ </span>
1624
+
1625
+ </a>
1626
+
1627
+
1628
+ </li>
1629
+
1630
+
1631
+ <li class="nav-tree__item ">
1632
+
1633
+ <a class="nav-tree__link " href="/frontend/sass/components/tag/">
1634
+
1635
+
1636
+ <span class="nav-tree__text">
1637
+ Tag
1638
+ </span>
1639
+
1640
+ </a>
1641
+
1642
+
1643
+ </li>
1644
+
1645
+
1646
+ <li class="nav-tree__item ">
1647
+
1648
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
1649
+
1650
+
1651
+ <span class="nav-tree__text">
1652
+ Tile-button
1653
+ </span>
1654
+
1655
+ </a>
1656
+
1657
+
1658
+ </li>
1659
+
1660
+
1661
+ <li class="nav-tree__item ">
1662
+
1663
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
1664
+
1665
+
1666
+ <span class="nav-tree__text">
1667
+ Tile-grid
1668
+ </span>
1669
+
1670
+ </a>
1671
+
1672
+
1673
+ </li>
1674
+
1675
+
1676
+ <li class="nav-tree__item ">
1677
+
1678
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
1679
+
1680
+
1681
+ <span class="nav-tree__text">
1682
+ Tile-grid-overlay
1683
+ </span>
1684
+
1685
+ </a>
1686
+
1687
+
1688
+ </li>
1689
+
1690
+
1691
+ <li class="nav-tree__item ">
1692
+
1693
+ <a class="nav-tree__link " href="/frontend/sass/components/vignette/">
1694
+
1695
+
1696
+ <span class="nav-tree__text">
1697
+ Vignette
1698
+ </span>
1699
+
1700
+ </a>
1701
+
1702
+
1703
+ </li>
1704
+
1705
+
1706
+ <li class="nav-tree__item ">
1707
+
1708
+ <a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
1709
+
1710
+
1711
+ <span class="nav-tree__text">
1712
+ Wysiwyg
1713
+ </span>
1714
+
1715
+ </a>
1716
+
1717
+
1718
+ </li>
1719
+
1720
+ </ul>
1721
+
1722
+ </details>
1723
+ </li>
1724
+
1725
+
1726
+ <li class="nav-tree__item ">
1727
+ <details class="nav-tree__collapsible">
1728
+ <summary class="nav-tree__toggle">
1729
+
1730
+ <span class="nav-tree__toggle-content">
1731
+
1732
+
1733
+ <span class="nav-tree__text">
1734
+ Helpers
1735
+ </span>
1736
+
1737
+ </span>
1738
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
1739
+
1740
+ </summary>
1741
+
1742
+ <ul class="nav-tree" data-menu-depth="3">
1743
+
1744
+ <li class="nav-tree__item ">
1745
+
1746
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
1747
+
1748
+
1749
+ <span class="nav-tree__text">
1750
+ Introduction
1751
+ </span>
1752
+
1753
+ </a>
1754
+
1755
+
1756
+ </li>
1757
+
1758
+
1759
+ <li class="nav-tree__item ">
1760
+
1761
+ <a class="nav-tree__link " href="/frontend/sass/helpers/color/">
1762
+
1763
+
1764
+ <span class="nav-tree__text">
1765
+ Color
1766
+ </span>
1767
+
1768
+ </a>
1769
+
1770
+
1771
+ </li>
1772
+
1773
+
1774
+ <li class="nav-tree__item ">
1775
+
1776
+ <a class="nav-tree__link " href="/frontend/sass/helpers/display/">
1777
+
1778
+
1779
+ <span class="nav-tree__text">
1780
+ Display
1781
+ </span>
1782
+
1783
+ </a>
1784
+
1785
+
1786
+ </li>
1787
+
1788
+
1789
+ <li class="nav-tree__item ">
1790
+
1791
+ <a class="nav-tree__link " href="/frontend/sass/helpers/index/">
1792
+
1793
+
1794
+ <span class="nav-tree__text">
1795
+ Index
1796
+ </span>
1797
+
1798
+ </a>
1799
+
1800
+
1801
+ </li>
1802
+
1803
+
1804
+ <li class="nav-tree__item ">
1805
+
1806
+ <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
1807
+
1808
+
1809
+ <span class="nav-tree__text">
1810
+ Print
1811
+ </span>
1812
+
1813
+ </a>
1814
+
1815
+
1816
+ </li>
1817
+
1818
+
1819
+ <li class="nav-tree__item ">
1820
+
1821
+ <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
1822
+
1823
+
1824
+ <span class="nav-tree__text">
1825
+ Typography
1826
+ </span>
1827
+
1828
+ </a>
1829
+
1830
+
1831
+ </li>
1832
+
1833
+
1834
+ <li class="nav-tree__item ">
1835
+
1836
+ <a class="nav-tree__link " href="/frontend/sass/helpers/units/">
1837
+
1838
+
1839
+ <span class="nav-tree__text">
1840
+ Units
1841
+ </span>
1842
+
1843
+ </a>
1844
+
1845
+
1846
+ </li>
1847
+
1848
+
1849
+ <li class="nav-tree__item ">
1850
+
1851
+ <a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
1852
+
1853
+
1854
+ <span class="nav-tree__text">
1855
+ Utilities
1856
+ </span>
1857
+
1858
+ </a>
1859
+
1860
+
1861
+ </li>
1862
+
1863
+ </ul>
1864
+
1865
+ </details>
1866
+ </li>
1867
+
1868
+ </ul>
1869
+
1870
+ </details>
1871
+ </li>
1872
+
1873
+
1874
+ <li class="nav-tree__item ">
1875
+ <details class="nav-tree__collapsible">
1876
+ <summary class="nav-tree__toggle">
1877
+
1878
+ <span class="nav-tree__toggle-content">
1879
+
1880
+
1881
+ <span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
1882
+
1883
+ <span class="nav-tree__text">
1884
+ Javascript API
1885
+ </span>
1886
+
1887
+ </span>
1888
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
1889
+
1890
+ </summary>
1891
+
1892
+ <ul class="nav-tree" data-menu-depth="2">
1893
+
1894
+ <li class="nav-tree__item ">
1895
+
1896
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/javascript/">
1897
+
1898
+
1899
+ <span class="nav-tree__text">
1900
+ Introduction
1901
+ </span>
1902
+
1903
+ </a>
1904
+
1905
+
1906
+ </li>
1907
+
1908
+
1909
+ <li class="nav-tree__item ">
1910
+
1911
+ <a class="nav-tree__link " href="/frontend/javascript/events/">
1912
+
1913
+
1914
+ <span class="nav-tree__text">
1915
+ events
1916
+ </span>
1917
+
1918
+ </a>
1919
+
1920
+
1921
+ </li>
1922
+
1923
+
1924
+ <li class="nav-tree__item ">
1925
+
1926
+ <a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
1927
+
1928
+
1929
+ <span class="nav-tree__text">
1930
+ ui/breakpoints
1931
+ </span>
1932
+
1933
+ </a>
1934
+
1935
+
1936
+ </li>
1937
+
1938
+
1939
+ <li class="nav-tree__item ">
1940
+
1941
+ <a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
1942
+
1943
+
1944
+ <span class="nav-tree__text">
1945
+ ui/collapsible
1946
+ </span>
1947
+
1948
+ </a>
1949
+
1950
+
1951
+ </li>
1952
+
1953
+
1954
+ <li class="nav-tree__item ">
1955
+
1956
+ <a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
1957
+
1958
+
1959
+ <span class="nav-tree__text">
1960
+ ui/dialog
1961
+ </span>
1962
+
1963
+ </a>
1964
+
1965
+
1966
+ </li>
1967
+
1968
+
1969
+ <li class="nav-tree__item ">
1970
+
1971
+ <a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
1972
+
1973
+
1974
+ <span class="nav-tree__text">
1975
+ ui/flipcard
1976
+ </span>
1977
+
1978
+ </a>
1979
+
1980
+
1981
+ </li>
1982
+
1983
+
1984
+ <li class="nav-tree__item ">
1985
+
1986
+ <a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
1987
+
1988
+
1989
+ <span class="nav-tree__text">
1990
+ ui/grid
1991
+ </span>
1992
+
1993
+ </a>
1994
+
1995
+
1996
+ </li>
1997
+
1998
+
1999
+ <li class="nav-tree__item ">
2000
+
2001
+ <a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
2002
+
2003
+
2004
+ <span class="nav-tree__text">
2005
+ ui/modal-builder
2006
+ </span>
2007
+
2008
+ </a>
2009
+
2010
+
2011
+ </li>
2012
+
2013
+
2014
+ <li class="nav-tree__item ">
2015
+
2016
+ <a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
2017
+
2018
+
2019
+ <span class="nav-tree__text">
2020
+ ui/overflow-scroller
2021
+ </span>
2022
+
2023
+ </a>
2024
+
2025
+
2026
+ </li>
2027
+
2028
+
2029
+ <li class="nav-tree__item ">
2030
+
2031
+ <a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
2032
+
2033
+
2034
+ <span class="nav-tree__text">
2035
+ ui/overflow-scroller-pager
2036
+ </span>
2037
+
2038
+ </a>
2039
+
2040
+
2041
+ </li>
2042
+
2043
+
2044
+ <li class="nav-tree__item ">
2045
+
2046
+ <a class="nav-tree__link " href="/frontend/javascript/ui-page/">
2047
+
2048
+
2049
+ <span class="nav-tree__text">
2050
+ ui/page
2051
+ </span>
2052
+
2053
+ </a>
2054
+
2055
+
2056
+ </li>
2057
+
2058
+
2059
+ <li class="nav-tree__item ">
2060
+
2061
+ <a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
2062
+
2063
+
2064
+ <span class="nav-tree__text">
2065
+ ui/popover
2066
+ </span>
2067
+
2068
+ </a>
2069
+
2070
+
2071
+ </li>
2072
+
2073
+
2074
+ <li class="nav-tree__item ">
2075
+
2076
+ <a class="nav-tree__link " href="/frontend/javascript/ui-print/">
2077
+
2078
+
2079
+ <span class="nav-tree__text">
2080
+ ui/print
2081
+ </span>
2082
+
2083
+ </a>
2084
+
2085
+
2086
+ </li>
2087
+
2088
+
2089
+ <li class="nav-tree__item ">
2090
+
2091
+ <a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
2092
+
2093
+
2094
+ <span class="nav-tree__text">
2095
+ ui/print-details
2096
+ </span>
2097
+
2098
+ </a>
2099
+
2100
+
2101
+ </li>
2102
+
2103
+
2104
+ <li class="nav-tree__item ">
2105
+
2106
+ <a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
2107
+
2108
+
2109
+ <span class="nav-tree__text">
2110
+ ui/programmatic-modal
2111
+ </span>
2112
+
2113
+ </a>
2114
+
2115
+
2116
+ </li>
2117
+
2118
+
2119
+ <li class="nav-tree__item ">
2120
+
2121
+ <a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
2122
+
2123
+
2124
+ <span class="nav-tree__text">
2125
+ ui/proxy-click
2126
+ </span>
2127
+
2128
+ </a>
2129
+
2130
+
2131
+ </li>
2132
+
2133
+
2134
+ <li class="nav-tree__item ">
2135
+
2136
+ <a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
2137
+
2138
+
2139
+ <span class="nav-tree__text">
2140
+ ui/resizer
2141
+ </span>
2142
+
2143
+ </a>
2144
+
2145
+
2146
+ </li>
2147
+
2148
+
2149
+ <li class="nav-tree__item ">
2150
+
2151
+ <a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
2152
+
2153
+
2154
+ <span class="nav-tree__text">
2155
+ ui/scroll-slider
2156
+ </span>
2157
+
2158
+ </a>
2159
+
2160
+
2161
+ </li>
2162
+
2163
+
2164
+ <li class="nav-tree__item ">
2165
+
2166
+ <a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
2167
+
2168
+
2169
+ <span class="nav-tree__text">
2170
+ ui/scrollpoint
2171
+ </span>
2172
+
2173
+ </a>
2174
+
2175
+
2176
+ </li>
2177
+
2178
+
2179
+ <li class="nav-tree__item ">
2180
+
2181
+ <a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
2182
+
2183
+
2184
+ <span class="nav-tree__text">
2185
+ ui/slider
2186
+ </span>
2187
+
2188
+ </a>
2189
+
2190
+
2191
+ </li>
2192
+
2193
+
2194
+ <li class="nav-tree__item ">
2195
+
2196
+ <a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
2197
+
2198
+
2199
+ <span class="nav-tree__text">
2200
+ ui/tabs
2201
+ </span>
2202
+
2203
+ </a>
2204
+
2205
+
2206
+ </li>
2207
+
2208
+
2209
+ <li class="nav-tree__item ">
2210
+
2211
+ <a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
2212
+
2213
+
2214
+ <span class="nav-tree__text">
2215
+ ui/tooltip
2216
+ </span>
2217
+
2218
+ </a>
2219
+
2220
+
2221
+ </li>
2222
+
2223
+
2224
+ <li class="nav-tree__item ">
2225
+
2226
+ <a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
2227
+
2228
+
2229
+ <span class="nav-tree__text">
2230
+ utils/class-logger
2231
+ </span>
2232
+
2233
+ </a>
2234
+
2235
+
2236
+ </li>
2237
+
2238
+
2239
+ <li class="nav-tree__item ">
2240
+
2241
+ <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
2242
+
2243
+
2244
+ <span class="nav-tree__text">
2245
+ utils/dom
2246
+ </span>
2247
+
2248
+ </a>
2249
+
2250
+
2251
+ </li>
2252
+
2253
+
2254
+ <li class="nav-tree__item ">
2255
+
2256
+ <a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
2257
+
2258
+
2259
+ <span class="nav-tree__text">
2260
+ utils/file-save
2261
+ </span>
2262
+
2263
+ </a>
2264
+
2265
+
2266
+ </li>
2267
+
2268
+
2269
+ <li class="nav-tree__item ">
2270
+
2271
+ <a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
2272
+
2273
+
2274
+ <span class="nav-tree__text">
2275
+ utils/floating-ui
2276
+ </span>
2277
+
2278
+ </a>
2279
+
2280
+
2281
+ </li>
2282
+
2283
+
2284
+ <li class="nav-tree__item ">
2285
+
2286
+ <a class="nav-tree__link " href="/frontend/javascript/utils-id/">
2287
+
2288
+
2289
+ <span class="nav-tree__text">
2290
+ utils/id
2291
+ </span>
2292
+
2293
+ </a>
2294
+
2295
+
2296
+ </li>
2297
+
2298
+
2299
+ <li class="nav-tree__item ">
2300
+
2301
+ <a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
2302
+
2303
+
2304
+ <span class="nav-tree__text">
2305
+ utils/pause-youtube-video
2306
+ </span>
2307
+
2308
+ </a>
2309
+
2310
+
2311
+ </li>
2312
+
2313
+ </ul>
2314
+
2315
+ </details>
2316
+ </li>
2317
+
2318
+ </ul>
2319
+
2320
+ </div>
2321
+ <div id="mobile-menu" data-ulu-modal-builder='{
2322
+ "title" : "Menu",
2323
+ "position" : "right"
2324
+ }'>
2325
+
2326
+ <ul class="nav-tree" data-menu-depth="1">
2327
+
2328
+
2329
+ <li class="nav-tree__item ">
2330
+ <details class="nav-tree__collapsible">
2331
+ <summary class="nav-tree__toggle">
2332
+
2333
+ <span class="nav-tree__toggle-content">
2334
+
2335
+
2336
+ <span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
2337
+
2338
+ <span class="nav-tree__text">
2339
+ Guide
2340
+ </span>
2341
+
2342
+ </span>
2343
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
2344
+
2345
+ </summary>
2346
+
2347
+ <ul class="nav-tree" data-menu-depth="2">
2348
+
2349
+
2350
+ <li class="nav-tree__item ">
2351
+
2352
+ <a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
2353
+
2354
+
2355
+ <span class="nav-tree__text">
2356
+ Building a Stylesheet
2357
+ </span>
2358
+
2359
+ </a>
2360
+
2361
+
2362
+ </li>
2363
+
2364
+
2365
+ <li class="nav-tree__item ">
2366
+
2367
+ <a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
2368
+
2369
+
2370
+ <span class="nav-tree__text">
2371
+ Developing Ulu SCSS Module
2372
+ </span>
2373
+
2374
+ </a>
2375
+
2376
+
2377
+ </li>
2378
+
2379
+ </ul>
2380
+
2381
+ </details>
2382
+ </li>
2383
+
2384
+
2385
+ <li class="nav-tree__item is-active-trail">
2386
+ <details class="nav-tree__collapsible" open="">
2387
+ <summary class="nav-tree__toggle">
2388
+
2389
+ <span class="nav-tree__toggle-content">
2390
+
2391
+
2392
+ <span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
2393
+
2394
+ <span class="nav-tree__text">
2395
+ Demos
2396
+ </span>
2397
+
2398
+ </span>
2399
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
2400
+
2401
+ </summary>
2402
+
2403
+ <ul class="nav-tree" data-menu-depth="2">
2404
+
2405
+
2406
+ <li class="nav-tree__item is-active is-active-trail">
2407
+
2408
+ <a class="nav-tree__link is-active is-active-trail" href="/frontend/demos/accordion/" aria-current="page">
2409
+
2410
+
2411
+ <span class="nav-tree__text">
2412
+ Accordion
2413
+ </span>
2414
+
2415
+ </a>
2416
+
2417
+
2418
+ </li>
2419
+
2420
+
2421
+ <li class="nav-tree__item ">
2422
+
2423
+ <a class="nav-tree__link " href="/frontend/demos/button/">
2424
+
2425
+
2426
+ <span class="nav-tree__text">
2427
+ Button
2428
+ </span>
2429
+
2430
+ </a>
2431
+
2432
+
2433
+ </li>
2434
+
2435
+
2436
+ <li class="nav-tree__item ">
2437
+
2438
+ <a class="nav-tree__link " href="/frontend/demos/callout/">
2439
+
2440
+
2441
+ <span class="nav-tree__text">
2442
+ Callout
2443
+ </span>
2444
+
2445
+ </a>
2446
+
2447
+
2448
+ </li>
2449
+
2450
+
2451
+ <li class="nav-tree__item ">
2452
+
2453
+ <a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
2454
+
2455
+
2456
+ <span class="nav-tree__text">
2457
+ Captioned Figure
2458
+ </span>
2459
+
2460
+ </a>
2461
+
2462
+
2463
+ </li>
2464
+
2465
+
2466
+ <li class="nav-tree__item ">
2467
+
2468
+ <a class="nav-tree__link " href="/frontend/demos/card/">
2469
+
2470
+
2471
+ <span class="nav-tree__text">
2472
+ Card
2473
+ </span>
2474
+
2475
+ </a>
2476
+
2477
+
2478
+ </li>
2479
+
2480
+
2481
+ <li class="nav-tree__item ">
2482
+
2483
+ <a class="nav-tree__link " href="/frontend/demos/css-icons/">
2484
+
2485
+
2486
+ <span class="nav-tree__text">
2487
+ CSS Icons
2488
+ </span>
2489
+
2490
+ </a>
2491
+
2492
+
2493
+ </li>
2494
+
2495
+
2496
+ <li class="nav-tree__item ">
2497
+
2498
+ <a class="nav-tree__link " href="/frontend/demos/data-grid/">
2499
+
2500
+
2501
+ <span class="nav-tree__text">
2502
+ Data grid
2503
+ </span>
2504
+
2505
+ </a>
2506
+
2507
+
2508
+ </li>
2509
+
2510
+
2511
+ <li class="nav-tree__item ">
2512
+
2513
+ <a class="nav-tree__link " href="/frontend/demos/data-table/">
2514
+
2515
+
2516
+ <span class="nav-tree__text">
2517
+ Data Table
2518
+ </span>
2519
+
2520
+ </a>
2521
+
2522
+
2523
+ </li>
2524
+
2525
+
2526
+ <li class="nav-tree__item ">
2527
+
2528
+ <a class="nav-tree__link " href="/frontend/demos/file-save/">
2529
+
2530
+
2531
+ <span class="nav-tree__text">
2532
+ File Save
2533
+ </span>
2534
+
2535
+ </a>
2536
+
2537
+
2538
+ </li>
2539
+
2540
+
2541
+ <li class="nav-tree__item ">
2542
+
2543
+ <a class="nav-tree__link " href="/frontend/demos/flipcard/">
2544
+
2545
+
2546
+ <span class="nav-tree__text">
2547
+ Flip Card
2548
+ </span>
2549
+
2550
+ </a>
2551
+
2552
+
2553
+ </li>
2554
+
2555
+
2556
+ <li class="nav-tree__item ">
2557
+
2558
+ <a class="nav-tree__link " href="/frontend/demos/form-theme/">
2559
+
2560
+
2561
+ <span class="nav-tree__text">
2562
+ Form Theme
2563
+ </span>
2564
+
2565
+ </a>
2566
+
2567
+
2568
+ </li>
2569
+
2570
+
2571
+ <li class="nav-tree__item ">
2572
+
2573
+ <a class="nav-tree__link " href="/frontend/demos/hero/">
2574
+
2575
+
2576
+ <span class="nav-tree__text">
2577
+ Hero
2578
+ </span>
2579
+
2580
+ </a>
2581
+
2582
+
2583
+ </li>
2584
+
2585
+
2586
+ <li class="nav-tree__item ">
2587
+
2588
+ <a class="nav-tree__link " href="/frontend/demos/image-grid/">
2589
+
2590
+
2591
+ <span class="nav-tree__text">
2592
+ Image Grid
2593
+ </span>
2594
+
2595
+ </a>
2596
+
2597
+
2598
+ </li>
2599
+
2600
+
2601
+ <li class="nav-tree__item ">
2602
+
2603
+ <a class="nav-tree__link " href="/frontend/demos/menu-stack/">
2604
+
2605
+
2606
+ <span class="nav-tree__text">
2607
+ Menu Stack
2608
+ </span>
2609
+
2610
+ </a>
2611
+
2612
+
2613
+ </li>
2614
+
2615
+
2616
+ <li class="nav-tree__item ">
2617
+
2618
+ <a class="nav-tree__link " href="/frontend/demos/modals/">
2619
+
2620
+
2621
+ <span class="nav-tree__text">
2622
+ Modals
2623
+ </span>
2624
+
2625
+ </a>
2626
+
2627
+
2628
+ </li>
2629
+
2630
+
2631
+ <li class="nav-tree__item ">
2632
+
2633
+ <a class="nav-tree__link " href="/frontend/demos/nav-strip/">
2634
+
2635
+
2636
+ <span class="nav-tree__text">
2637
+ Nav Strip
2638
+ </span>
2639
+
2640
+ </a>
2641
+
2642
+
2643
+ </li>
2644
+
2645
+
2646
+ <li class="nav-tree__item ">
2647
+
2648
+ <a class="nav-tree__link " href="/frontend/demos/overlay-section/">
2649
+
2650
+
2651
+ <span class="nav-tree__text">
2652
+ Overlay Section
2653
+ </span>
2654
+
2655
+ </a>
2656
+
2657
+
2658
+ </li>
2659
+
2660
+
2661
+ <li class="nav-tree__item ">
2662
+
2663
+ <a class="nav-tree__link " href="/frontend/demos/popovers/">
2664
+
2665
+
2666
+ <span class="nav-tree__text">
2667
+ Popovers
2668
+ </span>
2669
+
2670
+ </a>
2671
+
2672
+
2673
+ </li>
2674
+
2675
+
2676
+ <li class="nav-tree__item ">
2677
+
2678
+ <a class="nav-tree__link " href="/frontend/demos/print/">
2679
+
2680
+
2681
+ <span class="nav-tree__text">
2682
+ Print
2683
+ </span>
2684
+
2685
+ </a>
2686
+
2687
+
2688
+ </li>
2689
+
2690
+
2691
+ <li class="nav-tree__item ">
2692
+
2693
+ <a class="nav-tree__link " href="/frontend/demos/pull-quote/">
2694
+
2695
+
2696
+ <span class="nav-tree__text">
2697
+ Pull Quote
2698
+ </span>
2699
+
2700
+ </a>
2701
+
2702
+
2703
+ </li>
2704
+
2705
+
2706
+ <li class="nav-tree__item ">
2707
+
2708
+ <a class="nav-tree__link " href="/frontend/demos/rule/">
2709
+
2710
+
2711
+ <span class="nav-tree__text">
2712
+ Rule
2713
+ </span>
2714
+
2715
+ </a>
2716
+
2717
+
2718
+ </li>
2719
+
2720
+
2721
+ <li class="nav-tree__item ">
2722
+
2723
+ <a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
2724
+
2725
+
2726
+ <span class="nav-tree__text">
2727
+ Scroll Slider
2728
+ </span>
2729
+
2730
+ </a>
2731
+
2732
+
2733
+ </li>
2734
+
2735
+
2736
+ <li class="nav-tree__item ">
2737
+
2738
+ <a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
2739
+
2740
+
2741
+ <span class="nav-tree__text">
2742
+ Scrollpoints
2743
+ </span>
2744
+
2745
+ </a>
2746
+
2747
+
2748
+ </li>
2749
+
2750
+
2751
+ <li class="nav-tree__item ">
2752
+
2753
+ <a class="nav-tree__link " href="/frontend/demos/slider/">
2754
+
2755
+
2756
+ <span class="nav-tree__text">
2757
+ Slider
2758
+ </span>
2759
+
2760
+ </a>
2761
+
2762
+
2763
+ </li>
2764
+
2765
+
2766
+ <li class="nav-tree__item ">
2767
+
2768
+ <a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
2769
+
2770
+
2771
+ <span class="nav-tree__text">
2772
+ Spoke Spinner
2773
+ </span>
2774
+
2775
+ </a>
2776
+
2777
+
2778
+ </li>
2779
+
2780
+
2781
+ <li class="nav-tree__item ">
2782
+
2783
+ <a class="nav-tree__link " href="/frontend/demos/tabs/">
2784
+
2785
+
2786
+ <span class="nav-tree__text">
2787
+ Tabs
2788
+ </span>
2789
+
2790
+ </a>
2791
+
2792
+
2793
+ </li>
2794
+
2795
+
2796
+ <li class="nav-tree__item ">
2797
+
2798
+ <a class="nav-tree__link " href="/frontend/demos/tag/">
2799
+
2800
+
2801
+ <span class="nav-tree__text">
2802
+ Tag
2803
+ </span>
2804
+
2805
+ </a>
2806
+
2807
+
2808
+ </li>
2809
+
2810
+
2811
+ <li class="nav-tree__item ">
2812
+
2813
+ <a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
2814
+
2815
+
2816
+ <span class="nav-tree__text">
2817
+ Tile Grid Overlay
2818
+ </span>
2819
+
2820
+ </a>
2821
+
2822
+
2823
+ </li>
2824
+
2825
+
2826
+ <li class="nav-tree__item ">
2827
+
2828
+ <a class="nav-tree__link " href="/frontend/demos/tiles/">
2829
+
2830
+
2831
+ <span class="nav-tree__text">
2832
+ Tiles
2833
+ </span>
2834
+
2835
+ </a>
2836
+
2837
+
2838
+ </li>
2839
+
2840
+
2841
+ <li class="nav-tree__item ">
2842
+
2843
+ <a class="nav-tree__link " href="/frontend/demos/tooltip/">
2844
+
2845
+
2846
+ <span class="nav-tree__text">
2847
+ Tooltip
2848
+ </span>
2849
+
2850
+ </a>
2851
+
2852
+
2853
+ </li>
2854
+
2855
+ </ul>
2856
+
2857
+ </details>
2858
+ </li>
2859
+
2860
+
2861
+ <li class="nav-tree__item ">
2862
+ <details class="nav-tree__collapsible">
2863
+ <summary class="nav-tree__toggle">
2864
+
2865
+ <span class="nav-tree__toggle-content">
2866
+
2867
+
2868
+ <span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
2869
+
2870
+ <span class="nav-tree__text">
2871
+ Sass API
2872
+ </span>
2873
+
2874
+ </span>
2875
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
2876
+
2877
+ </summary>
2878
+
2879
+ <ul class="nav-tree" data-menu-depth="2">
2880
+
2881
+ <li class="nav-tree__item ">
2882
+
2883
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
2884
+
2885
+
2886
+ <span class="nav-tree__text">
2887
+ Introduction
2888
+ </span>
2889
+
2890
+ </a>
2891
+
2892
+
2893
+ </li>
2894
+
2895
+
2896
+ <li class="nav-tree__item ">
2897
+ <details class="nav-tree__collapsible">
2898
+ <summary class="nav-tree__toggle">
2899
+
2900
+ <span class="nav-tree__toggle-content">
2901
+
2902
+
2903
+ <span class="nav-tree__text">
2904
+ Core
2905
+ </span>
2906
+
2907
+ </span>
2908
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
2909
+
2910
+ </summary>
2911
+
2912
+ <ul class="nav-tree" data-menu-depth="3">
2913
+
2914
+ <li class="nav-tree__item ">
2915
+
2916
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
2917
+
2918
+
2919
+ <span class="nav-tree__text">
2920
+ Introduction
2921
+ </span>
2922
+
2923
+ </a>
2924
+
2925
+
2926
+ </li>
2927
+
2928
+
2929
+ <li class="nav-tree__item ">
2930
+
2931
+ <a class="nav-tree__link " href="/frontend/sass/core/breakpoint/">
2932
+
2933
+
2934
+ <span class="nav-tree__text">
2935
+ Breakpoint
2936
+ </span>
2937
+
2938
+ </a>
2939
+
2940
+
2941
+ </li>
2942
+
2943
+
2944
+ <li class="nav-tree__item ">
2945
+
2946
+ <a class="nav-tree__link " href="/frontend/sass/core/button/">
2947
+
2948
+
2949
+ <span class="nav-tree__text">
2950
+ Button
2951
+ </span>
2952
+
2953
+ </a>
2954
+
2955
+
2956
+ </li>
2957
+
2958
+
2959
+ <li class="nav-tree__item ">
2960
+
2961
+ <a class="nav-tree__link " href="/frontend/sass/core/color/">
2962
+
2963
+
2964
+ <span class="nav-tree__text">
2965
+ Color
2966
+ </span>
2967
+
2968
+ </a>
2969
+
2970
+
2971
+ </li>
2972
+
2973
+
2974
+ <li class="nav-tree__item ">
2975
+
2976
+ <a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
2977
+
2978
+
2979
+ <span class="nav-tree__text">
2980
+ Cssvar
2981
+ </span>
2982
+
2983
+ </a>
2984
+
2985
+
2986
+ </li>
2987
+
2988
+
2989
+ <li class="nav-tree__item ">
2990
+
2991
+ <a class="nav-tree__link " href="/frontend/sass/core/element/">
2992
+
2993
+
2994
+ <span class="nav-tree__text">
2995
+ Element
2996
+ </span>
2997
+
2998
+ </a>
2999
+
3000
+
3001
+ </li>
3002
+
3003
+
3004
+ <li class="nav-tree__item ">
3005
+
3006
+ <a class="nav-tree__link " href="/frontend/sass/core/layout/">
3007
+
3008
+
3009
+ <span class="nav-tree__text">
3010
+ Layout
3011
+ </span>
3012
+
3013
+ </a>
3014
+
3015
+
3016
+ </li>
3017
+
3018
+
3019
+ <li class="nav-tree__item ">
3020
+
3021
+ <a class="nav-tree__link " href="/frontend/sass/core/path/">
3022
+
3023
+
3024
+ <span class="nav-tree__text">
3025
+ Path
3026
+ </span>
3027
+
3028
+ </a>
3029
+
3030
+
3031
+ </li>
3032
+
3033
+
3034
+ <li class="nav-tree__item ">
3035
+
3036
+ <a class="nav-tree__link " href="/frontend/sass/core/selector/">
3037
+
3038
+
3039
+ <span class="nav-tree__text">
3040
+ Selector
3041
+ </span>
3042
+
3043
+ </a>
3044
+
3045
+
3046
+ </li>
3047
+
3048
+
3049
+ <li class="nav-tree__item ">
3050
+
3051
+ <a class="nav-tree__link " href="/frontend/sass/core/typography/">
3052
+
3053
+
3054
+ <span class="nav-tree__text">
3055
+ Typography
3056
+ </span>
3057
+
3058
+ </a>
3059
+
3060
+
3061
+ </li>
3062
+
3063
+
3064
+ <li class="nav-tree__item ">
3065
+
3066
+ <a class="nav-tree__link " href="/frontend/sass/core/units/">
3067
+
3068
+
3069
+ <span class="nav-tree__text">
3070
+ Units
3071
+ </span>
3072
+
3073
+ </a>
3074
+
3075
+
3076
+ </li>
3077
+
3078
+
3079
+ <li class="nav-tree__item ">
3080
+
3081
+ <a class="nav-tree__link " href="/frontend/sass/core/utils/">
3082
+
3083
+
3084
+ <span class="nav-tree__text">
3085
+ Utils
3086
+ </span>
3087
+
3088
+ </a>
3089
+
3090
+
3091
+ </li>
3092
+
3093
+ </ul>
3094
+
3095
+ </details>
3096
+ </li>
3097
+
3098
+
3099
+ <li class="nav-tree__item ">
3100
+ <details class="nav-tree__collapsible">
3101
+ <summary class="nav-tree__toggle">
3102
+
3103
+ <span class="nav-tree__toggle-content">
3104
+
3105
+
3106
+ <span class="nav-tree__text">
3107
+ Base
3108
+ </span>
3109
+
3110
+ </span>
3111
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
3112
+
3113
+ </summary>
3114
+
3115
+ <ul class="nav-tree" data-menu-depth="3">
3116
+
3117
+ <li class="nav-tree__item ">
3118
+
3119
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
3120
+
3121
+
3122
+ <span class="nav-tree__text">
3123
+ Introduction
3124
+ </span>
3125
+
3126
+ </a>
3127
+
3128
+
3129
+ </li>
3130
+
3131
+
3132
+ <li class="nav-tree__item ">
3133
+
3134
+ <a class="nav-tree__link " href="/frontend/sass/base/color/">
3135
+
3136
+
3137
+ <span class="nav-tree__text">
3138
+ Color
3139
+ </span>
3140
+
3141
+ </a>
3142
+
3143
+
3144
+ </li>
3145
+
3146
+
3147
+ <li class="nav-tree__item ">
3148
+
3149
+ <a class="nav-tree__link " href="/frontend/sass/base/elements/">
3150
+
3151
+
3152
+ <span class="nav-tree__text">
3153
+ Elements
3154
+ </span>
3155
+
3156
+ </a>
3157
+
3158
+
3159
+ </li>
3160
+
3161
+
3162
+ <li class="nav-tree__item ">
3163
+
3164
+ <a class="nav-tree__link " href="/frontend/sass/base/index/">
3165
+
3166
+
3167
+ <span class="nav-tree__text">
3168
+ Index
3169
+ </span>
3170
+
3171
+ </a>
3172
+
3173
+
3174
+ </li>
3175
+
3176
+
3177
+ <li class="nav-tree__item ">
3178
+
3179
+ <a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
3180
+
3181
+
3182
+ <span class="nav-tree__text">
3183
+ Keyframes
3184
+ </span>
3185
+
3186
+ </a>
3187
+
3188
+
3189
+ </li>
3190
+
3191
+
3192
+ <li class="nav-tree__item ">
3193
+
3194
+ <a class="nav-tree__link " href="/frontend/sass/base/layout/">
3195
+
3196
+
3197
+ <span class="nav-tree__text">
3198
+ Layout
3199
+ </span>
3200
+
3201
+ </a>
3202
+
3203
+
3204
+ </li>
3205
+
3206
+
3207
+ <li class="nav-tree__item ">
3208
+
3209
+ <a class="nav-tree__link " href="/frontend/sass/base/normalize/">
3210
+
3211
+
3212
+ <span class="nav-tree__text">
3213
+ Normalize
3214
+ </span>
3215
+
3216
+ </a>
3217
+
3218
+
3219
+ </li>
3220
+
3221
+
3222
+ <li class="nav-tree__item ">
3223
+
3224
+ <a class="nav-tree__link " href="/frontend/sass/base/print/">
3225
+
3226
+
3227
+ <span class="nav-tree__text">
3228
+ Print
3229
+ </span>
3230
+
3231
+ </a>
3232
+
3233
+
3234
+ </li>
3235
+
3236
+
3237
+ <li class="nav-tree__item ">
3238
+
3239
+ <a class="nav-tree__link " href="/frontend/sass/base/root/">
3240
+
3241
+
3242
+ <span class="nav-tree__text">
3243
+ Root
3244
+ </span>
3245
+
3246
+ </a>
3247
+
3248
+
3249
+ </li>
3250
+
3251
+
3252
+ <li class="nav-tree__item ">
3253
+
3254
+ <a class="nav-tree__link " href="/frontend/sass/base/typography/">
3255
+
3256
+
3257
+ <span class="nav-tree__text">
3258
+ Typography
3259
+ </span>
3260
+
3261
+ </a>
3262
+
3263
+
3264
+ </li>
3265
+
3266
+ </ul>
3267
+
3268
+ </details>
3269
+ </li>
3270
+
3271
+
3272
+ <li class="nav-tree__item ">
3273
+ <details class="nav-tree__collapsible">
3274
+ <summary class="nav-tree__toggle">
3275
+
3276
+ <span class="nav-tree__toggle-content">
3277
+
3278
+
3279
+ <span class="nav-tree__text">
3280
+ Components
3281
+ </span>
3282
+
3283
+ </span>
3284
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
3285
+
3286
+ </summary>
3287
+
3288
+ <ul class="nav-tree" data-menu-depth="3">
3289
+
3290
+ <li class="nav-tree__item ">
3291
+
3292
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
3293
+
3294
+
3295
+ <span class="nav-tree__text">
3296
+ Introduction
3297
+ </span>
3298
+
3299
+ </a>
3300
+
3301
+
3302
+ </li>
3303
+
3304
+
3305
+ <li class="nav-tree__item ">
3306
+
3307
+ <a class="nav-tree__link " href="/frontend/sass/components/accordion/">
3308
+
3309
+
3310
+ <span class="nav-tree__text">
3311
+ Accordion
3312
+ </span>
3313
+
3314
+ </a>
3315
+
3316
+
3317
+ </li>
3318
+
3319
+
3320
+ <li class="nav-tree__item ">
3321
+
3322
+ <a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
3323
+
3324
+
3325
+ <span class="nav-tree__text">
3326
+ Adaptive-spacing
3327
+ </span>
3328
+
3329
+ </a>
3330
+
3331
+
3332
+ </li>
3333
+
3334
+
3335
+ <li class="nav-tree__item ">
3336
+
3337
+ <a class="nav-tree__link " href="/frontend/sass/components/badge/">
3338
+
3339
+
3340
+ <span class="nav-tree__text">
3341
+ Badge
3342
+ </span>
3343
+
3344
+ </a>
3345
+
3346
+
3347
+ </li>
3348
+
3349
+
3350
+ <li class="nav-tree__item ">
3351
+
3352
+ <a class="nav-tree__link " href="/frontend/sass/components/button/">
3353
+
3354
+
3355
+ <span class="nav-tree__text">
3356
+ Button
3357
+ </span>
3358
+
3359
+ </a>
3360
+
3361
+
3362
+ </li>
3363
+
3364
+
3365
+ <li class="nav-tree__item ">
3366
+
3367
+ <a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
3368
+
3369
+
3370
+ <span class="nav-tree__text">
3371
+ Button-verbose
3372
+ </span>
3373
+
3374
+ </a>
3375
+
3376
+
3377
+ </li>
3378
+
3379
+
3380
+ <li class="nav-tree__item ">
3381
+
3382
+ <a class="nav-tree__link " href="/frontend/sass/components/callout/">
3383
+
3384
+
3385
+ <span class="nav-tree__text">
3386
+ Callout
3387
+ </span>
3388
+
3389
+ </a>
3390
+
3391
+
3392
+ </li>
3393
+
3394
+
3395
+ <li class="nav-tree__item ">
3396
+
3397
+ <a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
3398
+
3399
+
3400
+ <span class="nav-tree__text">
3401
+ Captioned-figure
3402
+ </span>
3403
+
3404
+ </a>
3405
+
3406
+
3407
+ </li>
3408
+
3409
+
3410
+ <li class="nav-tree__item ">
3411
+
3412
+ <a class="nav-tree__link " href="/frontend/sass/components/card/">
3413
+
3414
+
3415
+ <span class="nav-tree__text">
3416
+ Card
3417
+ </span>
3418
+
3419
+ </a>
3420
+
3421
+
3422
+ </li>
3423
+
3424
+
3425
+ <li class="nav-tree__item ">
3426
+
3427
+ <a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
3428
+
3429
+
3430
+ <span class="nav-tree__text">
3431
+ Card-grid
3432
+ </span>
3433
+
3434
+ </a>
3435
+
3436
+
3437
+ </li>
3438
+
3439
+
3440
+ <li class="nav-tree__item ">
3441
+
3442
+ <a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
3443
+
3444
+
3445
+ <span class="nav-tree__text">
3446
+ Css-icon
3447
+ </span>
3448
+
3449
+ </a>
3450
+
3451
+
3452
+ </li>
3453
+
3454
+
3455
+ <li class="nav-tree__item ">
3456
+
3457
+ <a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
3458
+
3459
+
3460
+ <span class="nav-tree__text">
3461
+ Data-grid
3462
+ </span>
3463
+
3464
+ </a>
3465
+
3466
+
3467
+ </li>
3468
+
3469
+
3470
+ <li class="nav-tree__item ">
3471
+
3472
+ <a class="nav-tree__link " href="/frontend/sass/components/data-table/">
3473
+
3474
+
3475
+ <span class="nav-tree__text">
3476
+ Data-table
3477
+ </span>
3478
+
3479
+ </a>
3480
+
3481
+
3482
+ </li>
3483
+
3484
+
3485
+ <li class="nav-tree__item ">
3486
+
3487
+ <a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
3488
+
3489
+
3490
+ <span class="nav-tree__text">
3491
+ Fill-context
3492
+ </span>
3493
+
3494
+ </a>
3495
+
3496
+
3497
+ </li>
3498
+
3499
+
3500
+ <li class="nav-tree__item ">
3501
+
3502
+ <a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
3503
+
3504
+
3505
+ <span class="nav-tree__text">
3506
+ Flipcard
3507
+ </span>
3508
+
3509
+ </a>
3510
+
3511
+
3512
+ </li>
3513
+
3514
+
3515
+ <li class="nav-tree__item ">
3516
+
3517
+ <a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
3518
+
3519
+
3520
+ <span class="nav-tree__text">
3521
+ Flipcard-grid
3522
+ </span>
3523
+
3524
+ </a>
3525
+
3526
+
3527
+ </li>
3528
+
3529
+
3530
+ <li class="nav-tree__item ">
3531
+
3532
+ <a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
3533
+
3534
+
3535
+ <span class="nav-tree__text">
3536
+ Form-theme
3537
+ </span>
3538
+
3539
+ </a>
3540
+
3541
+
3542
+ </li>
3543
+
3544
+
3545
+ <li class="nav-tree__item ">
3546
+
3547
+ <a class="nav-tree__link " href="/frontend/sass/components/hero/">
3548
+
3549
+
3550
+ <span class="nav-tree__text">
3551
+ Hero
3552
+ </span>
3553
+
3554
+ </a>
3555
+
3556
+
3557
+ </li>
3558
+
3559
+
3560
+ <li class="nav-tree__item ">
3561
+
3562
+ <a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
3563
+
3564
+
3565
+ <span class="nav-tree__text">
3566
+ Horizontal-rule
3567
+ </span>
3568
+
3569
+ </a>
3570
+
3571
+
3572
+ </li>
3573
+
3574
+
3575
+ <li class="nav-tree__item ">
3576
+
3577
+ <a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
3578
+
3579
+
3580
+ <span class="nav-tree__text">
3581
+ Image-grid
3582
+ </span>
3583
+
3584
+ </a>
3585
+
3586
+
3587
+ </li>
3588
+
3589
+
3590
+ <li class="nav-tree__item ">
3591
+
3592
+ <a class="nav-tree__link " href="/frontend/sass/components/index/">
3593
+
3594
+
3595
+ <span class="nav-tree__text">
3596
+ Index
3597
+ </span>
3598
+
3599
+ </a>
3600
+
3601
+
3602
+ </li>
3603
+
3604
+
3605
+ <li class="nav-tree__item ">
3606
+
3607
+ <a class="nav-tree__link " href="/frontend/sass/components/links/">
3608
+
3609
+
3610
+ <span class="nav-tree__text">
3611
+ Links
3612
+ </span>
3613
+
3614
+ </a>
3615
+
3616
+
3617
+ </li>
3618
+
3619
+
3620
+ <li class="nav-tree__item ">
3621
+
3622
+ <a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
3623
+
3624
+
3625
+ <span class="nav-tree__text">
3626
+ List-lines
3627
+ </span>
3628
+
3629
+ </a>
3630
+
3631
+
3632
+ </li>
3633
+
3634
+
3635
+ <li class="nav-tree__item ">
3636
+
3637
+ <a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
3638
+
3639
+
3640
+ <span class="nav-tree__text">
3641
+ List-ordered
3642
+ </span>
3643
+
3644
+ </a>
3645
+
3646
+
3647
+ </li>
3648
+
3649
+
3650
+ <li class="nav-tree__item ">
3651
+
3652
+ <a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
3653
+
3654
+
3655
+ <span class="nav-tree__text">
3656
+ List-unordered
3657
+ </span>
3658
+
3659
+ </a>
3660
+
3661
+
3662
+ </li>
3663
+
3664
+
3665
+ <li class="nav-tree__item ">
3666
+
3667
+ <a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
3668
+
3669
+
3670
+ <span class="nav-tree__text">
3671
+ Menu-stack
3672
+ </span>
3673
+
3674
+ </a>
3675
+
3676
+
3677
+ </li>
3678
+
3679
+
3680
+ <li class="nav-tree__item ">
3681
+
3682
+ <a class="nav-tree__link " href="/frontend/sass/components/modal/">
3683
+
3684
+
3685
+ <span class="nav-tree__text">
3686
+ Modal
3687
+ </span>
3688
+
3689
+ </a>
3690
+
3691
+
3692
+ </li>
3693
+
3694
+
3695
+ <li class="nav-tree__item ">
3696
+
3697
+ <a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
3698
+
3699
+
3700
+ <span class="nav-tree__text">
3701
+ Nav-strip
3702
+ </span>
3703
+
3704
+ </a>
3705
+
3706
+
3707
+ </li>
3708
+
3709
+
3710
+ <li class="nav-tree__item ">
3711
+
3712
+ <a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
3713
+
3714
+
3715
+ <span class="nav-tree__text">
3716
+ Overlay-section
3717
+ </span>
3718
+
3719
+ </a>
3720
+
3721
+
3722
+ </li>
3723
+
3724
+
3725
+ <li class="nav-tree__item ">
3726
+
3727
+ <a class="nav-tree__link " href="/frontend/sass/components/pager/">
3728
+
3729
+
3730
+ <span class="nav-tree__text">
3731
+ Pager
3732
+ </span>
3733
+
3734
+ </a>
3735
+
3736
+
3737
+ </li>
3738
+
3739
+
3740
+ <li class="nav-tree__item ">
3741
+
3742
+ <a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
3743
+
3744
+
3745
+ <span class="nav-tree__text">
3746
+ Placeholder-block
3747
+ </span>
3748
+
3749
+ </a>
3750
+
3751
+
3752
+ </li>
3753
+
3754
+
3755
+ <li class="nav-tree__item ">
3756
+
3757
+ <a class="nav-tree__link " href="/frontend/sass/components/popover/">
3758
+
3759
+
3760
+ <span class="nav-tree__text">
3761
+ Popover
3762
+ </span>
3763
+
3764
+ </a>
3765
+
3766
+
3767
+ </li>
3768
+
3769
+
3770
+ <li class="nav-tree__item ">
3771
+
3772
+ <a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
3773
+
3774
+
3775
+ <span class="nav-tree__text">
3776
+ Pull-quote
3777
+ </span>
3778
+
3779
+ </a>
3780
+
3781
+
3782
+ </li>
3783
+
3784
+
3785
+ <li class="nav-tree__item ">
3786
+
3787
+ <a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
3788
+
3789
+
3790
+ <span class="nav-tree__text">
3791
+ Ratio-box
3792
+ </span>
3793
+
3794
+ </a>
3795
+
3796
+
3797
+ </li>
3798
+
3799
+
3800
+ <li class="nav-tree__item ">
3801
+
3802
+ <a class="nav-tree__link " href="/frontend/sass/components/rule/">
3803
+
3804
+
3805
+ <span class="nav-tree__text">
3806
+ Rule
3807
+ </span>
3808
+
3809
+ </a>
3810
+
3811
+
3812
+ </li>
3813
+
3814
+
3815
+ <li class="nav-tree__item ">
3816
+
3817
+ <a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
3818
+
3819
+
3820
+ <span class="nav-tree__text">
3821
+ Scroll-slider
3822
+ </span>
3823
+
3824
+ </a>
3825
+
3826
+
3827
+ </li>
3828
+
3829
+
3830
+ <li class="nav-tree__item ">
3831
+
3832
+ <a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
3833
+
3834
+
3835
+ <span class="nav-tree__text">
3836
+ Skip-link
3837
+ </span>
3838
+
3839
+ </a>
3840
+
3841
+
3842
+ </li>
3843
+
3844
+
3845
+ <li class="nav-tree__item ">
3846
+
3847
+ <a class="nav-tree__link " href="/frontend/sass/components/slider/">
3848
+
3849
+
3850
+ <span class="nav-tree__text">
3851
+ Slider
3852
+ </span>
3853
+
3854
+ </a>
3855
+
3856
+
3857
+ </li>
3858
+
3859
+
3860
+ <li class="nav-tree__item ">
3861
+
3862
+ <a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
3863
+
3864
+
3865
+ <span class="nav-tree__text">
3866
+ Spoke-spinner
3867
+ </span>
3868
+
3869
+ </a>
3870
+
3871
+
3872
+ </li>
3873
+
3874
+
3875
+ <li class="nav-tree__item ">
3876
+
3877
+ <a class="nav-tree__link " href="/frontend/sass/components/tabs/">
3878
+
3879
+
3880
+ <span class="nav-tree__text">
3881
+ Tabs
3882
+ </span>
3883
+
3884
+ </a>
3885
+
3886
+
3887
+ </li>
3888
+
3889
+
3890
+ <li class="nav-tree__item ">
3891
+
3892
+ <a class="nav-tree__link " href="/frontend/sass/components/tag/">
3893
+
3894
+
3895
+ <span class="nav-tree__text">
3896
+ Tag
3897
+ </span>
3898
+
3899
+ </a>
3900
+
3901
+
3902
+ </li>
3903
+
3904
+
3905
+ <li class="nav-tree__item ">
3906
+
3907
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
3908
+
3909
+
3910
+ <span class="nav-tree__text">
3911
+ Tile-button
3912
+ </span>
3913
+
3914
+ </a>
3915
+
3916
+
3917
+ </li>
3918
+
3919
+
3920
+ <li class="nav-tree__item ">
3921
+
3922
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
3923
+
3924
+
3925
+ <span class="nav-tree__text">
3926
+ Tile-grid
3927
+ </span>
3928
+
3929
+ </a>
3930
+
3931
+
3932
+ </li>
3933
+
3934
+
3935
+ <li class="nav-tree__item ">
3936
+
3937
+ <a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
3938
+
3939
+
3940
+ <span class="nav-tree__text">
3941
+ Tile-grid-overlay
3942
+ </span>
3943
+
3944
+ </a>
3945
+
3946
+
3947
+ </li>
3948
+
3949
+
3950
+ <li class="nav-tree__item ">
3951
+
3952
+ <a class="nav-tree__link " href="/frontend/sass/components/vignette/">
3953
+
3954
+
3955
+ <span class="nav-tree__text">
3956
+ Vignette
3957
+ </span>
3958
+
3959
+ </a>
3960
+
3961
+
3962
+ </li>
3963
+
3964
+
3965
+ <li class="nav-tree__item ">
3966
+
3967
+ <a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
3968
+
3969
+
3970
+ <span class="nav-tree__text">
3971
+ Wysiwyg
3972
+ </span>
3973
+
3974
+ </a>
3975
+
3976
+
3977
+ </li>
3978
+
3979
+ </ul>
3980
+
3981
+ </details>
3982
+ </li>
3983
+
3984
+
3985
+ <li class="nav-tree__item ">
3986
+ <details class="nav-tree__collapsible">
3987
+ <summary class="nav-tree__toggle">
3988
+
3989
+ <span class="nav-tree__toggle-content">
3990
+
3991
+
3992
+ <span class="nav-tree__text">
3993
+ Helpers
3994
+ </span>
3995
+
3996
+ </span>
3997
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
3998
+
3999
+ </summary>
4000
+
4001
+ <ul class="nav-tree" data-menu-depth="3">
4002
+
4003
+ <li class="nav-tree__item ">
4004
+
4005
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
4006
+
4007
+
4008
+ <span class="nav-tree__text">
4009
+ Introduction
4010
+ </span>
4011
+
4012
+ </a>
4013
+
4014
+
4015
+ </li>
4016
+
4017
+
4018
+ <li class="nav-tree__item ">
4019
+
4020
+ <a class="nav-tree__link " href="/frontend/sass/helpers/color/">
4021
+
4022
+
4023
+ <span class="nav-tree__text">
4024
+ Color
4025
+ </span>
4026
+
4027
+ </a>
4028
+
4029
+
4030
+ </li>
4031
+
4032
+
4033
+ <li class="nav-tree__item ">
4034
+
4035
+ <a class="nav-tree__link " href="/frontend/sass/helpers/display/">
4036
+
4037
+
4038
+ <span class="nav-tree__text">
4039
+ Display
4040
+ </span>
4041
+
4042
+ </a>
4043
+
4044
+
4045
+ </li>
4046
+
4047
+
4048
+ <li class="nav-tree__item ">
4049
+
4050
+ <a class="nav-tree__link " href="/frontend/sass/helpers/index/">
4051
+
4052
+
4053
+ <span class="nav-tree__text">
4054
+ Index
4055
+ </span>
4056
+
4057
+ </a>
4058
+
4059
+
4060
+ </li>
4061
+
4062
+
4063
+ <li class="nav-tree__item ">
4064
+
4065
+ <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
4066
+
4067
+
4068
+ <span class="nav-tree__text">
4069
+ Print
4070
+ </span>
4071
+
4072
+ </a>
4073
+
4074
+
4075
+ </li>
4076
+
4077
+
4078
+ <li class="nav-tree__item ">
4079
+
4080
+ <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
4081
+
4082
+
4083
+ <span class="nav-tree__text">
4084
+ Typography
4085
+ </span>
4086
+
4087
+ </a>
4088
+
4089
+
4090
+ </li>
4091
+
4092
+
4093
+ <li class="nav-tree__item ">
4094
+
4095
+ <a class="nav-tree__link " href="/frontend/sass/helpers/units/">
4096
+
4097
+
4098
+ <span class="nav-tree__text">
4099
+ Units
4100
+ </span>
4101
+
4102
+ </a>
4103
+
4104
+
4105
+ </li>
4106
+
4107
+
4108
+ <li class="nav-tree__item ">
4109
+
4110
+ <a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
4111
+
4112
+
4113
+ <span class="nav-tree__text">
4114
+ Utilities
4115
+ </span>
4116
+
4117
+ </a>
4118
+
4119
+
4120
+ </li>
4121
+
4122
+ </ul>
4123
+
4124
+ </details>
4125
+ </li>
4126
+
4127
+ </ul>
4128
+
4129
+ </details>
4130
+ </li>
4131
+
4132
+
4133
+ <li class="nav-tree__item ">
4134
+ <details class="nav-tree__collapsible">
4135
+ <summary class="nav-tree__toggle">
4136
+
4137
+ <span class="nav-tree__toggle-content">
4138
+
4139
+
4140
+ <span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
4141
+
4142
+ <span class="nav-tree__text">
4143
+ Javascript API
4144
+ </span>
4145
+
4146
+ </span>
4147
+ <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
4148
+
4149
+ </summary>
4150
+
4151
+ <ul class="nav-tree" data-menu-depth="2">
4152
+
4153
+ <li class="nav-tree__item ">
4154
+
4155
+ <a class="nav-tree__link nav-tree__link--index " href="/frontend/javascript/">
4156
+
4157
+
4158
+ <span class="nav-tree__text">
4159
+ Introduction
4160
+ </span>
4161
+
4162
+ </a>
4163
+
4164
+
4165
+ </li>
4166
+
4167
+
4168
+ <li class="nav-tree__item ">
4169
+
4170
+ <a class="nav-tree__link " href="/frontend/javascript/events/">
4171
+
4172
+
4173
+ <span class="nav-tree__text">
4174
+ events
4175
+ </span>
4176
+
4177
+ </a>
4178
+
4179
+
4180
+ </li>
4181
+
4182
+
4183
+ <li class="nav-tree__item ">
4184
+
4185
+ <a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
4186
+
4187
+
4188
+ <span class="nav-tree__text">
4189
+ ui/breakpoints
4190
+ </span>
4191
+
4192
+ </a>
4193
+
4194
+
4195
+ </li>
4196
+
4197
+
4198
+ <li class="nav-tree__item ">
4199
+
4200
+ <a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
4201
+
4202
+
4203
+ <span class="nav-tree__text">
4204
+ ui/collapsible
4205
+ </span>
4206
+
4207
+ </a>
4208
+
4209
+
4210
+ </li>
4211
+
4212
+
4213
+ <li class="nav-tree__item ">
4214
+
4215
+ <a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
4216
+
4217
+
4218
+ <span class="nav-tree__text">
4219
+ ui/dialog
4220
+ </span>
4221
+
4222
+ </a>
4223
+
4224
+
4225
+ </li>
4226
+
4227
+
4228
+ <li class="nav-tree__item ">
4229
+
4230
+ <a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
4231
+
4232
+
4233
+ <span class="nav-tree__text">
4234
+ ui/flipcard
4235
+ </span>
4236
+
4237
+ </a>
4238
+
4239
+
4240
+ </li>
4241
+
4242
+
4243
+ <li class="nav-tree__item ">
4244
+
4245
+ <a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
4246
+
4247
+
4248
+ <span class="nav-tree__text">
4249
+ ui/grid
4250
+ </span>
4251
+
4252
+ </a>
4253
+
4254
+
4255
+ </li>
4256
+
4257
+
4258
+ <li class="nav-tree__item ">
4259
+
4260
+ <a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
4261
+
4262
+
4263
+ <span class="nav-tree__text">
4264
+ ui/modal-builder
4265
+ </span>
4266
+
4267
+ </a>
4268
+
4269
+
4270
+ </li>
4271
+
4272
+
4273
+ <li class="nav-tree__item ">
4274
+
4275
+ <a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
4276
+
4277
+
4278
+ <span class="nav-tree__text">
4279
+ ui/overflow-scroller
4280
+ </span>
4281
+
4282
+ </a>
4283
+
4284
+
4285
+ </li>
4286
+
4287
+
4288
+ <li class="nav-tree__item ">
4289
+
4290
+ <a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
4291
+
4292
+
4293
+ <span class="nav-tree__text">
4294
+ ui/overflow-scroller-pager
4295
+ </span>
4296
+
4297
+ </a>
4298
+
4299
+
4300
+ </li>
4301
+
4302
+
4303
+ <li class="nav-tree__item ">
4304
+
4305
+ <a class="nav-tree__link " href="/frontend/javascript/ui-page/">
4306
+
4307
+
4308
+ <span class="nav-tree__text">
4309
+ ui/page
4310
+ </span>
4311
+
4312
+ </a>
4313
+
4314
+
4315
+ </li>
4316
+
4317
+
4318
+ <li class="nav-tree__item ">
4319
+
4320
+ <a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
4321
+
4322
+
4323
+ <span class="nav-tree__text">
4324
+ ui/popover
4325
+ </span>
4326
+
4327
+ </a>
4328
+
4329
+
4330
+ </li>
4331
+
4332
+
4333
+ <li class="nav-tree__item ">
4334
+
4335
+ <a class="nav-tree__link " href="/frontend/javascript/ui-print/">
4336
+
4337
+
4338
+ <span class="nav-tree__text">
4339
+ ui/print
4340
+ </span>
4341
+
4342
+ </a>
4343
+
4344
+
4345
+ </li>
4346
+
4347
+
4348
+ <li class="nav-tree__item ">
4349
+
4350
+ <a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
4351
+
4352
+
4353
+ <span class="nav-tree__text">
4354
+ ui/print-details
4355
+ </span>
4356
+
4357
+ </a>
4358
+
4359
+
4360
+ </li>
4361
+
4362
+
4363
+ <li class="nav-tree__item ">
4364
+
4365
+ <a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
4366
+
4367
+
4368
+ <span class="nav-tree__text">
4369
+ ui/programmatic-modal
4370
+ </span>
4371
+
4372
+ </a>
4373
+
4374
+
4375
+ </li>
4376
+
4377
+
4378
+ <li class="nav-tree__item ">
4379
+
4380
+ <a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
4381
+
4382
+
4383
+ <span class="nav-tree__text">
4384
+ ui/proxy-click
4385
+ </span>
4386
+
4387
+ </a>
4388
+
4389
+
4390
+ </li>
4391
+
4392
+
4393
+ <li class="nav-tree__item ">
4394
+
4395
+ <a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
4396
+
4397
+
4398
+ <span class="nav-tree__text">
4399
+ ui/resizer
4400
+ </span>
4401
+
4402
+ </a>
4403
+
4404
+
4405
+ </li>
4406
+
4407
+
4408
+ <li class="nav-tree__item ">
4409
+
4410
+ <a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
4411
+
4412
+
4413
+ <span class="nav-tree__text">
4414
+ ui/scroll-slider
4415
+ </span>
4416
+
4417
+ </a>
4418
+
4419
+
4420
+ </li>
4421
+
4422
+
4423
+ <li class="nav-tree__item ">
4424
+
4425
+ <a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
4426
+
4427
+
4428
+ <span class="nav-tree__text">
4429
+ ui/scrollpoint
4430
+ </span>
4431
+
4432
+ </a>
4433
+
4434
+
4435
+ </li>
4436
+
4437
+
4438
+ <li class="nav-tree__item ">
4439
+
4440
+ <a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
4441
+
4442
+
4443
+ <span class="nav-tree__text">
4444
+ ui/slider
4445
+ </span>
4446
+
4447
+ </a>
4448
+
4449
+
4450
+ </li>
4451
+
4452
+
4453
+ <li class="nav-tree__item ">
4454
+
4455
+ <a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
4456
+
4457
+
4458
+ <span class="nav-tree__text">
4459
+ ui/tabs
4460
+ </span>
4461
+
4462
+ </a>
4463
+
4464
+
4465
+ </li>
4466
+
4467
+
4468
+ <li class="nav-tree__item ">
4469
+
4470
+ <a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
4471
+
4472
+
4473
+ <span class="nav-tree__text">
4474
+ ui/tooltip
4475
+ </span>
4476
+
4477
+ </a>
4478
+
4479
+
4480
+ </li>
4481
+
4482
+
4483
+ <li class="nav-tree__item ">
4484
+
4485
+ <a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
4486
+
4487
+
4488
+ <span class="nav-tree__text">
4489
+ utils/class-logger
4490
+ </span>
4491
+
4492
+ </a>
4493
+
4494
+
4495
+ </li>
4496
+
4497
+
4498
+ <li class="nav-tree__item ">
4499
+
4500
+ <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
4501
+
4502
+
4503
+ <span class="nav-tree__text">
4504
+ utils/dom
4505
+ </span>
4506
+
4507
+ </a>
4508
+
4509
+
4510
+ </li>
4511
+
4512
+
4513
+ <li class="nav-tree__item ">
4514
+
4515
+ <a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
4516
+
4517
+
4518
+ <span class="nav-tree__text">
4519
+ utils/file-save
4520
+ </span>
4521
+
4522
+ </a>
4523
+
4524
+
4525
+ </li>
4526
+
4527
+
4528
+ <li class="nav-tree__item ">
4529
+
4530
+ <a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
4531
+
4532
+
4533
+ <span class="nav-tree__text">
4534
+ utils/floating-ui
4535
+ </span>
4536
+
4537
+ </a>
4538
+
4539
+
4540
+ </li>
4541
+
4542
+
4543
+ <li class="nav-tree__item ">
4544
+
4545
+ <a class="nav-tree__link " href="/frontend/javascript/utils-id/">
4546
+
4547
+
4548
+ <span class="nav-tree__text">
4549
+ utils/id
4550
+ </span>
4551
+
4552
+ </a>
4553
+
4554
+
4555
+ </li>
4556
+
4557
+
4558
+ <li class="nav-tree__item ">
4559
+
4560
+ <a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
4561
+
4562
+
4563
+ <span class="nav-tree__text">
4564
+ utils/pause-youtube-video
4565
+ </span>
4566
+
4567
+ </a>
4568
+
4569
+
4570
+ </li>
4571
+
4572
+ </ul>
4573
+
4574
+ </details>
4575
+ </li>
4576
+
4577
+ </ul>
4578
+
4579
+ </div>
4580
+ </nav>
4581
+ </header>
4582
+
4583
+ <div class="page__toc page-toc">
4584
+ <h2>Jump To:</h2>
4585
+ <div class="toc">
4586
+ <ol>
4587
+
4588
+ <li><a href="#basic-setup">Basic Setup</a>
4589
+ </li>
4590
+
4591
+ <li><a href="#examples-with-plus-icon">Examples with plus icon</a>
4592
+ </li>
4593
+
4594
+ <li><a href="#transparent-modifier">Transparent Modifier</a>
4595
+ </li>
4596
+
4597
+ <li><a href="#examples-with-rotating-angle-right%2Fdown">Examples with Rotating Angle Right/Down</a>
4598
+ </li>
4599
+
4600
+ <li><a href="#examples-with-rotating-angle-down%2Fup">Examples with Rotating Angle Down/Up</a>
4601
+ </li>
4602
+
4603
+ <li><a href="#examples-with-no-borders">Examples with No borders</a>
4604
+ </li>
4605
+ </ol>
4606
+ </div>
4607
+ </div>
4608
+
4609
+ <main id="main" class="page__body">
4610
+
4611
+
4612
+
4613
+
4614
+ <div class="page__body-top container ">
4615
+ <h1 class="page__title h1">Accordion</h1>
4616
+
4617
+ <p class="type-large type-light">
4618
+ An accordion disclosure element is a user interface component that allows users to expand and collapse sections of content.
4619
+ </p>
4620
+
4621
+ <hr class="rule rule--light rule--margin-large">
4622
+ <div class="wysiwyg">
4623
+ <h2 id="basic-setup" tabindex="-1">Basic Setup</h2>
4624
+ <p>Without an icon in the summary will fallback to browser default</p>
4625
+ <details class="accordion">
4626
+ <summary class="accordion__summary">
4627
+ This is an example Title
4628
+ </summary>
4629
+ <div class="accordion__content">
4630
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4631
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4632
+ </div>
4633
+ </details>
4634
+ <h2 id="examples-with-plus-icon" tabindex="-1">Examples with plus icon</h2>
4635
+ <pre class="language-html"><code class="language-html"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>details</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>accordion<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
4636
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>summary</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>accordion__summary<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
4637
+ The summary is what is seen before opening the details
4638
+ <span class="pjs-token pjs-comment">&lt;!-- The span is the icon on the side that --></span>
4639
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>span</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>accordion__icon<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">aria-hidden</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>true<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
4640
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>span</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>css-icon css-icon--plus-to-minus<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span><span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>span</span><span class="pjs-token pjs-punctuation">></span></span>
4641
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>span</span><span class="pjs-token pjs-punctuation">></span></span>
4642
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>summary</span><span class="pjs-token pjs-punctuation">></span></span>
4643
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>div</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>accordion__content<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
4644
+ The content is the information that is seen after you open the details
4645
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>div</span><span class="pjs-token pjs-punctuation">></span></span>
4646
+ <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>details</span><span class="pjs-token pjs-punctuation">></span></span></code></pre>
4647
+ <details class="accordion">
4648
+ <summary class="accordion__summary">
4649
+ This is an example Title without open/close icons
4650
+ <span class="accordion__icon" aria-hidden="true">
4651
+ <span class="css-icon css-icon--plus-to-minus"></span>
4652
+ </span>
4653
+ </summary>
4654
+ <div class="accordion__content">
4655
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4656
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4657
+ </div>
4658
+ </details>
4659
+ <details class="accordion">
4660
+ <summary class="accordion__summary">
4661
+ This is an example title with long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere sem ac neque rhoncus lacinia. Suspendisse ornare enim in ultrices egestas.
4662
+ <span class="accordion__icon" aria-hidden="true">
4663
+ <span class="css-icon css-icon--plus-to-minus"></span>
4664
+ </span>
4665
+ </summary>
4666
+ <div class="accordion__content">
4667
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4668
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4669
+ </div>
4670
+ </details>
4671
+ <details class="accordion">
4672
+ <summary class="accordion__summary">
4673
+ This is an example Title
4674
+ <span class="accordion__icon" aria-hidden="true">
4675
+ <span class="css-icon css-icon--plus-to-minus"></span>
4676
+ </span>
4677
+ </summary>
4678
+ <div class="accordion__content">
4679
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4680
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4681
+ </div>
4682
+ </details>
4683
+ <h2 id="transparent-modifier" tabindex="-1">Transparent Modifier</h2>
4684
+ <details class="accordion accordion--transparent">
4685
+ <summary class="accordion__summary">
4686
+ This is an example Title without open/close icons
4687
+ <span class="accordion__icon" aria-hidden="true">
4688
+ <span class="css-icon css-icon--plus-to-minus"></span>
4689
+ </span>
4690
+ </summary>
4691
+ <div class="accordion__content">
4692
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4693
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4694
+ </div>
4695
+ </details>
4696
+ <details class="accordion accordion--transparent">
4697
+ <summary class="accordion__summary">
4698
+ This is an example title with long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere sem ac neque rhoncus lacinia. Suspendisse ornare enim in ultrices egestas.
4699
+ <span class="accordion__icon" aria-hidden="true">
4700
+ <span class="css-icon css-icon--plus-to-minus"></span>
4701
+ </span>
4702
+ </summary>
4703
+ <div class="accordion__content">
4704
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4705
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4706
+ </div>
4707
+ </details>
4708
+ <details class="accordion accordion--transparent">
4709
+ <summary class="accordion__summary">
4710
+ This is an example Title
4711
+ <span class="accordion__icon" aria-hidden="true">
4712
+ <span class="css-icon css-icon--plus-to-minus"></span>
4713
+ </span>
4714
+ </summary>
4715
+ <div class="accordion__content">
4716
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4717
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4718
+ </div>
4719
+ </details>
4720
+ <h2 id="examples-with-rotating-angle-right%2Fdown" tabindex="-1">Examples with Rotating Angle Right/Down</h2>
4721
+ <details class="accordion">
4722
+ <summary class="accordion__summary">
4723
+ This is an example title with long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere sem ac neque rhoncus lacinia. Suspendisse ornare enim in ultrices egestas.
4724
+ <span class="accordion__icon" aria-hidden="true">
4725
+ <span class="css-icon css-icon--angle-right-to-down"></span>
4726
+ </span>
4727
+ </summary>
4728
+ <div class="accordion__content">
4729
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4730
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4731
+ </div>
4732
+ </details>
4733
+ <details class="accordion">
4734
+ <summary class="accordion__summary">
4735
+ This is an example Title
4736
+ <span class="accordion__icon" aria-hidden="true">
4737
+ <span class="css-icon css-icon--angle-right-to-down"></span>
4738
+ </span>
4739
+ </summary>
4740
+ <div class="accordion__content">
4741
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4742
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4743
+ </div>
4744
+ </details>
4745
+ <h2 id="examples-with-rotating-angle-down%2Fup" tabindex="-1">Examples with Rotating Angle Down/Up</h2>
4746
+ <details class="accordion">
4747
+ <summary class="accordion__summary">
4748
+ This is an example title with long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere sem ac neque rhoncus lacinia. Suspendisse ornare enim in ultrices egestas.
4749
+ <span class="accordion__icon" aria-hidden="true">
4750
+ <span class="css-icon css-icon--angle-down-to-up"></span>
4751
+ </span>
4752
+ </summary>
4753
+ <div class="accordion__content">
4754
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4755
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4756
+ </div>
4757
+ </details>
4758
+ <details class="accordion">
4759
+ <summary class="accordion__summary">
4760
+ This is an example Title
4761
+ <span class="accordion__icon" aria-hidden="true">
4762
+ <span class="css-icon css-icon--angle-down-to-up"></span>
4763
+ </span>
4764
+ </summary>
4765
+ <div class="accordion__content">
4766
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4767
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4768
+ </div>
4769
+ </details>
4770
+ <h2 id="examples-with-no-borders" tabindex="-1">Examples with No borders</h2>
4771
+ <details class="accordion accordion--no-borders">
4772
+ <summary class="accordion__summary">
4773
+ This is an example title with long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere sem ac neque rhoncus lacinia. Suspendisse ornare enim in ultrices egestas.
4774
+ <span class="accordion__icon" aria-hidden="true">
4775
+ <span class="css-icon css-icon--angle-down-to-up"></span>
4776
+ </span>
4777
+ </summary>
4778
+ <div class="accordion__content">
4779
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4780
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4781
+ </div>
4782
+ </details>
4783
+ <details class="accordion accordion--no-borders">
4784
+ <summary class="accordion__summary">
4785
+ This is an example Title
4786
+ <span class="accordion__icon" aria-hidden="true">
4787
+ <span class="css-icon css-icon--angle-down-to-up"></span>
4788
+ </span>
4789
+ </summary>
4790
+ <div class="accordion__content">
4791
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4792
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
4793
+ </div>
4794
+ </details>
4795
+
4796
+ </div>
4797
+ </div>
4798
+
4799
+ </main>
4800
+ <footer></footer>
4801
+
4802
+
4803
+ <script src="http://localhost:5173/@vite/client" type="module"></script>
4804
+ <script src="http://localhost:5173/docs-src/src/main.js" type="module"></script>
4805
+
4806
+
4807
+
4808
+ </body>
4809
+ </html>