Block Team — React Page Block
Team grid: cards with an avatar (your image node or an auto-generated initials badge), name, role and profile links. Names can link out.
Usage
import { BlockTeam } from "@/components/BlockTeam";
export function People() {
return (
<BlockTeam
title="The people behind the graph."
members={[
{ name: "Mara Ellison", role: "Head of Platform", href: "/team/mara" },
{ name: "Iris Chen", role: "Design", links: [{ label: "Site", href: "https://iris.example" }] },
]}
{...{
title: "The people behind the graph.",
accent: "#d5ed9a",
scheme: "dark"
}}
/>
);
}Implementation notes & API
Purpose: team/about grid. 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. Avatar accepts any ReactNode; without one, an initials badge is generated from the name so no image assets are required.
| Property | Type | Notes / default |
|---|---|---|
eyebrow / title / description | ReactNode | Section header |
members | readonly TeamMember[] | { name, role?, href?, links?: TeamLink[], avatar? } |
demoNote | ReactNode | null | Fictional-people marker; pass null with your real team |
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 |