Reading / Supporting context
Callout
A note in the reading flow for a prerequisite, caveat, or important qualification.
Basic usage
HTML
<aside class="callout tone-warn">
<p class="callout-title">Analysis scope</p>
<p>Dynamically assembled SQL may be only partially resolved.</p>
</aside>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.callout | The note container. |
.callout-title / p | A short heading and explanation. |
.tone-warn / .tone-danger / .tone-ok | State hues chosen for the meaning of the content. |
Usage notes
Keep important context close to the claim it qualifies. Making everything a warning makes the important warnings harder to find.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.