Skip to main content
Walls and grids

Review grid widget with equal-height cards

Tidy rows of review cards, every one the same height, for pages where structure matters as much as the praise.

Last updated

Customize the Review GridStart 7-Day Free Trial
  1. 1Step 1Review Grid chosenNot the right fit? Compare every layout side by side.Compare layouts
  2. 2Step 2Customize itColors, fonts and card style, previewed live as you change them.Open the builder
  3. 3Step 3Embed itPaste one snippet into Webflow, Framer, WordPress, Shopify or any site.See how to embed

Customize the Review Grid

Customization

Stars, buttons and links
#7c3aed
Colors & size
Rating star icon color
#f59e0b
Review card fill color
#0c1020
Reviewer name text color
#ffffff
Quote content text color
#e2e8f0
Type & card shape
How large the whole widget renders
Match my page is usually best. The widget takes on your section color
A different arrangement on phones. Switch the preview to Mobile to see it
Font family used for reviews
Card corner border radius
Card border
#1e293b
How each review card is arranged
Author & Identity
Show avatarProfile photo icon
Show authorFull name of reviewer
Show job title and companyJob position and company name
Show first names onlyTruncates last names, e.g. Jamie W.
Badges & Metadata
Show ratingStar rating icons
Verified badgeVerified buyer badge
Show sourceSource platform, e.g. Google, Trustpilot, G2
Show dateTimestamp, e.g. 2 hours ago
Delivery
Inline, or floating over your page
Text & Media
Cuts the quote and offers the rest behind a link
Show photos and videoPhotos and video attached to a review
Heading & buttons
Show a headingHeader title above widget
Show the overall scoreAn aggregate rating above the reviews
Show a tab per platformOne tab for each review source
Show a call-to-action buttonCall-to-action button
Show a Write a review buttonSends visitors to your review form
Show "Powered by"Footer brand watermark
SAMPLE REVIEWS

LIVE PREVIEW: Review Grid

Verified

“We put the review wall under our pricing table and prospects quote the reviews back to us on calls.”

Jamie Whitfield
Jamie Whitfield
Founder & CEO @ Northbeam Studio
Google logoReview from Google
Verified

“StoryProof made collecting and showing real customer video reviews effortless for us.”

David Anderson
David Anderson
Founder
Trustpilot logoReview from Trustpilot
Verified

“The widget looks native on our site. Nobody can tell it is embedded.”

Kieran Walsh
Kieran Walsh
Co-founder & CEO @ Relay HQ
G2 logoReview from G2
Verified

“Collecting video reviews used to be the hardest part. Now it takes one link.”

Allison Bennett
Allison Bennett
StoryProof customer
Google logoReview from Google
Verified

“Set up in ten minutes, and support answered the one question I had straight away.”

Katelyn Ruiz
Katelyn Ruiz
Product Designer @ The Design Brief
Product Hunt logoReview from Product Hunt
Verified

“Real faces and real voices sell far better than anything we could write ourselves.”

Nathan Carter
Nathan Carter
StoryProof customer
Facebook logoReview from Facebook
Powered byStoryProof
Review Grid

Try this widget on your website

Copy the code below and paste it into your website.

<div data-storyproof-demo data-layout="grid"></div>
<script async type="text/javascript" src="https://storyproof.io/widget.js"></script>
See guides for
Shopify logoShopify install guideWordPress logoWordPress install guideWix logoWix install guideWebflow logoWebflow install guideSquarespace logoSquarespace install guideFramer logoFramer install guideNotion logoNotion install guideGhost logoGhost install guideWooCommerce logoWooCommerce install guide
Powered byStoryProof

What is the Review Grid widget?

The Review Grid lays reviews out in even rows and stretches every card in a row to the height of the tallest. Short reviews get breathing room and long ones are kept in step, so the section lines up with the columns of the rest of your page.

It honours the same card settings as the Testimonial Wall, video included. The difference is intent: the wall says “look how many”, the grid says “read these, one at a time, in order”.

Where the Review Grid works best

  • A reviews or customers page, where visitors compare stories and expect a clean layout they can scan row by row.
  • A product or feature page, where the reviews sit between other grid-based blocks and should share their rhythm.
  • A site with a strict design system, where ragged columns would look like a rendering bug.

When to choose a different layout

  • Choose the Testimonial Wall when you have many reviews of very different lengths and want them packed densely.
  • Choose the Featured Review when one review deserves more room than the rest.

What the Review Grid can show

Name, photo, job title and company, stars, date, platform badge, verified badge, the review text with optional truncation, and attached photos or video. Card colour, border and corner radius apply to every card, and the card style setting can move the author to the top or centre the whole card.

Setting it up

  1. 1Set a truncation length so one long review does not stretch its whole row. The full text stays one click away.
  2. 2Use tags to choose exactly which reviews appear, since the grid gives every one of them equal billing.
  3. 3On phones you can keep the grid or swap it for a carousel or a list.

Review Grid questions

Testimonial wall or review grid: which should I use?

Use the grid when the section has to line up with the rest of your page or when you want every review read on equal terms. Use the wall when you have lots of reviews of mixed length and want the volume to show.

Can the grid mix written and video reviews?

Yes. Video reviews appear as cards in the grid, and you can set the video shape and whether the written review shows with the clip.

How do I stop one long review from stretching a whole row?

Set a truncation length. Reviews longer than it are cut, and the rest is offered behind a link, so rows stay compact.

Related layouts

Further reading: Review widgets: what they are and how to choose one · Compare every layout

1-Line Embed Integration

Embed on Any Platform With One Snippet

No developer skills needed. Copy your widget's two-line snippet, paste it into your site builder, and your testimonials appear wherever you put it.

Works With Every Website Builder:

FramerWebflowWordPressShopifyNext.js / ReactHTML / Tailwind
embed-widget.html
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>
Loads asynchronouslyEdits apply without re-pasting
Previous layoutTestimonial WallMasonry columns, mixed heightsNext layoutTestimonial ListCompact stacked rows

Every StoryProof widget layout

19 layouts, each with its own page, live preview and setup guide. Pick by where the widget will sit on your site.

Walls and grids

One story at a time

Video

Strips and banners

Compact proof

Let your customers make the case for you

Put your customers’ own words on the pages that sell. Start your 7-day free trial today.

Nothing to install • 7 days free • No credit card required