@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/tile-grid-overlay/index.html ADDED
@@ -0,0 +1,382 @@
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>