shadcn.io is not affiliated with official shadcn/ui
Featured Quote Reverse Split Logos Block for React
A school group's quote on a raised card, with the school's wordmark large in a framed figure with + marks on its corners, for a school administration tool.
Installation
Overview
A reverse-split featured-quote logo block for React with Base UI. A school group's quote sits on a raised card: a quotation mark, a two-sentence blockquote, and under a hairline the person who said it, with an avatar, a name and a role. Beside it, the school's wordmark stands large in a framed figure with + marks on its corners: a ring icon, the name in heavy lowercase type, how long they've been a customer and how big they are. The quote comes first in the page's reading order, so a screen reader and a phone both start with what was said; from lg the figure sits at the start, ahead of the card, and the block reads as the mirror of the plain split. The card lifts with a ring and a shadow, so it stands out in a light theme as well as a dark one. Built from Avatar and Guides, with a CSS transition for the entrance and your theme's tokens for every colour. For a customer story with a strong name, between the features and the pricing.
FAQ
Why does the figure come second in the markup but first on screen?
The quote is the content, so it comes first for screen readers, keyboard users and phones, and the figure is the decoration around it. From lg the figure takes the first grid column with lg:col-start-1 lg:row-start-1, so the two swap places on screen without a reordered DOM. Below lg they stack in reading order: card, then figure. To put the figure at the end instead, delete those two classes.
How do I change the school and the quote?
Edit SCHOOL and QUOTE at the top of the file. SCHOOL is the name, an icon (any Lucide icon), the lettering classes for the name's type, and the two small lines under it. QUOTE is the text and the person: initials, name and role. Keep the quote to two sentences, one of them with a number in it.
Where is the heading?
The block has an h2 that is visible only to screen readers ("Larkmoor Academy runs on Pebblecreek"), because the quote and the wordmark are the heading. If you want a visible one, replace the sr-only class and move it above the grid; the block's rails and top rule stay where they are.
Why a ring and a shadow on the card?
In a light theme the card colour and the page colour are almost the same, so a card with no edge disappears. A ring in the text colour at low opacity and a soft large shadow keep it lifted in every preset, light or dark. Nothing on the card is a fixed colour.
Related
- Pro
One flagship customer's wordmark plate beside a display-size quote and who said it, for a vet-clinic booking tool, split by a hairline divider.
- Pro
A library system's quote on a raised panel in a tinted shell, its key phrase marked with a highlighter stroke, beside the library's wordmark set as a poster.
- Pro
A survey tool customer's quote under a ruled band that carries a rating chip, five stars and 4.9 from 312 reviews, beside the customer's wordmark plate.
- Pro
Quote Cards Bento Logos
BentosFour 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.
- Pro
Resizable Split Testimonials
Quote gridsA featured quote and two supporting quotes for a checkout platform in a resizable split inside a framed figure: drag the divider, or focus it and use the arrow keys, to give either side more room, with a Shine Button in the header row.
- Pro
Featured Hero Testimonial
One big quoteA giant centred quote set as typography in a ruled band, with small avatar and icon chips sitting between its words like inline pictures, and a footer band that splits into the author and a Shine Button to the full story.