shadcn.io is not affiliated with official shadcn/ui
Split Metric Band Logos Block for React
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.
Installation
Overview
A split logo block for React with Base 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.
Where does the button go?
It is a link (href="#"): point Start a wholesale account at your sign-up. It is a Shine Button, a band of light that sweeps across it once on hover and keyboard focus.
The button renders the link it's given with render, with nativeButton={false}.
Related
- Pro
Split Open Grid Logos
SplitsA headline, one sentence and a Shine Button at the start, and nine customers open in three columns and three rows at the end, with the divider as the only line.
- Pro
A start-aligned proof block for a payroll tool: a band of four figures between two hairlines, then twelve customer wordmarks as an open wall with no lines of its own.
- Pro
A benchmark for a streaming-analytics tool: three tiles that set the product against the industry average with a large figure and two bars each, a header row with two buttons, and a closing strip of eight wordmarks.
- Pro
Featured Focal With Metric Trio Logos
Flagship customerA flagship customer for a billing tool in a wide framed card with the modules it runs, closed by a full-width band of three large figures: utilities, years of history and uptime.
- Pro
A headline, one sentence, a Shine Button and an outline button at the start, and six customers in a hairline grid at the end, three across and two down.
- Pro
Metric Split Logos
MetricsAn oversized figure and two buttons at the start, a column of six customer wordmarks at the end past a divider, for a dependency-graph product.