Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Split Metric Band Logos Block for Vue

A headline, one sentence and a Shine Button at the start, six customers open in three columns and two rows at the end, and a band of three figures across the foot.

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 split logo block for Vue with Ark UI, closed by a band. At the start, a headline for a wholesale pastry service, "Fresh pastry on every counter by opening", one sentence and a Shine Button. At the end, past a divider that meets the page's top rule at a + mark, six cafe and hotel customers with no cell lines, three across and two down. Across the foot, a band of three figures (customers, pastries a week, orders in before opening) in one list between hairlines. The band draws only its top rule and ends the block, so the next block's top rule closes it. On a phone the copy comes first, then the customers two across, then the figures one per row. Built from Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a section that backs its logos with numbers.

FAQ

How do I change the customers?

Edit CUSTOMERS at the top of the file. Each entry is a name, an icon, a lettering and a mark. Keep six: three across and two down, or two across and three down on a phone. The names are fictional placeholders for your own customers.

How do I change the figures?

Edit FIGURES at the top of the file: each entry is a value and a label. The figures are one description list, so a screen reader hears "Bakeries, cafes and hotels, 1,900". Each value is wrapped in a bdi element so a right-to-left layout keeps "99.2%" in order. Keep three: they sit side by side from sm and stack below it.

Why doesn't the band have a bottom rule?

The next block's top rule is its bottom edge. A rule of its own would double that line a few pixels above it, so the band stops at the foot of the figures.

How does it fit on a phone?

The copy comes first, then a rule with + marks and the six customers two across, then the band's three figures one per row between hairlines. Nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The copy and the customers fade up once when the page loads, with CSS transitions, and a wordmark's colour eases on hover. With reduced motion every transition is off and the section simply appears.

All 100 logos blocks