Floating
A banner that floats above page content with rounded corners and a dismiss button. Announce a promotion or update without pushing the layout down.
A banner that floats above page content with rounded corners and a dismiss button. Announce a promotion or update without pushing the layout down.
Search blocks by description or jump to a page.
Floating Banner sits fixed at the bottom of the viewport, centered horizontally with rounded corners so it hovers above the page without disturbing the layout. The banner holds a short message in two parts: a bold label and a follow-on sentence, separated by a small dot. To the right of the message a secondary button with an arrow icon invites the reader to act.
The message, label, and button copy are the only pieces that need to change for a new campaign. The pill shape and fixed position are self-contained, so you can drop this banner onto any page without adjusting the surrounding layout.
Reach for this block when you want to surface a time-limited offer or announcement without interrupting the page flow. It suits a creative agency or studio homepage where the primary hero and portfolio sections should breathe freely but you still want a persistent nudge toward a promotion or new service. Because it floats rather than pushes content down, it is less disruptive than a top bar and more persistent than an inline callout.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The banner is a single persistent strip, so any short, high-priority message fits the frame:
Tip: keep the message under fifteen words so it reads at a glance and the button stays visible without the strip growing too tall.