Upgrade Banner
An inline muted banner row with a Sparkles icon square, a semibold plan lead with muted benefits, a rounded Upgrade button, and a See plans link.
An inline muted banner row with a Sparkles icon square, a semibold plan lead with muted benefits, a rounded Upgrade button, and a See plans link.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Upgrade Banner is a single quiet row that nudges a visitor toward a paid plan without shouting. A soft icon square holds a Sparkles mark, the message leads with the current plan in semibold so the eye lands on the situation first, and the muted second half lists what upgrading unlocks. On the right a primary rounded Upgrade button carries the action while a low key See plans link offers the slower path.
The banner uses a slimmer section shell than a full marketing section, so it reads as an inline element between larger blocks rather than a destination of its own. Every part is swappable: change the icon, rewrite the lead and the benefits line, or point the two actions at billing and pricing routes. It is a server component with no state, so it renders anywhere without client code.
Use this block when the page already carries the main story and you want a gentle conversion prompt between sections. On a team collaboration product, it works well midway down a features page: a visitor who has just read about advanced roles sees that their Free plan does not include them, with the upgrade path one click away. It also translates directly into logged in surfaces like a settings or usage page.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is a plan upgrade prompt. A few other ways to use the frame:
Tip: keep the semibold lead to one short factual sentence and put all persuasion in the muted half. The contrast between the two is what makes the banner feel informative instead of pushy.