Quote Card Grid

About this block

Quote Card Grid leads with a short headline and lede, then lays your testimonials out as a tidy two-column grid of cards. Each card carries the customer's words and closes with a gradient avatar, name, and role.

The header and the cards are independent, so you can rewrite the headline, swap the quotes, or add and remove cards without touching the rest. Avatars are built from theme tokens, so the whole block adapts to light and dark with no external images.

When to use

Reach for this block when you have a handful of strong, evenly weighted quotes and want them to read as a set rather than one hero voice. It suits the middle of a landing page for a fintech or banking product, after the core features are on screen but before pricing, where a grid of proof points from real operators and founders builds confidence ahead of the ask.

A natural flow around it on a Modern SaaS page:

Before

• A hero section to state the promise and drive the first click
• A feature section to show the product doing real work

After

• A pricing section to convert the trust you just built
• A closing CTA to capture the click

What you can display

The obvious fit is four customer quotes that each make a distinct point. A few other ways to use the frame:

• One outcome, many voices. Let each card highlight a different angle on the same win: speed, cost, clarity, or focus.
• A range of roles. Pair a founder, an engineer, and an operator so a buyer sees themselves somewhere on the grid.
• A launch moment. Fill it with early-access quotes to give a new product instant, varied credibility.

Tip: keep each quote to two or three sentences so the cards stay balanced. When quotes run long, drop to two cards so nothing feels cramped.