shadcn.io is not affiliated with official shadcn/ui
Split Monogram Grid Logos Block for Svelte
Nine customers as square monogram tiles in a hairline grid at the start, and a headline, one sentence and two calls to action at the end.
Installation
Overview
A split logo block for Svelte with Ark UI, reversed. At the start, nine customers as square tiles in three columns and three rows, sharing hairlines that run to the start rail: each tile is a two-letter monogram set in a mono face, bare, in a ring or knocked out of a filled square, over the customer's name. At the end, past a divider that meets the page's top rule at a + mark, a headline for a dispute-management product, "Disputes settled before they become churn", one sentence and two calls to action, the Shine Button and an outline button. The copy comes first in the document, so a phone and a screen reader meet it before the tiles. Built from Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For customers that don't have logos yet.
FAQ
How do I change the customers?
Edit MERCHANTS at the top of the file. Each entry is a name, a two-letter monogram and a frame (plain, ring or badge). Keep nine: three across and three down fill the grid, and the tiles stay square at every width. The names are fictional placeholders for your own customers.
Why is the copy first in the markup if the tiles are at the start?
So the reading order is headline, then proof. On a large screen the tiles are placed in the first column with the grid, and the copy in the second; on a phone they simply follow the copy. Nothing is reordered with order.
Where do the buttons go?
Both are links (href="#"): point See how merchants win at your stories and Book a demo at your scheduler. The first is a Shine Button, a band of light that sweeps across it once on hover and keyboard focus.
Each button's asChild receives its props: spread them onto your router's link.
What happens in a right-to-left layout?
The layout mirrors: the tiles stay at the start of the line and the copy at the end, and the divider follows. Monograms and names keep their own direction, as a logo would.