Website elementsFeedback & states
Notice
An inline alert, built into your site with no plugin and no library. A message in the page, in one of four kinds (info, success, warning, danger), each with its colors and a Font Awesome Free icon, an optional title and an optional close button remembered for the visit. role="status" for info and success, role="alert" for warning and danger; the kind is also said in words.
Information: Classes resume on Monday
The studio is closed this week while the floor is refinished. Your booking moves with it.
Success: Your changes were saved.
Error: We could not take the payment
Nothing was charged. Check the card number and try again.
Say what just happened, or what needs attention, right where it applies, in a color that says how much it matters.
Also called
alert boxinfo boxcallout boxBootstrap alertmessage boxUABB Info BoxElementor Alert widgetinline message
What it replaces
- Bootstrap alerts
- page-builder alert / info box / notice modules
- hand-built callout boxes with a colored border
Good for
The state of the page or of a form after an action (“Your changes were saved”, “We could not take the payment”), a condition people need before they act (“Only 3 places left”), a note that holds for a while (“Classes resume on Monday”). One notice near what it is about.
Not for
A message across the top of the whole site (that is announcement-bar), a confirmation that should vanish on its own (toast), or form-field errors, which belong beside their field with aria-describedby. And not several on one screen: when everything is a warning, nothing is.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- role="status" for info and success, role="alert" for warning and danger. A screen reader announces a live region when its content arrives or changes: a notice the host inserts after an action is announced, one rendered with the page is read in place.
- The kind is said in words as well as color and icon: a visually hidden “Warning:” (or `kindLabel`) leads the title or the text. The icon is aria-hidden.
- The close button is a real 44px <button> named “Dismiss”. After a dismiss, focus moves to the next focusable thing on the page.
- Every kind’s fallback text is at least 4.5:1 on its ground and its accent at least 3:1; `npm run check` computes all eight. In forced-colors mode the edge and icon take the system text color.
- No motion.
- Without JavaScript the notice shows and cannot be closed: the close button stays hidden rather than doing nothing.
Where it's live
- superherotech.ai: /elements/notice/ (demo)
How to ask for it
“The notice on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Feedback & states
See them all working- Toast
A quiet “Saved” or “Link copied” in the corner that confirms the click and gets out of the way, with an Undo when one is needed.
- Loading
Show people the page heard them: a spinner where something is working, gray shapes where content is on its way, and a form that cannot be clicked twice while it saves.
- Stepper
Show people where they are in a checkout or a sign-up, how far they have come and what is left, on a laptop or a phone.
- Tooltip
A small explanation on a word or an info icon, there when someone points at it or tabs to it, and out of the way the rest of the time.
Want the notice on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.