shadcn.io is not affiliated with official shadcn/ui
Dim On Hover Wall Logos Block for React
A dense wall of twenty-four customer wordmarks for a genealogy product, in six columns and four rows with shared hairlines; hovering a logo dims all the others.
Installation
Overview
A dense logo wall for React with Base UI. A compact centred header gives the count of archives and societies on a genealogy product, and under it twenty-four customer wordmarks fill six columns and four rows in cells that share their hairlines from rail to rail, its top rule meeting the rails at + marks. Hover a wordmark and every other one dims, so the one under the pointer stands out of the crowd; the cells and their hairlines stay put. Each wordmark has its own lettering and icon layout. A phone shows twelve, three across; the wall is four across from sm and six across from lg, and every row is full.
FAQ
How does the dim work, and does it need JavaScript?
No script. The list has a :has(li:hover) rule: while any cell is hovered, every other cell's wordmark drops to 35% opacity, and the hovered one keeps its full strength. It dims the wordmark, not the cell, so the hairlines don't change. It only applies where a pointer can hover, so on a touch screen nothing dims.
Why twenty-four, and can I use another count?
Twenty-four divides into every column count the wall uses: three on a phone (twelve shown), four from sm and six from lg. A gap-px bg-border wall must fill every row or the border colour shows through the gaps, so use a count that divides all of them: 12 or 24. Change PHONE_COUNT to change how many a phone shows.
How do I change the logos?
Edit CUSTOMERS: each entry is a name, an icon, a lettering and a mark (inline, badge, ring, trailing or stacked). Size each wordmark against the narrowest cell, about 130 px at 1024 px across six columns: spaced capitals at text-xs, names of ten letters or fewer at text-lg, and longer names at text-sm.
What does a phone show?
The first twelve, three across in four rows, each with its icon over its name so the names fit a 96 px cell at 320 px. The other twelve are hidden below sm, so the grid never ends in a half row.
Is it accessible?
The wall is a real list named "Archives and societies on Kinfold", each name is text and the icons are hidden from assistive technology. The names use text-muted-foreground at full strength, which passes WCAG AA. The dim is a hover effect only: nothing is focusable and no information is carried by it.
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 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
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 four by four wall of customers for an alumni-network product in an inset tray, with fifteen wordmarks and a last cell that is the Shine Button, See all 4,000+ customers.
- Pro
A two-weight headline in one large heading, claim in full-strength text and continuation in muted, over twelve open wordmarks in four columns and three rows divided by row hairlines only.