shadcn.io is not affiliated with official shadcn/ui
Testimonial Embedded Split Features Block for Vue
A feature split that opens with a customer quote at display size, then three feature rows beside a framed drawing that sets a laptop's stack against production's, each layer marked as matching or not.
Installation
Overview
A feature section for Vue with Ark UI whose header is a customer's words. A band at the top sets one quote at display size with the speaker's avatar, name and role under it. Under a shared hairline, a split divider separates three feature rows (each with a check, a title and a sentence) from a framed greyscale drawing: your laptop and production side by side, five layers of the stack, each with a mark for whether the two values match, and a count of how many do. Below lg the order is quote, features, drawing. It's built from Avatar, Badge, Guides and lucide icons, with CSS for the entrance and your theme's tokens for every colour. For developer tools where one engineer's sentence says it better than a headline would.
FAQ
Where is the section's heading?
The section's h2 is in the markup for assistive technology and is visually hidden, because the quote is the header sighted readers see. Edit its text in the first band, and the quote and the speaker in the figure beside it.
How are the matches counted?
The drawing reads its numbers from LAYERS at the top of the file: a layer matches when its two values are equal, and both the count and the flagged badge are worked out from that list. Change a value and the mark, the count and the badge follow.
Is the drawing accessible?
It is decoration and is hidden from assistive technology, so the three feature rows beside it carry the same facts, including that a setting which differs is flagged before the push. The feature rows are a list with an h3 each.