Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Featured Quote With Supporting Trio Logos Block for Vue

A flagship customer's wordmark and quote for a customer feedback tool, with a closing band of three more customers, each a wordmark and a one-line result.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A featured-quote logo block with supporting customers for Vue with Ark UI. The top of the block is the story: the flagship customer's wordmark on a plate at the start, with "Customer since 2021" under it, and a blockquote in two sentences with the person who said it at the end. Across the foot of the block runs a closing band, its top rule meeting the page's rails at + marks, and in it three more customers separated by hairlines. Each is a wordmark in its own lettering and one line of result ("2.4x more replies to their quarterly survey"). The band ends the block, so the next section's top rule closes it and a stacked page never doubles a line. On a phone the plate comes first, then the quote, then the three customers one per row. The logos stay muted until hovered. Built from Avatar and Guides with Lucide icons, CSS transitions for the entrances and your theme's tokens for every colour. For one story that needs a little breadth behind it.

FAQ

How do I change the three customers?

Edit SUPPORTERS at the top of the file. Each entry is a name, an icon (any Lucide icon), a lettering, a mark (inline, ring or trailing), a bold figure and the result that follows it. Keep it to three: the band is a three-column grid from sm, and a fourth cell would leave the hairlines framing an empty one. Write results that a customer would let you print.

How do I change the flagship and the quote?

Edit FLAGSHIP and QUOTE. The flagship takes the same fields as a supporter, plus the tenure line under the plate. The quote is the text and the person: initials, name and role. The flagship's wordmark is the block's heading, and each supporter's wordmark is an h3 in its cell.

Why is there no line under the band?

The band ends the block. On a page, the next section draws its own top rule along the band's foot, so a line here would double it, and the column has no bottom padding for the same reason. If nothing follows, add a bottom border to the list's wrapper.

Is it accessible?

Yes. The quote is a figure with a blockquote and a figcaption; the three customers are a list named "More customers", each with a heading and a sentence; the figures sit in bdi elements so a right-to-left page keeps them in order. Icons are decorative and hidden from assistive technology, because every name is text. The wordmarks keep their own direction, as a logo would.

What moves, and what happens with reduced motion?

The plate, the quote and the band fade up once when the page loads, each a moment after the last, with CSS transitions; a hovered supporter's wordmark eases from muted to the text colour. With reduced motion every transition is off.

How does it fit on a phone?

The plate, the quote and the three customers stack at the full width of the column, with a hairline between the customers. The quote steps down from text-3xl to text-2xl. Nothing scrolls sideways at 320 pixels.

All 100 logos blocks