fin1te/dsv1.0.0
  1. ds
  2. Components
  3. Callout

Callout

A note that needs to stand apart from prose.

Numbers are from production. Rounded, and a week old by the time they are published.

Needs Node 22. Astro 7 does not run on Node 18.

Build passed. 2 pages, 0 warnings.

Do not re-run the import. It overwrites hand-adjusted values.

Code
<div class="callout">
  <svg class="i" viewBox="0 0 24 24" aria-hidden="true">…</svg>
  <p><strong>Numbers are from production.</strong> Rounded, and a week old.</p>
</div>
<div class="callout warm">…</div>
<div class="callout ok">…</div>
<div class="callout down">…</div>

Use a callout when a note must stand apart from the prose around it. In long-form writing, a blockquote is usually enough.

ClassOnWhat it does
.calloutdiv, asideSurface with a 2px accent rule on the left. Optional leading icon.
.warm / .ok / .down.calloutAmber, green or red rule and icon.

Accessibility

  • Colour alone does not carry the meaning: start the text with what kind of note it is.
  • Use role="alert" only for errors that appear after an action.