Modern SaaS Testimonial: Review Card Wall

Review Card Wall shows reviews from a ratings site as a marquee of cards that fades out at the edges of the content column. A heading row opens it, and below it two rows of Surface cards scroll in opposite directions, the second half a card out of step with the first. The rows keep moving at one steady speed and stand still for anyone who prefers reduced motion.

Each card carries five amber stars, a one line title, the review in two lines and the reviewer: a face from the shared avatars, a name and a role.

When to use

Use it when you have many short reviews and want the volume to show, such as ratings from G2 or Capterra for a team tool. The moving rows carry more reviews than fit on screen, and the pill leads to the full list.

A natural flow around it on a Modern SaaS page:

Before

• Feature Sections that the reviews can confirm
• Logo Clouds to show the companies behind the reviewers

After

• Pricing sections while trust is high
• CTAs that start a trial

What you can customize

• Reviews. Edit the reviews array: title, review, name, role and avatar. Keep every review to two lines at the card's full width so the cards in a row stay level.
• Rows. rows picks which reviews sit in each row; any count works, and each row keeps the same speed. Change the speed in marqueeCss, where a row takes sixteen seconds per card.
• Fade. --fade sets how far in from each edge of the column the cards fade out: 2rem on phones and 6rem from md.
• Stars. The stars are amber, a step brighter on dark, and the rating is read out to screen readers.

Tip: lead the first row with the review that names your product, so the center card says who the wall is about.