Callout

Info and warning boxes for supplementary content.

---

Classes

Class	Purpose
.callout	Base flex container with gap, padding, radius
.callout--info	Info variant — blue background and border
.callout--warning	Warning variant — yellow background and border

Info Callout

<div class="callout callout--info" style="font-size: var(--font-size-sm)">
  <span>&#x2139;&#xFE0F;</span>
  <p>This is an informational callout using <code>.callout--info</code>.</p>
</div>

ℹ️

This is an informational callout using .callout--info.

Warning Callout

<div class="callout callout--warning" style="font-size: var(--font-size-sm)">
  <span>&#x26A0;&#xFE0F;</span>
  <p>This is a warning callout using <code>.callout--warning</code>.</p>
</div>

⚠️

This is a warning callout using .callout--warning.

---

Usage

<div class="callout callout--info" role="note">
  <span aria-hidden="true">&#x2139;&#xFE0F;</span>
  <p>Informational message here.</p>
</div>

<div class="callout callout--warning" role="note">
  <span aria-hidden="true">&#x26A0;&#xFE0F;</span>
  <p>Warning message here.</p>
</div>