shadcn.io is not affiliated with official shadcn/ui
Featured Focal With Compliance Row Logos Block for React
A 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.
Installation
Overview
A featured-customer hub with a compliance row, for React with Base UI. A centred header, "Trusted with 1.2M endpoints", sits over a flagship customer in a framed card: a mark, a "Flagship customer" badge, the name in its own lettering and one line of scale. A hairline drops from the card to a strip of six supporting wordmarks in cells that share their hairlines, and under it a closing band of four compliance cells names the standards (SOC 2 Type II, ISO 27001, GDPR and HIPAA) as text, each with a check and a line of detail. The strip and the band run from rail to rail with + marks where their rules meet the rails, and the band ends the block. The six logos sit in one row from lg, three by two from sm and two by three on a phone; the four standards are two by two until 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 security and infrastructure products that lead with one flagship customer and back it with audits.
FAQ
How do I change the customers?
Edit CUSTOMERS for the six supporting logos and FLAGSHIP for the card. A supporting logo is a name, an icon (any Lucide icon), a lettering (the Tailwind classes for the name's type) and a mark that places the icon: inline, badge, ring, trailing or stacked. The names are fictional placeholders for your own customers. Keep a multiple of six so the strip has no empty cell at any width.
Why are the standards written out, with no certification logos?
An audit body's mark is trademarked and licensed, so the block names each standard in text with a check. Edit STANDARDS: each is a name and a detail. List only what you hold.
What is the line between the card and the strip?
A one-pixel line of the border colour, drawn with CSS, that joins the card to the strip's top rule. It is decorative and hidden from assistive technology. The card's corners and the strip's rule carry + marks from the Guides component.
Is the block accessible?
Yes. The header is an h2; the supporting customers are a list named "Supporting customers", with each name as text and its icon hidden; the standards are a list named "Compliance standards" with each standard as an h3. Nothing is focusable, so the hover colour on a logo is only a visual touch. Each wordmark keeps its own direction on a right-to-left page, as a logo would.
Related
- Pro
Featured Focal Hub Logos
Flagship customerA flagship customer in a framed card with a hairline tree down to a bracket of six supporting wordmarks, the caption "Integrates with" sitting on the line, for a release-management tool.
- 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
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.
- Pro
Featured Focal With Metric Trio Logos
Flagship customerA flagship customer for a billing tool in a wide framed card with the modules it runs, closed by a full-width band of three large figures: utilities, years of history and uptime.
- Pro
Featured Focal Wide Card Grid Logos
Flagship customerA wide flagship band over a grid of six wordmarks for a bookkeeping tool: plate, wordmark and tenure at the start, one big figure at the end, both rail to rail.
- Pro
Inset Featured Focal Logos
Flagship customerA split for a patch-management tool: one flagship customer in a raised panel at the start, six integrations as rows with a Live status at the end, a solid divider between.