Wensity

React CTA section components

10 CTA section componentsLive previewFull source in your repo

The closing band gets one job and one action. These blocks carry the proof next to the button, so nobody reaches the bottom of the page and has to guess what happens if they click.

Browse all CTA blocksRead the docs

Works with

  • React
  • Next.js
  • TypeScript
  • Tailwind CSS

CTA section examples you can copy

Each call to action section is one file covering the band, the copy and the button. Preview it live, then copy the source into your project.

Social proof to place above the call to action

Social proof from the same library, for the band that has to earn its button before anyone reads the label on it.

CTA button components

Call to action button designs for the band itself: an orbit glow, liquid glass, liquid metal, and the plain accessible button underneath them all.

CTA design: how to choose a call to action section

A CTA section, short for call to action section, is the band that closes a landing page with one clear next step. It is not a second hero and not another feature split. Everything above it has already argued the case, so the only decisions left are what the button says, what stands beside it, and whether the visitor believes the people on the other side exist.

Good CTA design comes down to four rules. Give the band one primary action. Write the button as a verb plus an outcome, such as Start free trial or Book a call, rather than Submit or Learn more. Put one piece of proof next to the button, so the click feels safe. Give the button enough contrast to read as the action in both light and dark mode, because a blue that passes on white often fails on near black.

Booking closes suit a product sold through a conversation. CTA Section With Floating Booking Icons is a light full bleed band with a company mark, a powered by badge, a booking headline and one blue free trial pill. CTA Section With Split Booking And Stars puts copy on the left and six overlapping avatars, a five star row with a score and a team count, then Book a call and Start free trial side by side on the right.

Offer closes name what the visitor gets. CTA Section With Tilted Plan Cards holds a headline and a Get Started pill in a shadowed panel, with Starter and Pro tilting inward from the lower corners and dashed arcs filling the empty corners. CTA Section With Checklist And Cart Visual is the ecommerce version: a timer icon, a five minute cart promise, three checked benefit rows and one checkout button beside a shopping cart drawing. Two seats is the whole argument on the first; a third plan belongs in a pricing section.

People closes let faces carry the proof. CTA Section With Overlapping Customer Avatars stacks four faces, a customer count and a rating row inside the cropped top of a phone. CTA Section With Staggered Image Grid sets five office portraits in an offset grid beside a trial headline, and the offset is the design. CTA Section With Scattered Avatars floats ten portraits around a centred card. CTA Section With Centered Contact Avatars is the quiet one, three team faces and a single Contact us button, which fits the end of a documentation or support page.

Quote and community closes borrow someone else's voice. CTA Section With Frosted Glass Testimonial Card nests a five star quote card inside a glass panel beside Demo and Sign up. CTA Section With Instagram Thumbnail Grid lines up rounded thumbnails above a Follow along button and five social marks. Do not ship either with placeholder content, because a lorem quote or an empty feed beside a signup button reads as a brochure.

Replace every number before this goes live. The cart promise, the plan prices, the named quote, the powered by badge, the 35,000 customer count, the 4.8 and 4.9 ratings, the team count and every avatar are samples. Pass the rating as null when there is no real score, rather than printing an invented one. A live page carrying any of them unchanged is claiming a result it cannot support.

Put the band last, above the footer, and use only one per page. A call to action above the fold is a hero, and one halfway down interrupts the argument it depends on. Set the href before you ship, because every one of these bands renders fine with a placeholder link, so a dead close stays invisible in review and only shows up in the funnel a week later.

Frequently asked questions

A CTA section is a full width band, usually at the end of a landing page, that asks the visitor to take one action such as starting a trial, booking a call or buying. It typically holds a short headline, one line of support, the button, and a small piece of proof such as a rating or a customer quote.

Run the Wensity CLI with the block slug, for example npx wensity@latest add cta-section-with-tilted-plan-cards --type block. The CLI writes the component into your codebase and pulls in the packages it needs. You can also open any CTA section on this page and copy the source from the Code tab. There is no provider to wire up.

A label that names the outcome, such as Start free trial, rather than a generic Submit. Enough contrast to read as the main action in both colour modes. Clear space around it, so it is not competing with a second button of equal weight. Where two actions ship, as on the frosted glass panel and the split booking band, the second is styled quieter on purpose.

One, unless the second action is genuinely different. CTA Section With Checklist And Cart Visual, CTA Section With Floating Booking Icons, CTA Section With Centered Contact Avatars and CTA Section With Scattered Avatars ship a single action for that reason. CTA Section With Frosted Glass Testimonial Card, CTA Section With Staggered Image Grid, CTA Section With Overlapping Customer Avatars and CTA Section With Split Booking And Stars ship two, and in every case the second one is styled quieter so it does not compete.

Yes. The two column bands stack into one column with the visual under the copy. The tilted plan cards flatten and sit one above the other. The staggered portrait grid and the Instagram row reduce their tile count rather than shrinking every tile. The scattered avatars thin out so the button keeps its clear space. Test the longest headline at a 360 pixel width before you ship, because closing headlines are usually the ones that wrap badly.

Last, above the footer. Everything the band relies on has to be on the page already: the product shown, the price named, the objections answered. A closing band placed before that work is done asks for a decision the visitor has no basis to make yet.

Where to go next