UI components · Marketing
CTA Section
Also called: Call to action, CTA banner, Final CTA, Closing CTA
A standout block at the end (or middle) of a marketing page with one headline and one main button. It gives visitors a final push to sign up, start a trial, or contact sales after they've read the pitch.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a CTA section above the footer. Max content width 960px, 24px corner radius, dark background, 64px padding top and bottom. On the left, a 36px white headline and one line of 16px light gray text. The headline should give one concrete reason (for example "Open today, get paid tomorrow"; replace it with something my product can really do). On the right, a 48px-tall primary button "Start free trial" (same text as the hero's main button) and an outlined secondary button "Talk to sales." Below the buttons you can add one line of 13px small print about the trial, but only state terms that really exist; if there aren't any, drop that line. On mobile, stack everything and make the buttons full width.
Send to
01Decide
Does your content look like this?
Check both columns to confirm CTA Section is what you need.
Use CTA Section when
- At the end of a landing page or product page, when visitors need a clear next step after reading the pitch
- After a persuasive point in the middle of a long page (for example after testimonials), to nudge visitors to sign up
- Event pages and feature launch pages that need to funnel visitors to one sign-up or trial entry point
Pick something else when
The first screen of the page. Use a hero section to explain what the product is first.
Use insteadHero SectionMaintenance notices and short-term promo reminders
Use insteadAnnouncement BannerEveryday actions in admin or tool pages. Just use a button.
Use insteadButton
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A CTA section after every other block, each with different button text, so the page feels desperate
- 02
Three or four equally loud buttons (trial, demo, download, contact), so visitors don't know which one to click
- 03
An empty headline like "What are you waiting for?" next to a "Free forever" promise that doesn't exist
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
One headline, one line of supporting text, and one or two action buttons, usually inside a full-width dark or light gray block. The buttons can have a line of small print next to them (trial terms, whether a card is required).
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A CTA section (Call to Action) usually sits at the end of a landing page, right above the footer, and sometimes in the middle of a long page too. The structure is simple: one concrete headline ("Open today, get paid tomorrow"), one line of supporting text, one primary button, and at most one secondary button, maybe with a line of small print about the trial. The background is often a dark or light gray block that stands apart from the sections around it.
It and the Hero Section are both "headline + button," but the hero is on the first screen and has to explain what the product is, usually with a product image. A CTA section shows up after visitors already understand the product, so it skips the explanation and just offers the next step. It's also different from an Announcement Banner, which is a notice bar at the top of the page (maintenance, promotions) that can be dismissed. A CTA section is part of the page content. And unlike a lone Button, it's a whole block that gives the button a reason.
Keep the button text the same as the hero's main button (both say "Start free trial") instead of wording it differently each time, and push only one main action per block. Only mention promises like "No card required" or "Cancel anytime" if those policies really exist. Two or three per page is plenty. Putting one after every section feels pushy.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-cta-section- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
section:is([class*="cta" i], [id*="cta" i]):is(div, aside):is([class*="cta" i], [id*="cta" i]):has(h2, h3):has(a[href], button):not([class*="cta" i] *, [id*="cta" i] *, nav *, header *)
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
cta-sectioncta-bannercta-boxcta-blockcta-areacta-cardcall-to-actionfinal-ctabottom-ctaclosing-cta
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
CtaSectionCallToActionCtaBannerFinalCtaCtaBlock
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with heading
- Priority
- 4 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026