946 / 1002

Blog Featured Grid

A blog index section with one large featured story beside a two by two grid of recent posts, gradient covers, category chips and author initials.

The Northwind journal

Notes on building fast, calm software

Deep dives from our engineering, design and growth teams. New essays every Tuesday.

A year of profiling edge functions taught us that most latency hides in places nobody measures. Here is the playbook we now run on every new service.

terminal

npx shadcn@latest add https://hyperblur.dev/r/blog-featured-grid.json

Works in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blog-featured-grid.tsx.

example.tsx

import { BlogFeaturedGrid } from "@/components/hyperblur/blog-featured-grid"

<BlogFeaturedGrid title="From the journal" accent="#8b5cf6" />

Prop	Type	Default	Description
eyebrow	string	"The Northwind journal"	Small label above the title. Pass an empty string to hide it.
title	string	"Notes on building fast, calm software"	Section heading.
subtitle	string	"Deep dives from our engineering..."	Supporting text shown beside the heading on wide containers.
posts	{ title: string; excerpt?: string; category: string; author: string; date: string; readTime: string; href: string; cover?: string }[]	5 sample posts	The first post becomes the featured card, the next four fill the grid. `cover` takes any CSS background; without it a gradient cover is derived from the title.
cta	{ label: string; href: string }	{ label: "View all posts", href: "#" }	Link shown in the header.
accent	string	"#8b5cf6"	Accent for the eyebrow, hover borders and the title underline.
onPostClick	(post: BlogFeaturedPost, index: number) => void		Called when a post card is clicked, before navigation.