Callout

data-callout

A callout is a lasting note beside the text: a <strong> title, a paragraph, and a short colour marker down its left edge. Use a toast instead for the result of an action.

Basic

html

<div data-grid="2">
  <aside data-callout="info"><strong>Watching files</strong><p>atlas rebuilds the site whenever a source file is saved.</p></aside>
  <aside data-callout="go"><strong>Build finished</strong><p>All 1,204 pages rendered in 2.4 seconds.</p></aside>
  <aside data-callout="stop"><strong>Link not found</strong><p><code>/guide/old-path</code> is not a page any more.</p><button data-variant="ghost" data-remove aria-label="Dismiss">×</button></aside>
  <aside data-callout="earth"><strong>Pre-alpha</strong><p>Commands may change before 1.0.</p><menu><li><a role="button" data-size="sm" href="#notes">Read the notes</a></li></menu></aside>
</div>

A [data-remove] button inside the callout dismisses it; a <menu> at the end holds its actions.

Notes

The tones are go, stop, info and earth; with no value the callout takes the soft tone.
s72.js gives any [data-remove] button the ghost variant and removes the callout it sits in.
A toast is a callout in a fixed stack, so both follow the same tones and the same shape.
The callout keeps the card colour in every surface; only the marker changes with the tone.