Eight blog building blocks: a post card grid, a comfortable article layout, a magazine featured post with a recent list, a minimal dated post list, an article with a sticky table of contents, an author box, a related posts row and a blog index header with categories.
A responsive grid of post cards with an image area, category, title, excerpt and date. Each card's title is the link, which keeps one clear link per card instead of several, and the grid adapts from one to three columns with auto-fill.
A comfortable reading layout with a measure of about 65 characters, a byline with the date, generous line height and spacing between paragraphs. The ch unit caps the line length, which is one of the biggest factors in readability.
View code
<article class="bl2">
<p class="kick">Guides</p>
<h1>How to photograph ceramics in daylight</h1>
<p class="by">By Ana Ruiz · <time datetime="2026-09-28">28 September 2026</time> · 6 min read</p>
<p>Soft, indirect light shows glaze texture without harsh reflections. Place pieces near a north-facing window and turn off overhead lights.</p>
<p>Use a plain backdrop a few shades lighter than the piece, and shoot slightly from above so the rim and interior both show.</p>
</article>
A magazine-style layout with one large featured post and a list of recent posts beside it, collapsing to one column on phones. The featured post uses an h2 and the list items use h3, keeping a logical heading order.
View code
<section class="bl3">
<article class="feat"><div class="im"></div><p class="cat">Feature</p><h2><a href="#">The year we went plastic-free</a></h2><p>What changed, what it cost and what customers said.</p></article>
<ul>
<li><h3><a href="#">Five glaze mistakes to avoid</a></h3><time datetime="2026-09-20">20 Sep</time></li>
<li><h3><a href="#">Choosing a kiln for a small studio</a></h3><time datetime="2026-09-11">11 Sep</time></li>
<li><h3><a href="#">Wholesale terms that work</a></h3><time datetime="2026-09-03">3 Sep</time></li>
</ul>
</section>
A text-only post list for personal blogs: dates aligned in a narrow column on the left and titles on the right. It loads instantly, reads well, and uses tabular numbers so the dates line up perfectly.
View code
<ul class="bl4">
<li><time datetime="2026-09-28">2026-09-28</time><a href="#">Notes on pricing small batches</a></li>
<li><time datetime="2026-09-12">2026-09-12</time><a href="#">What I learned from my first trade fair</a></li>
<li><time datetime="2026-08-30">2026-08-30</time><a href="#">A calmer way to plan launches</a></li>
</ul>
An article layout with a sticky table of contents beside the text, the pattern for long guides. The contents is a nav landmark with links to section ids, and it moves above the article on narrow screens instead of disappearing.
View code
<div class="bl5">
<nav aria-label="On this page"><p>On this page</p><ul><li><a href="#s1">Light</a></li><li><a href="#s2">Backdrop</a></li><li><a href="#s3">Angles</a></li></ul></nav>
<article><h2 id="s1">Light</h2><p>Use soft daylight from one side.</p><h2 id="s2">Backdrop</h2><p>Pick a plain colour lighter than the piece.</p><h2 id="s3">Angles</h2><p>Shoot from slightly above to show the rim.</p></article>
</div>
The author box at the end of an article: avatar, name, a short bio and links to more posts and social profiles. A real author bio helps readers judge expertise; keep it accurate and link to a page with the author's other work.
View code
<aside class="bl6" aria-label="About the author">
<span class="av" aria-hidden="true">AR</span>
<div><p class="nm">Written by <b>Ana Ruiz</b></p><p>Ceramicist and studio owner for nine years. Writes about running a small craft business.</p><p class="lk"><a href="#">More posts by Ana</a> · <a href="#">Instagram</a></p></div>
</aside>
A Related posts section after an article with three compact cards in a row that becomes a list on phones. Each card is one link containing the category and title, and the section heading gives the group context.
View code
<section class="bl7" aria-labelledby="rel-h">
<h2 id="rel-h">Related posts</h2>
<ul>
<li><a href="#"><small>Guides</small>Lighting small products</a></li>
<li><a href="#"><small>Studio</small>Our photo corner on a budget</a></li>
<li><a href="#"><small>Shipping</small>Photos that reduce returns</a></li>
</ul>
</section>
The top of a blog index: a title, one line of description and a row of category links with the current one marked by aria-current. The category row wraps on small screens and doubles as the blog's secondary navigation.
View code
<header class="bl8">
<h1>The Studio Journal</h1>
<p>Notes on making, selling and shipping handmade work.</p>
<nav aria-label="Categories"><a href="#" aria-current="page">All</a><a href="#">Guides</a><a href="#">Studio</a><a href="#">Shipping</a><a href="#">Business</a></nav>
</header>
Long text is easiest to read at roughly 60 to 75 characters per line. max-width: 65ch on the article caps the measure at any screen size.
One link per card
Make the post title the link and stretch its click area over the whole card with a positioned pseudo-element, so each card has one clear link instead of several.
Headings in order
Keep a logical heading order: the page or blog title as h1, featured posts as h2 and list items as h3, which helps screen reader navigation and search engines.
Show the author
A short, accurate author bio with a link to the author's other work helps readers judge expertise. Avoid inventing credentials or titles.
Frequently asked questions
Do these layouts need JavaScript?
None of them do.
How do I make the contents sticky?
position: sticky with a top offset on the nav, as in the table of contents demo.
Are dates important?
Yes. Show publish and update dates in time elements so readers know how current a post is.