@ulu/frontend 0.1.0-beta.5 → 0.1.0-beta.51

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 (296) hide show
  1. package/CHANGELOG.md +387 -0
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/dist/ulu-frontend.min.js +28 -27
  4. package/docs-dev/assets/main.js +832 -421
  5. package/docs-dev/assets/placeholder/icon-calendar.svg +1 -0
  6. package/docs-dev/assets/placeholder/icon-check.svg +1 -0
  7. package/docs-dev/assets/style.css +629 -233
  8. package/docs-dev/changelog/index.html +0 -0
  9. package/docs-dev/changelog/updates-and-changes/index.html +5109 -0
  10. package/docs-dev/demos/accordion/index.html +0 -4809
  11. package/docs-dev/demos/basic-hero/index.html +0 -0
  12. package/docs-dev/demos/breakpoints-manager/index.html +0 -0
  13. package/docs-dev/demos/button/index.html +0 -4621
  14. package/docs-dev/demos/button-verbose/index.html +0 -0
  15. package/docs-dev/demos/callout/index.html +0 -4661
  16. package/docs-dev/demos/captioned-figure/index.html +0 -4683
  17. package/docs-dev/demos/card/index.html +0 -5040
  18. package/docs-dev/demos/card-grid/index.html +0 -0
  19. package/docs-dev/demos/card-new/index.html +5088 -0
  20. package/docs-dev/demos/card-old/index.html +5223 -0
  21. package/docs-dev/demos/card.1/index.html +5223 -0
  22. package/docs-dev/demos/card.TRASH/index.html +5541 -0
  23. package/docs-dev/demos/counter-list/index.html +0 -0
  24. package/docs-dev/demos/css-icons/index.html +0 -5272
  25. package/docs-dev/demos/data-grid/index.html +0 -5606
  26. package/docs-dev/demos/data-table/index.html +0 -4697
  27. package/docs-dev/demos/details-group/index.html +0 -0
  28. package/docs-dev/demos/file-save/index.html +0 -4672
  29. package/docs-dev/demos/flipcard/index.html +0 -5221
  30. package/docs-dev/demos/form-theme/index.html +0 -4852
  31. package/docs-dev/demos/hero/index.html +0 -301
  32. package/docs-dev/demos/image-grid/index.html +0 -157
  33. package/docs-dev/demos/index.html +0 -4610
  34. package/docs-dev/demos/list-inline/index.html +0 -0
  35. package/docs-dev/demos/list-inline.1/index.html +4727 -0
  36. package/docs-dev/demos/list-lines/index.html +0 -0
  37. package/docs-dev/demos/menu-stack/index.html +0 -4751
  38. package/docs-dev/demos/modals/index.html +0 -4718
  39. package/docs-dev/demos/nav-strip/index.html +0 -4722
  40. package/docs-dev/demos/overlay-section/index.html +0 -4628
  41. package/docs-dev/demos/popovers/index.html +0 -4628
  42. package/docs-dev/demos/print/index.html +0 -4630
  43. package/docs-dev/demos/pull-quote/index.html +0 -4629
  44. package/docs-dev/demos/rule/index.html +0 -4679
  45. package/docs-dev/demos/scroll-slider/index.html +0 -204
  46. package/docs-dev/demos/scrollpoints/index.html +0 -4648
  47. package/docs-dev/demos/slider/index.html +0 -164
  48. package/docs-dev/demos/spoke-spinner/index.html +0 -4625
  49. package/docs-dev/demos/sticky-list/index.html +0 -0
  50. package/docs-dev/demos/tabs/index.html +0 -4714
  51. package/docs-dev/demos/tag/index.html +0 -4630
  52. package/docs-dev/demos/theme-toggle/index.html +0 -0
  53. package/docs-dev/demos/tile-grid-overlay/index.html +0 -382
  54. package/docs-dev/demos/tiles/index.html +0 -4879
  55. package/docs-dev/demos/tooltip/index.html +0 -4658
  56. package/docs-dev/guide/building-stylesheet/index.html +0 -4679
  57. package/docs-dev/guide/developing-ulu-scss-module/index.html +0 -4731
  58. package/docs-dev/guide/index.html +0 -4612
  59. package/docs-dev/guide/updates-and-changes/index.html +5033 -0
  60. package/docs-dev/index.html +0 -4659
  61. package/docs-dev/javascript/events/index.html +0 -4770
  62. package/docs-dev/javascript/index.html +0 -4625
  63. package/docs-dev/javascript/settings/index.html +0 -0
  64. package/docs-dev/javascript/ui-breakpoints/index.html +0 -5070
  65. package/docs-dev/javascript/ui-collapsible/index.html +0 -4737
  66. package/docs-dev/javascript/ui-details-group/index.html +0 -0
  67. package/docs-dev/javascript/ui-dialog/index.html +0 -4771
  68. package/docs-dev/javascript/ui-flipcard/index.html +0 -4621
  69. package/docs-dev/javascript/ui-grid/index.html +0 -4678
  70. package/docs-dev/javascript/ui-modal-builder/index.html +0 -4760
  71. package/docs-dev/javascript/ui-overflow-scroller/index.html +0 -4610
  72. package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +0 -4628
  73. package/docs-dev/javascript/ui-page/index.html +0 -4625
  74. package/docs-dev/javascript/ui-popover/index.html +0 -4664
  75. package/docs-dev/javascript/ui-print/index.html +0 -4677
  76. package/docs-dev/javascript/ui-print-details/index.html +0 -4640
  77. package/docs-dev/javascript/ui-programmatic-modal/index.html +0 -4610
  78. package/docs-dev/javascript/ui-proxy-click/index.html +990 -324
  79. package/docs-dev/javascript/ui-resizer/index.html +901 -320
  80. package/docs-dev/javascript/ui-scroll-slider/index.html +0 -4639
  81. package/docs-dev/javascript/ui-scrollpoint/index.html +0 -4857
  82. package/docs-dev/javascript/ui-slider/index.html +1099 -327
  83. package/docs-dev/javascript/ui-tabs/index.html +914 -370
  84. package/docs-dev/javascript/ui-theme-toggle/index.html +5410 -0
  85. package/docs-dev/javascript/ui-tooltip/index.html +940 -363
  86. package/docs-dev/javascript/utils-class-logger/index.html +901 -320
  87. package/docs-dev/javascript/utils-css/index.html +5224 -0
  88. package/docs-dev/javascript/utils-dom/index.html +1054 -339
  89. package/docs-dev/javascript/utils-file-save/index.html +901 -320
  90. package/docs-dev/javascript/utils-floating-ui/index.html +901 -320
  91. package/docs-dev/javascript/utils-id/index.html +901 -320
  92. package/docs-dev/javascript/utils-pause-youtube-video/index.html +901 -320
  93. package/docs-dev/javascript/utils-system/index.html +5527 -0
  94. package/docs-dev/sass/base/color/index.html +0 -4643
  95. package/docs-dev/sass/base/elements/index.html +0 -4814
  96. package/docs-dev/sass/base/index/index.html +0 -4813
  97. package/docs-dev/sass/base/index.html +0 -4619
  98. package/docs-dev/sass/base/keyframes/index.html +0 -4645
  99. package/docs-dev/sass/base/layout/index.html +0 -4805
  100. package/docs-dev/sass/base/normalize/index.html +0 -4653
  101. package/docs-dev/sass/base/print/index.html +0 -4649
  102. package/docs-dev/sass/base/root/index.html +0 -4669
  103. package/docs-dev/sass/base/typography/index.html +0 -4669
  104. package/docs-dev/sass/components/accordion/index.html +0 -4971
  105. package/docs-dev/sass/components/adaptive-spacing/index.html +0 -4914
  106. package/docs-dev/sass/components/badge/index.html +0 -4862
  107. package/docs-dev/sass/components/basic-hero/index.html +0 -0
  108. package/docs-dev/sass/components/button/index.html +0 -4798
  109. package/docs-dev/sass/components/button-verbose/index.html +0 -4910
  110. package/docs-dev/sass/components/callout/index.html +0 -4937
  111. package/docs-dev/sass/components/captioned-figure/index.html +0 -4788
  112. package/docs-dev/sass/components/card/index.html +0 -5146
  113. package/docs-dev/sass/components/card-grid/index.html +0 -4812
  114. package/docs-dev/sass/components/counter-list/index.html +0 -0
  115. package/docs-dev/sass/components/css-icon/index.html +0 -4909
  116. package/docs-dev/sass/components/data-grid/index.html +0 -5044
  117. package/docs-dev/sass/components/data-table/index.html +0 -4795
  118. package/docs-dev/sass/components/fill-context/index.html +0 -4678
  119. package/docs-dev/sass/components/flipcard/index.html +0 -4948
  120. package/docs-dev/sass/components/flipcard-grid/index.html +0 -4799
  121. package/docs-dev/sass/components/form-theme/index.html +0 -5428
  122. package/docs-dev/sass/components/hero/index.html +0 -4800
  123. package/docs-dev/sass/components/horizontal-rule/index.html +0 -4797
  124. package/docs-dev/sass/components/image-grid/index.html +0 -4804
  125. package/docs-dev/sass/components/index/index.html +0 -4848
  126. package/docs-dev/sass/components/index.html +0 -4619
  127. package/docs-dev/sass/components/links/index.html +0 -4648
  128. package/docs-dev/sass/components/list-inline/index.html +0 -0
  129. package/docs-dev/sass/components/list-lines/index.html +0 -4843
  130. package/docs-dev/sass/components/list-ordered/index.html +0 -4644
  131. package/docs-dev/sass/components/list-unordered/index.html +0 -4648
  132. package/docs-dev/sass/components/menu-stack/index.html +0 -4978
  133. package/docs-dev/sass/components/modal/index.html +0 -5025
  134. package/docs-dev/sass/components/nav-strip/index.html +0 -4898
  135. package/docs-dev/sass/components/overlay-section/index.html +0 -4842
  136. package/docs-dev/sass/components/pager/index.html +0 -4960
  137. package/docs-dev/sass/components/placeholder-block/index.html +0 -4882
  138. package/docs-dev/sass/components/popover/index.html +0 -4957
  139. package/docs-dev/sass/components/pull-quote/index.html +0 -4856
  140. package/docs-dev/sass/components/ratio-box/index.html +0 -4802
  141. package/docs-dev/sass/components/rule/index.html +0 -4804
  142. package/docs-dev/sass/components/scroll-slider/index.html +0 -4915
  143. package/docs-dev/sass/components/skip-link/index.html +0 -4788
  144. package/docs-dev/sass/components/slider/index.html +0 -4924
  145. package/docs-dev/sass/components/spoke-spinner/index.html +0 -4862
  146. package/docs-dev/sass/components/sticky-list/index.html +0 -0
  147. package/docs-dev/sass/components/tabs/index.html +0 -4938
  148. package/docs-dev/sass/components/tag/index.html +0 -4963
  149. package/docs-dev/sass/components/tile-button/index.html +0 -4843
  150. package/docs-dev/sass/components/tile-grid/index.html +0 -4978
  151. package/docs-dev/sass/components/tile-grid-overlay/index.html +0 -4779
  152. package/docs-dev/sass/components/vignette/index.html +0 -4792
  153. package/docs-dev/sass/components/wysiwyg/index.html +0 -4808
  154. package/docs-dev/sass/core/breakpoint/index.html +0 -5401
  155. package/docs-dev/sass/core/button/index.html +0 -5535
  156. package/docs-dev/sass/core/color/index.html +0 -5385
  157. package/docs-dev/sass/core/cssvar/index.html +0 -5410
  158. package/docs-dev/sass/core/element/index.html +0 -5533
  159. package/docs-dev/sass/core/index.html +0 -4608
  160. package/docs-dev/sass/core/layout/index.html +0 -5368
  161. package/docs-dev/sass/core/path/index.html +0 -4777
  162. package/docs-dev/sass/core/selector/index.html +0 -4856
  163. package/docs-dev/sass/core/typography/index.html +0 -5782
  164. package/docs-dev/sass/core/units/index.html +0 -4815
  165. package/docs-dev/sass/core/utils/index.html +0 -6256
  166. package/docs-dev/sass/helpers/color/index.html +0 -4643
  167. package/docs-dev/sass/helpers/display/index.html +0 -4648
  168. package/docs-dev/sass/helpers/index/index.html +0 -4810
  169. package/docs-dev/sass/helpers/index.html +0 -4619
  170. package/docs-dev/sass/helpers/print/index.html +843 -292
  171. package/docs-dev/sass/helpers/typography/index.html +0 -4671
  172. package/docs-dev/sass/helpers/units/index.html +0 -4817
  173. package/docs-dev/sass/helpers/utilities/index.html +0 -4648
  174. package/docs-dev/sass/index.html +0 -4670
  175. package/js/index.js +1 -0
  176. package/js/settings.js +95 -0
  177. package/js/ui/breakpoints.js +19 -16
  178. package/js/ui/collapsible.js +8 -1
  179. package/js/ui/details-group.js +112 -0
  180. package/js/ui/dialog.js +90 -42
  181. package/js/ui/dialog.todo +2 -36
  182. package/js/ui/flipcard.js +37 -57
  183. package/js/ui/grid.js +15 -13
  184. package/js/ui/index.js +1 -0
  185. package/js/ui/modal-builder.js +45 -54
  186. package/js/ui/overflow-scroller.js +6 -4
  187. package/js/ui/popover.js +38 -38
  188. package/js/ui/print.js +16 -25
  189. package/js/ui/programmatic-modal.js +9 -3
  190. package/js/ui/proxy-click.js +50 -36
  191. package/js/ui/scroll-slider.js +24 -30
  192. package/js/ui/scrollpoint.js +28 -64
  193. package/js/ui/slider.js +61 -62
  194. package/js/ui/tabs.js +23 -36
  195. package/js/ui/theme-toggle.js +331 -94
  196. package/js/ui/tooltip.js +27 -32
  197. package/js/utils/css.js +13 -0
  198. package/js/utils/dom.js +85 -8
  199. package/js/utils/font-awesome.js +18 -0
  200. package/js/utils/index.js +2 -1
  201. package/js/utils/system.js +154 -0
  202. package/package.json +14 -8
  203. package/scss/_breakpoint.scss +16 -3
  204. package/scss/_color.scss +37 -5
  205. package/scss/_element.scss +94 -2
  206. package/scss/_layout.scss +7 -8
  207. package/scss/_units.scss +3 -2
  208. package/scss/_utils.scss +248 -13
  209. package/scss/components/README.todos +14 -0
  210. package/scss/components/_accordion.scss +18 -20
  211. package/scss/components/_badge.scss +3 -2
  212. package/scss/components/_basic-hero.scss +112 -0
  213. package/scss/components/_button-verbose.scss +102 -20
  214. package/scss/components/_callout.scss +127 -79
  215. package/scss/components/_captioned-figure.scss +23 -5
  216. package/scss/components/_card-grid.scss +1 -1
  217. package/scss/components/_card.scss +261 -88
  218. package/scss/components/_counter-list.scss +133 -0
  219. package/scss/components/_css-icon.scss +33 -28
  220. package/scss/components/_data-grid.scss +38 -9
  221. package/scss/components/_data-table.scss +44 -4
  222. package/scss/components/_flipcard.scss +21 -15
  223. package/scss/components/_form-theme.scss +146 -135
  224. package/scss/components/_hero.scss +12 -10
  225. package/scss/components/_index.scss +24 -0
  226. package/scss/components/_list-inline.scss +80 -0
  227. package/scss/components/_list-lines.scss +44 -33
  228. package/scss/components/_list-ordered.scss +0 -1
  229. package/scss/components/_menu-stack.scss +42 -26
  230. package/scss/components/_modal.scss +29 -19
  231. package/scss/components/_nav-strip.scss +5 -1
  232. package/scss/components/_overlay-section.scss +4 -6
  233. package/scss/components/_pager.scss +6 -6
  234. package/scss/components/_placeholder-block.scss +4 -4
  235. package/scss/components/_popover.scss +174 -73
  236. package/scss/components/_pull-quote.scss +13 -13
  237. package/scss/components/_ratio-box.scss +2 -5
  238. package/scss/components/_rule.scss +1 -1
  239. package/scss/components/_scroll-slider.scss +2 -6
  240. package/scss/components/_skip-link.scss +2 -1
  241. package/scss/components/_slider.scss +24 -41
  242. package/scss/components/_spoke-spinner.scss +2 -2
  243. package/scss/components/_sticky-list.scss +206 -0
  244. package/scss/components/_tabs.scss +4 -2
  245. package/scss/components/_tag.scss +1 -1
  246. package/scss/components/_vignette.scss +3 -5
  247. package/scss/helpers/_display.scss +15 -18
  248. package/scss/helpers/_print.scss +12 -7
  249. package/scss/helpers/_utilities.scss +42 -32
  250. package/types/index.d.ts +1 -0
  251. package/types/settings.d.ts +66 -0
  252. package/types/settings.d.ts.map +1 -0
  253. package/types/ui/breakpoints.d.ts +14 -14
  254. package/types/ui/breakpoints.d.ts.map +1 -1
  255. package/types/ui/collapsible.d.ts.map +1 -1
  256. package/types/ui/details-group.d.ts +38 -0
  257. package/types/ui/details-group.d.ts.map +1 -0
  258. package/types/ui/dialog.d.ts +20 -14
  259. package/types/ui/dialog.d.ts.map +1 -1
  260. package/types/ui/flipcard.d.ts +16 -10
  261. package/types/ui/flipcard.d.ts.map +1 -1
  262. package/types/ui/grid.d.ts +4 -6
  263. package/types/ui/grid.d.ts.map +1 -1
  264. package/types/ui/index.d.ts +1 -0
  265. package/types/ui/modal-builder.d.ts +8 -11
  266. package/types/ui/modal-builder.d.ts.map +1 -1
  267. package/types/ui/overflow-scroller.d.ts +2 -2
  268. package/types/ui/overflow-scroller.d.ts.map +1 -1
  269. package/types/ui/popover.d.ts +6 -7
  270. package/types/ui/popover.d.ts.map +1 -1
  271. package/types/ui/print.d.ts +0 -4
  272. package/types/ui/print.d.ts.map +1 -1
  273. package/types/ui/programmatic-modal.d.ts.map +1 -1
  274. package/types/ui/proxy-click.d.ts +19 -3
  275. package/types/ui/proxy-click.d.ts.map +1 -1
  276. package/types/ui/scroll-slider.d.ts +5 -7
  277. package/types/ui/scroll-slider.d.ts.map +1 -1
  278. package/types/ui/scrollpoint.d.ts +3 -8
  279. package/types/ui/scrollpoint.d.ts.map +1 -1
  280. package/types/ui/slider.d.ts +24 -14
  281. package/types/ui/slider.d.ts.map +1 -1
  282. package/types/ui/tabs.d.ts +6 -8
  283. package/types/ui/tabs.d.ts.map +1 -1
  284. package/types/ui/theme-toggle.d.ts +51 -7
  285. package/types/ui/theme-toggle.d.ts.map +1 -1
  286. package/types/ui/tooltip.d.ts +3 -5
  287. package/types/ui/tooltip.d.ts.map +1 -1
  288. package/types/utils/css.d.ts +11 -0
  289. package/types/utils/css.d.ts.map +1 -0
  290. package/types/utils/dom.d.ts +45 -6
  291. package/types/utils/dom.d.ts.map +1 -1
  292. package/types/utils/font-awesome.d.ts +5 -0
  293. package/types/utils/font-awesome.d.ts.map +1 -0
  294. package/types/utils/index.d.ts +1 -0
  295. package/types/utils/system.d.ts +113 -0
  296. package/types/utils/system.d.ts.map +1 -0
package/docs-dev/demos/theme-toggle/index.html ADDED
File without changes
package/docs-dev/demos/tile-grid-overlay/index.html CHANGED
@@ -1,382 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-site-theme="" class="fullscreen-layout">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>
7
- Tile Grid Overlay
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 page">
35
- <header class="page__header header">
36
- <div class="header__main">
37
- <a class="header__logo" href="/frontend/">
38
- <div class="logo">
39
- <span class="logo__main">Ulu</span>
40
- <span class="logo__subtitle">Frontend</span>
41
- </div>
42
- </a>
43
- <a class="button button--small button--icon button--secondary margin-left-auto" href="../" aria-label="Exit">
44
- <span class="css-icon css-icon--close" aria-hidden="true"></span>
45
- </a>
46
- </div>
47
- </header>
48
- <main id="main" class="page__body">
49
-
50
- <div class="background-light-gray">
51
- <div class="container">
52
- <div class="type-max-width">
53
- <h1 class="page__title h1">Tile Grid Overlay</h1>
54
-
55
- <div class="rule rule--short rule--accent"></div>
56
- <p class="type-large type-light">
57
- Tile grid with image overlay. Component that uses popover, tile-grid, tile-button and fill-context along with styles of it&#39;s own
58
- </p>
59
-
60
- </div>
61
- </div>
62
- </div>
63
-
64
-
65
-
66
-
67
-
68
- <div class="container">
69
- <h2 class="h2">Default Example</h2>
70
- <div class="tile-grid-overlay">
71
- <div class="tile-grid-overlay__background-image fill-context fill-context--auto no-print">
72
- <img src="/frontend/assets/placeholder/image-1.jpg" width="1024" height="683" loading="lazy">
73
- </div>
74
- <ul class="tile-grid tile-grid--no-gap tile-grid--static tile-grid-overlay__grid">
75
-
76
- <li class="tile-grid__item tile-grid-overlay__item">
77
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
78
- "floating" : { "placement" : "bottom-end" }
79
- }'>
80
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
81
- <span class="tile-button__row no-print">
82
- <span class="fas fa-plus" aria-hidden="true"></span>
83
- </span>
84
- </button>
85
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
86
- <div class="popover__inner">
87
- <p>
88
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
89
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
90
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
91
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
92
- </p>
93
- </div>
94
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
95
- </div>
96
- </li>
97
-
98
-
99
- <li class="tile-grid__item tile-grid-overlay__item">
100
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
101
- "floating" : { "placement" : "bottom-end" }
102
- }'>
103
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Item With an Image</strong>
104
- <span class="tile-button__row no-print">
105
- <span class="fas fa-plus" aria-hidden="true"></span>
106
- </span>
107
- </button>
108
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
109
- <div class="popover__header popover__header--media">
110
- <img src="/frontend/assets/placeholder/image-1.jpg" width="975" height="557" loading="lazy">
111
- </div>
112
- <div class="popover__inner">
113
- <p>
114
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
115
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
116
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
117
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
118
- </p>
119
- </div>
120
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
121
- </div>
122
- </li>
123
-
124
-
125
- <li class="tile-grid__item tile-grid-overlay__item">
126
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
127
- "floating" : { "placement" : "bottom-end" }
128
- }'>
129
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
130
- <span class="tile-button__row no-print">
131
- <span class="fas fa-plus" aria-hidden="true"></span>
132
- </span>
133
- </button>
134
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
135
- <div class="popover__inner">
136
- <p>
137
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
138
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
139
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
140
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
141
- </p>
142
- </div>
143
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
144
- </div>
145
- </li>
146
-
147
-
148
- <li class="tile-grid__item tile-grid-overlay__item">
149
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
150
- "floating" : { "placement" : "bottom-end" }
151
- }'>
152
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
153
- <span class="tile-button__row no-print">
154
- <span class="fas fa-plus" aria-hidden="true"></span>
155
- </span>
156
- </button>
157
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
158
- <div class="popover__inner">
159
- <p>
160
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
161
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
162
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
163
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
164
- </p>
165
- </div>
166
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
167
- </div>
168
- </li>
169
-
170
-
171
- <li class="tile-grid__item tile-grid-overlay__item">
172
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
173
- "floating" : { "placement" : "bottom-end" }
174
- }'>
175
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
176
- <span class="tile-button__row no-print">
177
- <span class="fas fa-plus" aria-hidden="true"></span>
178
- </span>
179
- </button>
180
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
181
- <div class="popover__inner">
182
- <p>
183
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
184
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
185
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
186
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
187
- </p>
188
- </div>
189
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
190
- </div>
191
- </li>
192
-
193
-
194
- <li class="tile-grid__item tile-grid-overlay__item">
195
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
196
- "floating" : { "placement" : "bottom-end" }
197
- }'>
198
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
199
- <span class="tile-button__row no-print">
200
- <span class="fas fa-plus" aria-hidden="true"></span>
201
- </span>
202
- </button>
203
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
204
- <div class="popover__inner">
205
- <p>
206
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
207
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
208
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
209
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
210
- </p>
211
- </div>
212
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
213
- </div>
214
- </li>
215
-
216
- </ul>
217
- </div>
218
- </div>
219
- <div class="container">
220
- <h2 class="h2">Wide Example</h2>
221
- <p>Note: This needs to match up with the tile grids.</p>
222
- <div class="tile-grid-overlay">
223
- <div class="tile-grid-overlay__background-image fill-context fill-context--auto no-print">
224
- <img src="/frontend/assets/placeholder/image-1.jpg" width="1024" height="683" loading="lazy">
225
- </div>
226
- <ul class="tile-grid tile-grid--no-gap tile-grid--static-wide tile-grid-overlay__grid tile-grid-overlay__grid--wide">
227
-
228
- <li class="tile-grid__item tile-grid-overlay__item">
229
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
230
- "floating" : { "placement" : "bottom-end" }
231
- }'>
232
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
233
- <span class="tile-button__row no-print">
234
- <span class="fas fa-plus" aria-hidden="true"></span>
235
- </span>
236
- </button>
237
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
238
- <div class="popover__inner">
239
- <p>
240
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
241
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
242
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
243
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
244
- </p>
245
- </div>
246
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
247
- </div>
248
- </li>
249
-
250
-
251
- <li class="tile-grid__item tile-grid-overlay__item">
252
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
253
- "floating" : { "placement" : "bottom-end" }
254
- }'>
255
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Item With an Image</strong>
256
- <span class="tile-button__row no-print">
257
- <span class="fas fa-plus" aria-hidden="true"></span>
258
- </span>
259
- </button>
260
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
261
- <div class="popover__header popover__header--media">
262
- <img src="/frontend/assets/placeholder/image-1.jpg" width="975" height="557" loading="lazy">
263
- </div>
264
- <div class="popover__inner">
265
- <p>
266
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
267
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
268
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
269
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
270
- </p>
271
- </div>
272
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
273
- </div>
274
- </li>
275
-
276
-
277
- <li class="tile-grid__item tile-grid-overlay__item">
278
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
279
- "floating" : { "placement" : "bottom-end" }
280
- }'>
281
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
282
- <span class="tile-button__row no-print">
283
- <span class="fas fa-plus" aria-hidden="true"></span>
284
- </span>
285
- </button>
286
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
287
- <div class="popover__inner">
288
- <p>
289
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
290
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
291
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
292
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
293
- </p>
294
- </div>
295
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
296
- </div>
297
- </li>
298
-
299
-
300
- <li class="tile-grid__item tile-grid-overlay__item">
301
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
302
- "floating" : { "placement" : "bottom-end" }
303
- }'>
304
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
305
- <span class="tile-button__row no-print">
306
- <span class="fas fa-plus" aria-hidden="true"></span>
307
- </span>
308
- </button>
309
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
310
- <div class="popover__inner">
311
- <p>
312
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
313
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
314
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
315
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
316
- </p>
317
- </div>
318
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
319
- </div>
320
- </li>
321
-
322
-
323
- <li class="tile-grid__item tile-grid-overlay__item">
324
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
325
- "floating" : { "placement" : "bottom-end" }
326
- }'>
327
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
328
- <span class="tile-button__row no-print">
329
- <span class="fas fa-plus" aria-hidden="true"></span>
330
- </span>
331
- </button>
332
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
333
- <div class="popover__inner">
334
- <p>
335
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
336
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
337
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
338
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
339
- </p>
340
- </div>
341
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
342
- </div>
343
- </li>
344
-
345
-
346
- <li class="tile-grid__item tile-grid-overlay__item">
347
- <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
348
- "floating" : { "placement" : "bottom-end" }
349
- }'>
350
- <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
351
- <span class="tile-button__row no-print">
352
- <span class="fas fa-plus" aria-hidden="true"></span>
353
- </span>
354
- </button>
355
- <div class="popover theme-light popover--large" data-ulu-popover-content="">
356
- <div class="popover__inner">
357
- <p>
358
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
359
- ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
360
- euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
361
- nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
362
- </p>
363
- </div>
364
- <span class="popover__arrow" data-ulu-popover-arrow=""></span>
365
- </div>
366
- </li>
367
-
368
- </ul>
369
- </div>
370
- </div>
371
-
372
- </main>
373
- <footer></footer>
374
-
375
-
376
- <script src="http://localhost:5173/@vite/client" type="module"></script>
377
- <script src="http://localhost:5173/docs-src/src/main.js" type="module"></script>
378
-
379
-
380
-
381
- </body>
382
- </html>