5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Tdb6,

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.

5a:[["$","$L5d",null,{"post":{"id":"019c04b2-9a24-706b-926a-43d630bcf67a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"09ae221d-2d2e-4bb6-a543-9edc98fd08a1","name":"Rabii Mhamdi","slug":"rabii-mhamdi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/09ae221d-2d2e-4bb6-a543-9edc98fd08a1/zqgyfs60","followed":false,"followsYou":false},"media":[],"resources":[{"id":"F8qxdA8y4pjwUkBpTwms","resolved":true,"title":"Dismissible Banner","body":"$5e","bodyJson":null,"introduction":"A fully responsive & customizable banner","slug":"dismissible-banner","author":{"framerUserId":"09ae221d-2d2e-4bb6-a543-9edc98fd08a1","name":"Rabii Mhamdi","slug":"rabii-mhamdi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/09ae221d-2d2e-4bb6-a543-9edc98fd08a1/zqgyfs60","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/F8qxdA8y4pjwUkBpTwms/dismissible-banner-AO4rzBMigxJqGUphK0GmAjTWo8lUoG","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-12T11:25:28.239Z","updatedAt":"2026-01-28T19:28:14.949Z","publishedAt":"2026-01-28T13:02:19.684Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://topbanner.framer.website","price":"10","paymentUrl":"https://squareui.lemonsqueezy.com/checkout/buy/5cb1bc57-e262-448c-9497-f2ce955ad4e9?discount=0","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"6owbGdHy7InoD1fIM330","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-28T13:02:19.684Z","updatedAt":"2026-01-28T13:02:19.684Z","reported":false}}],"$L5f"]

Suggested for you