React Logos Metric Split With Logo Column Block

A metric split logo column for React and Next.js with an oversized left-side metric, a right-side vertical logo column separated by dashed dividers, and a ShadcnioButton CTA pair built with shadcn/ui and Tailwind CSS

Pair an oversized metric with a vertical roster of trusted brands in this metric split with logo column block for React and Next.js. Features a left panel with an eyebrow, a text-6xl to text-7xl tabular-nums metric and subtitle, and a right panel with six stacked logos separated by dashed horizontal rules. Built with TypeScript, motion/react parent entrance and useReducedMotion, Lucide React icon marks paired with invented placeholder wordmarks, and Tailwind CSS theme variables. Perfect for asymmetric social-proof bands, under-hero scale callouts, and landing pages that need a readable vertical roster instead of a horizontal strip.

Logos Metric Split With Logo Column

React Logos Metric Hero Strip Block

React Logos Metric Trio With Logo Strip Block

React Logos Metric Dark Variant Block

React Logos Metric Tabular List With Logos Block

React Logos Split Headline Vertical Logo List Block

React Logos Split Headline Logo Grid Block

FAQ

Logos Metric Split With Logo Column

Related Components

React Logos Metric Hero Strip Block

React Logos Metric Trio With Logo Strip Block

React Logos Metric Dark Variant Block

React Logos Metric Tabular List With Logos Block

React Logos Split Headline Vertical Logo List Block

React Logos Split Headline Logo Grid Block

FAQ

How do I customize the hero metric and subtitle?

How do I add or remove logos from the column?

Is this split layout accessible?

How does the split adapt to mobile and tablet?

How do I replace the Lucide icon marks with real brand logos?

When should I use the metric split versus the metric trio?