CTA Section With Staggered Image Grid
ProAdaptive 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
