Callouts
Callouts display important information. They can also be used as alerts.
Usage
Use the .callout class to turn an element into a callout.
This is a callout.
<div class="callout">
This is a callout.
</div>Colors
You can adjust the color of a callout using the .primary, .secondary, .success, .danger, and .warning classes.
Neutral Callout
Primary Callout
Secondary Callout
Success Callout
Danger Callout
Warning Callout
<div class="callout">Neutral Callout</div>
<div class="callout primary">Primary Callout</div>
<div class="callout secondary">Secondary Callout</div>
<div class="callout success">Success Callout</div>
<div class="callout danger">Danger Callout</div>
<div class="callout warning">Warning Callout</div>Vivid Callouts
Use the .vivid class to create a more vibrant callout. It can be paired with the color classes.
Neutral Callout
Primary Callout
Secondary Callout
Success Callout
Danger Callout
Warning Callout
<div class="callout vivid">Neutral Callout</div>
<div class="callout vivid primary">Primary Callout</div>
<div class="callout vivid secondary">Secondary Callout</div>
<div class="callout vivid success">Success Callout</div>
<div class="callout vivid danger">Danger Callout</div>
<div class="callout vivid warning">Warning Callout</div>Outline Callouts
Use the .outline class to style a callout with a transparent background. It can be paired with the color classes.
Neutral Callout
Primary Callout
Secondary Callout
Success Callout
Danger Callout
Warning Callout
<div class="callout outline">Neutral Callout</div>
<div class="callout outline primary">Primary Callout</div>
<div class="callout outline secondary">Secondary Callout</div>
<div class="callout outline success">Success Callout</div>
<div class="callout outline danger">Danger Callout</div>
<div class="callout outline warning">Warning Callout</div>Icons
You can pair the .callout class with the .sidecar layout class to include an icon.
Hey! You're awesome!
<div class="callout success sidecar">
<div class="margin-start-5xs">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/></svg>
</div>
<div><strong>Hey!</strong> You're awesome!</div>
</div>