shadcn.io is not affiliated with official shadcn/ui
Three Flagship Row Logos Block for React
Three equal anchor-partner cards for an event-ticketing platform, each with a large mark, the kind of partner, how many teams it serves and how long it has been a partner, under a centred header.
Installation
Overview
A flagship partner row for React with Base UI. A centred header, "Three partners behind every sold-out night" and one sentence, sits over three cards of equal weight, so no partner outranks the others. Each card has a large mark on a plate, a chip that names the kind of partner (security, platform or data), the partner's name in its own lettering, and a small list with two figures: how many teams use the partner and the year the partnership began. The cards sit apart, and each card's hairlines run past its corners to + marks, so the row reads as three framed pieces on the page's rails. From md the three sit side by side; on a phone they become a snap carousel with the next card peeking in. Built from Guides, Badge and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. Made for an anchor-partner callout or a short list of the integrations a product leans on most.
FAQ
How do I change the partners?
Edit FLAGSHIPS at the top of the file. Each entry is a name, an icon (any Lucide icon), a lettering (the Tailwind classes for the name's type, such as font-serif italic), a role for the chip, the since year and the teams count. The names are fictional placeholders for your own partners. The layout is built for exactly three: a fourth would not fit the single row, so for more partners use a wall or a hub with supporting logos.
Why are the figures in a description list?
Each card's two figures are a term and its value in one dl, with the label under the number, so a screen reader hears "Teams, 340" rather than two loose numbers. The values sit in a bdi element, so a right-to-left layout keeps them in reading order.
How does the row work on a phone?
Below md the list is a horizontal scroller that snaps card by card, each card 85% wide so the next one shows at the edge. It is a named, focusable region, so keyboard users can scroll it with the arrow keys, and it shows a focus ring. From md it becomes a three-column grid with nothing scrolling.
Why does it say Since 2019 and not a relative time?
A fixed past year never goes stale the way "5 years ago" does, and it stays true for as long as the partnership does. Change the year in FLAGSHIPS when a partner's story changes.
Is the row accessible?
Yes. The header is an h2, the cards are a list named "Flagship partners" and each partner's name is a real h3. The icons and the plates are hidden from assistive technology, and the chip's text is at full strength so it passes WCAG AA. The cards are not links, so nothing in them takes a Tab stop except the phone scroller.
Related
- Pro
Three customer stories of equal weight for a headless CMS, each a whole case study in its own column: a wordmark plate, an industry pill, a big figure, a two-line quote and who said it.
- Pro
Featured Focal Hub Logos
Flagship customerA flagship customer in a framed card with a hairline tree down to a bracket of six supporting wordmarks, the caption "Integrates with" sitting on the line, for a release-management tool.
- Pro
Featured Focal Wide Card Grid Logos
Flagship customerA wide flagship band over a grid of six wordmarks for a bookkeeping tool: plate, wordmark and tenure at the start, one big figure at the end, both rail to rail.
- Pro
A flagship customer's wordmark and quote for a customer feedback tool, with a closing band of three more customers, each a wordmark and a one-line result.
- Pro
Animated Counter Logos
MetricsOne big count that rolls up once when it scrolls into view, for a meal-kit service that sells to employers, with a closing strip of six employer wordmarks.
- Pro
One flagship customer's wordmark plate beside a display-size quote and who said it, for a vet-clinic booking tool, split by a hairline divider.