CTA With Dashed Grid Lines
The section spans three columns with dashed border lines at all four edges. Lines use CSS linear gradients with 50% transparency to create the dash pattern. A mask composite excludes the center, fading lines toward the middle of each edge.
Lines extend beyond the container using negative positioning calculated from a configurable offset. The GridLineHorizontal and GridLineVertical components accept offset props to control line length and fade distance.
The main content area spans two columns with heading, colored text highlights, and two buttons (primary gradient and secondary outlined). The right column displays a customer quote with name and title. A dashed border separates the columns.
Useful for SaaS products, enterprise solutions, B2B services, and any CTA that benefits from a structured, professional feel with social proof.
Explore more
Part of CTA Sections ยท All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time



