Skip to main content

Banners

A banner is an awesome embedded formfactor that lives above, below or on top of your interface.

Banners are typically used to provide some sort of announcement and usually persist until the user acknowledges or dismisses them.

Placement​

Banners can be placed at the top of the user's page or at the bottom.

You can further control the type of placement:

  • Default: the banner is treated like a standard inline element. As such, it won't scroll with the page and will push down/up other elements.
Don't see your banner? 🕵️

Choosing a Bottom position + Default placement will cause the banner to appear at the bottom of the page, and you may need to scroll down to find it!

  • Overlay: if selected, the banner will float above content, outside the DOM flow and hiding a bit of the content behind it. This is particularly handy if you don't want to impact anything in the page itself.
  • Sticky: if selected, the banner will stick to the top or bottom of the window/viewport. We recommend using this placement for particularly important or urgent announcements that require your users' attention. Overdoing this one for non-critical nudges can be annoying (in fact, you probably shouldn't use a banner for anything too optional).