shadcn.io is not affiliated with official shadcn/ui
Split Linked Cells Logos Block for Solid
A card-in-card split: a headline, one sentence and a Shine Button, beside eight customers as linked cells that show a Read story arrow on hover and focus.
Installation
Overview
A split logo block for Solid with Ark UI. A muted shell with + marks on its corners wraps a raised panel that follows the theme. In the panel, at the start, a headline for a sales CRM, "Sales teams that stopped chasing updates", one sentence and a Shine Button; at the end, past a divider, eight customers as cells that share their hairlines, two across from the sm breakpoint. Every cell is a link to that customer's story. On a mouse, a Read story label and arrow appear on hover and on keyboard focus; on a touch screen they are always shown. The cell's name is the company followed by "read the story". On a phone the copy comes first and the cells follow in one column. Built from Frame, Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a trust section where each customer has a story to read.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file. Each entry is a name, an icon, a lettering and a mark. Keep an even number: the cells run two across from sm, so an odd count leaves one cell short and the border colour shows. The names are fictional placeholders for your own customers.
When is the Read story arrow shown?
On devices whose main pointer is a mouse or a trackpad it is hidden until you hover a cell or tab to it, and on touch screens it is always visible, so it never depends on hover. It is decoration: the link's name already ends in "read the story".
Where do the cells and the button link?
Every cell is a plain link with href="#": point each at that customer's story. The Shine Button is a link too.
The button's asChild receives its props: spread them onto your router's link.
Can the cells be used with the keyboard?
Yes. Each cell is one tab stop with a visible focus ring drawn inside the cell, so the divider and the panel's edge never clip it, and the arrow appears with the same tint as hover.