Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Split Vertical List Logos Block for Svelte

A headline, one sentence and a Shine Button at the start, and five customers as link rows at the end, each with a wordmark, an industry chip and an arrow.

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 Svelte with Ark UI. At the start, a headline for a translation-memory product, "Translate once, reuse everywhere", one sentence and a Shine Button. At the end, past a divider that meets the page's top rule at + marks, five customers as rows between hairlines that end at + marks on the rails. Each row is one link: the wordmark in its own lettering, an outline chip with the customer's industry and an arrow that nudges toward the end of the line on hover and flips in right-to-left layouts. The rows fill the height of the copy; on a phone the copy comes first and the rows follow under a rule, and the last row ends the block. Built from Guides, Shine Button and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For a post-pricing 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 industry for its chip, an icon, a lettering and a mark. Keep five rows: they fill the height of the copy beside them. The names are fictional placeholders for your own customers.

Can the rows be used with the keyboard?

Yes. Each row is one tab stop, with a visible focus ring drawn inside the row and the same tint as hover, so the ring is never clipped by the divider or the rails.

What happens in a right-to-left layout?

The rows mirror: the wordmark moves to the right, the chip and the arrow to the left, and the arrow flips to point left. Each wordmark keeps its own direction, as a logo would.

How does it fit on a phone?

The copy comes first at a smaller size, then a rule with + marks and the five rows, each at least 80 pixels tall with the chip and the arrow staying on the row. Nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The copy and the rows fade up once when the page loads, with CSS transitions; a row's colour eases and its arrow nudges on hover. With reduced motion every transition is off: the section simply appears and the arrow stays put.

All 100 logos blocks