Callouts: Eye-catching content boxes

Callouts make your content stand out with background colors and borders so your key points easy to spot. They’re great for providing additional context and summarizing key points.

This is a callout.

This is an alert callout.

This is an info callout.

This is a note callout.

This is a tip callout.

To create callouts, add the .callout class to any paragraph and include the .alert, .info, .note, or .tip class to add variety to the style.

<div class="callout">
This is a <strong>callout</strong>.
</div>

<div class="callout alert">
This is an <strong>alert callout</strong>.
</div>

<div class="callout info">
This is an <strong>info callout</strong>.
</div>

<div class="callout note">
This is a <strong>note callout</strong>.
</div>

<div class="callout tip">
This is a <strong>tip callout</strong>.
</div>