Back to Library
Landing Page
Blog Layout — Modern Magazine
Magazine-style blog layout with featured posts, grid view, categories, and sidebar.
Compatible with:
cursorv0chatgpt
Create a modern blog layout with these sections: HERO SECTION: - Featured post (large) - Full-width image - Category badge - Title (large, bold) - Excerpt - Author info (avatar, name, date) - "Read More" button RECENT POSTS GRID: - 3-column grid on desktop - Each card: * Featured image * Category badge * Title * Excerpt (2 lines) * Author and date * Read time estimate - Hover effect (lift card slightly) SIDEBAR (Desktop): - Search bar - Categories list (with post counts) - Popular posts (small cards) - Newsletter signup form - Social media links PAGINATION: - Page numbers - Previous/Next buttons - "Load More" option (alternative) BLOG POST PAGE: - Full-width hero image - Title (large) - Author info with avatar - Published date and read time - Social share buttons - Article content (proper typography) - Table of contents (for long posts) - Related posts at bottom - Comments section STYLING: - Clean, readable typography - Generous line spacing for content - Image aspect ratio: 16:9 for cards - Consistent card styling - Mobile responsive (single column on mobile) - Dark mode support (optional)
How to Use
- 1Click the "Copy Prompt" button above
- 2Open your AI tool (Cursor, v0, Lovable, ChatGPT, or Claude)
- 3Paste the prompt and let the AI generate your UI
- 4Customize the output to match your brand and content
💡 Tips
Integrate with your CMS or markdown files. Add proper SEO meta tags. Consider adding tags in addition to categories.