Accessibility Tool


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 class="text">
                Callout Text
       </li> <!-- end CalloutItem -->
	<!-- Copy/paste li.calloutItem and contents for more callouts of the same type -->

<!-- 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="">//</script>
<script src="">//</script>
		var $grid = $('.grid').imagesLoaded( function() {
		  // init Masonry after all images have loaded
			// options...
			itemSelector: 'li',
			percentPosition: true

Default Styling

Custom Styling Example

Custom Styling Example

2020 © All Rights Reserved | Website Design By: Intrado | Login