## Banner design in Figma: dismissal, height, and one at a time

How these banner components are built in Figma, covering the slim, dual action, and countdown types.

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](https://web.dev/articles/cookie-notice-best-practices) 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](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html), 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](/content/components/inline-ctas/index.html) or a [notification](/content/components/notifications/index.html). 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](https://help.figma.com/hc/en-us/articles/360039818734-Prototype-scroll-and-overflow-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](/content/react/marketing/banners/index.html) are open source, built with Tailwind CSS and React Aria, with dismissal and focus handling already wired up.

FAQs

## Frequently asked questions

Common questions about the Untitled UI Figma banner components, covering dismissal and full width versus floating.

### What is the difference between a banner and an alert?

Scope and origin. A banner speaks for the whole site or product and sits above the page: maintenance, a promotion, a billing problem. An [alert](/content/components/alerts/index.html) speaks about the thing next to it, usually in response to something the user just did, and lives inside the layout.

If the message would still be true for a visitor who has done nothing, it is a banner.

### Should banners be dismissible?

Almost always, and the dismissal has to stick. The exception is a message the user must act on to keep using the product, such as a failed payment, and even then the bar should carry the action rather than trapping people.

The countdown type has no exception at all, because content that updates itself needs a way to be stopped or hidden.

### Should a banner sit at the top or the bottom of the page?

Top for anything urgent, since that is where people look when something has gone wrong. Bottom for consent notices and promotions, where a bar that appears late at the top shoves the entire page down and wrecks the layout at the worst possible moment.

The floating size works well at the bottom: it stays inside the content column and reads as optional, which is usually what it is.

### Are these banner components included in the free version?

The banners are part of the paid Untitled UI Figma kit. See [pricing](/content/pricing/index.html) for what is included.

The [100% free Figma UI kit](/content/free-figma-ui-kit/index.html) includes core components from the same system if you want to see how it is put together first.

### Is there a React version of these banners?

Yes. [Untitled UI React banners](/content/react/marketing/banners/index.html) are open source, built with Tailwind CSS and React Aria, and mirror these Figma variants.

That includes the dismiss control and the responsive stack on small screens.

Figma UI components

## Foundation Figma components and styles

Icons, styles, design annotations—everything you need to build the foundation of a great Figma design system.

\\
\\
**Color styles** \\
\\
333 styles](/content/components/color-styles/index.html)

\\
\\
**Typography styles** \\
\\
44 styles](/content/components/typography-styles/index.html)

\\
\\
**Logos** \\
\\
3 components + 372 variants](/content/components/logos/index.html)

\\
\\
**Icons** \\
\\
1,993 components + 352 variants](/content/components/icons/index.html)

\\
\\
**Shadows & blurs** \\
\\
18 styles](/content/components/shadows-blurs/index.html)

\\
\\
**Grids & spacing** \\
\\
38 variants + 8 styles](/content/components/grids-spacing/index.html)

\\
\\
**File type icons** \\
\\
1 component + 153 variants](/content/components/file-icons/index.html)

\\
\\
**Social icons** \\
\\
1 component + 102 variants](/content/components/social-icons/index.html)

\\
\\
**Folder icons** \\
\\
1 component + 8 variants](/content/components/folder-icons/index.html)

\\
\\
**Payment icons** \\
\\
1 component + 112 variants](/content/components/payment-icons/index.html)

\\
\\
**Country flag icons** \\
\\
261 components + 783 variants](/content/components/flag-icons/index.html)

\\
\\
**Integration icons** \\
\\
1 component + 32 variants](/content/components/integration-icons/index.html)

\\
\\
**Cursors** \\
\\
1 component + 50 variants](/content/components/cursors/index.html)

Figma UI components

## Figma base components

Buttons, inputs, avatars—all of the base components you need for modern product design and websites.

\\
\\
**Avatars** \\
\\
280 variants + 98 styles](/content/components/avatars/index.html)

\\
\\
**Badges** \\
\\
3 components + 666 variants](/content/components/badges/index.html)

\\
\\
**Button groups** \\
\\
2 components + 64 variants](/content/components/button-groups/index.html)

\\
\\
**Buttons** \\
\\
5 components + 940 variants](/content/components/buttons/index.html)

\\
\\
**Checkboxes** \\
\\
2 components + 72 variants](/content/components/checkboxes/index.html)

\\
\\
**Context menus** \\
\\
2 components + 32 variants](/content/components/context-menus/index.html)

\\
\\
**Dropdowns** \\
\\
4 components + 143 variants](/content/components/dropdowns/index.html)

\\
\\
**Inputs** \\
\\
7 components + 188 variants](/content/components/inputs/index.html)

\\
\\
**Multi-select** \\
\\
4 components + 21 variants](/content/components/multi-select/index.html)

\\
\\
**Progress indicators** \\
\\
2 components + 65 variants](/content/components/progress-indicators/index.html)

\\
\\
**Radio groups** \\
\\
2 components + 168 variants](/content/components/radio-groups/index.html)

\\
\\
**Select** \\
\\
6 components + 90 variants](/content/components/select/index.html)

\\
\\
**Sliders** \\
\\
2 components + 39 variants](/content/components/sliders/index.html)

\\
\\
**Tags** \\
\\
4 components + 210 variants](/content/components/tags/index.html)

\\
\\
**Toggles** \\
\\
2 components + 64 variants](/content/components/toggles/index.html)

\\
\\
**Tooltips** \\
\\
2 components + 84 variants](/content/components/tooltips/index.html)

Figma UI components

## Shared Figma assets

Device mockups and useful utility pages—all of the shared assets you need for modern product design and websites.

\\
\\
**404 page headers** \\
\\
1 component + 28 variants](/content/components/404-page-headers/index.html)

\\
\\
**Banners** \\
\\
1 component + 40 variants](/content/components/banners/index.html)

\\
\\
**Credit cards** \\
\\
1 component + 13 variants](/content/components/credit-cards/index.html)

\\
\\
**Design annotations** \\
\\
7 components + 38 variants](/content/components/design-annotations/index.html)

\\
\\
**Device mockups** \\
\\
7 components + 18 variants](/content/components/device-mockups/index.html)

\\
\\
**Email templates** \\
\\
3 components + 22 variants](/content/components/email-templates/index.html)

\\
\\
**Forgot password headers** \\
\\
1 component + 10 variants](/content/components/forgot-password-headers/index.html)

\\
\\
**Log in page headers** \\
\\
1 components + 32 variants](/content/components/log-in-headers/index.html)

\\
\\
**Miscellaneous assets** \\
\\
3 components + 50 variants](/content/components/miscellaneous-assets/index.html)

\\
\\
**Portfolio mockups** \\
\\
6 variants + 52 templates](/content/components/portfolio-mockups/index.html)

\\
\\
**Sign up page headers** \\
\\
1 component + 42 variants](/content/components/sign-up-headers/index.html)

\\
\\
**Verification page headers** \\
\\
1 component + 6 variants](/content/components/verification-headers/index.html)

\\
\\
**Video players** \\
\\
3 components + 36 variants](/content/components/video-players/index.html)

Figma UI components

## Application UI/Dashboard examples

Dashboard, settings, form layouts—useful examples for everything you need to design modern dashboards and products.

\\
\\
**Dashboard examples** \\
\\
60 page examples](/content/components/dashboards/index.html)

\\
\\
**Informational page examples** \\
\\
60 page examples](/content/components/informational-pages/index.html)

\\
\\
**Settings page examples** \\
\\
42 page examples](/content/components/settings-pages/index.html)

Figma UI components

## Application UI/Dashboard Figma components

Modals, tables, alerts—everything you need to design modern and beautiful apps, dashboards and products.

\\
\\
**Activity feeds** \\
\\
2 components + 22 variants](/content/components/activity-feeds/index.html)

\\
\\
**Activity gauges** \\
\\
3 components + 34 variants](/content/components/activity-gauges/index.html)

\\
\\
**Alerts** \\
\\
1 component + 24 variants](/content/components/alerts/index.html)

\\
\\
**Application header navigations** \\
\\
5 components + 80 variants](/content/components/application-header-navigations/index.html)

\\
\\
**Breadcrumbs** \\
\\
2 components + 56 variants](/content/components/breadcrumbs/index.html)

\\
\\
**Calendars** \\
\\
12 components + 82 variants](/content/components/calendars/index.html)

\\
\\
**Card headers** \\
\\
1 component + 4 variants](/content/components/card-headers/index.html)

\\
\\
**Carousels** \\
\\
4 components + 22 variants](/content/components/carousels/index.html)

\\
\\
**Code snippets** \\
\\
1 component + 8 variants](/content/components/code-snippets/index.html)

\\
\\
**Color pickers** \\
\\
6 components + 26 variants](/content/components/color-pickers/index.html)

\\
\\
**Command menus (⌘+K)** \\
\\
5 components + 69 variants](/content/components/command-menus/index.html)

\\
\\
**Content dividers** \\
\\
1 component + 18 variants](/content/components/content-dividers/index.html)

\\
\\
**Date pickers** \\
\\
5 components + 68 variants](/content/components/date-pickers/index.html)

\\
\\
**Drawers** \\
\\
2 components + 50 variants](/content/components/drawers/index.html)

\\
\\
**Empty states** \\
\\
2 components + 36 variants](/content/components/empty-states/index.html)

\\
\\
**File uploaders** \\
\\
3 components + 23 variants](/content/components/file-uploaders/index.html)

\\
\\
**Filters** \\
\\
3 components + 38 variants](/content/components/filters/index.html)

\\
\\
**Horizontal tabs** \\
\\
2 components + 280 variants](/content/components/horizontal-tabs/index.html)

\\
\\
**Inline CTAs** \\
\\
1 component + 14 variants](/content/components/inline-ctas/index.html)

\\
\\
**Line & bar charts** \\
\\
9 components + 116 variants](/content/components/line-bar-charts/index.html)

\\
\\
**Loading indicators** \\
\\
1 component + 12 variants](/content/components/loading-indicators/index.html)

\\
\\
**Messaging** \\
\\
3 components + 42 variants](/content/components/messaging/index.html)

\\
\\
**Metrics** \\
\\
4 components + 36 variants](/content/components/metrics/index.html)

\\
\\
**Modals** \\
\\
3 components + 252 variants](/content/components/modals/index.html)

\\
\\
**Notifications** \\
\\
1 component + 18 variants](/content/components/notifications/index.html)

\\
\\
**Page headers** \\
\\
1 component + 12 variants](/content/components/page-headers/index.html)

\\
\\
**Pagination** \\
\\
3 components + 42 variants](/content/components/pagination/index.html)

\\
\\
**Pie charts** \\
\\
3 components + 68 variants](/content/components/pie-charts/index.html)

\\
\\
**Progress circles** \\
\\
1 component + 10 variants](/content/components/progress-circles/index.html)

\\
\\
**Progress steps** \\
\\
7 components + 92 variants](/content/components/progress-steps/index.html)

\\
\\
**Radar charts** \\
\\
3 components + 12 variants](/content/components/radar-charts/index.html)

\\
\\
**Section footers** \\
\\
1 component + 8 variants](/content/components/section-footers/index.html)

\\
\\
**Section headers** \\
\\
1 component + 12 variants](/content/components/section-headers/index.html)

\\
\\
**Sidebar navigations** \\
\\
9 components + 168 variants](/content/components/sidebar-navigations/index.html)

\\
\\
**Tables** \\
\\
4 components + 204 variants](/content/components/tables/index.html)

\\
\\
**Tree views** \\
\\
3 components + 4 variants](/content/components/tree-views/index.html)

\\
\\
**Vertical tabs** \\
\\
2 components + 264 variants](/content/components/vertical-tabs/index.html)

Figma UI components

## Marketing website examples

Landing pages, blogs, sign up pages—useful examples for everything you need to design modern marketing websites.

\\
\\
**404 page examples** \\
\\
20 page examples](/content/components/404-pages/index.html)

\\
\\
**About page examples** \\
\\
20 page examples](/content/components/about-pages/index.html)

\\
\\
**Blog examples** \\
\\
20 page examples](/content/components/blogs/index.html)

\\
\\
**Blog post examples** \\
\\
20 page examples](/content/components/blog-posts/index.html)

\\
\\
**Contact page examples** \\
\\
20 page examples](/content/components/contact-pages/index.html)

\\
\\
**FAQ page examples** \\
\\
20 page examples](/content/components/faq-page-examples/index.html)

\\
\\
**Landing page examples** \\
\\
40 page examples](/content/components/landing-pages/index.html)

\\
\\
**Legal page examples** \\
\\
10 page examples](/content/components/legal-pages/index.html)

\\
\\
**Log in page examples** \\
\\
12 page examples](/content/components/log-in-pages/index.html)

\\
\\
**Pricing page examples** \\
\\
20 page examples](/content/components/pricing-pages/index.html)

\\
\\
**Sign up page examples** \\
\\
12 page examples](/content/components/sign-up-pages/index.html)

\\
\\
**Team page examples** \\
\\
20 page examples](/content/components/team-pages/index.html)

Figma UI components

## Marketing website components

Landing page header and website sections—everything you need to design modern and responsive marketing websites.

\\
\\
**Blog post sections** \\
\\
3 components + 102 variants](/content/components/blog-post-sections/index.html)

\\
\\
**Blog sections** \\
\\
4 components + 84 variants](/content/components/blog-sections/index.html)

\\
\\
**Careers sections** \\
\\
2 components + 38 variants](/content/components/careers-sections/index.html)

\\
\\
**Contact sections** \\
\\
6 components + 106 variants](/content/components/contact-sections/index.html)

\\
\\
**Content & rich text sections** \\
\\
2 components + 78 variants](/content/components/content-sections/index.html)

\\
\\
**CTA sections** \\
\\
1 component + 60 variants](/content/components/cta-sections/index.html)

\\
\\
**FAQ sections** \\
\\
2 components + 72 variants](/content/components/faq-sections/index.html)

\\
\\
**Features sections** \\
\\
2 components + 122 variants](/content/components/features-sections/index.html)

\\
\\
**Footers** \\
\\
5 components + 192 variants](/content/components/footers/index.html)

\\
\\
**Header navigations** \\
\\
10 components + 397 variants](/content/components/header-navigations/index.html)

\\
\\
**Header sections** \\
\\
2 components + 148 variants](/content/components/header-sections/index.html)

\\
\\
**Metrics sections** \\
\\
2 components + 42 variants](/content/components/metrics-sections/index.html)

\\
\\
**Newsletter CTA sections** \\
\\
1 component + 32 variants](/content/components/newsletter-cta-sections/index.html)

\\
\\
**Press mentions sections** \\
\\
1 component + 4 variants](/content/components/press-mentions-sections/index.html)

\\
\\
**Pricing sections** \\
\\
5 components + 88 variants](/content/components/pricing-sections/index.html)

\\
\\
**Social proof sections** \\
\\
1 component + 20 variants](/content/components/social-proof-sections/index.html)

\\
\\
**Team sections** \\
\\
2 components + 56 variants](/content/components/team-sections/index.html)

\\
\\
**Testimonial sections** \\
\\
3 components + 92 variants](/content/components/testimonial-sections/index.html)

The ultimate UI kit for Figma

## What is Untitled UI?

Untitled UI Figma is the largest UI kit and design system for Figma in the world. Here's everything great about Untitled UI in just 60 seconds.

Untitled UI in 60 seconds

The ultimate Figma UI kit \| Untitled UI from Untitled UI on Vimeo

Playing in picture-in-picture

Pause

Speed

Picture-in-Picture

Show controls

2x

1.5x

1.25x

1x

0.75x

0.5x

\\
Preview in Figma](/content/preview/figma/index.html)

[Buy now](/content/buy/figma/index.html)

Join 380,000+ designers from the world's top companies

### Untitled UI is the best $ I've spent on my business in a long time. I'm going to keep using it and recommending it to every designer I know.

Sam Pierce Lolla

Founder, [Shuffleboard](https://getshuffleboard.com/)

### Over the years we've featured hundreds of UI kits on UXCrush, but Untitled UI is by far the most comprehensive and detailed I've seen yet. A must have for any designer!

Luca Vavassori

Founder, [UXCrush](https://www.uxcrush.com/)

### I've used all UI kits on the market. I can say without a doubt that the Untitled UI kit is the best on the market. It covers everything a designer needs in a modern and efficient way.

Murat Alpay

Product Designer, [@imuratalpay](https://twitter.com/imuratalpay)

### Incredible, and keeps getting better. I’ve tried dozens of UI kits and Untitled UI is the only name you should care about. It stands head and shoulders above the rest.

Jérémy Franck

Designer, [@jrmyfranck](https://jrmyfranck.com/)

### Such a beautiful, detailed, and extensive UI kit. Untitled UI is the perfect foundation for any project. I highly recommend this huge time saver.

Adham Dannaway

Product Designer, [Practical UI](https://www.practical-ui.com/)

### Untitled UI has been an amazing resource that I'm learning to rely upon to spin up ideas in no time. I think I might launch a startup pretty soon by mistake here!

Riccardo Buzzotta

Senior Product Designer, [Spotify](https://www.spotify.com/)

### The sheer scale, details, and organization of this kit is mind-blowing. It covers nearly everything a Designer could need in a modern, efficient and systematic way.

Corey Moen

Senior Brand Designer, [Webflow](https://www.webflow.com/)

### I'm super impressed with this. I love poking around in other peoples UI Kits to see how they think. This is probably one of the most comprehensive I've seen.

Matt Walker

Design Systems, [Mailchimp](https://mailchimp.com/)

### I'm super excited to use this for quick mockups of ideas in Figma. We're always trying to streamline our design process so we can move fast! Definitely recommend.

Jenny Chu

Head of Product, [Eucalyptus](https://eucalyptus.vc/)

### Untitled UI is easily the best UI kit I've used so far. It has an insane amount of components that are all incredibly well-built. I don't even know how many hours this will save.

Sunny Trochaniak

Founder, [NewPulse Labs](https://newpulselabs.com/untitled-ui-review/)

### The attention to detail and thought Jordan has put into this UI kit is unparalleled.

Dan Mcleay

Lead Designer, [Fox Sports](https://www.foxsports.com.au/)

### Untitled UI is incredibly well-organized and the attention to detail is great. I highly recommend this kit to any designer that wants to create beautiful designs fast.

Tom Bekkers

Founder & Creative Director, [Flowbase](https://www.flowbase.co/)

### What an awesome Figma kit... it's an absolute game changer. This is the perfect base for any design system. The size and attention to detail is next level.

Dan Anisse

Co-founder, [Relume](https://www.relume.io/)

### We've been using Untitled to build Himalayas 2.0 and have finished a complete redesign in just a few days. It has everything we need already pixel-perfect.

Abi Tyas Tunggal

Co-founder, [Himalayas](https://www.himalayas.app/)

### Join our affiliate program

A simple and easy way to make 30% of every sale you refer to Untitled UI. Earn up to $2,699.70 on each sale!

[Become an affiliate](/content/affiliates/index.html)

Untitled UI in 60 seconds

[open lightbox](/content/components/banners#/index.html)