Connecticut State Sitecore Training and Fundamentals

Callout Boxes

Callout boxes are simple container components that separate out information and can contain headers, content, and links. They can be inserted by using the classes below or by using the CSS Class dropdown in the Rich Text Editor.

Basics

A callout is just an element with a .callout class applied. You can put any kind of content inside. Typically, .callout is used on <p> and <div> elements.

Basic Style and Usage
This is a callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
<div class="callout">
<h5>This is a callout.</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<a href="#">It's dangerous to go alone, take this.</a>
</div>

 

Colors

Callouts can be colored with Foundation color classes. Depending on the content of the callout, you may find it more appropriate to use the .primary, .secondary, .success, .warning, or .alert classes.

Primary Style and Usage
This is a primary callout

It has an easy to override visual style, and is appropriately subdued. This uses the .primary class.

It's dangerous to go alone, take this.
<div class="primary callout">
<h5>This is a primary callout</h5>
<p>It has an easy to override visual style, and is appropriately subdued. This uses the <code>.primary</code> class.</p>
<a href="#">It's dangerous to go alone, take this.</a>
</div>
Secondary Style and Usage
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued. This uses the .secondary class.

It's dangerous to go alone, take this.
<div class="secondary callout">
<h5>This is a secondary callout</h5>
<p>It has an easy to override visual style, and is appropriately subdued. This uses the <code>.secondary</code> class.</p>
<a href="#">It's dangerous to go alone, take this.</a>
</div>
Success Style and Usage
This is a success callout

It has an easy to override visual style, and is appropriately subdued. This uses the .success class.

It's dangerous to go alone, take this.
<div class="success callout">
<h5>This is a success callout</h5>
<p>It has an easy to override visual style, and is appropriately subdued. This uses the <code>.success</code> class.</p>
<a href="#">It's dangerous to go alone, take this.</a>
</div>
Warning Style and Usage
This is a warning callout

It has an easy to override visual style, and is appropriately subdued. This uses the .warning class.

It's dangerous to go alone, take this.
<div class="warning callout">
<h5>This is a warning callout</h5>
<p>It has an easy to override visual style, and is appropriately subdued. This uses the <code>.warning</code> class.</p>
<a href="#">It's dangerous to go alone, take this.</a>
</div>
Alert Style and Usage
This is an alert callout

It has an easy to override visual style, and is appropriately subdued. This uses the .alert class.

It's dangerous to go alone, take this.
<div class="alert callout">
<h5>This is an alert callout</h5>
<p>It has an easy to override visual style, and is appropriately subdued. This uses the <code>.alert</code> class.</p>
<a href="#">It's dangerous to go alone, take this.</a>
</div> 

 

Additional Usage

In addition to <div> elements, the callout classes above can be used on <p> elements. See below for examples.

Primary Paragraph Style and Usage

This is a paragraph callout with a .primary class applied.

<p class="primary callout">
This is a paragraph callout with a <code>.primary</code> class applied.
</p>
Warning Paragraph Style and Usage

This is a paragraph callout with a .warning class applied.

<p class="warning callout">
This is a paragraph callout with a <code>.warning</code> class applied.
</p>

 

Callout box with hyperlink in it to test color contrast.

Callout box with hyperlink in it to test color contrast.

Callout box with hyperlink in it to test color contrast.

Callout box with hyperlink in it to test color contrast.

Callout box with hyperlink in it to test color contrast.