CTA Section With Staggered Image Grid

Pro

Adaptive split CTA with a two-line trial headline, Get started and Learn more, and five staggered office portraits on the right.

When to use CTA Section With Staggered Image Grid

Use this when the last band has to prove there are people on the other side of the trial, not another product shot. Copy sits on the left and stays vertically centered on the collage. Five portraits sit on the right in a staggered grid with square corners and a tight ten pixel gap. The offset is the design. Line the tiles up on a regular grid and this becomes a contact sheet beside a headline, which is a different close and a weaker last band overall.

Skip it if you cannot show five real faces, or if the page is already a photo gallery. Stock landscapes will look like a travel ad sitting next to a trial pitch. The shipped copy uses No hidden fees, ever. No surprises, a 30 day trial lede, a blue Get started, and Learn more. Replace the headline, the lede, both hrefs, and every photo before this ships on a live domain. Keep the two actions and the stagger as the structure. A single rounded hero image belongs elsewhere.

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
131 lines, 5 KB in one file
Install
wensity add cta-section-with-staggered-image-grid --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, collage, portraits, trial, conversion
Last updated

More cta sections