Text

Callout

Published on

Description

A callout highlights supplementary information within page content. Unlike alerts, callouts are not announced by screen readers via live regions — they are static content.

Use callouts for tips, notes, warnings, or additional context that supplements the surrounding content.

Example

Open in new tab
View HTML markup 
<aside aria-labelledby="callout-s1" data-theme="info">
  <h3 id="callout-s1">Info</h3>
  <p>details about the callout</p>
</aside>
<aside aria-labelledby="callout-s2" data-theme="pass">
  <h3 id="callout-s2">Success</h3>
  <p>details about the callout</p>
</aside>

Accessibility

  • Callouts are typically <aside> or styled <div> elements with no implicit ARIA role that triggers announcements.
  • Do not use role="alert" on callouts — they are not time-sensitive and would interrupt screen reader users unnecessarily.
  • Ensure sufficient color contrast for callout backgrounds and borders. Do not rely on color alone to convey the callout type (e.g. warning vs info).
  • Alert — for urgent, time-sensitive messages
  • Blockquote — for attributed quotations

Variables

None for callout