Callout Boxes
Shortcode Version
The editor allows Callout Boxes to be used via a shortcode.
[bu_callout align="center"]
The content goes here.
[/bu_callout]
The code requires you to select an alignment option:
align="left"align="center"align="right"
You can add an optional class to change the background color:
class="pink"class="blue"class="green"class="yellow"
Examples of Callout Boxes
Announcement Box
This is content inside of the announcement box. All styles and headings work inside of the announcement box!
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Announcement Box
This is content inside of the announcement box. All styles and headings work inside of the announcement box!
Announcement Box
This is content inside of the announcement box. All styles and headings work inside of the announcement box!
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Custom Code Version
This theme supports custom code for creating a group of callout boxes. This code also supports the use of classes to change the background colors.
Code:
<div class="callouts has-1">
<div class="callout pink">
<div class="image">
<img src="#" alt="" /></div>
<div class="content">
<h4>Ut enim ad minim veniam</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<a class="button" href="#">Learn More</a>
</div>
</div>
</div>
Example:
Code:
<div class="callouts has-2">
<div class="callout blue">
<div class="image">
<img src="#" alt="" /></div>
<div class="content">
<h4>Ut enim ad minim veniam</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<a class="button" href="#">Learn More</a>
</div>
</div>
<div class="callout green">
<div class="image">
<img src="#" alt="" /></div>
<div class="content">
<h4>Ut enim ad minim veniam</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<a class="button" href="#">Learn More</a>
</div>
</div>
</div>
Example:
Code:
<div class="callouts has-3">
<div class="callout yellow">
<div class="image">
<img src="#" alt="" /></div>
<div class="content">
<h4>Ut enim ad minim veniam</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<a class="button" href="#">Learn More</a>
</div>
</div>
<div class="callout pink">
<div class="image">
<img src="#" alt="" /></div>
<div class="content">
<h4>Ut enim ad minim veniam</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<a class="button" href="#">Learn More</a>
</div>
</div>
<div class="callout">
<div class="image">
<img src="#" alt="" /></div>
<div class="content">
<h4>Ut enim ad minim veniam</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<a class="button" href="#">Learn More</a>
</div>
</div>
</div>
Example: