---
title: "Dismissible Banner — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Rabii Mhamdi · Text. A fully responsive & customizable banner"
canonical: "https://framer.elliotli.dev/component/dismissible-banner"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Dismissible Banner

# Dismissible Banner

A fully responsive & customizable banner

[View on Framer](https://framer.com/marketplace/components/dismissible-banner/?via=elliot-li)

![Dismissible Banner preview image 1](https://framer.elliotli.dev/og/component/dismissible-banner/12e45b04cb783e99/1600x1200.jpg)

## Summary

A fully responsive & customizable banner

## Description

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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-l1nlku8u-2Jq7sFgLwGcPvEC99NNWKbYqmj2chC)

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](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-sqxsmg16-VsykVYem87JiqYr6C0DSgGpVAoZUvT)Banner Settings

## Rank history [How rankings work →](/terms#rankings)

-   All · #3570

## Details

- **Author**: Rabii Mhamdi
- **Price**: $10.00
- **Published**: 2026-01-28
- **Updated**: 2026-01-28
- **Added**: 2026-01-12
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing