Blog and content sections

Article layouts, post grids, author bylines and reading progress.

A content page is a typography problem first: a measure of 60–75 characters, real vertical rhythm, and headings that can be scanned without reading. These handle the article shell, the post grid with its cards, and the peripheral pieces — byline, table of contents, reading progress, related posts — that keep a reader moving to a second page.

12 matching12 blocksFree to copy

Blog Index Grid

A featured post at full width above a card grid, with drawn covers built from tokens — a blog index with no image pipeline and no broken-thumbnail state.

Content & Blog188 lines1 dep

Case Study Card Grid

A grid of case-study cards that lead with the metric rather than the company name, each one linking out to the full write-up — the block a customer-stories section or a home page needed and only had a full case-study page for.

Content & Blog136 lines1 dep
Open the full page for this block

Three-Column Docs Frame

Sidebar, article and on-this-page rail — each column answers a different question, and they collapse on mobile in the order that keeps the article alive.

Content & Blog290 lines1 dep
Open the full page for this block

Video Player Shell

The watch screen with no playback in it: a ratio-locked stage, a control bar drawn down to the buffered layer, and an up-next rail. Drop a video element in and wire your own player.

Content & Blog327 lines1 dep
Open the full page for this block

Release Timeline

A dated changelog on a vertical rail with added/changed/fixed tags and machine-readable <time> values.

Content & Blog145 linesNo deps
Open the full page for this block

Public Roadmap Columns

Shipped / in progress / planned in three columns, with status carried by icon as well as colour.

Content & Blog122 lines1 dep
Open the full page for this block

Article Header & Byline

Kicker, headline, standfirst, byline and share row, with the opening prose and a pull quote included — the type scale of a post, decided once instead of per-article.

Content & Blog171 lines1 dep
Open the full page for this block

Team Grid

An about-page team section on initials avatars rather than photos, so shipping it never waits on headshots and there is no broken-image state to design.

Content & Blog166 lines1 dep

Careers Openings Board

Openings grouped by department with location, type and salary on every row — candidates self-select by craft first, and a flat list makes them scan for it.

Content & Blog186 lines1 dep
Open the full page for this block

API Endpoint Reference

Method badge, path, parameter table and a request/response pair kept side by side — an example request whose response is a scroll away gets pasted blind.

Content & Blog237 lines1 dep
Open the full page for this block

Package Manager Code Tabs

One install command behind npm/pnpm/yarn/bun tabs with a working copy button — every reader uses exactly one package manager, so showing all four wastes three lines.

Content & Blog152 lines1 dep
Open the full page for this block

Résumé Document

A CV as a document rather than a timeline of cards — one column, dates on the end edge, and a print layer that puts it on paper without a separate PDF to keep in step.

Content & Blog347 lines1 dep

Questions about blog and content sections

How wide should the body text be?
About 65 characters per line — `max-width: 65ch` gets you there in any font. Full-width body copy on a desktop monitor is the most common reason a long post does not get read.
Is a table of contents worth it?
Over roughly a thousand words, yes, and it should highlight the current section as you scroll. Under that it is navigation for a page you can already see the end of.
Are these blog and content sections free to use?
All 12 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add blog-post-grid` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.