Standard

This 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 standard">
      <ul class="buttons 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>

Standard

HTML Structure

Default Styling

Custom Styling Example

Custom Styling Example