shadcn.io is not affiliated with official shadcn/ui
Headline Cell Logo Wall Block for Solid
A wall whose headline is one of its cells, for a wholesale food-ordering product: a four by four grid in shared hairlines where a two-by-two cell holds the heading, a line and the Shine Button, and twelve wordmarks fill the rest.
Installation
Overview
A logo wall for Solid with Ark UI, where the headline is one of the cells. A four by four grid shares its hairlines from rail to rail; its first two-by-two cell holds the heading ("Ordered by 1,800 kitchens"), one sentence and the block's Shine Button, and twelve customer wordmarks fill the other twelve cells. The grid starts at the page's top rule and ends the block, so the next section's top rule closes it and a stacked page never doubles a line. Each wordmark is real text in its own lettering with an icon placed beside it, above it, after it, in a ring or knocked out of a badge, muted until hovered. A phone shows the heading cell first, full width, over eight logos two by four, so every row is full. Built from Guides, Shine Button and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. For a product that wants its call to action inside the proof.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file: each is a name, an icon (any Lucide icon), a lettering and a mark, which places the icon (inline, badge, ring, trailing or stacked). Keep twelve: with the heading cell covering four, they complete four rows of four, and every row is full so the border colour never shows through an empty cell. On a phone PHONE_COUNT sets how many show; keep it even.
Is the heading still a heading?
Yes. The heading cell holds the block's h2. It is the first item of the list named "Customers", ahead of the twelve logos, so the grid stays one real list and the page's outline still has its heading.
Where does the button go?
It is a link (href="#"): point it at your sign-up or your catalogue.
The Shine Button's asChild receives its props: spread them onto your router's link.
Why does the wall start at the top rule?
The heading is inside the grid, so the grid is the block: it starts at the page's top rule and ends the block with no bottom line. The heading cell's own padding sets the space above the title.