Callout

Callouts are an excerpt of text or an article that has been pulled out and used as a visual clue to draw the eye to the text. Callout helps in directing user's attention to important pieces of info.

Interactive demo

Example

<!--Call out Default-->
    <div class="alert alert-default has-icon alert-large" role="alert"> <span><i class="fas fa-info-circle"></i></span>
      <div class="alert-content">
        <h4>Title / Heading of the alert</h4>
        <p>Description will be shown here. This can be a combination of dismissible and link.</p>
      </div>
    </div>
<!-- Call out Info-->
    <div class="alert alert-info has-icon alert-large" role="alert"> <span><i class="fas fa-info-circle"></i></span>
      <div class="alert-content">
        <h4>Info or Notes</h4>
        <p>Description will be shown here. This can be a combination of dismissible and link.</p>
      </div>
    </div>

When to use

Callouts should be used for:

• Highlighting very specific information within a page by differentiating it from surrounding content. For example, quotes or additional information.

Callouts should not be used for:

• Information presented in complex pages.

• Readers will be distracted by the other visually prominent elements.

For important or critical information use the notification component with the correct color state.