Callouts
Callouts draw attention to important information within a page. They use color, icons, and placement to signal how critical the message is — from helpful tips to urgent warnings.
Use callouts inside Prose content to surface supplementary information that the reader should not miss — regulatory notes, compliance warnings, confirmation messages, and critical alerts. Five variants map to increasing levels of urgency.
When to use
- A piece of information could be missed in body text — The reader might scan past it, but missing it could cause confusion, a compliance error, or a financial mistake.
- You need to communicate urgency or severity — The five variants (default, info, warning, success, danger) give you a visual scale from "helpful context" to "critical alert."
- The information is supplementary, not primary — Callouts highlight supporting details. If the callout contains the main point of the section, it should be body text instead.
When not to use
- Don't use callouts for primary page content — If the reader can't understand the page without reading the callout, it's not supplementary. Write it as body text or a lead paragraph.
- Don't stack multiple callouts in sequence — Three callouts in a row dilute their impact. Consolidate into one, or restructure. If the items are parallel, use a bulleted list.
- Don't use a callout where a details/accordion would work — If the information is useful but not urgent, let the reader opt in rather than interrupting their flow.
- Don't use danger for anything less than irreversible or legally consequential — Overusing danger trains readers to ignore it. Reserve it for situations involving data loss, legal liability, or safety.
Examples
- Default supports general-purpose tips and supplementary context.
- Info adds helpful background that enriches understanding but is not required to proceed.
- Warning signals real risk, such as missed deadlines, compliance problems, or financial consequences.
- Success confirms that a process completed as expected.
- Danger is reserved for irreversible or legally consequential situations.
Best practices
Use one callout per section at most
Callouts work by contrast — they stand out because the surrounding content is plain.
Cluster callouts together
Two or more in sequence creates a wall of colored boxes that readers skip entirely.
Match the variant to the real severity
Info for context. Warning for risk. Danger for irreversible consequences.
Default to "warning" for emphasis
If there's no actual risk, use info or default. Crying wolf erodes trust in the system.
Keep callouts short — 1 to 3 sentences
The reader should grasp the message in a single glance.
Put multi-paragraph content in a callout
If it needs that much space, it's body content or belongs in an aside.
Place the callout near the content it relates to
Proximity creates the connection between the callout and its context.
Put callouts at the top of a page as a general disclaimer
Use a lead paragraph for page-level context instead.
Content guidelines
Tell the reader what's at stake first, then what to do about it.
Deposits above $250,000 are not insured. Contact your bank to discuss coverage options.
Please note that you should contact your bank about coverage options for deposits above $250,000.
The icon and color already communicate the type. Redundant labels waste the reader's first few words.
Call Report filing deadlines cannot be extended.
Important: Please be aware that Call Report filing deadlines cannot be extended.
Speak to the reader as "you."
You must submit your quarterly filing before the deadline.
Quarterly filings must be submitted before the deadline by the reporting institution.
Vague warnings don't help anyone make decisions.
Editing this field resets all downstream calculations. Export your current report before making changes.
Be careful when editing this field.
Accessibility
- Every callout needs a label that tells screen reader users what kind of message it is. Default labels: "Tip," "Information," "Warning," "Success," "Critical alert."
- If your callout is about something more specific, write a custom label — for example, "Deposit insurance coverage note" instead of the generic "Information."
- Don't rely on color alone to communicate severity. The icon and label text must also convey it — a reader who can't see color should still understand whether this is a tip or a critical alert.
- Danger callouts are announced as live status updates to assistive technology. Only use danger when the information truly warrants immediate attention.