uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Blended Grid - @@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="page"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper">  <header class="uix-header__container"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>2 Rows, Large image on the left</h3> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="uix-blended-grid"> <ul class="uix-blended-grid__col-two-left"> <li><div data-bg='{"src":"assets/images/demo/test-img-big-1.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-1.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-1.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> </ul> </div>  </div>  </section>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>2 Rows, Large image on the right</h3> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="uix-blended-grid"> <ul class="uix-blended-grid__col-two-right"> <li><div data-bg='{"src":"assets/images/demo/test-img-big-2.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-2.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-2.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> </ul> </div>  </div>  </section>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>3 Rows, Large image on the left</h3> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="uix-blended-grid"> <ul class="uix-blended-grid__col-three-left"> <li><div data-bg='{"src":"assets/images/demo/test-img-big-3.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-3.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-3.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-3.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-3.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-3.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> </ul> </div>  </div>  </section>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>3 Rows, Large image on the right</h3> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="uix-blended-grid"> <ul class="uix-blended-grid__col-three-right"> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> </ul> </div>  </div>  </section>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>2 Rows, 3 Columns, Large image on the left and right</h3> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="uix-blended-grid"> <ul class="uix-blended-grid__col-three-left-right"> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> </ul> </div>  </div>  </section>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>2 Rows, 3 Columns, Large image on the left, 2 columns image on the right</h3> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="uix-blended-grid"> <ul class="uix-blended-grid__col-three-left-right2"> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> <li><div data-bg='{"src":"assets/images/demo/test-img-big-4.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'></div></li> </ul> </div>  </div>  </section> </main> @@include('./src/components/_global/include-copyright.html') </div>  @@include('./src/components/_global/include-footer.html')