Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Hover Card Customer Logos Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A customer wall for React with Base 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.

How does it fit on a phone?

Two columns of four rows, eight logos. The remaining four show from sm. Each cell is at least 112 px tall so it is an easy target, and the wordmarks are sized to fit the narrowest cell at 320 px.

Does it work in a right-to-left layout?

The wall and the cards mirror; the wordmarks keep their own direction because a logo is artwork, and the figures stay in reading order. The hover-hint arrow in a cell's corner turns around.

  • Pro

    Two Panel Split Logos

    Customers

    Customers of a billing product in two equal panels behind a split divider: Startups and Enterprises, each with a count, a sentence about how it uses the product and a three-by-three wall of drawn wordmarks.

  • Pro

    Mention Tally Customer Love

    Customers

    What customers mention most for a review-monitoring tool: six themes ranked with a bar to scale and a count, each opening two word-for-word snippets, with the tally derived from the typed reviews.

  • Pro

    Proof Index Social Proof

    Customers

    Six kinds of proof for a reference-call tool laid out like a table of contents: each row leads from the kind of proof to its number along a solid hairline, with one line of detail and a link to its source.

  • Pro

    Static Grid Wall Logos

    Walls

    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

    Hover Card Mosaic Team

    Grids and walls

    The planners of an interior-planning studio as a mosaic of mixed spans that shares its hairlines: a two-by-two lead cell, two wide cells, three small ones and a +12 cell, each person a link with a hover card that opens on hover and on focus.

  • Pro

    Centered Logo Cloud Hero

    Logos and social proof

    A 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.

All 150 about blocks