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