CTA Section With Tilted Plan Cards

Pro

Adaptive CTA section with a shadowed panel, dashed corner arcs, a centered plan headline, a Get Started pill, and two inward tilted plan cards for Starter and Pro.

When to use CTA Section With Tilted Plan Cards

Use this when the close has to name a seat, not a product shot. The panel is the stage. The headline and Get Started sit in the middle. Starter and Pro hang off the lower corners and tilt in, so the offer reads as two objects on a table rather than a pricing grid. The dashed arcs are decoration. They keep the empty corners from looking unfinished.

Skip it when you have three seats, a yearly switch, or a feature matrix. Two cards is the whole argument. Flattening the tilts turns this into a generic two column price row, which is not why the layout exists. The shipped copy uses Choose the plan that fits your team best, a twenty dollar Starter, a sixty dollar Pro, and Start Free Trial on both cards. Replace the heading, both plan names, both prices, the five rows on each card, and every href before this ships.

Block details

Category
CTA Sections
Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxtailwind-merge
Source
273 lines, 9 KB in one file
Install
wensity add cta-section-with-tilted-plan-cards --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, cta, pricing, plans, tilted, conversion
Last updated

More cta sections