Callout Box Widget
Make the sentence readers must not miss stand out: a tinted box with an icon for a tip, a warning before a risky step, a success note after a setup guide. Bold a phrase and add a link with two tiny bits of syntax - no HTML needed.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="callout-box"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
Pick a type - Note, Tip, Info, Success, Warning or Danger - and each brings its own icon and colour, re-tuned for dark mode so the tint and text stay readable on both. Add a title or leave it blank to use the type's name. In the text, **double asterisks** make bold and [link text](https://...) makes a link; nothing else is interpreted, so a pasted tag such as <script> appears as ordinary characters. Links go through the kit's address check: https, http, mailto and tel are allowed, while javascript:, data: and anything with a user name or spaces are refused and leave just the link text. Each line of the text becomes a paragraph. Soft gives a tinted panel, Bordered a white card with a coloured outline, and Bar a quiet panel with a thick coloured edge on the reading side (it moves to the right on right-to-left pages). The box is announced as a note; a Danger box marked urgent becomes an alert so screen readers speak it straight away. An optional close button hides it until the page is reloaded.
Method
- Text syntax: **bold** and [text](address) only; an unclosed ** stays literal; no link inside a link, no bold inside bold
- Link address allowed when it is https:, http:, mailto: or tel: and contains no spaces, quotes or credentials
- role="note" with aria-label = title; role="alert" only for type Danger with urgent on
- Dismiss = hidden for the current page view; nothing written to storage
Worked examples
A warning with a link
Inputs: Type Warning; text **Careful:** this deletes old revisions. [Make a backup first](https://example.com/backup).
Result: An amber box with a triangle icon, the word Careful: in bold and a link Make a backup first
Only the two supported conventions are interpreted.
A hostile link
Inputs: Text [click here](javascript:alert(1)) and <img src=x onerror=alert(1)>
Result: The plain text [click here](javascript:alert(1)) and <img src=x onerror=alert(1)> shown as characters
The address fails the link check and the tag is just text, so nothing runs.
Limitations
- Only bold and links are supported - no italics, lists, images or headings inside the box.
- Up to eight paragraphs of 600 characters each.
- Dismissal is not remembered between page views.
Where publishers use it
- A WordPress tutorial warning readers to back up their database before running an update, with a link to the backup guide
- A recipe post adding a Tip box about resting the dough overnight
- Product documentation marking a breaking change with an urgent Danger box
- An online course page closing each lesson with a Success box that links to the next lesson
Questions
Can I use HTML inside the callout?
No, on purpose. Publisher text is never treated as markup, so nothing pasted into the box can run a script or break your layout. Two small conventions cover most needs: wrap words in **double asterisks** for bold, and write [link text](https://example.com) for a link. Anything else, including tags, is shown literally.
What happens to a link that is not safe?
The link text stays in the sentence as plain text and no link is created. Addresses must start with https:, http:, mailto: or tel:, contain no spaces or quote marks and carry no user name or password, which rules out javascript: and data: tricks.
Which type should I choose?
Use Note for neutral asides, Tip for a helpful shortcut, Info for background, Success for a confirmed result, Warning when a step can go wrong, and Danger for data loss, safety or security risks. Reserve the urgent setting for Danger boxes that must interrupt a screen-reader user.
Does closing the box remember the choice?
No. Close hides it for the current page view only, because remembering would mean storing something in the visitor's browser. It returns on the next visit, so do not put anything there that readers need to dismiss permanently.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Callout Box https://a2z.tools/embed/callout-box
<a href="https://a2z.tools/embed/callout-box">A2Z Tools Callout Box</a>
[A2Z Tools Callout Box](https://a2z.tools/embed/callout-box)
Callout Box by A2Z Tools - https://a2z.tools/embed/callout-box
Related widgets
-
A Key takeaways or TL;DR summary for long posts, with check, number or bullet markers and jump links.
-
A clear affiliate, Amazon Associates or sponsored-post notice for the top of an article, with a policy link.
-
Accessible FAQ accordion with search, expand-all, numbering and a copy-as-text button.
-
Two clear columns of pros and cons with tick and cross icons, an optional title and a bottom line.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
-
A slim bar or small circle that fills as visitors read your article - measured through the article itself.
