4 Pure CSS3 with JSPublished 2026-10-05Free · no sign-up
Seven message components: info, success, warning and error alerts, an announcement that stays dismissed, a site-wide maintenance banner, a deletion alert with Undo, documentation callouts, a confirmation that dismisses itself unless you hover it and an error with expandable technical details.
The four alert levels, each with an icon, a bold label and the message. The label (Success, Warning) is real text, so the level does not depend on colour, and only the error uses role="alert", because interrupting someone is for problems, not good news.
View code
<div class="al1"><p class="i"><span aria-hidden="true">ℹ</span><b>Note:</b> Prices include VAT.</p><p class="s" role="status"><span aria-hidden="true">✓</span><b>Success:</b> Your changes are saved.</p><p class="w"><span aria-hidden="true">!</span><b>Warning:</b> Your trial ends in 3 days.</p><p class="e" role="alert"><span aria-hidden="true">✕</span><b>Error:</b> The card was declined.</p></div>
An announcement with a close button that remembers it was dismissed for the rest of the visit through sessionStorage, so it does not reappear on every page. The close button names the alert it closes, and focus moves to the next sensible place.
View code
<div class="al2"><div class="msg" role="region" aria-label="Announcement"><p>New: export your reports to PDF.</p><button aria-label="Dismiss announcement">×</button></div><a href="#reports" class="next">Go to reports</a></div>
var m = document.querySelector('.al2 .msg'), key = 'al2-dismissed';
try { if (sessionStorage.getItem(key)) m.remove(); } catch (e) {}
var b = document.querySelector('.al2 button');
if (b) b.onclick = function () { try { sessionStorage.setItem(key, '1'); } catch (e) {} m.remove(); document.querySelector('.al2 .next').focus(); };
03. Site-Wide Maintenance Banner
BannerNotice
A full-width banner at the top of every page for planned maintenance, with the time window in a time element and a link to the status page. It is a region with a label, so screen reader users can find or skip it like any landmark.
View code
<div class="al3" role="region" aria-label="Service notice"><p><b>Planned maintenance</b> on <time datetime="2026-10-12T02:00Z">12 Oct, 02:00-03:00 UTC</time>. Checkout may be unavailable. <a href="#status">Status page</a></p></div>
After deleting something, an alert confirms it and offers Undo, which is kinder than an Are you sure dialog. The message is a polite live region, the Undo button restores the item, and the alert removes itself after ten seconds.
var ul = document.querySelector('.al4 ul'), bar = document.querySelector('.al4 .bar'), saved, t;
ul.addEventListener('click', function (e) { if (!e.target.classList.contains('del')) return; saved = e.target.parentNode; saved.remove();
bar.innerHTML = '<span>Draft deleted.</span><button type="button">Undo</button>'; var u = bar.querySelector('button'); u.focus();
u.onclick = function () { ul.appendChild(saved); bar.innerHTML = ''; clearTimeout(t); saved.querySelector('.del').focus(); };
clearTimeout(t); t = setTimeout(function () { bar.innerHTML = ''; }, 10000); });
05. Documentation Callouts
AlertDocs
Note, Tip and Caution boxes for documentation, with a coloured left border, a label and the text. They are asides with a label heading rather than alerts, because they are part of the content, not something that just happened.
View code
<div class="al5"><aside class="note" aria-label="Note"><b>Note</b><p>The API returns dates in UTC.</p></aside><aside class="tip" aria-label="Tip"><b>Tip</b><p>Cache responses for up to 5 minutes.</p></aside><aside class="warn" aria-label="Caution"><b>Caution</b><p>Deleting a key cannot be undone.</p></aside></div>
A confirmation that closes itself after six seconds, with a bar showing the time left. Hovering or focusing it pauses the timer through animation-play-state, which gives people time to read, and the alert is closed when its bar's animation ends.
var zone = document.querySelector('.al6 .zone');
document.querySelector('.al6 .show').onclick = function () {
zone.innerHTML = '<div class="box">Settings saved.<button type="button">Close</button><i aria-hidden="true"></i></div>';
var box = zone.firstChild; box.querySelector('i').addEventListener('animationend', function () { box.remove(); }); box.querySelector('button').onclick = function () { box.remove(); };
};
07. Alert with Expandable Details
AlertDisclosure
An error alert that gives a short message first and technical details behind a Show details toggle, so people are not overwhelmed but support staff still get what they need. The details use the native details element and include a copyable error code.
View code
<div class="al7" role="alert"><p><b>Payment failed.</b> Your bank declined the charge. Try another card.</p><details><summary>Show details</summary><p>Error code: <code>card_declined/insufficient_funds</code><br>Reference: 7F3A-21C9</p></details></div>
Use role="alert" only for errors and urgent problems, because it interrupts. Confirmations belong in role="status", and static content such as documentation callouts needs no live role at all.
Say the level in words
Start the message with Success, Warning or Error in text. Colour and icons help sighted people scan, but the word works for everyone, including people who cannot tell red from green.
Undo beats confirm
For reversible actions, act immediately and offer Undo, rather than asking Are you sure first. Keep the Undo available long enough to use, around ten seconds.
Self-closing messages wait for readers
If a message closes itself, pause the timer while it is hovered or focused, and never put anything essential in a message that disappears.
Frequently asked questions
Where should page-level banners go?
At the very top, before the header, as a labelled region.
Does the dismissed banner come back?
Not for the rest of the visit; it uses sessionStorage, which clears when the tab closes.
Should errors include codes?
Give a plain explanation first and put codes behind a details toggle for support.