shadcn.io is not affiliated with official shadcn/ui
Bordered Cells Static Grid Wall Logos Block for React
Twelve customer wordmarks for a recipe-costing tool, each in a cell of its own whose lines run past its corners with a + mark, four across on desktop and two on a phone.
Installation
Overview
A logo wall of separate cells for React with Base UI. Under a centred header, "Costed in 9,000 restaurant kitchens", twelve customer wordmarks each sit in a cell of their own. The cells stand apart, and each one's lines run a little past its corners with a + mark at its start corner, so the wall reads as a sheet of drafted frames rather than a table. Wordmarks are real text in their own lettering with an icon beside, above, after or inside a ring or badge, muted until hovered. Four across from lg, three from sm and two on a phone, where the first eight show in four rows. The grid is inset from the page's rails so the overshoot never touches them. Built from Guides and Lucide icons, with CSS for the entrance.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file: a name, an icon, a lettering and a mark for each. The lettering is the Tailwind classes of the name's type; the mark places the icon (inline, badge, ring, trailing or stacked). On a phone the first eight show (PHONE_COUNT), so keep that number even.
Why are the cells apart, with lines past their corners?
Each cell draws its own frame with the Guides component, extended a little past its corners, with a + mark at the start corner. For the overshoot of one cell not to touch its neighbour's, the gap between cells must be wider than the two overshoots together; the grid's gap is, and if you shrink it, shrink the overshoot too.
How many logos should it have?
A multiple of twelve fills every row at two, three and four across, since the cells are apart and an empty slot would show as a gap. On a phone the wall shows eight so the page doesn't scroll through every customer.
Is it accessible?
Yes. The header is an h2 and the logos are a list named "Customers"; each name is text and its icon is hidden from assistive technology. The names use the theme's muted text colour at full strength, which passes WCAG AA, and nothing in the wall is focusable. In a right-to-left layout the grid fills from the right and each wordmark keeps its own direction.
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 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 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.
- Pro
A wall of twelve garden-shop customers in square cells that share their hairlines from rail to rail, each with a large icon, its name and a tiny line saying what kind of shop it is.
- Pro
Sixteen customers of a password manager as icon-only circles in one framed figure, with the customer named in a label on hover and as text for screen readers.
- Pro
Five Cell Bento Logos
BentosExactly five cells for a usage-billing API: one featured customer story as tall as two rows and four single customer cells, each outlined by lines that run past its corners, with one Shine Button in the header.