Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Featured Focal With Metric Trio Logos Block for Ark UI

A 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.

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 flagship customer with three figures, for React with Ark UI. A start-aligned header, "The utilities that bill with Millrace" and one sentence, sits over a wide card framed with + marks on its corners: a mark, a "Flagship customer" badge, the customer's name in its own lettering and its tenure, and at the end a row of badges naming the four modules it runs. Under the card a full-width band holds three large figures (utilities on the product, years of meter history, uptime), its top rule meeting the rails at + marks. The band ends the block, so the next section's top rule closes it. The figures are side by side from sm, each a large number over its label; on a phone they're one per row, the number at the start and the label at the end. It's built from Guides, Badge and a Lucide icon, with a CSS transition for the entrance and your theme's tokens for every colour. For any product with one customer worth naming and three numbers that back it.

FAQ

How do I change the figures?

Edit METRICS: each entry is a value and a label. Each figure is a term and its description in one list, so a screen reader hears "Uptime on bill-run days, 99.99%". The values sit in a bdi element so a sign or a unit stays in reading order in a right-to-left layout. The band is drawn for three.

How do I change the flagship customer and its modules?

Edit FLAGSHIP (the name and the tenure line) and MODULES (what the customer runs, as badges). The mark is a Lucide icon in a tinted square; swap it for the customer's own artwork at the same size. The tenure is written as a fixed past year, so it doesn't go stale.

Why does a figure say years of history, not years as a customer?

A count of years since a date changes every year and goes stale in the page's source. The figures here are properties of the product, so they stay true until you change them.

Is the block accessible?

Yes. The header is an h2, the modules are a list named "What Lakeshore runs on Millrace" and the figures are a description list. The flagship mark is hidden from assistive technology because the name beside it says the same. Nothing in the block is focusable.

What moves, and what happens with reduced motion?

The header, the card and the band fade up once when the page loads, with CSS transitions. With reduced motion the transitions are off and the section simply appears.

How does it fit on a phone?

The card stacks its mark and name above the module badges, which wrap. The three figures take a row each, divided by hairlines, with the number at the start and its label at the end. Nothing scrolls sideways at 320 pixels.

All 100 logos blocks