Grouping Sets of Callout Boxes

This groups sets of callout boxes together. On a larger desktop view, they are three across; when there is a right sidebar, they are two across. On smaller screens, they are two across, and on the smallest width, they are one. The boxes stack from left to right. 

  1. Go to the Callout field. 
  2. Click the Source button in the Editor Toolbar (#29).
  3. Copy and paste this code in the field. Replace the highlighted text with the desired content.

<div class="callouts">
<div class="callout information">
<p>Sample callout</p>
</div>
<div class="callout information">
<p>Sample callout</p>
</div>
<div class="callout information">
<p>Sample callout</p>
</div>
</div>

Note: If you would like to remove the box around each callout so the text simply appears in three columns, replace each instance of "callout information" in the text above with "callout"