shadcn.io is not affiliated with official shadcn/ui
Hover Card Customer Logos Block for Radix UI
Twelve drawn customer wordmarks for a parcel-logistics company in cells that share their hairlines, each opening a hover card with the shop's trade, how long it has been a customer and what it sends.
Installation
Overview
A customer wall for React with Radix UI, written for Carrybox, a fictional parcel-logistics service for online shops. Under a centred header, twelve wordmarks sit in cells that share their hairlines and run from rail to rail, four across on wide screens, three from sm and two on a phone, which shows the first eight. Each wordmark is drawn, an icon and a name in its own lettering, never a real brand. Every cell is a link with a hover card: it opens on hover and on keyboard focus and tells the shop's trade, how long it has been with Carrybox, counted in "Year 2" rather than a calendar year, and how many parcels it sends a month. Where a card can't open, on a touch screen, the same two facts sit under the wordmark instead. The wall ends the block, so the next block's top rule closes it. It's built from Guides and Hover Card, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages, partner pages and any customer wall that wants a second line of proof without a carousel. The customers and figures are example data.
FAQ
How do I change the customers and what the card says?
CUSTOMERS at the top of the file holds each shop: its name, icon, lettering and mark (where the icon sits), plus the industry, since (a year of your own relationship, as a number) and parcels the card shows. Keep the count a multiple of four and of three so the wall fills every row at every width, and change PHONE_COUNT to match the rows you want on a phone.
How does a keyboard or a screen reader reach the hover card?
A hover card can't be tabbed into, so each cell is a link that opens its card when it gets focus, and the card's two facts are also text inside the link, hidden visually on screens with a pointer and read out in full by a screen reader: "Houseplants and pots, with us since Year 2". Nothing is only in the card.
What happens on a touch screen?
Screens that can't hover show the same facts under each wordmark, in small type, so a phone loses nothing. The card still opens on a long press where the browser allows it, but the block does not depend on it.
Can I use real logos?
Yes. Swap Wordmark for an image or an inline SVG, keep its dir="ltr" wrapper so artwork never mirrors, and keep the name as text so the link is still named. The drawn marks are fictional on purpose, so none of them is anyone's trademark.