Block Feature Grid — React Page Block
Feature grid with real hierarchy: one bento feature card with media plus supporting cells. Icons, media, links and copy all replaceable.
Usage
import { BlockFeatureGrid } from "@/components/BlockFeatureGrid";
export function Features() {
return (
<BlockFeatureGrid
eyebrow="Why Orbit"
title="Built for the way teams ship."
items={[
{ title: "A release graph", description: "Deploys, flags and rollbacks on one canvas.", featured: true },
{ title: "Explained flags", description: "Owner, rollout and expiry on every flag." },
{ title: "Incident replays", description: "Metrics, logs and deploys scrubbed together." },
]}
{...{
title: "Less managing. More making.",
layout: "bento",
accent: "#d5ed9a",
scheme: "dark"
}}
/>
);
}Implementation notes & API
Purpose: feature grid with one featured bento cell. 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. The first item is featured by default (featured:false opts out); items with href get a stretched link hit area while staying one accessible name.
| Property | Type | Notes / default |
|---|---|---|
eyebrow / title / description | ReactNode | Section header |
items | readonly FeatureGridItem[] | { title, description, icon?, media?, href?, featured? } |
layout | "bento" | "even" | bento leads with a wide media card; even equalizes |
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 |