Building Blocks

Blog & article layout patterns

Index card grids, single article pages with sticky TOC, and related posts widgets — each pattern comes with PHP, MySQL, structured data, and a copy-ready Claude prompt to deploy it live on your server.

Get started — from £6.99/month ← All building blocks
Pattern 01

Blog Index Card Grid

A responsive card grid for listing posts — thumbnail, category tag, title, excerpt, read time, date, and author avatar. Claude generates the PHP template, MySQL query, and pagination from a single prompt.

HTML CSS Grid PHP MySQL
  • repeat(auto-fill, minmax(300px, 1fr)) CSS Grid — 3 columns on desktop, 2 at 900px, 1 at 600px
  • Thumbnail with aspect-ratio: 16/9 and object-fit: cover, gradient placeholder fallback when no image set
  • Category pill tag in brand colour, post title, 2-line excerpt via -webkit-line-clamp: 2, read-time estimate, author avatar + name, publish date
  • Card hover: translateY(-4px) lift + deepened box-shadow — pure CSS, zero JS required
  • PHP posts.php MySQL query with LIMIT + OFFSET pagination (10 posts per page) and category filter via ?category= URL param
  • Optional featured post card spanning full grid width at top row via CSS grid-column: 1 / -1
Prompt to use with Claude

Build a blog index page at /blog. Use a 3-column CSS Grid card layout with thumbnail (16:9), category tag, title, 2-line excerpt, read time, and author avatar. Pull posts from a MySQL posts table (id, title, slug, excerpt, thumbnail_url, category, author, read_time, published_at). Add pagination (10 per page) and a category filter via URL param. Match my site colour scheme.

Pattern 02

Single Article Page

A typographically-focused reading layout with a sticky table-of-contents sidebar, Article JSON-LD structured data, drop cap, estimated read time, and an author card below the content. Optimised for readability and Google rich results.

HTML CSS PHP JSON-LD
  • Reading column at max-width: 68ch centred on page — font-size: 1.1rem, line-height: 1.85, comfortable paragraph spacing
  • Sticky table-of-contents sidebar at 1200px viewport — auto-generated from <h2> headings via JS querySelectorAll; active section highlighted on scroll via IntersectionObserver
  • CSS drop cap on first paragraph (p:first-of-type::first-letter) in brand colour at 3.2rem
  • Estimated read time calculated from word count via PHP str_word_count(), displayed as a badge in the article hero (e.g. “6 min read”)
  • @type: "Article" JSON-LD with publisher Organization + logo ImageObject, author Person, datePublished, dateModified, image — validates against Google Rich Results Test
  • Author card below article: 48px circular avatar, name, bio, optional social icon links — pulled from MySQL authors table
  • <link rel="canonical"> and Open Graph og:title/description/image/url/type:article injected into <head>
Prompt to use with Claude

Build a single article page at /blog/[slug]. Narrow reading column (68ch), sticky TOC sidebar on desktop (auto-generated from h2 headings, active section highlighted on scroll), drop cap on first paragraph, read time badge in the header. Add Article JSON-LD with author and publisher, Open Graph meta, and a canonical URL. Pull the post from a MySQL posts table. Include an author card below with avatar, name, and bio.

Pattern 03

Related Posts Widget

A 3-card related posts section for the bottom of article pages — matched by category via MySQL, with compact thumbnail cards and hover lift. Falls back to latest posts when fewer than 3 same-category articles exist.

HTML CSS Grid PHP MySQL
  • PHP MySQL query: SELECT ... WHERE category = ? AND id != ? ORDER BY RAND() LIMIT 3 — falls back to ORDER BY published_at DESC LIMIT 3 if fewer than 3 same-category results
  • 3-column CSS Grid on desktop, 2 columns at 768px, 1 column at 500px
  • Compact card: thumbnail aspect-ratio: 3/2 with object-fit: cover, category pill, title clamped to 2 lines, read time + date row
  • Card hover: translateY(-3px) lift + border-top accent line in brand colour via CSS transition — no JS required
  • Entire card wrapped in a single <a> tag for maximum click target — no JS event listeners needed
Prompt to use with Claude

Add a related posts widget at the bottom of my article page. Show 3 posts from the same category (matched via MySQL), falling back to the 3 latest posts if not enough. Use a 3-column compact card grid with thumbnail (3:2), category tag, 2-line title clamp, read time, and date. Fully linked cards with a hover lift effect and brand-colour top accent line. Match my existing card styles.

What you get

A blog that actually performs

Claude writes the PHP, MySQL queries, and structured data alongside the HTML — not just the front end. Every pattern is designed for SEO and reader experience from day one.

Google-ready from deploy

Article JSON-LD, Open Graph meta, canonical URLs, and estimated read time are included in every single-article pattern — no SEO plugin required.

Full PHP backend

Claude generates the MySQL schema, query, pagination, and category filter alongside the HTML — not just a static template you have to wire up yourself.

Readable by default

68ch reading columns, generous line-height, drop caps, and sticky TOC are built into every article page. Optimised for reading time, not just visual layout.

Iterable in seconds

Change the card layout, add a tag taxonomy, or switch to infinite scroll. Describe the change to Claude and it’s updated on your live site within seconds.

← All building blocks SEO & Structured Data patterns → Image Gallery patterns → Contact Form patterns →

Deploy your blog with Claude CMS

From £6.99/month. First month free — no credit card required. Build your blog index, article page, and related posts widget in one conversation.

View pricing Talk to us