Simple Banner
A slim promo banner with a short message and a link. Sits at the top of a store to announce free shipping, a running sale, or a fresh discount code.
A slim promo banner with a short message and a link. Sits at the top of a store to announce free shipping, a running sale, or a fresh discount code.
Search blocks by description or jump to a page.
Simple Banner is a full width call to action strip. A solid primary background spans the entire container, and inside it a two line headline sits on the left while two buttons, a solid secondary action and a ghost secondary action, sit to its right on wider viewports. On smaller screens the buttons stack below the heading.
The heading text and both button labels are independent, so you can swap in any short message and point each link wherever you need. The two button slots can be reduced to one if a single action covers your needs, and the block works just as well at the top of a page as it does mid scroll.
Reach for this block when you want a persistent, high contrast nudge that does not interrupt the page flow. It is a natural fit for a product analytics SaaS that needs to push a free trial prompt to users browsing a pricing or feature page. Compared to a full bleed hero or a modal, this strip is low cost visually and keeps users on the page rather than redirecting attention entirely.
A natural flow around it on an Ecommerce page:
Before
After
All three text and link elements are straightforward to swap:
Tip: because the strip uses the primary color token, it will automatically match your brand palette when you update your theme.