React CTA Banner with Overlapping Customer Avatars and a Rating

Pro

A tall, narrow card shaped like the top of a phone, complete with a bezel and a notch, rising out of a blue gradient band. Inside: a row of overlapping customer faces with a count beside them, five stars with an average rating, a headline, a sentence and two buttons.

CTA Section With Overlapping Customer Avatars block preview

Proof stacked above the ask

CTA Section with Overlapping Customer Avatars is a React and Tailwind CSS CTA banner with an avatar group of overlapping customer photos, a customer count and a star rating above the headline and buttons, framed as a phone screen. It suits shops and mobile first products in Next.js or any React app.

An avatar stack is a compact way to say people like you already use this. Putting it, with a number and a rating, at the very top of the CTA means visitors read the proof before the request, which is the order persuasion works in.

The phone frame hints at a mobile product or store without needing a screenshot, and its narrow width keeps the copy tight.

Inside the phone card

Blue button pair

The primary is a blue rounded button with an inset highlight; the secondary is white with a hairline ring. Both have visible focus rings and keep their colours in dark mode.

Phone frame

A card up to 520px wide with a 48px rounded top, a bezel and a black notch pill, emerging from a blue band.

Avatar group

Overlapping round photos, hidden from screen readers since the count beside them carries the meaning.

Count and rating

A customer count with a label, and five stars with an average rating and its label. Setting rating to null removes the rating.

Copy

An h2 and a lede, centred.

Two buttons

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

Where the avatar banner fits

Use it when

A product launch or seasonal drop, where the headline changes but the proof stays.
Stores and consumer apps with a real, sizeable customer base.
Mobile first products that suit a phone frame.
You can source your customer count and rating.
A narrow, centred CTA fits your page rhythm.

Skip it when

Your audience mostly sees the page on desktop and expects a wide banner, since this card stays phone sized.
You would have to keep the sample figures. Thirty five thousand customers and a 4.9 rating are placeholders.
B2B products where a phone frame says the wrong thing.
You have no customer photos you may use.
You need a wide banner across the page.

Numbers you can stand behind

Replace customerCount, customerLabel, rating and ratingLabel with figures you can point to, or pass rating as null to hide the stars. avatars takes src and alt pairs; use customers who agreed to be shown, or illustrated avatars.

headline, lede, ctaLabel, ctaHref, secondaryLabel and secondaryHref set the rest, with onCtaClick and onSecondaryClick for tracking. The default copy is about seasonal fashion arrivals.

Five or six avatars read as a crowd without crowding the count beside them. If you only have permission for two or three faces, a rating without avatars is the more honest choice.

npx wensity@latest add cta-section-with-overlapping-customer-avatars --type block

page.tsx

import { OverlappingCustomerAvatarsCta } from "@/components/wensity/blocks/cta-section-with-overlapping-customer-avatars";

export function ShopCta() {
  return (
    <OverlappingCustomerAvatarsCta
      customerCount="2,400"
      customerLabel="orders this month"
      rating={null}
      headline="Winter knitwear is back"
      lede="Made in small batches. When a colour sells out, it is gone."
      ctaLabel="Shop knitwear"
      ctaHref="/collections/knitwear"
      secondaryLabel="Size guide"
      secondaryHref="/sizing"
    />
  );
}

Props

Prop	Type	Default	Description
`customerCount / customerLabel`	string	"35,000+" / "customers"	The number beside the avatars. Use a real figure.
`rating / ratingLabel`	string \| null	"4.9" / "average rating"	Average rating and its label. null hides the stars.
`avatars`	{ src: string; alt: string }[]	-	Faces in the overlapping group.
`ctaLabel / ctaHref`	string	"Shop now"	The blue primary button.
`secondaryLabel / secondaryHref`	string	"View lookbook"	The white secondary button.

Accessibility and accuracy

Notch and bezel

The frame is a pale grey bezel with a 48px top radius around a 38px inner screen and a black notch pill, in matching dark tones in dark mode.

Sample figures

The default count and rating are invented for the demo and must be replaced or removed.

Decorative avatars

The avatar group and stars are aria-hidden; the count and rating text carry the information.

Labelled buttons

Both buttons expose their label as the accessible name.

Static

No state or animation, so it renders the same for every visitor.

Narrow by design

The card stays under 520px wide even on large screens, which suits a centred band rather than a full width banner.

Block details

CTA Section With Overlapping Customer Avatars

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: 144 lines, 6 KB in one file
Install: wensity add cta-section-with-overlapping-customer-avatars --type block
Tags: light, dark, cta, avatars, social-proof, shop, conversion
Last updated: October 13, 2026