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.
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.
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
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.
