Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Split Linked Cells Logos Block for Vue

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.

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 split logo block for Vue 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".

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.

Does the panel follow my theme?

Yes. The panel has no dark scope: it is light on a light page and dark on a dark one, and the muted shell, the ring and the shadow keep it separate from the page in both modes.

How does it fit on a phone?

The shell and the panel step down in size, the copy comes first, and the eight cells stack in one column, each at least 64 pixels tall with the arrow always shown. Nothing scrolls sideways at 320 pixels.

All 100 logos blocks