shadcn.io is not affiliated with official shadcn/ui
Featured Quote Stacked Layout Logos Block for Vue
A centred featured quote for an HR benefits tool: the customer's wordmark hangs from the top rule like a tab, with a display-size quote and its author under it.
Installation
Overview
A stacked featured-quote logo block for Vue with Ark UI. Everything is centred on the page column. The customer's wordmark, an icon in a ring and the name in spaced capitals with "Customer since 2020" under it, hangs from the block's top rule like a tab: its top edge sits on the line, its other three edges are a hairline, and it is the block's heading. Under it, a display-size blockquote in two sentences and the person who said it, with an avatar, a name and a role, stacked and centred. There are no buttons and no interior lines, so the quote has all the room; the rails and the top rule, which line up with every other block, are the structure. Built from Avatar and Guides, with a CSS transition for the entrance and your theme's tokens for every colour. For a single story that has to read at a glance, a closing proof before a pricing table or a footer.
FAQ
How does the wordmark sit on the top rule?
The block's h2 is a box with a border on three sides (border border-t-0), rounded at its bottom corners, centred at the very top of the column, where the page's top rule runs. Its missing top edge is the rule, so the tab looks hung from the line. It has a solid card background, so the rule is never seen through it.
How do I change the customer and the quote?
Edit CUSTOMER and QUOTE at the top of the file. CUSTOMER is the name, an icon (any Lucide icon), the lettering classes for the name's type and the tenure line. QUOTE is the text and the person: initials, name and role. Two sentences read best at this size; the quote is centred and balanced, so a third makes it a paragraph.
Is it accessible?
Yes. The heading is the customer's name and tenure, the quote is a figure holding a blockquote and a figcaption, and the curly quotation marks are text inside the quote, wrapped in a bdi element so a right-to-left page keeps them in order. The icon and the avatar are decorative and hidden from assistive technology, because the names are already text. The wordmark keeps its own direction, as a logo would.