shadcn.io is not affiliated with official shadcn/ui
Split Layout Testimonial Card Hero Block for Solid
A 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.
Installation
Overview
A split-layout hero between solid rails, for Solid with Ark UI, that puts a customer's word next to your pitch. On one side sit an announcement link, the headline, a supporting sentence, two calls to action (a ShineButton, the only primary control, and an outline Button, both links) and a trust line. Past a divider with + marks, a testimonial sits in a card in a card: a muted shell with + marks on its corners around a raised panel holding five foreground stars, the quote in a real blockquote, the author with an Avatar of their initials, their role and company, and the two results the quote backs up as large figures split by a hairline. The product is Tallyhouse, a fictional month-end close tool, and the customer is a controller at a food company. The copy fades and rises in on load and the card settles in just after, with CSS transitions only. For B2B SaaS, agencies and consulting services, and any page where proof from a customer carries the claim.
FAQ
How do I change the testimonial?
Edit TESTIMONIAL at the top of the file: the quote, the author's author, role, company and initials, the rating out of five and the results, each a value and a label. The stars follow the rating, and screen readers hear it as Rated 5 out of 5. Keep the quote to two sentences: it's set large, so a long one makes the card taller than the copy.
Can I use a photo instead of initials?
Yes. Put an AvatarImage before the AvatarFallback inside the Avatar and give it the person's photo; the initials stay as the fallback while it loads. The avatar is decorative, because the name is written next to it.
Why are the stars not gold?
The block keeps colour for its one action, so the stars are drawn in the foreground colour, and the raised card gets its emphasis from structure: a shell, a ring and a shadow, not a coloured fill. The rating is also in the page for screen readers as text.
What does a screen reader hear?
The announcement link, the headline (the block's one h1), the paragraph, the two links and the trust line, then the testimonial as a figure: the rating, the quote, and the author's name, role and company. The quote is a real blockquote, and the results are a description list, so each figure is read with its label.
How does the layout adapt to phones?
The two columns stack below the lg breakpoint, with the testimonial under the copy and a rule between them. The two results stay side by side, the headline steps down from text-5xl to text-4xl and the actions wrap when they don't fit, so nothing scrolls sideways down to 320 px and the Shine Button ends within the first screen.