shadcn.io is not affiliated with official shadcn/ui
Full-Width Quote Band Testimonials Block for React
An edge-to-edge testimonial band for Halyard, a deploy platform: a compact header with one link, a large quote whose first sentence leads in the text colour, and a hairline strip of three facts about the customer along the foot.
Installation
Overview
Break up a long page with a band that runs from one edge of the screen to the other. The section carries a quiet tint across the whole width, and the page column's rails and top rule run through it. A compact header names the story and holds one Shine Button that links to the full case study. One large quote fills the middle: its first sentence reads in the text colour and the rest in the muted one, so the headline survives a skim. A three-cell strip along the foot gives the context that makes it credible: the customer's funding stage, how many engineers they have and how long they've been a customer. The strip sits on the page colour between its own rules, which meet the rails in + marks. It's built from Data List, Avatar, Guides and Shine Button, with your theme's tokens, and CSS-only entrances. It follows the page theme, so it reads as a section of the page rather than a card on it. Made for pages where who is speaking matters as much as what they say.
FAQ
How do I change the quote and the facts?
Edit FEATURED for the quote and the author, and FACTS for the strip. The quote has two strings: headline, the sentence that leads in the text colour, and quote, the rest in the muted colour. Each fact is a label and a value, and the strip is a grid of three on screens from sm up, so keep it to three facts; with two or four, change sm:grid-cols-3 to match. Keep every value short, since it's set large: a figure, a stage or a duration.
How is it full width, and can I put it inside a container?
The tint is on the section, which has no width of its own: the page decides, and the content sits in the standard max-w-6xl page column in the middle, with its top rule bleeding to the edges. Inside a narrower container the tint simply fills it. To drop the tint, remove bg-muted/40 from the section; the block keeps its lines.
How do screen readers read the facts?
The strip is a real description list: each label is a dt and its value a dd, so a screen reader reads "Engineers, 180+". The value is shown above the label, which is only a visual order; the label still comes first in the markup. The quote is a figure with a blockquote and a figcaption, under an h2.
Does it work in right-to-left languages?
Yes. The dividers between the facts are on the inline start edge, so they flip with the reading direction, the cells run in reading order and the values sit in a bdi so "180+" and "14 months" keep their order.
What happens on a phone?
The header, with its button below the text, comes first, then the quote, which steps down from text-4xl to text-2xl so it reads at 320px without scrolling sideways. The three cells stack in one column, each with a line above it instead of a divider beside it.
Does it follow the theme, and how do I change the tint?
It follows the page theme, light or dark: the tint is your muted colour at 40% and the strip is the background colour, so nothing is forced dark. Change the tint by editing the opacity on the section, or use bg-card for a stronger band. The Shine Button is the only primary control in the block.
Related
- Pro
Docblock Quote Testimonials
Chats and postsA split testimonial for a build tool: the headline and a Shine Button on the left, and on the right one customer quote written as a code docblock in an editor window framed by hairline corners, with line numbers, comment colours and the author as @author and @role tags. It follows the theme.
- Pro
Seconded Quote Testimonials
One big quoteA spotlight quote on a raised card inside a tinted shell that follows the theme, with the evidence turned outside it: a row of overlapping avatars on the shell, each a button that opens that team's own one-line agreement.
- Pro
Spotlight Testimonial Card
One big quoteOne customer quote for a field-service app on a figure framed by hairlines with + marks on its corners, lit by a pointer-following spotlight: a soft glow and a grid that shows only where the light falls, which also follows keyboard focus on any control you place inside it. A Shine Button in the header row links to the full story.
- Pro
Case Study Testimonial
Results and figuresA customer case study for a freight-tracking app, split by a hairline divider: the headline, a Shine Button and an at-a-glance list beside Challenge, Solution and Result bands with a headline figure and a pull quote.
- 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
Testimonial Quote CTA
Social proofA split call to action led by one customer quote, with a marker stroke drawn across its key phrase and the author beneath in the wide cell, and the headline and a Shine Button to the full story in the narrow one.