1. Home
  2. Marco HTML
  3. Mosaic

Mosaic

Mosaic page use diferent height images with short description and link to chosen pages. You have 2 templates to choice, mosaic with space between images or mosaic with no gutter. If you want to mosaic without space between images, simply add class “mosaic-no-gutter” to mosaic container. To create page, add images and setting images height for small (data-sm-height) and large solution (data-lg-height).
 

...
   <div class="mosaic page-padding-top mosaic-no-gutter">
      ...
    <div class="mosaic-item" data-sm-height="small image height" data-lg-height="large image height">
      <a href="page url">
         <div class="mosaic-img" style="background-image: url('images url')">
         <div class="mosaic-info">
            <div class="mosaic-text">short text</div>
            <div class="mosaic-link">page title</div>
         </div>
         <div class="mosaic-item-overlay"></div>
      </a>
    </div>
...
Was this article helpful to you? Yes No