shadcn.io is not affiliated with official shadcn/ui
Headline Cell Logo Wall Block for React
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 React with Base 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 renders the link it's given with render, with nativeButton={false}.
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.
Related
- Pro
A wall of eighteen customer wordmarks for a month-end close tool, under a compact header with the customer count, in cells that share their hairlines from rail to rail.
- Pro
A dense wall of twenty-four customer wordmarks for a genealogy product, in six columns and four rows with shared hairlines; hovering a logo dims all the others.
- Pro
A four by four wall of customers for an alumni-network product in an inset tray, with fifteen wordmarks and a last cell that is the Shine Button, See all 4,000+ customers.
- Pro
A four by four wall of customers for a wellness-booking product, with a raised two by two cell in the middle that holds the flagship's mark, a chip, one line and a link to its story.
- 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
Centered Logo Cloud Hero
Logos and social proofA compact centered hero for a planning tool: an announcement link, two calls to action and a trusted-by band across the column of eight customer wordmarks in cells that share their hairlines.