HTML Blog Section Templates

A 3-column grid of post cards with cover art, category, title, excerpt and author. The standard blog index.

One large featured story on the left and a numbered list of recent posts on the right.

Horizontal post rows with thumbnails, plus a sidebar with search, categories, tags and a mini newsletter.

A full article: title, meta, cover, sticky table of contents with progress, body type, pull quote, callout and code.

An end-of-article author card with bio, stats, socials and a follow button, plus the author's two latest posts.

A "keep reading" row of three compact cards with an arrow carousel on small screens. Sits at the end of articles.

An inline subscribe box placed between paragraphs, styled to feel like part of the article rather than an ad.

An editorial grid: one tall lead story with text over the image, plus four smaller stories around it.

A personal-blog style list of posts grouped by year with dates and tags. Simple, fast and very readable.

Category pills filter a grid of posts instantly, with a live count. Works with keyboard and shows an empty state.

A dark, cinematic featured-post banner with large title, reading time and two secondary stories underneath.

A show header with cover art and listen links, followed by an episode list with play buttons and durations.

A food blog grid: illustrated dish tiles, total time, difficulty dots, ingredient count and diet tag, a save heart and a “quick under 30 minutes” filter.

Tall rounded “story” cards for a travel blog that scroll sideways with snap, each with a country chip, reading time and title over the illustration; arrows and a progress bar under the strip.

A live coverage page: “Live” pulse badge, auto-updating post count, a vertical timestamp timeline with pinned, quote and update posts, a new-posts toast and a jump-to-latest button.

Product release notes: version and date down the left with a sticky column, illustrated release header, New / Improved / Fixed badges, a type filter and an RSS/email subscribe row.

A six-part guide hub: series cover and progress ring, parts listed with read / reading now / unread states and times, “continue reading” and mark-as-read checkboxes that update the progress.

A video channel blog: featured episode with play button, a grid of video cards with duration and view count, and a player dialog that opens on click with title, description and close.

A topic landing page for a blog: big topic header with follower count and follow button, subtopic chips, a “start here” trio of essential reads, and a latest list with dates.

An article comment section: count and sort, a comment box with character count, threaded replies with an author badge, likes, inline reply boxes and a load-more button.

A grid of blog writers with illustrated portraits, specialty, article count and follow buttons, a search box and an “expert in” filter, with a featured writer of the month.

A saved-for-later page: each saved article with a thumbnail, reading progress bar, finished badge, remove with undo, and tabs for unread, in progress and finished.

An agency “work” blog with large case-study cards: client wordmark, industry chip, the headline result as a giant number, short story, and a hover arrow; industry filter above.

Blog search results: a search bar with the query, result count and timing, type and date filters, sort, highlighted matches in titles and snippets, and related searches.

A local newspaper blog front page: masthead with date and edition, lead story with drop cap across columns, an illustrated lead image, side briefs and a "most read" numbered list.

A gardening blog's "this month in the garden" section: month tabs with a seasonal illustration that changes colour, and three task posts per month with icons and a mark-done tick.

A book blog's reviews shown as spines on a wooden shelf: choosing a spine pulls it forward and opens the review card with cover, star rating, verdict and read-more link.

A DIY blog how-to: difficulty, time and cost chips, a tools list, then numbered steps you can tick off as you go with a progress bar and a finished message.

A personal site "notes" feed: an author header with avatar and follow, short timestamped notes with tag icons, likes you can toggle, and a composer for the site owner.

A blog archive as a contribution-style heatmap: half a year of days coloured by posts published; choosing a day lists that day's posts, with month labels and a streak count.

An opinion column with author byline and pull quote, ending in a reader poll: vote and see animated result bars and the total, with the vote remembered on this device.

A craft magazine interview: hero with illustrated maker portrait and intro, alternating question and answer blocks with interviewer and interviewee avatars, and a highlighted pull quote.

A tech review blog comparison: two illustrated phones side by side, category score bars that race against each other, price and verdict cards, and a winner badge.

An essay layout with numbered sidenotes in the margin aligned to their reference on wide screens, turning into tap-to-open inline notes on phones; serif body with a reading width.

A newsletter-style weekly roundup post: issue number and date, an editor's note, numbered curated links with source domain and category tag, short commentary, and a "pick of the week" highlight.

A personal journal blog: a horizontal date strip with dots on days that have entries; choosing a day swaps a large illustrated card with title, entry text, mood and photo count, with previous and next.