Blog and content page layouts

Article pages, post indexes, changelogs and documentation shells.

Content layouts are judged by whether a long piece gets finished, and that comes down to measure, rhythm and orientation — knowing where you are in a page. These carry the article shell with its table of contents and progress, the index grid, and the changelog and docs shells that reuse the same typography.

14 matching8 pages6 templatesFree to copy

Blog Index

The post grid, a subscribe ask that comes after the proof, and a minimal footer — no hero, because the featured post already is one.

Marketing Pages4 blocks39 lines
Open the full page for this page

Article Page

A single post: header, byline and opening prose in one reading column, with the subscribe form after the article — at the only moment it converts.

Marketing Pages4 blocks39 lines
Open the full page for this page

Changelog Page

The release timeline with the site chrome kept on, and the one subscribe form on the site that is not a detour — "tell me when this page changes" is exactly what it promises.

Marketing Pages4 blocks39 lines
Open the full page for this page

Documentation Page

The site navbar over the three-column docs frame. In your project this is one catch-all route — the slug picks the article, the frame never changes.

Marketing Pages2 blocks30 lines
Open the full page for this page

Launch Note

A product announcement shaped as writing rather than a landing page — serif headline, real byline, three pieces of evidence, and an endpoint card that doubles as documentation for the week before the docs exist.

Marketing Pages6 blocks53 lines
Take 1 of 2
Open the full page for this page

Public Roadmap

Board plus changelog, because a roadmap alone is a promise — the last three releases underneath are what turn the shipped column into something with dates attached.

Marketing Pages6 blocks143 lines
Take 1 of 2
Open the full page for this page

Legal Document

Terms, privacy, DPA and cookies in one frame — the docs layout, because people arrive at a legal page looking for a specific clause and a wall of text makes that a Ctrl-F expedition.

System Pages3 blocks50 lines
Take 2 of 2
Open the full page for this page

Integration Detail 02

The setup guide, not the pitch: what moves and which way, then a five-step wizard — written for the person turning the connector on rather than the one deciding to buy it.

Marketing Pages7 blocks309 lines

Templates6

See all →
Pro
Open the full page for this template

Docs Site

The three-column docs frame

The three-column docs frame — sidebar, article, on-this-page rail — plus a changelog and a 404. The part of the product a search for an error message should find.

3 routes3 pages6 blocksAzure
Pro
Open the full page for this template

Content Site

The article at a real measure

A publication that happens to belong to a company: blog index, article, careers and a 404. The site for when the writing is the product — or the marketing.

4 routes4 pages10 blocksInk
Open the full page for this template

Open Source Project

The install command, before anything else

A project site for a library: install command above the hero, the API in twenty lines, docs, changelog, roadmap, community, and who funds it said plainly.

7 routes7 pages21 blocksCarbon
Open the full page for this template

Startup Waitlist

The waitlist hero with the count on it

A pre-launch site in violet: one email field, a blog to keep the list warm, and no pricing to be held to. The smallest honest thing to put in front of a product that does not exist yet.

4 routes4 pages13 blocksUltraviolet
Pro
Open the full page for this template

Developer Tool

The terminal hero, typing the install

Near-black buttons, square corners and a terminal-green accent. Install command above the fold, real code before any prose, docs and changelog behind it.

5 routes5 pages17 blocksGraphite
Pro
Open the full page for this template

Help Centre

Search that answers before the ticket

The support surface, as four routes that agree with each other: searchable answers, the docs, what changed, and a status page carrying the same incident the help page announces.

5 routes5 pages13 blocksRose

Questions about blog and content page layouts

Do these work with MDX?
Yes — the article shell styles a content slot rather than parsing anything, so MDX, a CMS payload or plain children all render the same. The prose styles are scoped to that slot rather than applied globally.
What structured data should an article carry?
`Article` with a headline, an author and both dates. It is cheap, it is accurate if you generate it from frontmatter, and it is the difference between a bare result and one with a byline.
Are these blog and content page layouts free to use?
10 of the 14 are free to copy and use commercially; 4 need a Pro licence, and each one says so on its own page before you spend any time on it.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add blog-index-page` 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.
Why does this page mix components and whole pages?
Because the phrase does. The same search covers 8 composed pages and 6 templates — one of them is the right size for what you are building, and which one depends on how much of the screen you still have to write.