Callout Boxes

Details

Calliut boxes are used when you have some additional or related content to the page that you want to put into a container. Some good examples are "Frequently Asked Questions" or "See Also/Related Links".  Use the following HTML to create a callout box:

Code

<div class="calloutbox">
<div class="calloutbox-center highlights mobile">
    <div class="container gradient-white">
            <h4 class="title">Callout Box Title</h4>
            <div class="content">
        <div class="par parsys"><div class="text parbase section">
            <ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
<li>Bullet pont 3
</li>
</ul>
    </div>
<div class="new section"></div>
</div>
        </div>
    </div>
</div></div>

Configurables

  • Left aligned: Replace "calloutbox-center" with "calloutbox-left" to get a box that is floated left.
  • Right aligned: Replace "calloutbox-center" with "calloutbox-right" to get a box that is floated right.

Image Example

Live Example

Callout Box Title

  • Bullet point 1
  • Bullet point 2
  • Bullet pont 3