React CTA Section with a Staggered Photo Collage

Pro

A split call to action with faces. On the left, a two line headline such as No hidden fees, ever. No surprises., a line about a free trial and two buttons. On the right, five photos of different heights arranged in a staggered collage, like prints pinned at slightly different levels.

CTA Section With Staggered Image Grid block preview

People next to the promise

CTA Section with Staggered Image Grid is a React and Tailwind CSS call to action section that pairs a short promise and two buttons with a staggered grid of five photos. It works in Next.js or any React app, in light and dark.

Photos of people make a CTA feel like an invitation from a team rather than a form to fill in. A staggered layout keeps five images lively without the visual weight of a full gallery, and its uneven edge draws the eye back toward the buttons.

The headline accepts any React node, so you can decide exactly where lines break, which matters for short, punchy promises.

Two halves

Headline scale

The heading grows from 32px on phones to 46px on large screens, and the lede from 16px to 18px, so the promise stays the loudest thing beside the photos.

Headline

A ReactNode, so you can wrap each line in its own span. The default keeps the first line on one row from 640px.

Lede

One line under the headline, typically the trial terms.

Buttons

A white secondary and a blue primary, each with its own label, link and optional click handler.

Photo collage

Exactly five photos at fixed positions inside a box with a 410 by 354 aspect ratio, with staggered heights.

Layout

Copy and collage side by side from 1024px in a container up to 1120px, stacked below that.

When a photo CTA helps

Use it when

Service businesses, agencies and teams that want to show real people.
You have five good photos with consistent lighting.
A free trial or no fees message is your main promise.
Both a primary and a learn more action are needed.

Skip it when

Your photos have mixed aspect ratios that crop badly into tall and short slots.
You have fewer or more than five photos; the layout uses exactly five.
The section sits far down a long page and you cannot add lazy loading.
Stock photos are all you have; they weaken the personal effect.
Product screenshots would explain more than faces.

Photos and copy

photos takes an array of src and alt. Only the first five are used, each in a fixed slot, so choose crops that work at different heights. Write alt text that says who or what is pictured.

headline is a node, so pass spans with block display to set your line breaks. lede, the two button labels and links and their click handlers complete it. The default trial copy mentions 30 days and no card; change it to your real terms.

Keep the headline to two short lines. It is set large, up to 46px, and the collage beside it is the visual weight, so a long headline squeezes the photos into a narrower column.

npx wensity@latest add cta-section-with-staggered-image-grid --type block

page.tsx

import { StaggeredImageGridCta } from "@/components/wensity/blocks/cta-section-with-staggered-image-grid";
import { team } from "./team-photos";

export function TeamCta() {
  return (
    <StaggeredImageGridCta
      headline={
        <>
          <span className="block">Real people.</span>
          <span className="block">Real answers.</span>
        </>
      }
      lede="Every account gets a named specialist from day one."
      primaryLabel="Meet your specialist"
      primaryHref="/signup"
      secondaryLabel="How support works"
      secondaryHref="/support"
      photos={team.slice(0, 5).map((p) => ({ src: p.photo, alt: p.name }))}
    />
  );
}

Props

Prop	Type	Default	Description
`photos`	{ src: string; alt: string }[]	-	Five images for the collage. A sixth is ignored.
`headline`	ReactNode	-	The heading. Use block spans to control line breaks.
`lede`	string	"Try it free for 30 days, no card required."	Supporting line. Match your actual trial.
`primaryLabel / primaryHref`	string	-	The blue button.
`secondaryLabel / secondaryHref`	string	-	The white button, for learning more.

Loading and accessibility

Focus rings

Both buttons have visible focus rings, and the white button turns translucent in dark mode instead of glaring.

Proportional collage

The collage keeps its 410 by 354 aspect ratio at every width and grows to 640px wide on tablets before sitting beside the copy.

Eager images

All five photos use loading eager. If the section is below the fold, switch them to lazy to save bandwidth on first load.

Alt text from props

Each photo uses the alt you pass, so describe the people or scene.

Fixed slots

Positions are absolute within the collage box, so the arrangement is stable at every width.

Static

No animation or state; it can render on the server.

Block details

CTA Section With Staggered Image Grid

Category: CTA Sections
Renders: CSS only. Paints as soon as the stylesheet arrives
Theme: Follows the site theme in light and dark
Dependencies: clsxtailwind-merge
Source: 131 lines, 5 KB in one file
Install: wensity add cta-section-with-staggered-image-grid --type block
Tags: light, dark, cta, collage, portraits, trial, conversion
Last updated: October 13, 2026