blog magazine articles newsletter editorial content modern
Blog Magazine
Magazine-style blog with featured hero article, article grid, sidebar with categories and newsletter.
modern Responsive
Live Preview
Sections
navbarfeatured-heroarticle-gridsidebar-categoriessidebar-newslettersidebar-trendingfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Verge Weekly — Tech, Design & Culture</title>
<meta name="description" content="Magazine-style blog with featured articles, category navigation, and newsletter signup." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.48 0.22 275);
--ws-color-accent-light: oklch(0.58 0.2 275);
--ws-color-accent-bg: oklch(0.96 0.04 275);
}
/* interactions/hover-lift */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.12);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-white/90 backdrop-blur-lg border-b border-gray-100" aria-label="Main navigation">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="#" class="text-xl font-extrabold text-gray-900">The Verge Weekly</a>
<div class="hidden md:flex items-center gap-6 text-sm font-medium text-gray-600">
<a href="#" class="hover:text-gray-900 transition-colors">Technology</a>
<a href="#" class="hover:text-gray-900 transition-colors">Design</a>
<a href="#" class="hover:text-gray-900 transition-colors">Culture</a>
<a href="#" class="hover:text-gray-900 transition-colors">Startups</a>
<a href="#" class="hover:text-gray-900 transition-colors">Opinion</a>
</div>
<div class="flex items-center gap-3">
<button class="p-2 text-gray-400 hover:text-gray-600 rounded-lg" aria-label="Search">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" d="M21 21l-4.35-4.35"/></svg>
</button>
<a href="#" class="hidden sm:block text-sm font-semibold px-4 py-2 rounded-lg bg-gray-900 text-white hover:bg-gray-800">Subscribe</a>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<!-- Featured Article Hero -->
<section class="ws-hero mb-12">
<a href="#" class="group hover-lift block relative rounded-2xl overflow-hidden bg-gray-100 aspect-[2/1] md:aspect-[3/1]">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 via-violet-500 to-purple-700"></div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/30 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 md:p-10">
<span class="inline-block px-2.5 py-0.5 text-xs font-semibold text-white rounded-full mb-3" style="background: var(--ws-color-accent);">Technology</span>
<h2 class="text-2xl md:text-4xl font-bold text-white leading-tight group-hover:underline decoration-2 underline-offset-4">The Future of Computing: How Quantum Will Change Everything</h2>
<p class="mt-2 text-sm md:text-base text-gray-300 max-w-2xl">From drug discovery to cryptography, quantum computing promises to solve problems that classical computers never could. Here's what you need to know.</p>
<div class="mt-4 flex items-center gap-3 text-sm text-gray-400">
<span>By Sarah Mitchell</span>
<span>·</span>
<span>March 21, 2026</span>
<span>·</span>
<span>12 min read</span>
</div>
</div>
</a>
</section>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
<!-- Article Grid -->
<div class="ws-blog lg:col-span-2">
<h3 class="text-lg font-bold text-gray-900 mb-6">Latest Stories</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<article class="group">
<a href="#" class="hover-lift block">
<div class="rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-indigo-400 to-blue-600 flex items-center justify-center">
<svg class="w-10 h-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" /></svg>
</div>
<span class="text-xs font-semibold" style="color: var(--ws-color-accent);">Design</span>
<h4 class="mt-1 text-base font-semibold text-gray-900 leading-snug" style="transition: color 0.15s;"><span class="group-hover:text-[oklch(0.48_0.22_275)] transition-colors">Why Every Designer Should Learn to Code in 2026</span></h4>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">The line between design and development continues to blur. Here's why crossing it will make you irreplaceable.</p>
<p class="mt-2 text-xs text-gray-400">Mar 20 · 6 min read</p>
</a>
</article>
<article class="group">
<a href="#" class="hover-lift block">
<div class="rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center">
<svg class="w-10 h-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
</div>
<span class="text-xs font-semibold text-emerald-600">Startups</span>
<h4 class="mt-1 text-base font-semibold text-gray-900 leading-snug"><span class="group-hover:text-[oklch(0.48_0.22_275)] transition-colors">The Rise of AI-Native Startups: What VCs Are Betting On</span></h4>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">Venture capital is pouring billions into AI-first companies. We mapped the biggest bets of Q1 2026.</p>
<p class="mt-2 text-xs text-gray-400">Mar 19 · 8 min read</p>
</a>
</article>
<article class="group">
<a href="#" class="hover-lift block">
<div class="rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-amber-400 to-orange-600 flex items-center justify-center">
<svg class="w-10 h-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" /></svg>
</div>
<span class="text-xs font-semibold text-amber-600">Culture</span>
<h4 class="mt-1 text-base font-semibold text-gray-900 leading-snug"><span class="group-hover:text-[oklch(0.48_0.22_275)] transition-colors">Digital Minimalism: Reclaiming Focus in an Age of Distraction</span></h4>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">A growing movement of professionals are deliberately reducing their digital footprint. Here's what they've learned.</p>
<p class="mt-2 text-xs text-gray-400">Mar 18 · 5 min read</p>
</a>
</article>
<article class="group">
<a href="#" class="hover-lift block">
<div class="rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-violet-400 to-purple-600 flex items-center justify-center">
<svg class="w-10 h-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /></svg>
</div>
<span class="text-xs font-semibold" style="color: var(--ws-color-accent);">Technology</span>
<h4 class="mt-1 text-base font-semibold text-gray-900 leading-snug"><span class="group-hover:text-[oklch(0.48_0.22_275)] transition-colors">Web Components in 2026: The Standard That Finally Won</span></h4>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">After years of framework dominance, native Web Components are seeing real adoption. Here's what changed.</p>
<p class="mt-2 text-xs text-gray-400">Mar 17 · 7 min read</p>
</a>
</article>
<article class="group">
<a href="#" class="hover-lift block">
<div class="rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-rose-400 to-red-600 flex items-center justify-center">
<svg class="w-10 h-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" /></svg>
</div>
<span class="text-xs font-semibold text-rose-600">Opinion</span>
<h4 class="mt-1 text-base font-semibold text-gray-900 leading-snug"><span class="group-hover:text-[oklch(0.48_0.22_275)] transition-colors">Why Remote Work Isn't Going Away (Despite What CEOs Say)</span></h4>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">The data is clear: return-to-office mandates are backfiring. Here's the evidence corporate leaders are ignoring.</p>
<p class="mt-2 text-xs text-gray-400">Mar 16 · 9 min read</p>
</a>
</article>
<article class="group">
<a href="#" class="hover-lift block">
<div class="rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center">
<svg class="w-10 h-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /></svg>
</div>
<span class="text-xs font-semibold text-emerald-600">Startups</span>
<h4 class="mt-1 text-base font-semibold text-gray-900 leading-snug"><span class="group-hover:text-[oklch(0.48_0.22_275)] transition-colors">Open Source in the AI Era: New Business Models Emerge</span></h4>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">The traditional open-core model is evolving. We explore how AI companies are building sustainable businesses around open code.</p>
<p class="mt-2 text-xs text-gray-400">Mar 15 · 10 min read</p>
</a>
</article>
</div>
</div>
<!-- Sidebar -->
<aside class="space-y-8">
<!-- Categories -->
<div class="rounded-2xl p-6" style="background: oklch(0.97 0.01 275);">
<h3 class="text-sm font-bold text-gray-900 uppercase tracking-wider mb-4">Categories</h3>
<div class="space-y-2">
<a href="#" class="flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors">
<span>Technology</span><span class="text-xs text-gray-400">42</span>
</a>
<a href="#" class="flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors">
<span>Design</span><span class="text-xs text-gray-400">28</span>
</a>
<a href="#" class="flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors">
<span>Culture</span><span class="text-xs text-gray-400">19</span>
</a>
<a href="#" class="flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors">
<span>Startups</span><span class="text-xs text-gray-400">35</span>
</a>
<a href="#" class="flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors">
<span>Opinion</span><span class="text-xs text-gray-400">14</span>
</a>
</div>
</div>
<!-- Newsletter -->
<div class="ws-newsletter rounded-2xl p-6" style="background: var(--ws-color-accent-bg);">
<h3 class="text-sm font-bold text-gray-900 uppercase tracking-wider mb-2">Newsletter</h3>
<p class="text-sm text-gray-600 mb-4">Get the best stories delivered to your inbox every week.</p>
<form class="space-y-3">
<input type="email" placeholder="your@email.com" class="w-full px-4 py-2.5 text-sm border rounded-lg bg-white focus:outline-none focus:ring-2" style="border-color: oklch(0.85 0.08 275); --tw-ring-color: var(--ws-color-accent);" />
<button type="submit" class="w-full px-4 py-2.5 text-sm font-semibold text-white rounded-lg transition-colors" style="background: var(--ws-color-accent);">Subscribe</button>
</form>
<p class="mt-3 text-xs text-gray-500">No spam. Unsubscribe anytime.</p>
</div>
<!-- Trending -->
<div>
<h3 class="text-sm font-bold text-gray-900 uppercase tracking-wider mb-4">Trending</h3>
<div class="space-y-4">
<a href="#" class="flex items-start gap-3 group">
<span class="text-2xl font-bold text-gray-200 group-hover:text-[oklch(0.75_0.1_275)] transition-colors">01</span>
<div>
<p class="text-sm font-medium text-gray-900 group-hover:text-[oklch(0.48_0.22_275)] transition-colors leading-snug">Apple's Vision Pro 2 Changes Everything About Spatial Computing</p>
<p class="text-xs text-gray-400 mt-1">Mar 20 · 5 min</p>
</div>
</a>
<a href="#" class="flex items-start gap-3 group">
<span class="text-2xl font-bold text-gray-200 group-hover:text-[oklch(0.75_0.1_275)] transition-colors">02</span>
<div>
<p class="text-sm font-medium text-gray-900 group-hover:text-[oklch(0.48_0.22_275)] transition-colors leading-snug">The CSS Revolution: What Tailwind v4 Means for Developers</p>
<p class="text-xs text-gray-400 mt-1">Mar 19 · 7 min</p>
</div>
</a>
<a href="#" class="flex items-start gap-3 group">
<span class="text-2xl font-bold text-gray-200 group-hover:text-[oklch(0.75_0.1_275)] transition-colors">03</span>
<div>
<p class="text-sm font-medium text-gray-900 group-hover:text-[oklch(0.48_0.22_275)] transition-colors leading-snug">GitHub Copilot Workspace: Coding Without Writing Code</p>
<p class="text-xs text-gray-400 mt-1">Mar 18 · 4 min</p>
</div>
</a>
</div>
</div>
</aside>
</div>
</main>
<!-- Footer -->
<footer class="ws-footer border-t border-gray-200 mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<p class="text-sm font-bold text-gray-900">The Verge Weekly</p>
<div class="flex flex-wrap gap-6 text-sm text-gray-500">
<a href="#" class="hover:text-gray-900 transition-colors">About</a>
<a href="#" class="hover:text-gray-900 transition-colors">Advertise</a>
<a href="#" class="hover:text-gray-900 transition-colors">Careers</a>
<a href="#" class="hover:text-gray-900 transition-colors">Privacy</a>
<a href="#" class="hover:text-gray-900 transition-colors">RSS</a>
</div>
</div>
<p class="mt-6 text-xs text-gray-400">© 2026 The Verge Weekly. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Magazine-style blog with featured article hero, 2-column article grid, and a sidebar with categories, newsletter signup, and trending posts. Clean white theme with indigo accents.