Dismissible Banner

A fully responsive & customizable banner

Dismissible Top Banner Component for Framer A highly customizable, responsive banner component built specifically for Framer projects. Designed to work across all screen sizes, this component gives you full control over content, styling, typography, and behavior without compromising user experience. Whether you’re announcing a product launch, promoting an event, sharing an update, or displaying a system-wide message, this banner adapts to your design system and brand guidelines. It supports persistent dismissal logic, configurable call-to-actions, and precise visual customization, making it suitable for real-world SaaS, fintech, startup, and marketing websites. Content & Layout Control Easily manage all banner content directly from Framer’s properties panel: Title – Primary message with customizable font and color Description – Optional supporting text that can be shown or hidden Link Label & URL – Add a call-to-action with full control over label, destination, and behavior Open in New Tab – Toggle link behavior for external or internal destinations You can independently toggle the visibility of: Title Description text Call-to-action link Close (dismiss) button This allows the banner to scale from minimal alerts to richer promotional messages. Advanced Styling & Visual Customization The component exposes granular styling controls so it can blend seamlessly into any interface: Background color with optional gradient support Independent color controls for: Title Description Link Divider element Close button background (default and hover) Close icon Border radius control for the banner container Adjustable padding for precise spacing Optional icon before content Typography is fully configurable: Separate font controls for Title , Description , and Link Works with system fonts or custom fonts already loaded in your Framer project Smart Dismiss Behavior (Session-Based) This component includes a robust dismissal system: Session Key – Define a unique key per banner instance Dismiss Duration – Control how long the banner stays hidden after dismissal (including permanent dismissal) This makes it ideal for: One-time announcements Limited-time campaigns Non-intrusive alerts that respect user preferences Once dismissed, the banner will not reappear unnecessarily, improving overall UX. Banner Settings

A fully responsive & customizable banner