shadcn.io is not affiliated with official shadcn/ui
Accent Featured Cell Wall Logos Block for Svelte
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.
Installation
Overview
A logo wall with one promoted cell for Svelte with Ark UI. A centred header, "Booked by 3,000 wellness studios", sits over a four by four grid whose cells share their hairlines from rail to rail. Twelve customer wordmarks, muted until hovered, ring a two by two cell in the middle that is lifted off the wall by a ring and a shadow: the flagship's mark on a plate, a "Flagship" chip, one line about it and a link to its story. The wall starts at the page's top rule with + marks on the rails and ends the block, so the next section's top rule closes it. On a phone the flagship comes first, across both columns, over the twelve logos two by six. Built from Badge, Button, Guides and Lucide icons, with CSS for the entrance.
FAQ
How do I change the promoted customer?
Edit FLAGSHIP (its name, icon and lettering) and the line of text in the cell, and point the link at the customer's story. The twelve other customers are in CUSTOMERS; keep that a multiple of four so the wall has no empty cell.
How do I move the promoted cell?
The cell is placed with md:col-start-2 md:row-start-2 and spans two rows and two columns; the other cells flow around it. Change the start column and row (columns 1 or 3, rows 1 or 3) to move it to a corner. On a phone it is the first cell whatever its desktop place, so the flagship is read first.
Where does the link go?
It is a link (href="#"): point it at the flagship's case study.
The button's asChild receives its props: spread them onto your router's link.
How is the cell raised in a light theme?
In a light theme the card colour and the page colour are almost the same, so the cell gets a ring in the text colour at low strength and a shadow, which also fall over its neighbours. In a dark theme the card colour is lighter than the page and the same ring and shadow keep it apart. Nothing is a fixed colour.
Is the wall accessible?
The logos are a list named "Customers" and the flagship is its first item, with its name as an h3; the icons are hidden and the names are text. The link is the only focusable part and has a visible focus ring. In a right-to-left layout the grid fills from the right while each wordmark keeps its own direction.