Skip to content

Floating banner

A Floating Banner presents users with relevant, short information and one or two CTAs related to the message. A banners is persistent on the screen, therefore users can either ignore it or interact with it - by dismissing it or by selecting a CTA. Banners can be displayed either at the top or at the bottom of the screen.

Floating Banner Overview

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS VariableTypeDescription
--z-floating-banner--topdistance
--z-floating-banner--bgcolor
--z-floating-banner--colorcolor

Accessibility

...