Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Featured Post With List — Free Website Section Template
Blog · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Featured Post With List — Free Magazine Blog Section Template
Featured Post With List gives your blog a magazine front page. One featured story takes the left side with a large cover, a category label, date, big headline, excerpt, author and a "Read the report →" link; the right side lists recent posts with small thumbnails, categories, dates and read times.
Hierarchy that guides readers
The big story gets attention first, while the list shows there's plenty more to read. Hovering zooms covers and turns titles to your brand colour.
Edit the featured story and the list
The featured post has its own fields: cover, category, date, title, excerpt, author, link and link text. The recent posts are a list of up to six that you can reorder. Upload covers or use the included abstract artwork.
Structured data included
The exported page includes an ItemList of BlogPosting JSON-LD covering the featured post and the recent posts.
Responsive and animated
On tablets and phones the list moves below the featured story. The heading reveals with SplitText, the featured story rises into view and the list items stagger in.
Export it
Download HTML, a ZIP, React or Vue, or fork into My Code. For an even grid, use Blog Post Cards.
Why use it
Why Use the Featured Post With List
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, featured post and recent 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
Got questions?
Frequently Asked Questions
Edit the Featured post group: cover, category, date, title, excerpt, author, link and the read-link text. It is separate from the recent posts list.
Yes. The exported HTML includes an ItemList of BlogPosting JSON-LD with the featured post first, then the recent posts.
Up to six. Four balances well with the featured story on desktop.
The featured story comes first at full width, followed by the list of recent posts with small thumbnails.
It saves an editable copy of your Featured Post With List 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.