Block Quote Wall — React Page Block
Quote wall: many quotes as a masonry wall, or one at a time in a keyboard-friendly rotator (real prev/next controls, focus and hover pause, reduced motion disables auto-advance).
Usage
import { BlockQuoteWall } from "@/components/BlockQuoteWall";
export function Voices() {
return (
<BlockQuoteWall
title="Field notes from release teams."
mode="wall"
quotes={[
{ quote: "The replay is the status update.", name: "Mara Ellison", role: "Head of Platform, Fieldnote" },
]}
{...{
title: "Field notes from release teams.",
mode: "wall",
accent: "#d5ed9a",
scheme: "dark"
}}
/>
);
}Implementation notes & API
Purpose: testimonial/quote wall or rotator. 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. Default quotes are invented on purpose and say so on screen — never ship them as real social proof.
| Property | Type | Notes / default |
|---|---|---|
eyebrow / title / description | ReactNode | Section header |
quotes | readonly WallQuote[] | { quote, name, role?, href? } |
mode | "wall" | "rotator" | wall; rotator shows one quote at a time |
interval / pauseOnHover | number / boolean | 6000ms auto-advance; hover and focus pause it |
demoNote | ReactNode | null | Fictional-quotes marker; pass null with real customers |
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 |