Contained Image Vignette CTA
Contained, framed photo CTA with a centered headline and single primary action, darkened by an oklch radial vignette and one soft primary glow.
Vandoko CTA — Contained Image with Vignette
Contained, framed photo CTA with a centered headline and single primary action, darkened by an oklch radial vignette and one soft primary glow.
Installation
$npx shadcn@latest add @vandoko/vkb-cta-03Synthesis
Design synthesis (not a recolor): shadcnblocks structure + Mobbin form (Customer.io / HubSpot / Clearbit classic-SaaS landing language) + Vandoko color & content (oklch tokens, cyan as signal, brand-true copy).
Lineage
| Property | Value |
|---|---|
| Source | @shadcnblocks/cta42 |
| Version | 1.0.0 |
| Curated | 2026-05-25 |
| License | Commercial |
Sources
- shadcnblocks — Cta 42 - Contained image CTA with radial vignette (payload)
- Mobbin (page-coherent form spec): Customer.io · HubSpot · Clearbit
Modifications
- rebuilt the radial + linear vignette from rgb(0 0 0/…) to oklch(0 0 0 / …) stops to satisfy the oklch-only rule
- added one soft bg-primary/15 blur-3xl glow as the page's single allowed accent band
- framed media rounded-2xl border shadow-lg (the allowed accent surface); recolored hardcoded text-white → token foreground/muted
- Vandoko CTA copy (Ship the outcome, not just the screen. / Start a sprint), kept placeholder image url
- registry-alias imports + lucide only, dropped utils regDep, eslint-disable above the img
Ported by shadcnblocks-pages-importer v1.2.0 → component-creator (landing-page6, two-front campaign).
Related Components
Bold Cyan Color-Block CTA
Page18's single saturated color-block moment: an edge-to-edge cyan band with a centered confident headline, supporting line, and pill CTAs in crisp white-on-cyan contrast. Contra-style flood; static.
Full-Width Image CTA
Full-bleed closing CTA over a full-width image with a foreground scrim and drop-shadowed copy for readable contrast, anchored by a single rounded primary call to action.