CTA Section With Tilted Plan Cards
ProAdaptive 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

