shadcn.io is not affiliated with official shadcn/ui
Split Raised Panel Logos Block for Svelte
A headline, one sentence and a Shine Button flat on the page at the start, and five customers in a raised panel at the end, two wide tiles over three narrower ones.
Installation
Overview
A split logo block for Svelte with Ark UI. At the start, flat on the page, a headline for a parcel-locker product, "Give every parcel a place to wait", one sentence and a Shine Button. At the end, five customers in a raised panel: a muted shell holding a card with a ring and a deep shadow, and inside it two wide tiles over three narrower ones. The panel has no dark scope, so it is light on a light page and dark on a dark one, and its lift comes from the shell, the ring and the shadow. Each customer is a wordmark in its own lettering, muted until you hover its tile. On a phone the copy comes first and the panel follows, with the fifth tile spanning both columns. Built from Frame, Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a section that wants one part lifted off the page.
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. The panel is laid out for five: the first two tiles take half a row from the sm breakpoint and the rest a third, and tileSpan holds that rule. For another count, change tileSpan and the grid's column count together. The names are fictional placeholders for your own customers.
Is the panel dark?
No. It follows your theme: it has no dark scope, so it is light on a light page and dark on a dark one. It stays distinct because the muted shell, the ring and the shadow lift it off the page, and the tiles inside are one step lighter or darker than the card.
Where does the button go?
It is a link (href="#"): point Find a locker site at your site finder. It is a Shine Button, a band of light that sweeps across it once on hover and keyboard focus.
The 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 copy stays at the start of the line and the panel at the end. The tiles read in the page's direction, and each wordmark keeps its own direction, as a logo would.