Figma inline CTAs components

An inline CTA is the prompt that interrupts nothing. It sits at the end of a settings page, in the gap where a dashboard has nothing to show yet, under the billing table, at the foot of a long document.

The reader is already scrolling, and the card is simply the next thing in the column. That is the whole trick, and it is why these are shaped like content rather than like advertising.

In the column, not in a slot

NN/g's eyetracking on banner blindness found that people skip anything shaped like an ad, skip anything sitting where ads normally sit, and then skip legitimate content that happens to be near it.

The defence built into these cards is restraint. They are 768px wide on desktop with 24px of padding, a heading, one line of supporting text, and a pair of 36px buttons, using the same border language as the panels above them. If a prompt needs a louder background color to get noticed, the problem is usually where it has been put.

The two cards that earn their height

The light ones are 150px tall: an actions card with two buttons, and an image card. Email capture is 180px, a receipt 186px, a payment method 214px.

Then the plan cards, which are twice the size and worth it. Change plan is 320px and nests a bordered card holding a 32px featured icon, the plan name, the price with its billing period, and two buttons.

Upgrade plan is 346px and spends the extra height on three benefit rows, each a 24px check icon beside two lines of text, before it asks for anything at all. The size difference is the lesson. A prompt that shows what you get can justify 346px; one that says go pro and stops cannot justify 150.

The same card on a phone

Mobile is 343px wide and the proportions shift more than you would guess. The actions card goes from 150px to 202px, because the two buttons stop sharing a row and stack full width at 311px each.

The image card goes from 150px to 410px, because the 239px image sitting beside the text becomes a 343 by 200 block above it, and upgrade plan lands at 410px as well.

A card that reads as a footnote on desktop takes a third of a phone screen, so use one per view and place it where the scroll naturally pauses. Buttons stay 36px tall throughout, comfortable for a cursor; if you are holding the design to the 44px minimum that WCAG's target size criterion asks for at AAA, that stacked mobile row is the place to add it.

Card, banner, or empty state

Three components compete for this job and they are not interchangeable. A banner sits above the page and speaks for the entire product, which makes it the wrong shape for something about this one screen.

An empty state takes over a region that has no content in it yet, and disappears the moment it does. The inline CTA is for a screen that already has content and one more thing worth offering, which is why it turns up on settings pages and billing screens more than anywhere else.

The image, actions, change plan and upgrade cards carry no dismiss control, so if yours will appear on every visit, that is the first thing to add. All of it is drawn for desktop and mobile, in light and dark.

The same cards exist in code when you get there. Untitled UI React inline CTAs are open source, built with Tailwind CSS and React Aria, with the responsive action rows and button semantics handled for you.