shadcn.io is not affiliated with official shadcn/ui
Stacked Partner Logo Banner Block for Svelte
A partnership card for a hosting platform: a lockup band joins two made-up wordmarks across a solid divider with a cross, over a badge, a heading, one sentence and an underlined link.
Installation
Overview
A partnership card for Svelte with Ark UI, for the day a product announces who it now runs on or alongside. A muted shell with + marks on its corners wraps a raised panel. A heading about deploying on a partner's edge network and one sentence with the figures that matter come first, then an "Official partner" badge beside an underlined link to the announcement, with an arrow that turns around in right-to-left layouts. A lockup band closes the panel under a solid rule: two wordmarks, an icon tile and lettering each, side by side across a divider with a small cross where they meet. The wordmarks here are invented; swap each tile and name for your own mark, as an img with a text alternative or an inline SVG. It's built from Guides and Badge with Lucide icons and your theme's tokens for every colour, so the lockup is light on a light page and dark on a dark one. For integrations, co-marketing, hosting and infrastructure partners, and sponsor thank-yous.
FAQ
How do I put in real logos?
Each wordmark is one Wordmark in the file: a tile (its children) and the lettering beside it. Replace the tile's icon and the name with your partner's logo as an img (give it an alt with the company's name and drop the aria-hidden on the tile), or an inline SVG that uses currentColor, so it follows the theme. Mind the brand's usage rules: most ask for clear space around the mark and a one-colour version on busy backgrounds.
What is the cross between the marks?
A small circle with a multiplication sign, on top of the divider between the two cells (a vertical divider side by side, a horizontal one when they stack). It's decoration, hidden from screen readers; the lockup is a list named "Partners", so a screen reader hears both names, and the heading says how they relate. In right-to-left layouts the cross stays centred, because its offset mirrors.
Can I show three partners?
Change grid-cols-2 to grid-cols-3 and add a third Wordmark; the dividers are divide-x, so they follow. Drop the cross, or move it to a gap of its own, because a single cross reads as "two companies" and the third would be left out of the sentence. Past three, use a logo block instead: this card is a lockup, not a wall.
Where should the link go?
To the page that explains the partnership: an announcement, an integration guide or a case study. The words say where it goes ("Read the partnership announcement"), not "Learn more". Keep the figures in the sentence true and dated by the page they come from; they sit in bdi so they stay in order in any direction.