Callout blocks
Info callout
I'm a neutral info callout!
<div class="callout callout--info">
<h4 class="callout__title">This is an info callout</h4>
<p>I'm a neutral info callout!</p>
</div>
Success callout
<div class="callout callout--success">
<h4 class="callout__title">This is a success callout</h4>
<p>I'm a success callout!</p>
</div>
Warning-callout
And now I'm going to tell you something very important! Pay attention to me!
<div class="callout callout--warning">
<h4 class="callout__title">This is a warning callout</h4>
<p>And now I'm going to tell you something very important! Pay attention to me!</p>
</div>
Caution callout
And here there's some critical information you have to know!
<div class="callout callout--danger">
<h4 class="callout__title">This is a caution callout</h4>
<p>And here there's some critical information you have to know!</p>
</div>