Block Logos — React Page Block
Customer logo wall: a hairline grid of brand tiles that sit desaturated until hover. Real marks via logo (img or inline svg) or styled wordmarks — no assets required.
Usage
import { BlockLogos } from "@/components/BlockLogos";
export function Trust() {
return (
<BlockLogos
title="In good company."
logos={[
{ name: "Acme", href: "/customers/acme" },
{ name: "Northwind", logo: <img src="/acme-mark.svg" alt="" /> },
]}
columns={5}
{...{
title: "In good company.",
columns: 5,
accent: "#d5ed9a",
scheme: "dark"
}}
/>
);
}Implementation notes & API
Purpose: customer/trust logo wall. Copy it, ship it — every string, link and color arrives through props. Runtime: pure DOM + CSS. No WebGPU, canvas, animation library or external assets; SSR-safe on first render. Theming: root custom properties (--vb-bg, --vb-fg, --vb-accent, --vb-border, --vb-radius, --vb-container) or the accent/scheme/className/style props. scheme flips the dark default to light. Guardrails: responsive via container queries down to 320px; interactive behavior degrades on touch; prefers-reduced-motion drops entrance/scroll motion while content stays complete. Every tile is an optional real link; hover restores each mark's color while the wall rests desaturated.
| Property | Type | Notes / default |
|---|---|---|
eyebrow / title / description | ReactNode | Section header |
logos | readonly LogoItem[] | { name, href?, logo? } — empty falls back to fictional demo brands |
columns | number | 5; grid column count |
demoNote | ReactNode | null | Fictional-content marker; pass null once your logos are real |
scheme | "dark" | "light" | dark |
accent | string (hex) | Sets --vb-accent for the whole block |
className / style | string / CSSProperties | Applied to the section root |
children | ReactNode | Replaces the default content entirely |