Grid

This render template builds a wall of callouts. It uses a jQuery plugin to find the best place for each one depending on its dimensions. Each callout has one link that wraps separate spans for image and text.

For a complete list of best practices, visit the main portlet page: Callouts

HTML Structure



<div class="calloutContainer calloutGrid">
      <ul class="buttons grid clearfix">
       <li class="calloutItem">
         <a href="">
			<span class="image">
               <img src="theme/callouts/callout1.jpg" alt="" />
			</span>
           <span class="text">
                Callout Text
            </span>
         </a>
       </li> <!-- end CalloutItem -->
	<!-- Copy/paste li.calloutItem and contents for more callouts of the same type -->
     </ul>
</div>

<!-- The following are part of the render template therefore cannot be altered. Include these files in the <head> OR at the bottom just before </body>) -->   
<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.min.js">//</script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js">//</script>
   
<script>
		var $grid = $('.grid').imagesLoaded( function() {
		  // init Masonry after all images have loaded
		  $grid.masonry({
			// options...
			itemSelector: 'li',
			percentPosition: true
		  });
		});
</script>

HTML Structure

Default Styling

Custom Styling Example

Custom Styling Example