More Modals Snippets

See all ->

Toast Notification

Modal / Dialog

Command Palette

Cookie Consent Banner

Front-End Coding Playgrounds

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Alert Banners — Free HTML CSS JS Snippet, 5 Variants

Alert Banners · Modals · Plain HTML, CSS & JS · Live preview

Share & Support

What's included

Features

5 semantic variants: success/info/warning/error/neutral with colour-coded backgrounds
Inline SVG icons per variant — no icon library required
Slide-in entry: opacity + translateY keyframe on all .alert elements
Dismiss: .dismissing class triggers opacity + max-height collapse animation
animationend removes element from DOM — no invisible click-blocking remnant
Inline links: inherit alert colour, underline with underline-offset:2px
WCAG-compliant colour contrast on all five variant colour palettes
dismiss() function works on any variant — single shared implementation

About this UI Snippet

Alert Banners — 5 Semantic Variants with Icons, Inline Links & Dismiss Animation

Screenshot of the Alert Banners snippet rendered live

Alert banners communicate system messages, user feedback, and status information inline within the page — unlike modals which block interaction, alerts sit within the content flow and can be dismissed without interrupting the user's task. This snippet provides five semantic alert variants (success, info, warning, error, and neutral) with matching SVG icons, dismissible close buttons with a slide-out animation, and inline link support.

The five semantic variants

Each variant uses a distinctive colour palette for the background, border, and text: success (green — task completed, data saved), info (blue — informational notice, scheduled event), warning (amber — approaching limit, possible problem), error (red — action failed, payment declined), neutral (grey — product update, new feature announcement). All colours are WCAG-compliant against their respective backgrounds.

SVG icons

Each variant has a contextually appropriate SVG icon: a circle with checkmark for success, a circle with info "i" for info, a warning triangle for warning, a circle with × for error, and a coffee cup icon for neutral updates. All icons are inline SVG — no icon library required.

Entry animation

Alerts enter with a CSS keyframe animation: opacity 0→1 and translateY(-6px)→0 over 0.2s. This subtle slide-in draws the eye without being jarring. The animation is defined once on .alert and applies to all variants.

Dismiss animation

Clicking × adds the .dismissing class, which triggers a CSS animation: opacity to 0, max-height to 0, padding to 0, and margin to 0. The animationend event removes the element from the DOM. The max-height collapse avoids any JavaScript height calculation — the same pattern as the bottom sheet and upgrade banner snippets in this library.

Inline links

The alert body supports inline anchor elements styled with underline-offset: 2px and the alert's base colour for the link text. This lets alerts include actionable links ("Upgrade your plan", "Update billing info", "View changelog") without breaking the alert layout or colour system.

Using in your project

Add any variant's HTML to your page where the alert should appear. Wire the dismiss button. For dynamically shown alerts (e.g., after form submission), create the alert element with JavaScript, set its variant class, append it to a container, and run the dismiss function on the close button click.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out the collapse animation by hand — paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the dismiss keyframe animates opacity, max-height, padding, and margin together to zero without any JavaScript measuring the element's real height, and why the animationend listener (not a fixed setTimeout) is used to remove the node. The same assistant is useful for optimizing it — asking whether five separate variant classes with duplicated structure could be generated from one shared template plus a color map instead. It's just as good for extending the banners: ask it to add an auto-dismiss timer with a pausable countdown on hover, stack multiple dynamically-created alerts with a toast-like queue, or add an "undo" action button that only some variants show. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a set of dismissible "alert banner" components in plain HTML, CSS, and JavaScript — no libraries, with at least five semantic color variants (success, info, warning, error, neutral).

Requirements:
- Each alert is a single flex row containing an SVG icon appropriate to its meaning (checkmark circle for success, info circle, warning triangle, X circle for error, a neutral icon), a body section with a bold title and a lighter-weight supporting message (which may include an inline link), and a small close button.
- Every variant must use its own background, border, and text color combination that passes accessible contrast, with the inline link inheriting a color that fits its variant.
- On page load, each alert must play a brief CSS keyframe entrance: fading in and sliding down slightly from a few pixels above its resting position.
- Clicking the close button must add a "dismissing" class to that specific alert (not affect sibling alerts), which triggers a second CSS keyframe that simultaneously animates opacity to 0 and max-height/padding/margin to 0 — collapsing the space it occupied without any JavaScript reading or setting a pixel height value.
- Only after that dismiss animation actually finishes (listen for the animationend event, not a hardcoded timeout matching the duration) should the element be removed from the DOM.
- Write the dismiss handler as a single reusable function that works identically for any variant, taking the clicked close button, finding its containing alert via closest(), and applying the class/listener logic described above.

Step by step

How to Use

  1. 1
    Click the × button on any alert to dismiss itThe alert slides out via a CSS @keyframes animation (opacity + max-height to 0), then the animationend event removes it from the DOM. Each alert dismisses independently.
  2. 2
    Copy the variant you needCopy the single .alert div for the semantic type you need: success for saves, info for notices, warning for limits, error for failures, neutral for updates. Each variant is a standalone div — no surrounding wrapper required.
  3. 3
    Update the title and message textEdit the strong element for the alert title and the span element for the supporting message. Add anchor tags inside the span for inline action links — they inherit the alert colour scheme automatically.
  4. 4
    Show alerts dynamically from JavaScriptCreate the alert with createElement("div"), set className="alert success", set innerHTML with the icon and body content, and append to a container. Call requestAnimationFrame before appending to ensure the slide-in animation fires.
  5. 5
    Position alerts as page-level bannersFor full-width top-of-page alerts, remove max-width from .page and add border-radius: 0 to .alert. For fixed top-of-viewport alerts, wrap in position:fixed; top:0; left:0; right:0; z-index:100.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component with an onDismiss callback and conditional rendering via useState, or "Tailwind" for a Tailwind CSS version.

Real-world uses

Common Use Cases

Form submission feedback: success and error states
Show a success alert after a form saves successfully and an error alert if the API call fails. Position the alert above or below the form. The slide-in animation draws attention after the form interaction without a disruptive modal.
System status and maintenance announcements
Use the info variant to announce scheduled maintenance, the warning variant for service degradation notices, and the neutral variant for product update announcements. Place at the top of the page or inside a specific feature area that is affected.
Account limit and quota warning notifications
Show the warning variant when users approach storage, API, or seat limits. Include an inline "Upgrade your plan" link that navigates to the billing page. The amber colour signals urgency without the alarm of red.
API error and payment failure communication
Display the error variant when a background API call fails, a payment is declined, or a critical operation cannot complete. Include a specific action link ("Update billing info", "Retry") so users know exactly what to do next.
Study semantic colour systems and CSS dismiss patterns
The five variants demonstrate a semantic colour system where each hue carries a specific meaning. The dismiss animation shows the max-height collapse pattern — animating from auto height to 0 without JavaScript height calculation.
Dashboard metric and data freshness notices
Use the neutral variant to communicate data staleness ("Data last updated 3 hours ago"), the info variant for dashboard tips, and the success variant to confirm background job completion without requiring the user to navigate to a separate status page.

Got questions?

Frequently Asked Questions

The .dismissing class applies a CSS @keyframes animation that simultaneously sets opacity to 0, max-height to 0, padding-top to 0, padding-bottom to 0, and margin-bottom to 0. Because all properties are animated from their current value to 0, the alert collapses smoothly without needing JavaScript to read the element's current height. The animationend event fires after the animation completes and calls alert.remove() to clean up the DOM.

Create the alert after the API call resolves: const alert = document.createElement("div"); alert.className = "alert success"; alert.innerHTML = '<svg class="alert-icon">...</svg><div class="alert-body"><strong>Saved!</strong><span>Your changes are live.</span></div><button class="alert-close" onclick="dismiss(this)">×</button>'; container.prepend(alert). Use prepend() to add it to the top of the container. Add auto-dismiss after 5 seconds: setTimeout(() => dismiss(alert.querySelector(".alert-close")), 5000).

Wrap the alert in a fixed container: position: fixed; top: 0; left: 0; right: 0; z-index: 9999; padding: 0. Remove the border-radius from .alert or set it to 0. Set border-left: none; border-right: none; border-top: none to show only the bottom border as an accent line. Add padding-top to the main page content equal to the alert height to prevent content from being hidden behind the fixed alert.

Click "JSX" to download. Manage alerts as an array in useState: const [alerts, setAlerts] = useState([]). Each alert is an object with id, type, title, and message. The dismiss function filters by id: setAlerts(prev => prev.filter(a => a.id !== id)). Map alerts to Alert components. Use a CSS transition on the container for the dismiss animation instead of the DOM-manipulation approach — set opacity and max-height on a state class.