Blog Post Cards

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

44 sectionsView all →
1–5 of 44
Blog

Blog Post Cards

Responsive · Animated
Blog

Featured Post With List

Responsive · Animated
Blog

Editorial Post List

Responsive · Animated
Features

Icon Grid Features

Responsive · Animated
Team

Team Grid

Responsive · Animated

Blog Post Cards — Free Website Section Template

Blog · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryBlog
Tagsblogarticlescardsgridlatest postsnewslight
Updated October 20, 2026

What's included

Features

Post cards: cover, category, date, read time, title, excerpt, author
View-all link beside the heading
Cover zoom and animated title underline on hover
Up to 9 posts: add, duplicate, reorder, remove
BlogPosting ItemList JSON-LD in the export
Three, two or one columns by width
SplitText heading and staggered entrance
Export HTML, a ZIP, React or Vue

About this section

Blog Post Cards — Free Latest Posts Section Template

Blog Post Cards: A “latest from the blog” section: a heading with a view-all link, then post cards with a cover image, category tag, date and read time, title, short excerpt and the author’s photo and name. Covers zoom gently on hover; the grid goes from three columns to one.

Blog Post Cards is the "Latest from the blog" section for homepages and blog index pages: a heading with a "View all posts" link, then a grid of cards with a cover image, category tag, date and read time, title, short excerpt and the author's photo and name.

Feels alive

Covers zoom gently and titles get an animated underline when you hover a card. The heading reveals with GSAP SplitText and the cards stagger in as they scroll into view, with reduced-motion support.

Posts as a list

Add up to nine posts, reorder them and duplicate one to start the next. Upload cover images (resized in your browser) or use the included abstract covers, and leave the category, date, read time, excerpt or author empty to hide them.

Search-friendly

The exported page includes an ItemList of BlogPosting structured data (JSON-LD) built from your posts, so search engines and AI assistants understand the list of articles.

Export it

Download HTML, a ZIP with your covers, React or Vue, or fork into My Code. For a magazine layout with one big story, see Featured Post With List.

Why use it

Why Use the Blog Post Cards

📰
Shows you’re active
Fresh posts on the homepage prove the company is alive and shipping.
🔍
Helps SEO
Internal links to articles plus BlogPosting schema help search engines discover your content.
👀
Scannable
Covers, categories and read times let readers pick what interests them.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading and posts in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🏠
Homepage latest posts
Show the three newest articles near the end of your homepage with a link to the full blog.
📚
Resource hub
Present guides, case studies and templates as cards with category tags.
📣
Company news
Share announcements, product updates and press with dates and authors.
🎓
Course or learning site
List recent lessons or tutorials with read times and instructors.

Got questions?

Frequently Asked Questions

The section is static HTML. After exporting, you can render the cards from your CMS (WordPress, Ghost, Sanity, Markdown) by looping over posts in your framework, using the same markup and CSS.

Yes. The exported HTML includes an ItemList of BlogPosting JSON-LD with each post’s headline, description, URL, image and author.

About 1200×750 px (16:10). Covers are cropped to that shape in the cards.

Up to nine. Three is typical for a homepage; six or nine work for a blog index.

It saves an editable copy of your Blog Post Cards in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.