Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Blog Post Cards — Free Website Section Template
Blog · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
Extend with AI
Take This Section Further With AI
The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.
What's included
Features
About this section
Blog Post Cards — Free Latest Posts Section Template
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.
Getting the most from it
Use real cover images at the same size and a headline that promises a clear benefit. Three cards is a good fit for a homepage section, six for a blog front page. Add a one-sentence excerpt that gives the reader a reason to click, and put the category and reading time in the small print so visitors know what they are choosing. Link the "See all" button to your full blog or archive and refresh the three featured posts as you publish new ones.
Why use it
Why Use the Blog Post Cards
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading and posts in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match 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.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save 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
In real websites
Website Templates That Use the Blog Post Cards Section
The Blog Post Cards section is part of 4 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Personal Portfolio Website, Photographer Website, Church Website, Corporate & Consulting Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.
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. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.