Figma marketing website banner components

A banner is the site talking over itself. Maintenance on Sunday, a card that failed, a trial with four days left, a cookie notice nobody wanted. It runs above everything else on the page, which is exactly why the rule is one at a time, and exactly why so many sites end up with three of them stacked.

What a banner costs, in pixels

On desktop the numbers look harmless. Across a 1,440px frame the slim type is 48px tall, countdown 50, dual action 60, single action 64, and the text field type 66. Put two up and the top 120px of the page has gone before anyone reads a word.

On a 375px phone those same components stop being harmless: slim is 74px, countdown 112, single action 174, text field 194, and dual action 232, because the message, the buttons and the close control can no longer share a line. That last one is roughly a third of the visible height on a small handset. It is the argument against stacking banners in numbers rather than in principle.

Reserve the space rather than injecting the bar after the page has painted. Late banners are one of the most dependable sources of layout shift on the web, which is the point web.dev's guidance on cookie notices keeps coming back to, along with the observation that a bar at the bottom is far less disruptive than one that pushes the whole page down.

Dismissal is part of the component

The 48px slim bar and the 60px dual action bar carry the same 36px close control, sitting beside the buttons where there are any. Three rules travel with it. Remember the dismissal, because a banner that returns on the next page view is a bug wearing a feature's clothes. Never let the close control be the only way forward for something the reader genuinely has to act on, since there should be a real action next to it.

And treat the countdown type with care: it updates itself, which puts it under the WCAG criterion on pausing, stopping and hiding, where auto-updating content has to offer a way to stop or hide it. The close button is that mechanism, so a countdown bar without one is a compliance problem as well as an irritation.

Full width or floating

The size property does more than set the width. Full width spans the 1,440px frame edge to edge and reads as system level: an outage, a billing failure, something true everywhere in the product. Floating is 1,216px, sits inside the content column instead of touching the browser edges, and reads as page level: a promotion, a new feature, something you may ignore.

A message about one screen rather than the whole product was probably never a banner at all, and belongs in an inline CTA or a notification. Both come in a default theme and a brand theme that fills the bar with your primary color. A brand colored bar pulls attention off everything below it, so spend it once, on the message you actually want read.

Making it stick in a prototype

Select the bar, open the Prototype panel, and set the scroll behavior position to Fixed so it never moves, or Sticky so it scrolls until its top edge meets the top of the frame and then holds. Figma's notes on scroll behavior flag the catch that costs people twenty minutes: a layer inside an Auto Layout frame cannot be fixed unless it is set to absolute position first, and everything in this kit is Auto Layout.

When it is time to build, the same bars exist in code. Untitled UI React banners are open source, built with Tailwind CSS and React Aria, with dismissal and focus handling already wired up.