shadcn.io is not affiliated with official shadcn/ui
Two Panel Split Logos Block for React
Customers of a billing product in two equal panels behind a split divider: Startups and Enterprises, each with a count, a sentence about how it uses the product and a three-by-three wall of drawn wordmarks.
Installation
Overview
A segmented customer wall for React with Base UI, written for Twinfold, a fictional billing product for companies of two sizes. Under a compact header, two equal panels sit behind a split divider: Startups and Enterprises. Each panel has its name, a large count, a sentence on how that kind of customer uses Twinfold and an inset three-by-three wall of drawn wordmarks whose cells share their hairlines. The panels share their rows, so the headings, the sentences and the walls line up across the divider. On a phone the panels stack under a rule from rail to rail and each wall shows six logos in two columns; from sm all nine sit three across. The divider runs to the foot of the block, which ends on the walls. It's built from Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages and pricing pages whose customers come in two shapes. The customers and counts are example data.
FAQ
How do I change the segments and the logos?
SEGMENTS holds the two panels: each has a name, a count with what it counted, a usage sentence and nine customers. A customer is an icon, a name and a lettering (its own type) with a mark for where the icon sits. Keep nine per panel so the wall fills every row, and six or fewer for PHONE_COUNT.
How do the two panels line up?
From lg each panel spans three rows of the shared grid and hands them on with a subgrid, so a heading, a sentence and a wall start at the same height in both panels even when the sentences wrap differently.
Are the wordmarks real?
No. Each is an icon and a name in its own lettering, drawn in the theme's text colour; the names are invented. They keep their own direction on a right-to-left page because a logo is artwork.
How does it fit on a phone?
The panels stack, the second under a rule with + marks at the rails, and each wall shows its first six logos in two columns. The sizes are chosen so the longest of the six fits a 320 px screen without clipping.
Related
- Pro
Hover Card Customer Logos
CustomersTwelve drawn customer wordmarks for a parcel-logistics company in cells that share their hairlines, each opening a hover card with the shop's trade, how long it has been a customer and what it sends.
- Pro
Share Bar Customer Segments
CustomersA framed 100% bar of a customer base in three segments, with one column per segment saying who they are, how big they are and what they use.
- Pro
Proof Index Social Proof
CustomersSix kinds of proof for a reference-call tool laid out like a table of contents: each row leads from the kind of proof to its number along a solid hairline, with one line of detail and a link to its source.
- Pro
A wall of eighteen customer wordmarks for a month-end close tool, under a compact header with the customer count, in cells that share their hairlines from rail to rail.
- Pro
Category Grid Tab-Filtered Logos
Tabs and filtersFour pill tabs (All, Growers, Co-ops, Advisers) over a wall of eight customer wordmarks in shared hairline cells, for a farm planning tool.
- Pro
Select Industries Served
CustomersA Select of six industries that drives one panel: the count of businesses, three use cases and the featured names, with the page holding its height.