shadcn.io is not affiliated with official shadcn/ui
Two Weight Headline Logos Block for Ark UI
A two-weight headline in one large heading, claim in full-strength text and continuation in muted, over twelve open wordmarks in four columns and three rows divided by row hairlines only.
Installation
Overview
A logo wall with a two-weight headline for React with Ark UI. One large h2 carries the whole message: "640 running clubs coach with Pacewell." in full-strength text, and "Their runners just open the plan." in the muted colour. Under it, twelve open wordmarks sit in four columns and three rows with no cell lines: only a hairline above each row, meeting the rails at + marks, divides them. The last row ends the block, so the next block's top rule closes it. A phone shows nine, three across, with each icon over its name.
FAQ
How do I change the headline?
It is one h2 with two spans: the claim is plain text, the continuation is a span in text-muted-foreground. Put the count in a bdi so it keeps its digits on right-to-left pages. Keep the two parts one sentence each; text-balance evens the lines.
How are the row hairlines drawn?
The wall's rows have a fixed height (auto-rows-[6rem], 7rem from md), so the rule above row two sits one row down and the rule above row three two rows down. Each is a Guides with rules="top" and marks="top", pinned there with top-24 and top-48 (and the md values). If you change a row's height, change both offsets.
How do I change the logos?
Edit CUSTOMERS: each entry is a name, an icon, a lettering and a mark (inline, badge, ring or trailing). Keep twelve: four columns by three rows. The last wordmark of each row is hidden below sm, which leaves nine in three rows of three.
What does a phone show?
Nine of the twelve, three across, in the same three rows. Each wordmark stacks its icon over its name so even a ten-letter name fits a 96 px column at 320 px. The names are sized to text-xs or text-sm there and step up from sm.