shadcn.io is not affiliated with official shadcn/ui
Static Grid Wall With Compliance Row Logos Block for React
A wall of twelve law-firm wordmarks for a legal-document tool in cells that share their hairlines, closed by one centred line of four outline chips naming the standards it is audited to.
Installation
Overview
A logo wall with a compliance row, for React with Base UI. A centred header, "Trusted by 1,900 law firms" and one sentence, sits over twelve customer wordmarks in cells that share their hairlines, from rail to rail of the page column with + marks where the top rule meets the rails. Under the wall a closing band draws one centred line: "Audited every year to" and four outline chips, each a check and a standard written as text (SOC 2 Type II, ISO 27001, GDPR, HIPAA), never a certification logo. The chip band ends the block, so the next section's top rule closes it. Each wordmark is real text in its own lettering with an icon beside it, above it, after it, in a ring or knocked out of a badge, in one muted colour that turns to the text colour on hover. All twelve sit two by six on a phone, three across from sm and four across from lg. It's built from Guides, Badge and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. For products whose customers ask about audits before they ask about features.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file. Each entry is a name, an icon (any Lucide icon), a lettering and a mark. The lettering is the Tailwind classes for the name's type, such as font-serif italic or font-semibold text-xs uppercase tracking-[0.25em]; the mark places the icon: inline, badge, ring, trailing or stacked. The names are fictional placeholders.
How many logos should the wall have?
Twelve, or another multiple of twelve: it divides into two, three and four columns, so every row is full and the shared hairlines never frame an empty cell. A wall that doesn't fill its last row shows the border colour in the gap.
How do I change the compliance chips?
Edit STANDARDS, a list of names. Each becomes an outline badge with a check; they wrap onto a second line on a narrow screen and stay centred. The chips are text on purpose: an audit body's mark is trademarked, so the block names the standard and nothing more. List only what you hold.
Why is there no line under the chips?
The chip band ends the block. On a page the next section draws its own top rule along the band's foot, so a line here would double it, and the column has no bottom padding for the same reason.
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 start-aligned proof block for a payroll tool: a band of four figures between two hairlines, then twelve customer wordmarks as an open wall with no lines of its own.
- Pro
A bento of proof for a secrets-management tool: one tall customer story beside four compliance cells, each a check, a standard written as text and a context line, in cells that share their hairlines.
- Pro
Featured Focal With Compliance Row Logos
Flagship customerA hub of proof for an endpoint-security tool: a flagship customer in a framed card, a connector down to six supporting wordmarks, and a closing band of four compliance cells with a line of detail each.
- 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
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.