@ulu/frontend 0.1.0-beta.6 → 0.1.0-beta.61

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 (290) hide show
  1. package/CHANGELOG.md +428 -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 +6236 -0
  9. package/docs-dev/changelog/updates-and-changes/index.html +5109 -0
  10. package/docs-dev/demos/accordion/index.html +904 -321
  11. package/docs-dev/demos/basic-hero/index.html +111 -0
  12. package/docs-dev/demos/breakpoints-manager/index.html +5246 -0
  13. package/docs-dev/demos/button/index.html +916 -323
  14. package/docs-dev/demos/button-verbose/index.html +5238 -0
  15. package/docs-dev/demos/callout/index.html +951 -328
  16. package/docs-dev/demos/captioned-figure/index.html +904 -321
  17. package/docs-dev/demos/card/index.html +970 -748
  18. package/docs-dev/demos/card-grid/index.html +5357 -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 +5224 -0
  24. package/docs-dev/demos/css-icons/index.html +904 -321
  25. package/docs-dev/demos/data-grid/index.html +1014 -511
  26. package/docs-dev/demos/data-table/index.html +1064 -348
  27. package/docs-dev/demos/details-group/index.html +5267 -0
  28. package/docs-dev/demos/file-save/index.html +904 -321
  29. package/docs-dev/demos/flipcard/index.html +904 -321
  30. package/docs-dev/demos/form-theme/index.html +922 -352
  31. package/docs-dev/demos/hero/index.html +12 -4
  32. package/docs-dev/demos/image-grid/index.html +12 -4
  33. package/docs-dev/demos/index.html +905 -322
  34. package/docs-dev/demos/list-inline/index.html +5220 -0
  35. package/docs-dev/demos/list-inline.1/index.html +4727 -0
  36. package/docs-dev/demos/list-lines/index.html +5210 -0
  37. package/docs-dev/demos/menu-stack/index.html +975 -377
  38. package/docs-dev/demos/modals/index.html +1010 -357
  39. package/docs-dev/demos/nav-strip/index.html +904 -321
  40. package/docs-dev/demos/overlay-section/index.html +979 -326
  41. package/docs-dev/demos/popovers/index.html +1152 -327
  42. package/docs-dev/demos/print/index.html +904 -321
  43. package/docs-dev/demos/pull-quote/index.html +904 -321
  44. package/docs-dev/demos/rule/index.html +952 -357
  45. package/docs-dev/demos/scroll-slider/index.html +72 -106
  46. package/docs-dev/demos/scrollpoints/index.html +905 -322
  47. package/docs-dev/demos/slider/index.html +12 -4
  48. package/docs-dev/demos/spoke-spinner/index.html +904 -321
  49. package/docs-dev/demos/sticky-list/index.html +5223 -0
  50. package/docs-dev/demos/tabs/index.html +944 -325
  51. package/docs-dev/demos/tag/index.html +904 -321
  52. package/docs-dev/demos/theme-toggle/index.html +5279 -0
  53. package/docs-dev/demos/tile-grid-overlay/index.html +12 -4
  54. package/docs-dev/demos/tiles/index.html +904 -321
  55. package/docs-dev/demos/tooltip/index.html +904 -321
  56. package/docs-dev/guide/building-stylesheet/index.html +904 -321
  57. package/docs-dev/guide/developing-ulu-scss-module/index.html +904 -321
  58. package/docs-dev/guide/index.html +904 -321
  59. package/docs-dev/guide/updates-and-changes/index.html +5033 -0
  60. package/docs-dev/index.html +904 -321
  61. package/docs-dev/javascript/events/index.html +901 -320
  62. package/docs-dev/javascript/index.html +904 -321
  63. package/docs-dev/javascript/settings/index.html +5400 -0
  64. package/docs-dev/javascript/ui-breakpoints/index.html +916 -335
  65. package/docs-dev/javascript/ui-collapsible/index.html +901 -320
  66. package/docs-dev/javascript/ui-details-group/index.html +5322 -0
  67. package/docs-dev/javascript/ui-dialog/index.html +967 -371
  68. package/docs-dev/javascript/ui-flipcard/index.html +964 -327
  69. package/docs-dev/javascript/ui-grid/index.html +913 -358
  70. package/docs-dev/javascript/ui-modal-builder/index.html +1067 -366
  71. package/docs-dev/javascript/ui-overflow-scroller/index.html +901 -320
  72. package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +901 -320
  73. package/docs-dev/javascript/ui-page/index.html +901 -320
  74. package/docs-dev/javascript/ui-popover/index.html +911 -334
  75. package/docs-dev/javascript/ui-print/index.html +901 -328
  76. package/docs-dev/javascript/ui-print-details/index.html +901 -320
  77. package/docs-dev/javascript/ui-programmatic-modal/index.html +901 -320
  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 +941 -328
  81. package/docs-dev/javascript/ui-scrollpoint/index.html +907 -333
  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 +901 -320
  95. package/docs-dev/sass/base/elements/index.html +901 -320
  96. package/docs-dev/sass/base/index/index.html +901 -320
  97. package/docs-dev/sass/base/index.html +904 -321
  98. package/docs-dev/sass/base/keyframes/index.html +901 -320
  99. package/docs-dev/sass/base/layout/index.html +901 -320
  100. package/docs-dev/sass/base/normalize/index.html +901 -320
  101. package/docs-dev/sass/base/print/index.html +901 -320
  102. package/docs-dev/sass/base/root/index.html +901 -320
  103. package/docs-dev/sass/base/typography/index.html +901 -320
  104. package/docs-dev/sass/components/accordion/index.html +908 -327
  105. package/docs-dev/sass/components/adaptive-spacing/index.html +901 -320
  106. package/docs-dev/sass/components/badge/index.html +909 -328
  107. package/docs-dev/sass/components/basic-hero/index.html +5385 -0
  108. package/docs-dev/sass/components/button/index.html +901 -320
  109. package/docs-dev/sass/components/button-verbose/index.html +989 -333
  110. package/docs-dev/sass/components/callout/index.html +1018 -414
  111. package/docs-dev/sass/components/captioned-figure/index.html +1026 -330
  112. package/docs-dev/sass/components/card/index.html +1003 -350
  113. package/docs-dev/sass/components/card-grid/index.html +901 -320
  114. package/docs-dev/sass/components/counter-list/index.html +5458 -0
  115. package/docs-dev/sass/components/css-icon/index.html +918 -330
  116. package/docs-dev/sass/components/data-grid/index.html +922 -334
  117. package/docs-dev/sass/components/data-table/index.html +1106 -333
  118. package/docs-dev/sass/components/fill-context/index.html +901 -320
  119. package/docs-dev/sass/components/flipcard/index.html +939 -327
  120. package/docs-dev/sass/components/flipcard-grid/index.html +901 -320
  121. package/docs-dev/sass/components/form-theme/index.html +1110 -433
  122. package/docs-dev/sass/components/hero/index.html +995 -366
  123. package/docs-dev/sass/components/horizontal-rule/index.html +901 -320
  124. package/docs-dev/sass/components/image-grid/index.html +901 -320
  125. package/docs-dev/sass/components/index/index.html +915 -330
  126. package/docs-dev/sass/components/index.html +904 -321
  127. package/docs-dev/sass/components/links/index.html +901 -320
  128. package/docs-dev/sass/components/list-inline/index.html +5399 -0
  129. package/docs-dev/sass/components/list-lines/index.html +936 -359
  130. package/docs-dev/sass/components/list-ordered/index.html +903 -322
  131. package/docs-dev/sass/components/list-unordered/index.html +901 -320
  132. package/docs-dev/sass/components/menu-stack/index.html +973 -379
  133. package/docs-dev/sass/components/modal/index.html +953 -365
  134. package/docs-dev/sass/components/nav-strip/index.html +909 -328
  135. package/docs-dev/sass/components/overlay-section/index.html +909 -328
  136. package/docs-dev/sass/components/pager/index.html +901 -320
  137. package/docs-dev/sass/components/placeholder-block/index.html +901 -320
  138. package/docs-dev/sass/components/popover/index.html +996 -379
  139. package/docs-dev/sass/components/pull-quote/index.html +913 -332
  140. package/docs-dev/sass/components/ratio-box/index.html +909 -328
  141. package/docs-dev/sass/components/rule/index.html +909 -328
  142. package/docs-dev/sass/components/scroll-slider/index.html +944 -375
  143. package/docs-dev/sass/components/skip-link/index.html +909 -328
  144. package/docs-dev/sass/components/slider/index.html +989 -420
  145. package/docs-dev/sass/components/spoke-spinner/index.html +903 -322
  146. package/docs-dev/sass/components/sticky-list/index.html +5603 -0
  147. package/docs-dev/sass/components/tabs/index.html +910 -329
  148. package/docs-dev/sass/components/tag/index.html +903 -322
  149. package/docs-dev/sass/components/tile-button/index.html +901 -320
  150. package/docs-dev/sass/components/tile-grid/index.html +901 -320
  151. package/docs-dev/sass/components/tile-grid-overlay/index.html +901 -320
  152. package/docs-dev/sass/components/vignette/index.html +915 -328
  153. package/docs-dev/sass/components/wysiwyg/index.html +901 -320
  154. package/docs-dev/sass/core/breakpoint/index.html +947 -352
  155. package/docs-dev/sass/core/button/index.html +901 -320
  156. package/docs-dev/sass/core/color/index.html +1078 -364
  157. package/docs-dev/sass/core/cssvar/index.html +901 -320
  158. package/docs-dev/sass/core/element/index.html +1096 -368
  159. package/docs-dev/sass/core/index.html +901 -320
  160. package/docs-dev/sass/core/layout/index.html +961 -361
  161. package/docs-dev/sass/core/path/index.html +901 -320
  162. package/docs-dev/sass/core/selector/index.html +901 -320
  163. package/docs-dev/sass/core/typography/index.html +901 -320
  164. package/docs-dev/sass/core/units/index.html +911 -324
  165. package/docs-dev/sass/core/utils/index.html +1871 -430
  166. package/docs-dev/sass/helpers/color/index.html +901 -320
  167. package/docs-dev/sass/helpers/display/index.html +902 -321
  168. package/docs-dev/sass/helpers/index/index.html +901 -320
  169. package/docs-dev/sass/helpers/index.html +904 -321
  170. package/docs-dev/sass/helpers/print/index.html +843 -292
  171. package/docs-dev/sass/helpers/typography/index.html +901 -320
  172. package/docs-dev/sass/helpers/units/index.html +901 -320
  173. package/docs-dev/sass/helpers/utilities/index.html +903 -322
  174. package/docs-dev/sass/index.html +904 -321
  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 +76 -56
  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 +108 -63
  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 -7
  203. package/scss/_breakpoint.scss +16 -3
  204. package/scss/_color.scss +36 -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 +5 -7
  211. package/scss/components/_basic-hero.scss +112 -0
  212. package/scss/components/_button-verbose.scss +100 -18
  213. package/scss/components/_callout.scss +125 -78
  214. package/scss/components/_captioned-figure.scss +17 -0
  215. package/scss/components/_card-grid.scss +1 -1
  216. package/scss/components/_card.scss +246 -74
  217. package/scss/components/_counter-list.scss +137 -0
  218. package/scss/components/_css-icon.scss +25 -21
  219. package/scss/components/_data-grid.scss +38 -9
  220. package/scss/components/_data-table.scss +44 -4
  221. package/scss/components/_flipcard.scss +8 -3
  222. package/scss/components/_form-theme.scss +119 -108
  223. package/scss/components/_hero.scss +12 -10
  224. package/scss/components/_index.scss +24 -0
  225. package/scss/components/_list-inline.scss +80 -0
  226. package/scss/components/_list-lines.scss +44 -32
  227. package/scss/components/_menu-stack.scss +42 -26
  228. package/scss/components/_modal.scss +13 -6
  229. package/scss/components/_nav-strip.scss +2 -0
  230. package/scss/components/_overlay-section.scss +2 -5
  231. package/scss/components/_popover.scss +165 -64
  232. package/scss/components/_pull-quote.scss +13 -13
  233. package/scss/components/_ratio-box.scss +2 -5
  234. package/scss/components/_rule.scss +1 -0
  235. package/scss/components/_scroll-slider.scss +1 -5
  236. package/scss/components/_slider.scss +49 -72
  237. package/scss/components/_spoke-spinner.scss +2 -2
  238. package/scss/components/_sticky-list.scss +206 -0
  239. package/scss/components/_tabs.scss +3 -1
  240. package/scss/components/_vignette.scss +3 -5
  241. package/scss/helpers/_display.scss +15 -18
  242. package/scss/helpers/_print.scss +12 -7
  243. package/scss/helpers/_utilities.scss +42 -32
  244. package/types/index.d.ts +1 -0
  245. package/types/settings.d.ts +66 -0
  246. package/types/settings.d.ts.map +1 -0
  247. package/types/ui/breakpoints.d.ts +14 -14
  248. package/types/ui/breakpoints.d.ts.map +1 -1
  249. package/types/ui/collapsible.d.ts.map +1 -1
  250. package/types/ui/details-group.d.ts +38 -0
  251. package/types/ui/details-group.d.ts.map +1 -0
  252. package/types/ui/dialog.d.ts +20 -14
  253. package/types/ui/dialog.d.ts.map +1 -1
  254. package/types/ui/flipcard.d.ts +16 -10
  255. package/types/ui/flipcard.d.ts.map +1 -1
  256. package/types/ui/grid.d.ts +4 -6
  257. package/types/ui/grid.d.ts.map +1 -1
  258. package/types/ui/index.d.ts +1 -0
  259. package/types/ui/modal-builder.d.ts +93 -11
  260. package/types/ui/modal-builder.d.ts.map +1 -1
  261. package/types/ui/overflow-scroller.d.ts +2 -2
  262. package/types/ui/overflow-scroller.d.ts.map +1 -1
  263. package/types/ui/popover.d.ts +6 -7
  264. package/types/ui/popover.d.ts.map +1 -1
  265. package/types/ui/print.d.ts +0 -4
  266. package/types/ui/print.d.ts.map +1 -1
  267. package/types/ui/programmatic-modal.d.ts.map +1 -1
  268. package/types/ui/proxy-click.d.ts +19 -3
  269. package/types/ui/proxy-click.d.ts.map +1 -1
  270. package/types/ui/scroll-slider.d.ts +5 -7
  271. package/types/ui/scroll-slider.d.ts.map +1 -1
  272. package/types/ui/scrollpoint.d.ts +3 -8
  273. package/types/ui/scrollpoint.d.ts.map +1 -1
  274. package/types/ui/slider.d.ts +33 -14
  275. package/types/ui/slider.d.ts.map +1 -1
  276. package/types/ui/tabs.d.ts +6 -8
  277. package/types/ui/tabs.d.ts.map +1 -1
  278. package/types/ui/theme-toggle.d.ts +51 -7
  279. package/types/ui/theme-toggle.d.ts.map +1 -1
  280. package/types/ui/tooltip.d.ts +3 -5
  281. package/types/ui/tooltip.d.ts.map +1 -1
  282. package/types/utils/css.d.ts +11 -0
  283. package/types/utils/css.d.ts.map +1 -0
  284. package/types/utils/dom.d.ts +45 -6
  285. package/types/utils/dom.d.ts.map +1 -1
  286. package/types/utils/font-awesome.d.ts +5 -0
  287. package/types/utils/font-awesome.d.ts.map +1 -0
  288. package/types/utils/index.d.ts +1 -0
  289. package/types/utils/system.d.ts +113 -0
  290. package/types/utils/system.d.ts.map +1 -0
package/docs-dev/demos/scroll-slider/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html>
2
- <html lang="en" data-site-theme="" class="fullscreen-layout">
2
+ <html lang="en" class="fullscreen-layout">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -31,7 +31,7 @@
31
31
 
32
32
 
33
33
  </head>
34
- <body class="page page">
34
+ <body class="page theme-light">
35
35
  <header class="page__header header">
36
36
  <div class="header__main">
37
37
  <a class="header__logo" href="/frontend/">
@@ -40,14 +40,22 @@
40
40
  <span class="logo__subtitle">Frontend</span>
41
41
  </div>
42
42
  </a>
43
- <a class="button button--small button--icon button--secondary margin-left-auto" href="../" aria-label="Exit">
43
+ <button class="button button--small button--icon button--secondary margin-left-auto" data-ulu-theme-toggle='{
44
+ "savePreference" : true,
45
+ "checkMediaQuery" : true,
46
+ "group" : "page"
47
+ }'>
48
+ <span class="hidden-visually">Toggle Theme to <span data-ulu-theme-toggle-label="">Dark</span></span>
49
+ <span class="fas fa-moon" data-ulu-theme-toggle-icon=""></span>
50
+ </button>
51
+ <a class="button button--small button--icon button--secondary" href="../" aria-label="Exit">
44
52
  <span class="css-icon css-icon--close" aria-hidden="true"></span>
45
53
  </a>
46
54
  </div>
47
55
  </header>
48
56
  <main id="main" class="page__body">
49
57
 
50
- <div class="background-light-gray">
58
+ <div class="page__content-header">
51
59
  <div class="container">
52
60
  <div class="type-max-width">
53
61
  <h1 class="page__title h1">Scroll Slider</h1>
@@ -73,114 +81,72 @@ Scroll-Slider
73
81
  <li class="scroll-slider__slide scroll-slider__slide--empty" role="presentation" data-ulu-scroll-slider-slide="">
74
82
   
75
83
  </li><p></p>
76
- <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide=""></li></p>
77
- <p></p><article class="card" data-ulu-proxy-click="">
78
- <div class="card__body">
79
- <h5 class="card__title">
80
- <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1</a>
81
- </h5>
82
- <div>
83
- This is a card with an upper image using a containing div with the &quot;card__image&quot; class.
84
- </div>
85
- </div>
86
- <div class="card__image">
84
+ <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
85
+ <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
86
+ <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
87
+ </h5><div>
88
+ This is the card content. It can contain around 2-3 sentences.
89
+ </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
87
90
  <img src="/frontend/assets/placeholder/image-1.jpg">
88
- </div>
89
- <div class="card__footer">
90
- My Card Footer
91
- </div>
92
- </article><p></p>
93
- <p></p>
94
- <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide=""></li></p>
95
- <p></p><article class="card" data-ulu-proxy-click="">
96
- <div class="card__body">
97
- <h5 class="card__title">
98
- <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2</a>
99
- </h5>
100
- <div>
101
- This is a card with an upper image using a containing div with the &quot;card__image&quot; class.
102
- </div>
103
- </div>
104
- <div class="card__image">
91
+ </div><div class="card__footer">
92
+ <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
93
+ </div></article>
94
+ </li></p>
95
+ <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
96
+ <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
97
+ <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
98
+ </h5><div>
99
+ This is the card content. It can contain around 2-3 sentences.
100
+ </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
105
101
  <img src="/frontend/assets/placeholder/image-1.jpg">
106
- </div>
107
- <div class="card__footer">
108
- My Card Footer
109
- </div>
110
- </article><p></p>
111
- <p></p>
112
- <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide=""></li></p>
113
- <p></p><article class="card" data-ulu-proxy-click="">
114
- <div class="card__body">
115
- <h5 class="card__title">
116
- <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3</a>
117
- </h5>
118
- <div>
119
- This is a card with an upper image using a containing div with the &quot;card__image&quot; class.
120
- </div>
121
- </div>
122
- <div class="card__image">
102
+ </div><div class="card__footer">
103
+ <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
104
+ </div></article>
105
+ </li></p>
106
+ <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
107
+ <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
108
+ <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
109
+ </h5><div>
110
+ This is the card content. It can contain around 2-3 sentences.
111
+ </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
123
112
  <img src="/frontend/assets/placeholder/image-1.jpg">
124
- </div>
125
- <div class="card__footer">
126
- My Card Footer
127
- </div>
128
- </article><p></p>
129
- <p></p>
130
- <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide=""></li></p>
131
- <p></p><article class="card" data-ulu-proxy-click="">
132
- <div class="card__body">
133
- <h5 class="card__title">
134
- <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 4</a>
135
- </h5>
136
- <div>
137
- This is a card with an upper image using a containing div with the &quot;card__image&quot; class.
138
- </div>
139
- </div>
140
- <div class="card__image">
113
+ </div><div class="card__footer">
114
+ <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
115
+ </div></article>
116
+ </li></p>
117
+ <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
118
+ <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
119
+ <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 4 Title</a>
120
+ </h5><div>
121
+ This is the card content. It can contain around 2-3 sentences.
122
+ </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
141
123
  <img src="/frontend/assets/placeholder/image-1.jpg">
142
- </div>
143
- <div class="card__footer">
144
- My Card Footer
145
- </div>
146
- </article><p></p>
147
- <p></p>
148
- <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide=""></li></p>
149
- <p></p><article class="card" data-ulu-proxy-click="">
150
- <div class="card__body">
151
- <h5 class="card__title">
152
- <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 5</a>
153
- </h5>
154
- <div>
155
- This is a card with an upper image using a containing div with the &quot;card__image&quot; class.
156
- </div>
157
- </div>
158
- <div class="card__image">
124
+ </div><div class="card__footer">
125
+ <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
126
+ </div></article>
127
+ </li></p>
128
+ <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
129
+ <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
130
+ <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 5 Title</a>
131
+ </h5><div>
132
+ This is the card content. It can contain around 2-3 sentences.
133
+ </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
159
134
  <img src="/frontend/assets/placeholder/image-1.jpg">
160
- </div>
161
- <div class="card__footer">
162
- My Card Footer
163
- </div>
164
- </article><p></p>
165
- <p></p>
166
- <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide=""></li></p>
167
- <p></p><article class="card" data-ulu-proxy-click="">
168
- <div class="card__body">
169
- <h5 class="card__title">
170
- <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 6</a>
171
- </h5>
172
- <div>
173
- This is a card with an upper image using a containing div with the &quot;card__image&quot; class.
174
- </div>
175
- </div>
176
- <div class="card__image">
135
+ </div><div class="card__footer">
136
+ <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
137
+ </div></article>
138
+ </li></p>
139
+ <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
140
+ <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
141
+ <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 6 Title</a>
142
+ </h5><div>
143
+ This is the card content. It can contain around 2-3 sentences.
144
+ </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
177
145
  <img src="/frontend/assets/placeholder/image-1.jpg">
178
- </div>
179
- <div class="card__footer">
180
- My Card Footer
181
- </div>
182
- </article><p></p>
183
- <p></p>
146
+ </div><div class="card__footer">
147
+ <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
148
+ </div></article>
149
+ </li></p>
184
150
  <p><li class="scroll-slider__slide scroll-slider__slide--empty" role="presentation" data-ulu-scroll-slider-slide="">
185
151
   
186
152
  </li>