shadcn.io is not affiliated with official shadcn/ui
Split Quote Panel Hero Block for React
A reverse split hero that opens with a customer quote: a tinted panel on the start side in three ruled bands (quote, author, two results), and the headline and a Shine Button at the end.
Installation
Overview
A reverse split-layout hero that leads with a customer's words, for React with Base UI, shown for Dockside, a deployment platform. A tinted panel on the start side runs flush to the page column's start rail and its foot, and is cut into three bands by solid rules with + marks on the rails: the quote at display size with an oversized quotation mark, its author with an avatar, name and role, and two results in a pair of cells (9 min median deploy, down from 40, and 78% fewer pager alerts a week). A divider separates it from the copy at the end: an announcement pill, the headline, one sentence, a ShineButton link, an outline Button link and a one-line note. The copy comes first in the page's source and the panel moves to the start from lg. It's built from Announcement, Status, Shine Button, Button, Avatar and Guides with Tailwind CSS, and the parts settle in with CSS transitions that stay still under reduced motion. For SaaS products with a strong customer endorsement, enterprise landing pages, and any page where one testimonial should earn trust before the pitch.
FAQ
How do I change the quote and who said it?
Edit QUOTE at the top of the file: the text, the author, their role and company, and the initials shown in their avatar. Short quotes work best at this size: under 30 words keeps it to four or five lines. RESULTS holds the two figures in the bottom band, each a value and a label. Only quote customers who have agreed to it, and keep the figures true to what they said.
Can I show the author's photo instead of initials?
Yes. Put an AvatarImage with the photo's src and the author's name as alt before the AvatarFallback in the caption's Avatar. The image shows once it loads, and the initials stay as the fallback while it loads or if it fails. The Avatar docs show the parts.
Why does the quote come after the headline on a phone?
The copy is first in the page's source, so the h1 is the first thing a screen reader, a search engine and a phone reach. From the lg breakpoint up, lg:col-start-1 lg:row-start-1 puts the quote panel on the start side, as in the design, without changing that order. Swap the two columns in the markup and drop those classes if you want the quote first everywhere.
How does a screen reader read the quote?
The quote and its author are one figure: the words are in a blockquote and the author is its figcaption, so the attribution stays tied to the quote. The big quotation mark is decoration and hidden. The two results follow as a description list, each figure with its label, and the figures' values and signs stay in order in a right-to-left page.
How do the bands line up with the page's lines?
Each band draws its rule with the Guides component rather than a border, so the + marks land exactly where the rule meets the page column's rails. The panel ends in the results band and has no bottom padding: the block's last line is the next section's top rule. The divider is the copy column's start border, with + marks where it meets the top rule.
How does the hero fit on a phone?
The two columns stack below the lg breakpoint, copy first, then the quote panel under a ruled line. The headline steps down from text-5xl to text-4xl and the quote from text-3xl to text-2xl, and the two calls to action wrap onto two lines when they don't fit side by side, so nothing scrolls sideways down to 320 px.
Related
- Pro
Split Layout Testimonial Card Hero
TestimonialsA split hero for month-end close software: the pitch, a Shine Button and an outline button beside a customer's five-star testimonial in a card in a card, with the two results it names.
- Pro
Split Social Proof Wall Hero
TestimonialsA reverse split hero with a wall of nine short customer quotes on shared hairlines at the start, the centre one raised and rated, and the headline and a Shine Button at the end.
- Pro
Split Avatar Grid Hero
Logos and social proofA compact split team hero: a headline, a Shine Button, a second action and a line of team facts beside a two-by-two grid of large avatars with names and roles in cells that share hairlines.
- “Pro
Featured Testimonial Hero
TestimonialsA compact start-aligned hero with a headline, a Shine Button and an outline action over a closing band that holds one customer's quote, large, beside their rating, name, role and the number it is about.
- Pro
Avatar Stack Side Rail Hero
Logos and social proofA compact hero for a community: a headline, a Shine Button and a second action beside a side rail of proof: a stack of member avatars over a line of social proof, then three stats in ruled rows.
- Pro
Split Layout Founder Letter Hero
TestimonialsA start-aligned hero with a headline, a Shine Button and three ruled promises, over a full-width band holding the founder's letter as three cells of one quotation and a signature row.