Skip to main content

Banners

A banner is another embedded formfactor, that lives within rather than above your interface. Well, it really lives above or below.

Banners are typically used to provide some sort of announcement, and typically persists 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.
  • Overlay: if selected, the banner will float above content, outside the DOM flow. 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 of the viewport. We recommend using this placement for particularly important or urgent announcements that require your users' attention. Overdoing this one for lesser nudges can be annoying (in fact, you probably shouldn't use a banner for anything too optional).

You can also control the margin around the banner.