shadcn.io is not affiliated with official shadcn/ui
Testimonial Split About Block for Vue
A construction-management company's description beside one customer quote: a split on a solid divider with the quote on a card in a card, read-only stars, the author and a link to their story.
Installation
Overview
An about section for Vue with Ark UI, written for Joistly, a fictional construction-management app for site teams. A split on a solid divider: the company's description (a heading, a bold opening line and two short paragraphs) sits at the end of the row, and one customer's quote sits at the start on a card in a card from the catalog's Frame. In the card, five read-only stars drawn in the foreground colour, a short blockquote, the author with an avatar and role, and a link to the full story. The description comes first in the reading order, so a phone reads the story and then the quote. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Frame, Rating and Avatar, with a CSS entrance and your theme's tokens for every colour: the stars and the card are never the primary colour. For about pages that want one believable voice next to the company's own. The quote is example text.
FAQ
How do I change the quote?
The quote, the author, the role and the company are plain text in the card; the initials are in the avatar's fallback. Keep the quote to two sentences: it is set large, and a long one pushes the card taller than the text beside it. Swap the avatar fallback for an image if you have the customer's permission to use it.
Why are the stars not announced one by one?
The stars only draw the score, so they are inert and hidden from assistive technology; next to them a short line says "5 out of 5 stars from a customer" in text. They are the catalog's Rating in read-only mode, coloured with the foreground token instead of its default amber, so they follow every theme.
How is the quote marked up?
It is a figure with a blockquote first and the author in the figcaption last, so assistive technology reads the author as the quote's caption. The link to the full story sits after the figure, inside the card. The description's heading is the section's only h2.
How does it fit on a phone?
The heading and the description come first, then a rule, then the card at full width with its inner padding reduced. The quote still lands on the first screen of a phone. In a right-to-left layout the card moves to the other side of the divider with the reading order unchanged, and the link's arrow turns around.