Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Quote Cards Bento Logos Block for React Aria

Four customer quotes for a drone imaging service in cards that stand apart, each led by the customer's wordmark with its result as a chip, then two lines of quote and who said it.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A two by two of customer quotes for React with React Aria. Four cards stand apart on a start-aligned header, each outlined by solid hairlines that overshoot its corners, with a + mark at its start corner. The customer's wordmark leads every card and the result sits beside it as a chip with a rising or falling arrow, then comes a quote of two lines and the person who said it. The logos are the subject: the quotes are short and always attached to one. It's built from Guides, Badge and Avatar, with CSS for the entrance and your theme's tokens for every colour. For products that want social proof with a face and a number, without a full testimonials wall.

FAQ

How do I change the quotes and results?

Edit REVIEWS at the top of the file. Each review has a customer (an icon, its lettering, how the icon sits beside the name, and the name), a person with initials and a role, a quote and a result: a value, what it counts and whether the number falls, which picks the arrow. Keep each quote to two lines so the four cards stay level.

Why does the result have an arrow?

It shows which way the number moved, and a fall can be good news, so the arrow follows the data instead of the sign. The arrow is decorative: a screen reader hears "Result: yield, plus 9 percent" through the text next to it. Arrows that show a trend are not mirrored in right-to-left layouts.

How are the lines drawn?

Each card is a list item with a Guides layer around it: four solid hairlines that overshoot the corners, and a + mark at the start corner. The cards sit apart with gaps wide enough that neighbouring lines never touch. Nothing is a border, so it follows your theme's line colour.

How is it marked up for screen readers?

The cards are items of one list. Each quote is a figure with a blockquote and a figcaption naming the person and role, and the customer's name is real text in the wordmark. The quote is wrapped in a bdi element so its marks stay put in a right-to-left layout.

How does it fit on a phone?

The grid becomes one column of four cards, with the same lines around each. The wordmark and chip share a row and fit at 320 pixels. With reduced motion the entrance is off and the section simply appears.

All 100 logos blocks